@section('page-title')
    All Invoices
@endsection

@section('page-description')
    Track payments & billing
@endsection

<x-layouts.admin>

    <div class="mx-auto w-full space-y-4 sm:space-y-6">

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

            <!-- ================= MOBILE VIEW ================= -->
            <div class="block lg:hidden divide-y divide-gray-100">

                @forelse ($invoices as $invoice)
                    <div class="p-4 sm:p-5">

                        <!-- TOP -->
                        <div class="flex items-start justify-between gap-3">

                            <!-- LEFT -->
                            <div class="min-w-0">

                                <h3 class="text-sm font-bold text-gray-900 truncate">
                                    {{ $invoice->invoice_number }}
                                </h3>

                                <p class="mt-1 text-xs text-gray-500 truncate">
                                    {{ $invoice->student->user->name ?? '-' }}
                                </p>

                            </div>

                            <!-- STATUS -->
                            <div>

                                @if ($invoice->status == 'paid')
                                    <span
                                        class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-1 text-[10px] font-semibold text-green-700">
                                        Paid
                                    </span>
                                @elseif($invoice->status == 'sent')
                                    <span
                                        class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-1 text-[10px] font-semibold text-blue-700">
                                        Sent
                                    </span>
                                @elseif($invoice->status == 'draft')
                                    <span
                                        class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-semibold text-gray-700">
                                        Draft
                                    </span>
                                @else
                                    <span
                                        class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-1 text-[10px] font-semibold text-yellow-700">
                                        {{ ucfirst($invoice->status) }}
                                    </span>
                                @endif

                            </div>

                        </div>

                        <!-- PRICE INFO -->
                        <div class="mt-4 grid grid-cols-3 gap-2">

                            <!-- SUBTOTAL -->
                            <div class="rounded-xl border border-gray-100 bg-gray-50 p-3">

                                <p class="text-[10px] font-medium uppercase tracking-wide text-gray-500">
                                    Subtotal
                                </p>

                                <p class="mt-1 text-xs font-semibold text-gray-800">
                                    ${{ number_format($invoice->subtotal, 2) }}
                                </p>

                            </div>

                            <!-- DISCOUNT -->
                            <div class="rounded-xl border border-red-100 bg-red-50 p-3">

                                <p class="text-[10px] font-medium uppercase tracking-wide text-red-500">
                                    Discount
                                </p>

                                <p class="mt-1 text-xs font-semibold text-red-600">
                                    ${{ number_format($invoice->discount, 2) }}
                                </p>

                            </div>

                            <!-- TOTAL -->
                            <div class="rounded-xl border border-green-100 bg-green-50 p-3">

                                <p class="text-[10px] font-medium uppercase tracking-wide text-green-600">
                                    Total
                                </p>

                                <p class="mt-1 text-xs font-bold text-green-700">
                                    ${{ number_format($invoice->total, 2) }}
                                </p>

                            </div>

                        </div>

                        <!-- BUTTON -->
                        <div class="mt-4">

                            @if ($invoice->status == 'draft')
                                <!-- Edit -->
                                <a href="{{ route('admin.invoices.edit', $invoice->id) }}"
                                    class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-orange-500 to-orange-700 px-4 py-2.5 text-xs font-medium text-white shadow-sm transition duration-200 hover:from-orange-600 hover:to-orange-800 mb-2">
                                    <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

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

                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-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" />

                                </svg>

                                View Invoiced

                            </a>

                        </div>

                    </div>

                @empty

                    <!-- EMPTY -->
                    <div class="px-6 py-14 text-center">

                        <div class="flex flex-col items-center justify-center">

                            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">

                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">

                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />

                                </svg>

                            </div>

                            <h3 class="mt-4 text-base font-semibold text-gray-900">
                                No invoices found
                            </h3>

                        </div>

                    </div>
                @endforelse

            </div>

            <!-- ================= DESKTOP TABLE ================= -->
            <div class="hidden lg:block overflow-x-auto">

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

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

                        <tr>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Invoice #
                            </th>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Student
                            </th>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Subtotal
                            </th>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Discount
                            </th>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Total Amount
                            </th>

                            <th class="px-5 py-4 font-semibold whitespace-nowrap">
                                Status
                            </th>

                            <th class="px-5 py-4 font-semibold text-center whitespace-nowrap">
                                Actions
                            </th>

                        </tr>

                    </thead>

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

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

                                <!-- Invoice Number -->
                                <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>

                                <!-- Subtotal -->
                                <td class="px-5 py-4 font-medium text-gray-700 whitespace-nowrap">
                                    ${{ number_format($invoice->subtotal, 2) }}
                                </td>

                                <!-- Discount -->
                                <td class="px-5 py-4 font-medium text-red-500 whitespace-nowrap">
                                    ${{ number_format($invoice->discount, 2) }}
                                </td>

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

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

                                    @if ($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>
                                    @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 == '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>
                                    @else
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">
                                            {{ ucfirst($invoice->status) }}
                                        </span>
                                    @endif

                                </td>

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

                                    <div class="flex justify-center">
                                        @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-orange-500 to-orange-700 px-4 py-2.5 text-xs font-medium text-white shadow-sm transition duration-200 hover:from-orange-600 hover:to-orange-800 mr-1">
                                                <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

                                        <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">

                                            <!-- Eye 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 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>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <!-- Empty State -->
                            <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>