@extends('portal.portal-layout')

@section('pages-content')
    <div class="max-w-[1000px]" x-data="{

    }">
        <div>
            <h1 class="text-5xl text-titus-primary">Bookings</h1>

            <div class="flex items-center gap-4 mt-3 font-medium text-gray-600">
                <a class="flex gap-3 items-center hover:underline" href="{{ route('portal.account') }}">
                    @svg('img/icons/home')
                    Home
                </a>
                @svg('img/icons/breadcrumb-delimiter')
                <span>{{ $child->full_name }}</span>
            </div>

            <div class="flex flex-col mt-8 md:mt-10">
                <span class="leading-tight text-3xl font-bold text-gray-800 ">{{ $child->full_name }}</span>
                <span
                    class="mt-2 leading-tight text-xl font-medium">{{ $booking->eventOption->event->name}} {{ $booking->eventOption->option }}</span>
                <span class="mt-[6px] text-gray-500 leading-tight text-base font-normal">{{ $booking->eventOption->start->format(config('formats.datetime.short-date-without-year')) }} - {{ $booking->eventOption->end->format(config('formats.datetime.short-date')) }}</span>
            </div>
        </div>

        {{--        @if(session()->has('draft-saved'))--}}
        {{--            <div id="alert-draft-saved" class="flex p-4 mt-8 md:mt-16 text-green-800 border border-green-300 rounded-lg bg-green-50" role="alert">--}}
        {{--                <div>--}}
        {{--                    <div class="flex items-center">--}}
        {{--                        <svg aria-hidden="true" class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>--}}
        {{--                        <span class="sr-only">Info</span>--}}
        {{--                        <h3 class="text-lg font-medium">Return form for {{ $booking->attendee->full_name }} have been saved successfully.</h3>--}}
        {{--                    </div>--}}
        {{--                    <div class="mt-2 mb-4 text-sm">--}}
        {{--                        You can back to this Return form at any time before due date <span class="font-medium">{{ $booking->eventOption->returnFormDueDate()->format(config('formats.datetime.short-date')) }}</span> to complete it.--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--                <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-draft-saved" aria-label="Close">--}}
        {{--                    <span class="sr-only">Close</span>--}}
        {{--                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>--}}
        {{--                </button>--}}
        {{--            </div>--}}
        {{--        @endif--}}

        <div class="flex flex-col gap-6 md:gap-10 mt-8 md:mt-16 lg:flex-row">
            <article class="flex-1 h-max px-3 py-4 sm:p-6 border border-gray-200 max-w-[480px]">
                <header>
                    <div class="flex items-center gap-4">
                        @svg('img/icons/currency-pound-circle')
                        <span class="text-2xl font-bold text-blue-900">Payments</span>
                    </div>
                </header>

                <div class="mt-8 md:mt-12">
                    <table class="w-full">
                        <thead>
                        <tr class="border-b border-gray-200">
                            <td class="px-3 py-4 leading-tight text-base font-bold">Paid</td>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($booking->payments as $payment)
                            <tr class="border-b border-gray-200">
                                <td class="leading-tight px-3 py-4">{{ $payment->paid_at->format(config('formats.datetime.short-date')) }}</td>
                                <td class="leading-tight px-3 py-4">{{ \App\Enums\PaymentType::getDescription($payment->type) }}</td>
                                <td class="leading-tight px-3 py-4 text-right">{{ $payment->formatAsMoney() }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3" class="px-3 py-4 font-bold leading-tight text-right">
                                Total paid: {{ formatCurrency($booking->amountPaid() / 100) }}
                            </td>
                        </tr>
                        </tfoot>
                    </table>

                    @if($booking->paidInFull())
                        <x-description-alert label="Thank you, this booking is now paid in full" type="success"/>
                    @else

                        <table class="w-full mt-8">
                            <thead>
                            <tr class="border-b border-gray-200">
                                <td class="px-3 py-4 leading-tight text-base font-bold">Outstanding</td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($booking->Instalments()->notPaid()->get() as $Instalment)
                                <tr class="border-b border-gray-200 @if($Instalment->due <= now()) text-red-600 @endif">
                                    <td class="leading-tight px-3 py-4">
                                        Due {{ $Instalment->due->format(config('formats.datetime.short-date')) }}</td>
                                    <td class="leading-tight px-3 py-4">
                                        @if($Instalment->type == \App\Enums\InstalmentType::Deposit)
                                            {{ \App\Enums\InstalmentType::getDescription($Instalment->type) }}
                                        @endif
                                    </td>
                                    <td class="leading-tight px-3 py-4 text-right">{{ $Instalment->formatAsMoney() }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="3" class="px-3 py-4 font-bold leading-tight text-right">
                                    Total outstanding: {{ formatCurrency($booking->amountOutstanding() / 100) }}</td>
                            </tr>
                            </tfoot>
                        </table>

                    @endif
                </div>

                @php
                    $overdueInstalments = $booking->Instalments()->overdue()->get();
                    $firstOverdueInstalment = $overdueInstalments->first();
                    $overdueInstalmentCount = $overdueInstalments->count();
                @endphp
                @if($overdueInstalmentCount === 1)
                    <x-description-alert class="mt-6" type="danger" label="Balance issue"
                                         description="We have missed a payment of {{ $firstOverdueInstalment->formatAsMoney() }}, that was due on {{ $firstOverdueInstalment->due->format(config('formats.datetime.short-date-without-year')) }}"/>
                @endif
                @if($overdueInstalmentCount > 1)
                    <x-description-alert class="mt-6" type="danger" label="Balance issue"
                                         description="We are missing a total of {{ $overdueInstalmentCount }}, which is now due"/>
                @endif

                @if(!$booking->paidInFull())
                    <div class="mt-8 md:mt-10">
                        <div class="px-3">
                            <span class="leading-tight text-base font-bold">How to pay</span>
                            <p class="mt-4 leading-tight text-gray-700">When making your bank transfer please add your
                                reference: <span class="font-bold">{{ $booking->getPaymentReference() }}</span></p>
                            <p class="mt-3 leading-tight text-gray-700">
                                {{ $booking->eventOption->event->campGroup->payment_description }}
                            </p>
                        </div>
                    </div>
                @endif

            </article>

            @if($booking->is_return_form_sent)
                <article class="flex-1 h-max px-3 py-4 sm:p-6 border border-gray-200">
                    <header>
                        <div class="flex items-center gap-4 text-blue-900">
                            @svg('img/icons/document')
                            <span class="text-2xl font-bold">Return form</span>
                        </div>
                    </header>

                    @if($booking->eventOption->returnFormDueDate()->lt(now()))
                        <x-description-alert class="mt-10 mb-6" type="info"
                                             description="The deadline to make changes to your return forms has now passed. If you wish to notify us of any changes, please contact us directly."/>
                    @else

                        @if(!$booking->returnForm->isSubmitted() && $booking->returnForm->isCompleted())
                            <x-description-alert class="mt-10 mb-6" type="info"
                                                 description="Almost there! Please check and submit to send your forms through to the admin team."/>
                        @endif

                        @if($booking->returnForm->isSubmitted())
                            <x-description-alert class="mt-10" type="success"
                                                 description="Thank you for submitting your return form. You may update any details which change, up to the deadline of the {{ $booking->eventOption->returnFormDueDate()->format(config('formats.datetime.short-date')) }}."/>
                        @endif

                        @if($booking->returnForm->isSubmitted())
                            <div id="accordion-collapse" data-accordion="collapse"
                                 data-active-classes="font-bold bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
                                 data-inactive-classes="font-bold bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
                                 class="mt-6 font-bold">
                                <h2 id="accordion-collapse-heading-1">
                                    <button type="button"
                                            class="font-bold flex items-center justify-between w-full p-5 pl-2 text-left text-gray-900"
                                            data-accordion-target="#accordion-collapse-body-1" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-1">
                                        <span>Update forms</span>
                                        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor"
                                             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                                  clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                </h2>
                                <div id="accordion-collapse-body-1" class="hidden"
                                     aria-labelledby="accordion-collapse-heading-1">
                                    <div class="py-5">
                                        @endif

                                        <x-booking-return-form.topics-block
                                            :class="$booking->returnForm->isSubmitted() ? '!mt-0 !md:mt-0' : ''"
                                            :booking="$booking"
                                            :show-percents="!$booking->returnForm->isSubmitted()"/>
                                        @if(!$booking->returnForm->isSubmitted())
                                            <div class="mt-6 leading-tight text-gray-700">Deadline for
                                                forms: {{ $booking->eventOption->returnFormDueDate()->format(config('formats.datetime.short-date')) }}</div>

                                            @if($booking->returnForm->isCompleted())
                                                <footer class="mt-9">
                                                    <div class="flex flex-col">
                                                        <a href="{{ route('portal.account.booking.return-form.travel-details', compact('booking')) }}"
                                                           class="w-max text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm flex items-center gap-2 px-5 py-3 self-end cursor-pointer">Check
                                                            and submit @svg('img/icons/submit-button')
                                                        </a>
                                                    </div>
                                                </footer>
                                            @endif
                                        @endif

                                        @if($booking->returnForm->isSubmitted())
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                </article>
            @endif

        </div>
    </div>

@endsection