@extends('portal.portal-layout')

@section('pages-content')

    <div class="flex items-center gap-4 mt-3 font-medium text-gray-600">
        @if($child)
            <a class="flex gap-3 items-center hover:underline" href="{{ route('portal.account') }}">
                @svg('img/icons/home')
                Home
            </a>
            @svg('img/icons/breadcrumb-delimiter')
            <a class="flex gap-3 items-center hover:underline" href="{{ route('portal.account.children-details') }}">
                Children
            </a>
            @svg('img/icons/breadcrumb-delimiter')
            <span>{{ $child->full_name }}</span>
        @else
            <a href="{{ route('portal.account') }}"
               class="inline-flex gap-4 items-center font-medium text-lg text-primary-600 hover:underline">
                <svg class="w-4" fill="none" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
                </svg>
                <span>Back to dashboard</span>
            </a>
        @endif
    </div>

    {{-- Show child form if child is selected, otherwise show children list--}}

    @if($child)
        <h1 class="mt-12 text-5xl text-titus-primary">{{ $child->full_name }}'s details</h1>

        <p class="mt-8 text-gray-500">Update {{ $child->full_name }}'s details in the form below.</p>

        @if(session()->has('success'))
            <x-description-alert class="mt-4" label="{{ $child->full_name }}'s details updated successfully!"
                                 type="success"/>
        @endif

        <form action="{{ route('portal.account.children-details', ['child' => $child]) }}" method="post"
              class="flex flex-col max-w-[400px]">
            @csrf

            <div class="mt-4 max-w-[168px]">
                <x-inputs.select name="gender" label="Gender" :options="\App\Enums\Gender::asSelectArray()"
                                 class="max-w-[168px]"/>
                <x-inputs.error name="gender"/>
            </div>

            <div class="mt-4">
                <x-inputs.new-input name="first_name" label="First Name" class="sm:max-w-full"/>
                <x-inputs.error name="first_name"/>
            </div>

            <div class="mt-4">
                <x-inputs.new-input name="last_name" label="Last Name" class="sm:max-w-full"/>
                <x-inputs.error name="last_name"/>
            </div>

            <div class="flex gap-4 justify-between sm:justify-start sm:max-w-[300px]">
                <x-inputs.input name="date_of_birth[day]" label="Day"/>
                <x-inputs.select name="date_of_birth[month]" label="Month" :options="config('date.months')"
                                 placeholder=""/>
                <x-inputs.input name="date_of_birth[year]" label="Year"/>
            </div>
            <x-inputs.error name="date_of_birth"/>

            <div class="mt-4">
                <x-inputs.new-input name="school" label="School" class="sm:max-w-full"/>
                <x-inputs.error name="school"/>
            </div>

            <div class="mt-4">
                <x-inputs.select name="school_year" class="max-w-[168px] mt-0" label="School year"
                                 :options="\App\Models\User::getSchoolYearsAsSelectArray()"/>
                <x-inputs.error name="school_year"/>
            </div>

            <div>
                <x-inputs.input optional="true" name="child_friends" label="Friends"
                                help="This could be the name of a specific friend or friends your child would like to share a room with on the holiday. We seek to meet requests, but cannot guarantee to do so. Many come without specific friends and soon make them!"/>
            </div>

            <button type="submit"
                    class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-14 py-2.5 mt-8 w-fit">
                <span>Save details</span>
            </button>

            <a href="{{ route('portal.account') }}"
               class="mt-8 inline-flex gap-4 items-center font-medium text-lg text-primary-600 hover:underline">
                <span>Back to dashboard</span>
            </a>
        </form>
    @else
        <div class="max-w-[524px]">
            <h1 class="mt-12 text-5xl text-titus-primary">My children's details</h1>

            <p class="mt-8 text-gray-500">Select your child which details you want to update</p>

            @foreach($user->children as $child)

                <a href="{{ route('portal.account.children-details', ['child' => $child->id]) }}"
                   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">{{ $child->full_name }}</span>
                        @svg('img/icons/right-arrow', 'text-blue-500')
                    </div>
                </a>

            @endforeach
        </div>

    @endif
@endsection