@php
    use App\Support\ParentChildPresenter;

    $defaultClassUuid = old('class_uuid', $classes->first()?->uuid ?? '');
    $favouriteSubjects = old('favourite_subjects', []);
    $detailsLocked = $createdChild && ! $accessSaved;
    $accessEnabled = (bool) $createdChild;
    $signInEmail = $createdChild ? ParentChildPresenter::signInEmail($createdChild) : null;
@endphp

@extends('layouts.parent')

@section('title', 'Add child · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="My Family"
            title="Add child"
            meta="First save your child's details. Then set the email and password they will use to sign in as a student."
        >
            <x-slot:actions>
                <a href="{{ route('parent.children.index') }}" class="btn mec-btn-secondary btn-md">View all children</a>
            </x-slot:actions>
        </x-admin.page-header>

        <div class="card mec-panel">
            <div class="card-body">
                <div class="mec-wizard-tabs" role="tablist" aria-label="Add child steps">
                    @if ($detailsLocked)
                        <span class="mec-wizard-tab {{ $tab === 'details' ? 'is-active' : '' }} is-disabled" aria-disabled="true">Child details</span>
                    @else
                        <a
                            class="mec-wizard-tab {{ $tab === 'details' ? 'is-active' : '' }}"
                            href="{{ route('parent.children.create') }}"
                            role="tab"
                            aria-selected="{{ $tab === 'details' ? 'true' : 'false' }}"
                        >Child details</a>
                    @endif

                    @if ($accessEnabled)
                        <a
                            class="mec-wizard-tab {{ $tab === 'access' ? 'is-active' : '' }}"
                            href="{{ route('parent.children.create', ['child' => $createdChild->uuid]) }}"
                            role="tab"
                            aria-selected="{{ $tab === 'access' ? 'true' : 'false' }}"
                        >Account access</a>
                    @else
                        <span class="mec-wizard-tab {{ $tab === 'access' ? 'is-active' : '' }} is-disabled" aria-disabled="true">Account access</span>
                    @endif
                </div>

                @if ($tab === 'details')
                    <h5 class="mt-4 mb-1">Add your child</h5>
                    <p class="text-muted mb-4">Save their details first. Next you will set the email and password they use to sign in.</p>

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('parent.children.store') }}" id="parent-add-child-form">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="first_name">First name</label>
                                <input class="form-control @error('first_name') is-invalid @enderror" type="text" id="first_name" name="first_name" value="{{ old('first_name') }}" required maxlength="80">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="last_name">Last name</label>
                                <input class="form-control @error('last_name') is-invalid @enderror" type="text" id="last_name" name="last_name" value="{{ old('last_name') }}" required maxlength="80">
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="phone">Phone <span class="text-muted fw-normal">(optional)</span></label>
                                <input class="form-control @error('phone') is-invalid @enderror" type="text" id="phone" name="phone" value="{{ old('phone') }}" maxlength="32">
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="class_uuid">Class / year group</label>
                                <select class="form-select @error('class_uuid') is-invalid @enderror" id="class_uuid" name="class_uuid" required @disabled($classes->isEmpty())>
                                    <option value="" @selected($defaultClassUuid === '')>Select a class</option>
                                    @foreach ($classGroups as $group)
                                        <optgroup label="{{ $group['label'] }}">
                                            @foreach ($group['classes'] as $class)
                                                <option value="{{ $class->uuid }}" @selected($defaultClassUuid === $class->uuid)>{{ $class->name }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <fieldset class="mec-favourite-field" id="favourite-subjects-field">
                                    <legend class="form-label">Favourite subjects <span class="text-muted fw-normal">(optional)</span></legend>
                                    <p class="text-muted small mb-2">Add more than one. Pick from this class or type a name.</p>
                                    <ul class="mec-chip-list" data-favourite-chips></ul>
                                    <div class="d-flex flex-column flex-sm-row gap-2 align-items-sm-end">
                                        <div class="flex-grow-1" data-favourite-pick-wrap>
                                            <label class="visually-hidden" for="favourite-subject-to-add">Favourite subject to add</label>
                                            <select class="form-select" id="favourite-subject-to-add" data-favourite-pick>
                                                <option value="">Choose a subject</option>
                                            </select>
                                        </div>
                                        <div class="flex-grow-1">
                                            <label class="visually-hidden" for="favourite-subject-name">Favourite subject name</label>
                                            <input class="form-control" type="text" id="favourite-subject-name" maxlength="80" placeholder="Or type a subject" data-favourite-name>
                                        </div>
                                        <button type="button" class="btn mec-btn-secondary" data-favourite-add>Add</button>
                                    </div>
                                    <div data-favourite-inputs>
                                        @foreach ($favouriteSubjects as $index => $subject)
                                            <input type="hidden" name="favourite_subjects[{{ $index }}][uuid]" value="{{ $subject['uuid'] ?? '' }}">
                                            <input type="hidden" name="favourite_subjects[{{ $index }}][name]" value="{{ $subject['name'] ?? '' }}">
                                        @endforeach
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="date_of_birth">Date of birth <span class="text-muted fw-normal">(optional)</span></label>
                                <input class="form-control @error('date_of_birth') is-invalid @enderror" type="date" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="relationship">Relationship</label>
                                <select class="form-select @error('relationship') is-invalid @enderror" id="relationship" name="relationship">
                                    @foreach (['guardian' => 'Guardian', 'mother' => 'Mother', 'father' => 'Father'] as $value => $label)
                                        <option value="{{ $value }}" @selected(old('relationship', 'guardian') === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary mt-4" @disabled($classes->isEmpty())>Create child and continue</button>
                    </form>
                @else
                    <h5 class="mt-4 mb-1">Account access</h5>
                    <p class="text-muted mb-4">Set how {{ $createdChild->first_name }} signs in. This is not your parent password.</p>

                    @if ($accessSaved)
                        <div class="mec-success-box">
                            <p class="mb-1 fw-semibold">{{ $createdChild->full_name }} can now sign in.</p>
                            @if ($signInEmail)
                                <p class="mb-3">Sign-in email: {{ $signInEmail }}</p>
                            @endif
                            <div class="d-flex flex-wrap gap-3">
                                <a href="{{ route('parent.children.create') }}" class="btn mec-btn-secondary">Add another child</a>
                                <a href="{{ route('parent.children.index') }}" class="mec-inline-link align-self-center">View all children</a>
                            </div>
                        </div>
                    @else
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <p class="fw-semibold">{{ $createdChild->full_name }}</p>
                        <form method="POST" action="{{ route('parent.children.access.update', $createdChild) }}">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label class="form-label" for="email">Sign-in email</label>
                                <input class="form-control @error('email') is-invalid @enderror" type="email" id="email" name="email" value="{{ old('email') }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="password">Password</label>
                                <input class="form-control @error('password') is-invalid @enderror" type="password" id="password" name="password" required minlength="8" autocomplete="new-password">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="password_confirmation">Confirm password</label>
                                <input class="form-control" type="password" id="password_confirmation" name="password_confirmation" required minlength="8" autocomplete="new-password">
                            </div>
                            <button type="submit" class="btn btn-primary">Save sign-in details</button>
                        </form>
                    @endif
                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        window.mecParentClasses = @json($classOptions);
        window.mecFavouriteSubjects = @json(array_values($favouriteSubjects));
    </script>
    <script src="{{ asset('js/parent-add-child.js') }}?v={{ filemtime(public_path('js/parent-add-child.js')) }}"></script>
@endsection