@extends('layouts.customer')

@section('title', 'Customer Dashboard')

@section('content')

<main class="flex-1 overflow-y-auto p-6">

    {{-- Upgrade banner --}}
    @if($user->customer_type !== 'premium')
    <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-6 mb-6 text-white">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold mb-2">
                    Upgrade to Premium & Save 10% on Every Shipment
                </h3>
                <p class="text-purple-100">
                    Get discounts, priority processing, and 10x reward points at a Cheaper Rate
                </p>
            </div>

            <a href="{{ route('customer.subscriptions.index') }}"
                class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition whitespace-nowrap">
                Upgrade Now ⭐
            </a>
        </div>
    </div>
    @endif

    

    {{-- Statistics Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <div class="text-sm text-gray-600 mb-2">Total Shipments</div>
            <div class="text-3xl font-bold text-gray-900 mb-1">
                {{ $totalShipments ?? 0 }}
            </div>
            <div class="text-sm text-green-600">
                +{{ $shipmentsThisMonth ?? 0 }} this month
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <div class="text-sm text-gray-600 mb-2">Points Balance</div>
            <div class="text-3xl font-bold text-gray-900 mb-1">
                {{ $walletPoints ?? 0 }}
            </div>
            <div class="text-sm text-green-600">
                +{{ $earnedThisMonth ?? 0 }} this month
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <div class="text-sm text-gray-600 mb-2">Pending Deliveries</div>
            <div class="text-3xl font-bold text-gray-900 mb-1">
                {{ $pendingDeliveries ?? 0 }}
            </div>
            <div class="text-sm text-gray-600">In transit</div>
        </div>

        {{-- Potential Savings / Premium Benefit Card --}}
        <div x-data="{ currency: 'NGN' }" class="bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl p-6 shadow-sm text-white">
            <div class="flex justify-between items-center mb-2">
                <div class="text-sm text-pink-100">Potential Savings</div>

                {{-- Currency Toggle --}}
                <div class="flex gap-2 text-xs bg-white/20 rounded-full px-2 py-1 cursor-pointer">
                    <span
                        :class="currency === 'NGN' ? 'font-bold' : 'opacity-70'"
                        @click="currency = 'NGN'">₦</span>
                    <span
                        :class="currency === 'GBP' ? 'font-bold' : 'opacity-70'"
                        @click="currency = 'GBP'">£</span>
                </div>
            </div>

            <div class="text-3xl font-bold mb-1">
                @if($user->customer_type === 'premium')
                <span x-text="currency === 'NGN' 
                ? '₦' + Math.round({{ $discountEnjoyed ?? 0 }} * {{ $gbpToNgnRate }}) 
                : '£' + {{ $discountEnjoyed ?? 0 }}"></span>
                @else
                🔒 <span x-text="currency === 'NGN' 
                ? '₦' + Math.round({{ $potentialSavings ?? 0 }} * {{ $gbpToNgnRate }}) 
                : '£' + {{ $potentialSavings ?? 0 }}"></span>
                @endif
            </div>

            <div class="text-sm text-pink-100">
                @if($user->customer_type === 'premium')
                You are enjoying a total discount of
                <span x-text="currency === 'NGN' 
                ? '₦' + Math.round({{ $discountEnjoyed ?? 0 }} * {{ $gbpToNgnRate }}) 
                : '£' + {{ $discountEnjoyed ?? 0 }}"></span>
                on your shipments!
                @else
                Subscribe to Premium to enjoy 10% discount on every shipment.
                @endif
            </div>
        </div>

        {{-- Alpine.js (include in your layout if not already) --}}
        <script src="//unpkg.com/alpinejs" defer></script>

    </div>

    @if(session('error'))
    <div class="bg-red-100 text-red-700 px-4 py-2 rounded-lg mb-4">
        {{ session('error') }}
    </div>
@endif


    {{-- Quick Track --}}
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Track Parcel</h2>

        <form action="{{ route('customer.tracking.search') }}" method="GET" class="flex flex-col sm:flex-row gap-3">
    <input
        type="text"
        name="tracking_number"
        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
        placeholder="Enter tracking number (e.g., TRK-2026-435957)"
        required>

    <button type="submit"
        class="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition whitespace-nowrap">
        Track Now
    </button>
</form>

    </div>

    <!-- {{-- Notifications --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">Recent Notifications</h2>

            <a href="{{ route('notifications.index') }}"
                class="text-sm text-blue-600 hover:text-blue-700 font-medium">
                View All
            </a>
        </div>

        <div class="divide-y divide-gray-200">
            @forelse($notifications ?? [] as $note)
            <div class="p-6 hover:bg-gray-50 transition">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1">
                        <div class="font-semibold text-gray-900 mb-1">
                            {{ $note->data['title'] ?? 'Notification' }}
                        </div>
                        <div class="text-sm text-gray-600">
                            {{ $note->data['message'] ?? '' }}
                        </div>
                    </div>

                    <span class="text-xs text-gray-500 whitespace-nowrap">
                        {{ $note->created_at->diffForHumans() }}
                    </span>
                </div>
            </div>
            @empty
            <div class="p-6 text-sm text-gray-500">
                No notifications yet.
            </div>
            @endforelse
        </div>
    </div> -->

    {{-- Recent Shipments --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">Recent Shipments</h2>

            <a href="{{ route('customer.shipments.index') }}"
                class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                View All
            </a>
        </div>

        {{-- Desktop Table --}}
        <div class="hidden sm:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tracking Number</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Weight</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>

                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($shipments ?? [] as $shipment)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 whitespace-nowrap font-semibold text-gray-900">
                            {{ $shipment->tracking_number }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {{ $shipment->weight }} kg
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            @php
                            $gbpToNgnRate = config('currency.gbp_to_ngn') ?? 1000; // or fetch from DB
                            $displayPrice = $shipment->currency === 'NGN'
                            ? $shipment->price * $gbpToNgnRate
                            : $shipment->price;
                            @endphp

                            {{ $shipment->currency === 'NGN' ? '₦' : '£' }}{{ number_format($displayPrice, 2) }}
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                            $colors = [
                            'In Transit' => 'bg-blue-100 text-blue-800',
                            'Delivered' => 'bg-green-100 text-green-800',
                            'Pending' => 'bg-yellow-100 text-yellow-800',
                            ];
                            @endphp
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $colors[$shipment->status] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ $shipment->status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {{ $shipment->created_at->toDateString() }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <a href="{{ route('customer.tracking.show', $shipment->tracking_number) }}"
                                class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                                Track
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-sm text-gray-500">
                            No shipments recorded yet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile Cards --}}
        <div class="sm:hidden space-y-4 p-4">
            @forelse($shipments ?? [] as $shipment)
            <div class="border rounded-xl p-4 shadow-sm">
                <div class="flex justify-between items-center">
                    <span class="font-semibold text-indigo-700">{{ $shipment->tracking_number }}</span>
                    <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $colors[$shipment->status] ?? 'bg-gray-100 text-gray-700' }}">
                        {{ $shipment->status }}
                    </span>
                </div>
                <div class="mt-2 text-sm text-gray-600 space-y-1">
                    <div><span class="font-medium">Weight:</span> {{ $shipment->weight }} kg</div>
                    <div><span class="font-medium">Price:</span> ₦{{ number_format($shipment->price) }}</div>
                    <div><span class="font-medium">Date:</span> {{ $shipment->created_at->toDateString() }}</div>
                </div>
                <div class="mt-2">
                    <a href="{{ route('customer.tracking.show', $shipment->tracking_number) }}"
                        class="block w-full text-center bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-lg font-medium">
                        Track
                    </a>
                </div>
            </div>
            @empty
            <p class="text-sm text-gray-500">No shipments recorded yet.</p>
            @endforelse
        </div>
    </div>

    {{-- Recent Invoices --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">Recent Invoices</h2>
            <a href="{{ route('customer.invoices.index') }}"
                class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                View All
            </a>
        </div>

        {{-- Desktop Table --}}
        <div class="hidden sm:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice #</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($invoices ?? [] as $invoice)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 whitespace-nowrap font-semibold text-gray-900">
                            {{ $invoice->invoice_number ?? 'INV-'.$invoice->id }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            @if($invoice->currency === 'NGN' && $invoice->converted_amount)
                            ₦{{ number_format($invoice->converted_amount, 2) }}
                            @else
                            £{{ number_format($invoice->final_price, 2) }}
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                                {{ $invoice->status === 'Paid' ? 'bg-green-100 text-green-800'
                                  : ($invoice->status === 'Pending' ? 'bg-yellow-100 text-yellow-800'
                                  : 'bg-gray-100 text-gray-700') }}">
                                {{ $invoice->status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {{ $invoice->created_at->toDateString() }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap space-y-1">

                            @if($invoice->status === 'Unpaid')

                            @if(optional($invoice->shipment)->is_certified == 1)

                            <!-- Paystack (NGN) -->
                            <form action="{{ route('customer.invoices.paystack.init', $invoice->id) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="bg-green-600 text-white px-3 py-1 rounded-lg text-sm font-medium hover:bg-green-700 transition w-full">
                                    Paystack (₦)
                                </button>
                            </form>

                            <!-- Stripe (GBP) -->
                            <form action="{{ route('customer.invoices.stripe.init', $invoice->id) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm font-medium hover:bg-purple-700 transition w-full">
                                    Stripe (£)
                                </button>
                            </form>

                            @else
                            <span class="block text-yellow-600 text-xs font-semibold text-center">
                                Awaiting Admin Confirmation
                            </span>
                            @endif

                            @else
                            <!-- Download Receipt if Paid -->
                            <a href="{{ route('customer.invoices.download', $invoice->id) }}"
                                class="block bg-blue-600 text-white px-3 py-1 rounded-lg text-sm font-medium hover:bg-blue-700 transition w-full text-center">
                                Download Receipt
                            </a>
                            @endif

                        </td>


                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-4 text-sm text-gray-500">No invoices yet.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile Cards --}}
        <div class="sm:hidden space-y-4 p-4">
            @forelse($invoices ?? [] as $invoice)
            <div class="border rounded-xl p-4 shadow-sm">
                <div class="flex justify-between items-center">
                    <span class="font-semibold text-indigo-700">{{ $invoice->invoice_number ?? 'INV-'.$invoice->id }}</span>
                    <span class="px-2 py-1 rounded-full text-xs font-semibold 
                      {{ $invoice->status === 'Paid' ? 'bg-green-100 text-green-800'
                        : ($invoice->status === 'Pending' ? 'bg-yellow-100 text-yellow-800'
                        : 'bg-gray-100 text-gray-700') }}">
                        {{ $invoice->status }}
                    </span>
                </div>
                <div class="mt-2 text-sm text-gray-600 space-y-1">
                    <div><span class="font-medium">Amount:</span>
                        @if($invoice->currency === 'NGN' && $invoice->converted_amount)
                        ₦{{ number_format($invoice->converted_amount, 2) }}
                        @else
                        £{{ number_format($invoice->final_price, 2) }}
                        @endif
                    </div>
                    <div><span class="font-medium">Date:</span> {{ $invoice->created_at->toDateString() }}</div>
                </div>
                <td class="px-6 py-4 whitespace-nowrap space-y-1">

                    @if($invoice->status === 'Unpaid')

                    @if(optional($invoice->shipment)->is_certified == 1)

                    <form action="{{ route('customer.invoices.paystack.init', $invoice->id) }}" method="POST">
                        @csrf
                        <button class="w-full bg-green-600 text-white px-3 py-1 rounded-lg text-sm font-medium">
                            Paystack (₦)
                        </button>
                    </form>

                    <form action="{{ route('customer.invoices.stripe.init', $invoice->id) }}" method="POST">
                        @csrf
                        <button class="w-full bg-purple-600 text-white px-3 py-1 rounded-lg text-sm font-medium">
                            Stripe (£)
                        </button>
                    </form>

                    @else
                    <span class="block text-yellow-600 text-xs font-semibold text-center">
                        Awaiting Admin Confirmation
                    </span>
                    @endif

                    @else
                    <a href="{{ route('customer.invoices.download', $invoice->id) }}"
                        class="block bg-blue-600 text-white px-3 py-1 rounded-lg text-sm font-medium text-center">
                        Download Receipt
                    </a>
                    @endif

                </td>


            </div>
            @empty
            <p class="text-sm text-gray-500">No invoices yet.</p>
            @endforelse
        </div>
    </div>


</main>

@endsection