@section('page-title')
    Invoice {{ $invoice->invoice_number }}
@endsection

@section('page-description')
    Invoice Details & Payment Summary
@endsection

<x-layouts.admin>

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

        <!-- ================= ACTION BAR ================= -->
        <div class="no-print mx-auto flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4 sm:mb-6">

            <button onclick="window.history.back()"
                class="inline-flex items-center gap-2 mb-2 h-11 rounded-full text-gray-700 text-sm font-medium transition duration-200">

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

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

                </svg>

                Back Invoices Listing

            </button>

        </div>

        <!-- ================= INVOICE CARD ================= -->
        <div
            class="invoice-container max-w-6xl mx-auto overflow-hidden rounded-2xl sm:rounded-[32px] border border-gray-200 bg-white shadow-xl">

            <!-- TOP BAR -->
            <div class="h-2 bg-gradient-to-r from-teal-500 via-emerald-500 to-teal-700"></div>

            <div class="p-4 sm:p-8 lg:p-10">

                <!-- ================= HEADER ================= -->
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">

                    <!-- LEFT -->
                    <div>

                        <img src="{{ asset('images/logo.avif') }}" class="h-10 sm:h-14 mb-4">

                        <div class="space-y-1 text-xs sm:text-sm text-gray-500">

                            <p>
                                115 Alberti Drive Blacktown, NSW 2148
                            </p>

                            <p>
                                www.firstride.com.au
                            </p>

                        </div>

                    </div>

                    <!-- RIGHT -->
                    <div class="lg:text-right">

                        <h1 class="text-2xl sm:text-4xl font-black tracking-wide text-teal-700">

                            INVOICE

                        </h1>

                        <div
                            class="mt-4 inline-flex flex-col gap-2 rounded-2xl bg-gray-50 border border-gray-200 px-4 sm:px-5 py-3 text-xs sm:text-sm text-gray-700">

                            <div class="flex items-center justify-between gap-4">

                                <span class="font-medium text-gray-500">
                                    Invoice #
                                </span>

                                <span class="font-semibold">
                                    {{ $invoice->invoice_number }}
                                </span>

                            </div>

                            <div class="flex items-center justify-between gap-4">

                                <span class="font-medium text-gray-500">
                                    Invoice Date
                                </span>

                                <span class="font-semibold">
                                    {{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M Y') }}
                                </span>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- ================= CUSTOMER + PAYMENT ================= -->
                <div class="mt-6 sm:mt-10 grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-10">

                    <!-- BILL TO -->
                    <div>

                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-3">

                            Bill To

                        </h3>

                        <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4 sm:p-5">

                            <h4 class="text-base sm:text-lg font-bold text-teal-700">

                                {{ $invoice->student->user->name ?? '-' }}

                            </h4>

                            <div class="mt-3 space-y-2 text-xs sm:text-sm text-gray-600">

                                <p>
                                    {{ $invoice->student->user->email ?? '-' }}
                                </p>

                                <p>
                                    {{ $invoice->student->user->phone ?? '-' }}
                                </p>

                                @if ($invoice->student->user->address)
                                    <p>
                                        {{ $invoice->student->user->address->full_address ?? '-' }}
                                    </p>
                                @else
                                    <p>
                                        {{ collect([
                                            $invoice->student->user->address->street1 ?? null,
                                            $invoice->student->user->address->street2 ?? null,
                                            $invoice->student->user->address->city ?? null,
                                            $invoice->student->user->address->state ?? null,
                                            $invoice->student->user->address->country ?? null,
                                        ])->filter()->implode(', ') ?:
                                            '-' }}
                                    </p>
                                @endif

                            </div>

                        </div>

                    </div>

                    <!-- PAYMENT -->
                    <div>

                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-3">

                            Payment Details

                        </h3>

                        <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4 sm:p-5">

                            <div class="space-y-2 text-xs sm:text-sm text-gray-700">

                                <p class="font-semibold text-gray-900">
                                    First Ride Pty Ltd
                                </p>

                                <p>
                                    <span class="font-medium">BSB:</span>
                                    062-692
                                </p>

                                <p>
                                    <span class="font-medium">Account No:</span>
                                    4311 3669
                                </p>

                                <p>
                                    <span class="font-medium">PayID:</span>
                                    6 4687 7536
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- ================= DESKTOP TABLE ================= -->
                <div class="hidden lg:block mt-10 overflow-hidden rounded-2xl border border-gray-200">

                    <table class="w-full text-sm">

                        <thead class="bg-teal-700 text-white">

                            <tr>

                                <th class="px-5 py-4 text-left font-semibold">
                                    Date
                                </th>

                                <th class="px-5 py-4 text-left font-semibold">
                                    Description
                                </th>

                                <th class="px-5 py-4 text-left font-semibold">
                                    Lesson Type
                                </th>

                                <th class="px-5 py-4 text-left font-semibold">
                                    Instructor
                                </th>

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

                                <th class="px-5 py-4 text-right font-semibold">
                                    Unit Price
                                </th>

                                <th class="px-5 py-4 text-right font-semibold">
                                    Amount
                                </th>

                            </tr>

                        </thead>

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

                            @foreach ($invoice->items as $item)
                                <tr class="hover:bg-gray-50 transition">

                                    <td class="px-5 py-4 text-gray-700 whitespace-nowrap">
                                        {{ $item->booking->lesson_date ?? 'N/A' }}
                                    </td>


                                    <td class="px-5 py-4 text-gray-700">
                                        {{ $item->description ?? 'N/A' }}
                                    </td>

                                    <td class="px-5 py-4 text-gray-700">
                                        {{ $item->booking->lessonType->lesson_type_code ?? 'N/A' }}
                                    </td>

                                    <td class="px-5 py-4 text-gray-700 whitespace-nowrap">

                                        {{ $item->booking->instructor->user->name }}
                                        {{ $item->booking->instructor->user->last_name }}

                                    </td>

                                    <td class="px-5 py-4 text-center text-gray-700">
                                        {{ $item->booking->unit ?? 'N/A' }}
                                    </td>

                                    <td class="px-5 py-4 text-right text-gray-700">
                                        ${{ number_format($item->booking->lessonType->unit_price, 2) }}
                                    </td>

                                    <td class="px-5 py-4 text-right font-semibold text-gray-900">

                                        ${{ number_format($item->booking->price, 2) }}

                                    </td>

                                </tr>
                            @endforeach

                        </tbody>

                    </table>

                </div>

                <!-- ================= MOBILE CARD VIEW ================= -->
                <div class="lg:hidden mt-6 space-y-4">
                    @php $unit = 0; @endphp
                    @foreach ($invoice->items as $item)
                        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm p-4">

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

                                <div>

                                    <h4 class="text-sm font-semibold text-gray-900">

                                        {{ $item->description ?? 'N/A' }}

                                    </h4>

                                    <p class="mt-1 text-xs text-gray-500">

                                        {{ $item->booking->lesson_date ?? 'N/A' }}

                                    </p>

                                </div>

                                <div
                                    class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">

                                    ${{ number_format($item->booking->price, 2) }}

                                </div>

                            </div>

                            <!-- DETAILS -->
                            <div class="mt-4 grid grid-cols-2 gap-3 text-xs">

                                <div>

                                    <p class="text-gray-400">
                                        Instructor
                                    </p>

                                    <p class="mt-1 font-medium text-gray-800">

                                        {{ $item->booking->instructor->user->name }}
                                        {{ $item->booking->instructor->user->last_name }}

                                    </p>

                                </div>

                                <div>

                                    <p class="text-gray-400">
                                        Units
                                    </p>

                                    <p class="mt-1 font-medium text-gray-800">
                                        @php $unit += $item->booking->unit ?? 0; @endphp
                                        {{ $item->booking->unit ?? 'N/A' }}
                                    </p>

                                </div>

                            </div>

                        </div>
                    @endforeach

                </div>

                <!-- ================= TOTALS ================= -->
                <div class="mt-10">

                    {{-- Top Cards --}}
                    <div class="flex flex-col lg:flex-row justify-between gap-6">

                        {{-- Left Card --}}
                        <div class="w-full lg:w-[320px] rounded-2xl border border-gray-200 bg-gray-50 p-5">

                            <div class="flex items-center justify-between text-sm text-gray-700">
                                <span>Total Lessons</span>

                                <span class="font-semibold">
                                    {{ number_format(count($invoice->items)) }}
                                </span>
                            </div>

                            <div class="mt-3 flex items-center justify-between text-sm text-gray-700">
                                <span>Total Hours</span>

                                <span class="font-semibold">
                                    {{ floor($unit) }}h {{ ($unit - floor($unit)) * 60 }}m
                                </span>
                            </div>

                            {{-- Questions --}}
                            <div class="mt-10 text-sm text-gray-700 leading-7">

                                <p class="font-semibold mb-1">
                                    Questions:
                                </p>

                                <p>
                                    Email us at
                                    <a href="mailto:info@firstride.com.au" class="text-blue-600 hover:underline">
                                        info@firstride.com.au
                                    </a>
                                </p>

                                <p>
                                    Or call us at 0421 954 160
                                </p>

                            </div>

                        </div>

                        {{-- Right Card --}}
                        <div class="w-full lg:w-[360px] rounded-2xl border border-gray-200 bg-gray-50 p-5">

                            <div class="flex items-center justify-between text-sm text-gray-700">
                                <span>Subtotal</span>

                                <span class="font-semibold">
                                    ${{ number_format($invoice->subtotal, 2) }}
                                </span>
                            </div>

                            <div class="mt-3 flex items-center justify-between text-sm text-red-500">

                                <span>
                                    {{ $invoice->discount_reason ?? 'Discount' }}
                                </span>

                                <span class="font-semibold">
                                    - ${{ number_format($invoice->discount, 2) }}
                                </span>

                            </div>

                            <div class="mt-3 flex items-center justify-between text-sm text-gray-700">

                                <span>
                                    Received
                                </span>

                                <span class="font-semibold">
                                    ${{ number_format($amountReceived ?? 0, 2) }}
                                </span>

                            </div>

                            <hr class="my-4 border-gray-200">

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

                                <div>
                                    <h3 class="text-2xl font-bold text-gray-900">
                                        Invoice Total
                                    </h3>

                                    <p class="text-xs text-gray-500 mt-1">
                                        (GST Included)
                                    </p>
                                </div>

                                <span class="text-3xl font-bold text-gray-900">
                                    ${{ number_format($invoice->total - $amountReceived ?? 0, 2) }}
                                </span>

                            </div>

                            {{-- Thank You --}}
                            <div class="mt-8 text-right">
                                <h2 class="text-4xl font-extrabold text-teal-500 leading-tight">
                                    Thank You!
                                </h2>
                            </div>

                        </div>

                    </div>

                    {{-- Footer --}}
                    <div class="mt-10 border-t-4 border-teal-500 pt-4 text-center text-sm text-gray-700 leading-7">

                        <p>
                            115 Aliberti Drive Blacktown, NSW 2148
                            *
                            www.firstride.com.au
                            *
                            ACN: 646877536
                        </p>

                        <p>
                            Licence No. 014041
                            *
                            Driving School No. 22667590
                            *
                            JP No. 226393
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</x-layouts.admin>