@php
    /** @var \Illuminate\Support\Collection<\App\Models\User> $attendees */
    /** @var \App\Models\User $child */
@endphp

<h3 class="flex mb-8 md:mb-12 ml-3 text-blue-900 text-2xl font-bold gap-6 items-center">

    @svg('img/icons/calendar')
    <span>{{ $title }}</span>
</h3>
@foreach($attendees as $child)
    <div class="@if(!$loop->first) mt-6 md:mt-10 @endif">
        @foreach($child->bookings as $booking)
            <a href="{{route('portal.account.booking', ['booking' => $booking])}}"
               class="@if(!$loop->first) mt-6 md:mt-10 @endif p-6 border rounded-lg shadow text-gray-900 block cursor-pointer hover:bg-[#fcfcfc]">

                <div class="flex items-center justify-between border-b border-b-primary-100">
                    <div class="flex flex-col pb-4">
                        <span class="leading-tight text-2xl font-bold ">{{ $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>

                <div class="pt-6">
                    @if($booking->paidInFull())
                        <x-description-alert class="mb-6"
                                             label="Thank you, this booking is now paid in full"
                                             type="success"/>
                    @endif
                    <div class="flex justify-between gap-1 w-full xs:w-3/4">
                        <div class="flex flex-col gap-[6px]">
                            <h4 class="leading-tight text-lg font-bold">Balance</h4>
                            <span class="text-gray-700 font-bold">
                                            {{ formatCurrency($booking->amountPaid() / 100) }}
                                            <span class="text-gray-600 font-normal"> paid</span>
                                        </span>
                            <span class="text-gray-700 font-bold">
                                            {{ formatCurrency($booking->amountOutstanding() / 100) }}
                                            <span class="text-gray-600 font-normal"> remaining</span>
                                        </span>
                        </div>

                        @if($booking->is_return_form_sent)
                            <div class="flex flex-col gap-[6px]">
                                <h4 class="leading-tight text-lg font-bold">Return form</h4>

                                @if($booking->returnForm->isSubmitted())
                                    <span class="text-green-600 text-base font-semibold">
                                                    Return form complete and submitted
                                                </span>
                                @else
                                    <span class="text-gray-500 font-normal">
                                                    Due
                                                    {{ $booking->eventOption->returnFormDueDate()->format(config('formats.datetime.short-date')) }}
                                                </span>
                                    @if($booking->returnForm->isCompleted())
                                        <x-description-alert class="" type="info"
                                                             description="Ready to check and submit"/>
                                    @else
                                        <span class="text-primary-600 text-base font-semibold">
                                                        {{ $booking->returnForm->totalCompletedPercent()}}% completed
                                                    </span>
                                    @endif
                                @endif
                            </div>
                        @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
                </div>
            </a>
        @endforeach
    </div>
@endforeach