@extends('portal.portal-layout')

@section('pages-content')
    <div class="max-w-[654px]">
        <div>
            <h1 class="text-5xl">Welcome <span class="font-bold">{{ $user->first_name }}</span></h1>
        </div>

        <div class="mt-8 md:mt-16">

            @if($user->is_volunteer)
                @include('portal.partials.volunteer-application-section')
            @endif

            @if($user->ownerBookings()->singleUser()->exists())
                @include('portal.partials.bookings-section', [
                    'title' => 'My bookings',
                    'attendees' => [$user],
                ])
            @endif

            @if($user->children()->exists() && $user->children()->has('bookings')->exists())
                @include('portal.partials.bookings-section', [
                    'title' => 'Child bookings',
                    'attendees' => $user->children()->has('bookings')->with('bookings')->get(),
                ])
            @endif
        </div>

        <div class="mt-8 md:mt-16" x-data="{
            approvedReferences: @js($approved_references),
            pendingReferences: @js($pending_references),
            inprocessReferences: @js($inprocess_references),
            dbs: @js($police_check),
            dbsFailed: false,
            init(){
                if( !this.dbs || this.dbs.assessment === @json(\App\Enums\Assessment::RaisesConcerns)|| this.dbsExpired(@js($police_check?->expiresOn()) )){
                    this.dbsFailed = true;
                }
            },
            dbsExpired(dateString) {
                if(dateString){
                    const date = new Date(dateString);
                    const currentDate = new Date();
                    if (currentDate > date) {
                        return true;
                    }
                }
                return false;
            }
        }">
            <h3 class="flex mb-8 md:mb-12 ml-3 text-blue-900 text-2xl font-bold gap-6 items-center">

                @svg('img/icons/shield-check')
                <span>Safer recruitment</span>
            </h3>

            <a href="{{ route('references.index') }}"
               class="p-6 border rounded-lg shadow text-gray-900 hover:bg-[#fcfcfc] flex justify-between items-center">
               <div>
                    <div class="flex items-center justify-between">
                        <span class="text-2xl font-bold">References</span>
                    </div>
                    <div>
                        <span
                            class="text-gray-500 text-sm"
                            x-text="`
                                ${approvedReferences.length > 0 ? approvedReferences.length+' completed,' : ''}
                                ${pendingReferences.length > 0 ? pendingReferences.length+' required' : ''}
                                ${inprocessReferences.length > 0 ? inprocessReferences.length+' in progress' : ''}
                            `"
                        >
                        </span>

                        @if (count($pending_references) > 0)
                            <div class="warning flex items-center gap-1 mt-1">
                                <div class="rounded-full bg-red-100 w-5 h-[1.25rem] flex items-center justify-center">
                                    @svg('img/icons/exclamation-circle')
                                </div>
                                <span class="text-sm text-red-600 font-semibold">Action required</span>

                            </div>
                        @elseif(count($inprocess_references) > 0)
                            <div class="warning flex items-center gap-1 mt-1">
                                <span class="text-sm text-yellow-700 font-semibold">In progress</span>
                            </div>
                        @else
                            <div class="warning flex items-center gap-1 mt-1">
                                <div class="rounded-full bg-red-100 w-5 h-[1.25rem] flex items-center justify-center">
                                    @svg('img/icons/approved')
                                </div>
                                <span class="text-sm text-green-600 font-semibold">Approved</span>
                            </div>
                        @endif


                    </div>
               </div>
               @svg('img/icons/right-arrow', 'text-blue-500')
            </a>

            <a :href="dbsFailed ? @js(route('dbs.index')) : null"
                class="mt-8 p-6 border rounded-lg shadow text-gray-900 cursor-pointer hover:bg-[#fcfcfc] flex justify-between items-center">
                <div>
                    <span class="text-2xl font-bold">DBS</span>

                    @if ($police_check?->assessment === \App\Enums\Assessment::Satisfactory && (now() < $police_check?->expiresOn() || $police_check?->expiresOn() === null))
                        <div>
                            @if ($police_check->is_update_service && $police_check->opt_in_update_service_checks)
                                <span class="text-gray-500 text-sm b-2">Your DBS is on the Update Service and will be checked annually.</span>
                            @else
                                <span class="text-gray-500 text-sm b-2">Due to expire in {{$police_check->getDBSExpiryTimeDifference()}} ({{$police_check?->expiresOn()->format('d-m-Y')}})</span>
                            @endif
                            <div class="flex gap-1 items-center mt-1">
                                <div class="rounded-full bg-red-100 w-5 h-[1.25rem] flex items-center justify-center">
                                    @svg('img/icons/approved')
                                </div>
                                <span class="text-sm text-green-600 font-semibold">Approved</span>
                            </div>

                        </div>

                    @elseif ($police_check && $police_check?->assessment === null)
                        <div>
                            <span class="text-gray-500 text-sm">Your DBS is being verified</span>
                            <div class="warning flex items-center gap-1 mt-1">
                                <span class="text-sm text-yellow-700 font-semibold">In progress</span>
                            </div>
                        </div>

                    @else
                        <div>
                            <span class="text-gray-500 text-sm">No DBS in effect</span>
                            <div class="warning flex items-center gap-1 mt-1">
                                <div class="rounded-full bg-red-100 w-5 h-[1.25rem] flex items-center justify-center">
                                    @svg('img/icons/exclamation-circle')
                                </div>
                                <span class="text-sm text-red-600 font-semibold">Action required</span>
                            </div>
                        </div>
                    @endif

                </div>
                <div x-show="dbsFailed">
                    @svg('img/icons/right-arrow', 'text-blue-500')
                </div>
            </a>

        </div>

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

                @svg('img/icons/user-profile')
                <span>Account</span>
            </h3>

            <a href="{{ route('portal.account.personal-details') }}"
               class="block p-6 border rounded-lg shadow text-gray-900 hover:bg-[#fcfcfc]">
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold">My details</span>
                    @svg('img/icons/right-arrow', 'text-blue-500')
                </div>
            </a>

            @if($user->children()->exists())
                <a href="{{ route('portal.account.children-details') }}"
                   class="mt-8 block p-6 border rounded-lg shadow text-gray-900 cursor-pointer hover:bg-[#fcfcfc]">
                    <div class="flex items-center justify-between">
                        <span class="text-2xl font-bold">My children's details</span>
                        @svg('img/icons/right-arrow', 'text-blue-500')
                    </div>
                </a>
            @endif

        </div>
    </div>
@endsection