@extends('layouts.admin')

@section('title', 'All Invoices')

@section('content')
<h1 class="text-3xl font-bold mb-6">All Shipment Invoices</h1>

<div x-data="{ search: '' }" class="space-y-4">

    {{-- Search Bar --}}
    <div class="flex justify-between items-center">
        <input
            x-model="search"
            type="text"
            placeholder="Search tracking number, receiver, or customer..."
            class="w-full md:w-80 px-4 py-2 rounded-xl border focus:ring-2 focus:ring-indigo-500"
        />
    </div>


    <form method="GET" class="grid gap-3 md:grid-cols-5">

    {{-- Status Filter --}}
    <select name="status" class="rounded-xl border px-3 py-2">
        <option value="">All Status</option>
        <option value="paid" {{ request('status')=='paid' ? 'selected':'' }}>Paid</option>
        <option value="pending" {{ request('status')=='pending' ? 'selected':'' }}>Pending</option>
        <option value="refunded" {{ request('status')=='refunded' ? 'selected':'' }}>Refunded</option>
    </select>

    {{-- User Filter --}}
    <select name="user" class="rounded-xl border px-3 py-2">
        <option value="">All Customers</option>
        @foreach($users as $user)
            <option value="{{ $user->id }}"
                {{ request('user') == $user->id ? 'selected':'' }}>
                {{ $user->name }}
            </option>
        @endforeach
    </select>

    {{-- Date From --}}
    <input type="date" name="from"
        value="{{ request('from') }}"
        class="rounded-xl border px-3 py-2"
    >

    {{-- Date To --}}
    <input type="date" name="to"
        value="{{ request('to') }}"
        class="rounded-xl border px-3 py-2"
    >

    {{-- Submit --}}
    <button class="bg-indigo-600 text-white rounded-xl px-4 py-2 font-semibold">
        Apply Filters
    </button>
</form>


    <div class="bg-white border rounded-2xl shadow-sm overflow-hidden">

        {{-- Desktop Table --}}
        <div class="hidden sm:block overflow-x-auto">
            <table class="w-full border-collapse">
                <thead class="bg-gray-50 sticky top-0 z-10">
                    <tr class="text-sm text-gray-600 uppercase">
                        <th class="px-4 py-3 text-left">Tracking #</th>
                        <th class="px-4 py-3 text-left">Receiver</th>
                        <th class="px-4 py-3 text-left">Customer</th>
                        <th class="px-4 py-3 text-left">Final Price (£)</th>
                        <th class="px-4 py-3 text-left">Created</th>
                        <th class="px-4 py-3 text-center">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y">

                    @foreach($shipments as $shipment)
                    <tr
                        class="hover:bg-gray-50"
                        x-show="
                            '{{ strtolower($shipment->tracking_number) }}'.includes(search.toLowerCase()) ||
                            '{{ strtolower($shipment->receiver_name) }}'.includes(search.toLowerCase()) ||
                            '{{ strtolower($shipment->customer->name ?? '') }}'.includes(search.toLowerCase())
                        "
                    >
                        <td class="px-4 py-3 font-semibold text-indigo-700">
                            {{ $shipment->tracking_number }}
                        </td>

                        <td class="px-4 py-3">
                            {{ $shipment->receiver_name }}
                        </td>

                        <td class="px-4 py-3">
                            {{ $shipment->customer->name ?? 'N/A' }}
                        </td>

                        <td class="px-4 py-3 font-bold">
                            £{{ number_format($shipment->final_price, 2) }}
                        </td>

                        <td class="px-4 py-3">
                            {{ $shipment->created_at->format('d M, Y') }}
                        </td>

                        <td class="px-4 py-3 text-center">
                            <a href="{{ route('admin.invoices.show', $shipment->id) }}"
                               class="px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700
                                      text-white text-sm font-semibold shadow">
                               View
                            </a>
                        </td>
                    </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

        {{-- Mobile Card Layout --}}
        <div class="sm:hidden space-y-3 p-3">

            @foreach($shipments as $shipment)
            <div
                class="border rounded-2xl bg-white shadow-sm p-4"
                x-show="
                    '{{ strtolower($shipment->tracking_number) }}'.includes(search.toLowerCase()) ||
                    '{{ strtolower($shipment->receiver_name) }}'.includes(search.toLowerCase()) ||
                    '{{ strtolower($shipment->customer->name ?? '') }}'.includes(search.toLowerCase())
                "
            >
                <div class="flex justify-between">
                    <span class="text-xs text-gray-500">Tracking</span>
                    <span class="font-bold text-indigo-700">
                        {{ $shipment->tracking_number }}
                    </span>
                </div>

                <div class="mt-1 text-sm space-y-1">

                    <div class="flex justify-between">
                        <span class="text-gray-500">Receiver</span>
                        <span>{{ $shipment->receiver_name }}</span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">Customer</span>
                        <span>{{ $shipment->customer->name ?? 'N/A' }}</span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">Final Price</span>
                        <span class="font-bold">
                            £{{ number_format($shipment->final_price, 2) }}
                        </span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">Created</span>
                        <span>{{ $shipment->created_at->format('d M, Y') }}</span>
                    </div>
                </div>

                <div class="pt-3">
                    <a href="{{ route('admin.invoices.show', $shipment->id) }}"
                       class="block w-full text-center px-3 py-2 rounded-xl
                              bg-indigo-600 hover:bg-indigo-700 text-white font-semibold">
                        View Invoice
                    </a>
                </div>
            </div>
            @endforeach

        </div>

    </div>

    {{-- Pagination --}}
    <div class="mt-2">
        {{ $shipments->links() }}
    </div>

</div>
@endsection