@section('page-title')
    Invoice Management
@endsection

<x-layouts.admin>
    <div>
        <a href="{{ route('admin.students.index') }}"
            class="inline-flex items-center gap-2 mb-2 h-11 rounded-full text-gray-700 text-sm font-medium transition duration-200">

            <!-- Arrow Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                stroke-width="2">

                <path d="m12 19-7-7 7-7"></path>
                <path d="M19 12H5"></path>
            </svg>
            Back to Invoice
        </a>
    </div>
    <div class="mx-auto w-full space-y-6">

        <!-- ================= FILTER BUTTONS ================= -->
        <div class="flex flex-wrap items-center gap-3">

            <!-- All -->
            <a href="{{ route('admin.invoices.index') }}"
                class="inline-flex items-center gap-2 px-5 h-11 rounded-full border text-sm font-medium transition duration-200
                {{ request('status') == null
                    ? 'bg-gradient-to-r from-indigo-500 to-blue-500 border-indigo-500 text-white shadow-md'
                    : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">

                    <rect x="3" y="3" width="7" height="7"></rect>
                    <rect x="14" y="3" width="7" height="7"></rect>
                    <rect x="14" y="14" width="7" height="7"></rect>
                    <rect x="3" y="14" width="7" height="7"></rect>

                </svg>

                All ({{ $counts['all'] }})
            </a>

            <!-- Draft -->
            <a href="{{ route('admin.invoices.index', ['status' => 'draft']) }}"
                class="inline-flex items-center gap-2 px-5 h-11 rounded-full border text-sm font-medium transition duration-200
                {{ request('status') == 'draft'
                    ? 'bg-gradient-to-r from-gray-600 to-gray-800 border-gray-700 text-white shadow-md'
                    : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">

                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12h6m-6 4h6M8 4h8a2 2 0 0 1 2 2v14l-3-2-3 2-3-2-3 2V6a2 2 0 0 1 2-2Z" />

                </svg>

                Draft ({{ $counts['draft'] }})
            </a>

            <!-- Sent -->
            <a href="{{ route('admin.invoices.index', ['status' => 'sent']) }}"
                class="inline-flex items-center gap-2 px-5 h-11 rounded-full border text-sm font-medium transition duration-200
                {{ request('status') == 'sent'
                    ? 'bg-gradient-to-r from-blue-500 to-sky-500 border-blue-500 text-white shadow-md'
                    : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">

                    <path stroke-linecap="round" stroke-linejoin="round" d="M22 2 11 13"></path>

                    <path stroke-linecap="round" stroke-linejoin="round" d="M22 2 15 22 11 13 2 9 22 2z"></path>

                </svg>

                Sent ({{ $counts['sent'] }})
            </a>

            <!-- Paid -->
            <a href="{{ route('admin.invoices.index', ['status' => 'paid']) }}"
                class="inline-flex items-center gap-2 px-5 h-11 rounded-full border text-sm font-medium transition duration-200
                {{ request('status') == 'paid'
                    ? 'bg-gradient-to-r from-green-500 to-emerald-500 border-green-500 text-white shadow-md'
                    : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50' }}">

                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">

                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />

                </svg>

                Paid ({{ $counts['paid'] }})
            </a>

            <!-- Back -->
            <a href="{{ route('admin.students.bookings', request()->route('student')) }}"
                class="inline-flex items-center gap-2 px-5 h-11 rounded-full bg-gradient-to-r from-gray-700 to-gray-900 text-white text-sm font-medium shadow-md hover:shadow-lg transition duration-200">

                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">

                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />

                </svg>

                Back To Bookings
            </a>

        </div>

        <!-- ================= TABLE ================= -->
        <div class="bg-white rounded-3xl border border-gray-200 shadow-sm overflow-hidden">

            <div class="overflow-x-auto">

                <table class="w-full min-w-[900px] text-sm text-left">

                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border-b border-gray-200">

                        <tr>
                            <th class="px-5 py-4 font-semibold">Invoice</th>
                            <th class="px-5 py-4 font-semibold">Student</th>
                            <th class="px-5 py-4 font-semibold">Date</th>
                            <th class="px-5 py-4 font-semibold">Items</th>
                            <th class="px-5 py-4 font-semibold">Amount</th>
                            <th class="px-5 py-4 font-semibold">Status</th>
                            <th class="px-5 py-4 font-semibold text-center">Action</th>
                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-100 bg-white">

                        @forelse($invoices as $invoice)
                            <tr class="hover:bg-blue-50/40 transition duration-200">

                                <!-- Invoice -->
                                <td class="px-5 py-4 font-semibold text-gray-800 whitespace-nowrap">
                                    {{ $invoice->invoice_number }}
                                </td>

                                <!-- Student -->
                                <td class="px-5 py-4 text-gray-700 whitespace-nowrap">
                                    {{ $invoice->student->user->name ?? '-' }}
                                </td>

                                <!-- Date -->
                                <td class="px-5 py-4 text-gray-600 whitespace-nowrap">
                                    {{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M Y') }}
                                </td>

                                <!-- Items -->
                                <td class="px-5 py-4 text-gray-700">
                                    {{ $invoice->items->count() }}
                                </td>

                                <!-- Amount -->
                                <td class="px-5 py-4 font-semibold text-green-600 whitespace-nowrap">
                                    ${{ number_format($invoice->total, 2) }}
                                </td>

                                <!-- Status -->
                                <td class="px-5 py-4">

                                    @if ($invoice->status == 'draft')
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">
                                            Draft
                                        </span>
                                    @elseif($invoice->status == 'sent')
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">
                                            Sent
                                        </span>
                                    @elseif($invoice->status == 'paid')
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                            Paid
                                        </span>
                                    @endif

                                </td>

                                <!-- Actions -->
                                <td class="px-5 py-4">

                                    <div class="flex items-center justify-center gap-2">
                                        @if ($invoice->status == 'draft')
                                            <!-- Edit -->
                                            <a href="{{ route('admin.invoices.edit', $invoice->id) }}"
                                                class="inline-flex items-center gap-2 px-4 h-10 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white text-xs font-medium shadow-sm hover:shadow-md transition duration-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />

                                                </svg>

                                                Edit
                                            </a>
                                        @endif


                                        <!-- View -->
                                        <a href="{{ route('admin.invoices.show', $invoice->id) }}"
                                            class="inline-flex items-center gap-2 px-4 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-blue-500 hover:from-indigo-600 hover:to-blue-600 text-white text-xs font-medium shadow-sm hover:shadow-md transition duration-200">

                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.458 12C3.732 7.943 7.523 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.065 7-9.542 7S3.732 16.057 2.458 12Z" />

                                                <circle cx="12" cy="12" r="3"></circle>

                                            </svg>

                                            View
                                        </a>

                                        <!-- Send -->
                                        <form action="{{ route('admin.invoices.send', $invoice->id) }}"
                                            method="POST">

                                            @csrf

                                            <button type="submit"
                                                class="inline-flex items-center gap-2 px-4 h-10 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-xs font-medium shadow-sm hover:shadow-md transition duration-200">

                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"
                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                                    stroke-width="2">

                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M22 2 11 13"></path>

                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M22 2 15 22 11 13 2 9 22 2z"></path>

                                                </svg>

                                                Send
                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center text-gray-400">

                                    No invoices found

                                </td>
                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        <!-- ================= PAGINATION ================= -->
        <div>
            {{ $invoices->links() }}
        </div>

    </div>

</x-layouts.admin>