@extends('layouts.app')

@section('title', 'Edit Parent')

@section('content')

<div class="space-y-5">

    {{-- ============================================================
        Page Header
    ============================================================ --}}
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">

        <div class="flex items-start gap-3">

            <a
                href="{{ route('parents.index') }}"
                class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted transition hover:bg-background hover:text-text"
                title="Back to parents"
            >
                <i class="fa-solid fa-arrow-left text-sm"></i>
            </a>

            <div>

                <h1 class="text-xl font-semibold text-text">
                    Edit Parent
                </h1>

                <p class="mt-1 text-sm text-muted">
                    Update parent, guardian and communication information.
                </p>

            </div>

        </div>


        <div class="flex flex-wrap items-center gap-2">

            @can('parents.view')

                <a
                    href="{{ route('parents.show', $studentParent) }}"
                    class="btn btn-secondary"
                >
                    <i class="fa-regular fa-eye"></i>

                    <span>
                        View Parent
                    </span>
                </a>

            @endcan

        </div>

    </div>


    {{-- ============================================================
        Validation Summary
    ============================================================ --}}
    @if($errors->any())

        <div class="rounded-lg border border-danger/20 bg-dangerLight p-4">

            <div class="flex items-start gap-3">

                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-danger/10 text-danger">
                    <i class="fa-solid fa-circle-exclamation"></i>
                </div>

                <div>

                    <p class="text-sm font-semibold text-danger">
                        Please correct the following information.
                    </p>

                    <ul class="mt-2 list-inside list-disc space-y-1 text-xs text-danger">

                        @foreach($errors->all() as $error)

                            <li>
                                {{ $error }}
                            </li>

                        @endforeach

                    </ul>

                </div>

            </div>

        </div>

    @endif


    {{-- ============================================================
        Form
    ============================================================ --}}
    <form
        id="parent-form"
        action="{{ route('parents.update', $studentParent) }}"
        method="POST"
    >

        @csrf
        @method('PUT')


        <div class="grid grid-cols-12 gap-5">

            {{-- ====================================================
                Main Content
            ==================================================== --}}
            <div class="col-span-12 space-y-5 xl:col-span-8">

                {{-- =================================================
                    Parent Information
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Parent Information
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Update the student's primary parent information.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                            {{-- Father Name --}}
                            <div>

                                <label
                                    for="father_name"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Father Name

                                    <span class="text-danger">
                                        *
                                    </span>
                                </label>

                                <input
                                    type="text"
                                    id="father_name"
                                    name="father_name"
                                    value="{{ old('father_name', $studentParent->father_name) }}"
                                    maxlength="150"
                                    placeholder="Enter father's full name"
                                    autocomplete="off"
                                    class="form-input w-full @error('father_name') border-danger @enderror"
                                    required
                                    autofocus
                                >

                                @error('father_name')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Mother Name --}}
                            <div>

                                <label
                                    for="mother_name"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Mother Name

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="text"
                                    id="mother_name"
                                    name="mother_name"
                                    value="{{ old('mother_name', $studentParent->mother_name) }}"
                                    maxlength="150"
                                    placeholder="Enter mother's full name"
                                    autocomplete="off"
                                    class="form-input w-full @error('mother_name') border-danger @enderror"
                                >

                                @error('mother_name')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Guardian Information
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Guardian Information
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Update guardian details when someone other than the parents is responsible for the student.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                            {{-- Guardian Name --}}
                            <div>

                                <label
                                    for="guardian_name"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Guardian Name

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="text"
                                    id="guardian_name"
                                    name="guardian_name"
                                    value="{{ old('guardian_name', $studentParent->guardian_name) }}"
                                    maxlength="150"
                                    placeholder="Enter guardian's full name"
                                    autocomplete="off"
                                    class="form-input w-full @error('guardian_name') border-danger @enderror"
                                >

                                @error('guardian_name')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Guardian Relation --}}
                            <div>

                                <label
                                    for="guardian_relation"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Relationship

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="text"
                                    id="guardian_relation"
                                    name="guardian_relation"
                                    value="{{ old('guardian_relation', $studentParent->guardian_relation) }}"
                                    maxlength="100"
                                    placeholder="e.g. Uncle, Aunt, Grandfather"
                                    autocomplete="off"
                                    class="form-input w-full @error('guardian_relation') border-danger @enderror"
                                >

                                @error('guardian_relation')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Guardian Phone --}}
                            <div>

                                <label
                                    for="guardian_phone"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Guardian Phone

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="tel"
                                    id="guardian_phone"
                                    name="guardian_phone"
                                    value="{{ old('guardian_phone', $studentParent->guardian_phone) }}"
                                    maxlength="20"
                                    placeholder="e.g. 98XXXXXXXX"
                                    autocomplete="tel"
                                    class="form-input w-full @error('guardian_phone') border-danger @enderror"
                                >

                                @error('guardian_phone')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Guardian Email --}}
                            <div>

                                <label
                                    for="guardian_email"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Guardian Email

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="email"
                                    id="guardian_email"
                                    name="guardian_email"
                                    value="{{ old('guardian_email', $studentParent->guardian_email) }}"
                                    maxlength="255"
                                    placeholder="guardian@example.com"
                                    autocomplete="email"
                                    class="form-input w-full @error('guardian_email') border-danger @enderror"
                                >

                                @error('guardian_email')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Contact Information
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Contact Information
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Update the contact details used by the school for communication.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                            {{-- Primary Phone --}}
                            <div>

                                <label
                                    for="primary_phone"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Primary Phone

                                    <span class="text-danger">
                                        *
                                    </span>
                                </label>

                                <input
                                    type="tel"
                                    id="primary_phone"
                                    name="primary_phone"
                                    value="{{ old('primary_phone', $studentParent->primary_phone) }}"
                                    maxlength="20"
                                    placeholder="e.g. 98XXXXXXXX"
                                    autocomplete="tel"
                                    class="form-input w-full @error('primary_phone') border-danger @enderror"
                                    required
                                >

                                @error('primary_phone')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    This is the family's primary contact number.
                                </p>

                            </div>


                            {{-- Alternate Phone --}}
                            <div>

                                <label
                                    for="alternate_phone"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Alternate Phone

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <input
                                    type="tel"
                                    id="alternate_phone"
                                    name="alternate_phone"
                                    value="{{ old('alternate_phone', $studentParent->alternate_phone) }}"
                                    maxlength="20"
                                    placeholder="Alternative contact number"
                                    autocomplete="off"
                                    class="form-input w-full @error('alternate_phone') border-danger @enderror"
                                >

                                @error('alternate_phone')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Email --}}
                            <div class="sm:col-span-2">

                                <label
                                    for="email"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Primary Email

                                    <span class="text-xs font-normal text-muted">
                                        (Optional)
                                    </span>
                                </label>

                                <div class="relative">

                                    <i class="fa-regular fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted"></i>

                                    <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        value="{{ old('email', $studentParent->email) }}"
                                        maxlength="255"
                                        placeholder="parent@example.com"
                                        autocomplete="email"
                                        class="form-input w-full pl-9 @error('email') border-danger @enderror"
                                    >

                                </div>

                                @error('email')

                                    <p class="mt-1.5 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Address
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Address
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Update the residential or correspondence address.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="mb-2 flex items-center justify-between gap-3">

                            <label
                                for="address"
                                class="block text-sm font-medium text-text"
                            >
                                Full Address

                                <span class="text-xs font-normal text-muted">
                                    (Optional)
                                </span>
                            </label>

                            <span
                                id="address-count"
                                class="text-xs text-muted"
                            >
                                0 / 1000
                            </span>

                        </div>


                        <textarea
                            id="address"
                            name="address"
                            rows="4"
                            maxlength="1000"
                            placeholder="Enter municipality, ward, district and other address information..."
                            class="form-input w-full resize-y @error('address') border-danger @enderror"
                        >{{ old('address', $studentParent->address) }}</textarea>

                        @error('address')

                            <p class="mt-1.5 text-xs text-danger">
                                {{ $message }}
                            </p>

                        @enderror

                    </div>

                </div>


                {{-- =================================================
                    Linked Students
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <div class="flex items-center justify-between gap-3">

                            <div>

                                <h2 class="text-base font-semibold text-text">
                                    Linked Students
                                </h2>

                                <p class="mt-1 text-xs text-muted">
                                    Students currently associated with this parent record.
                                </p>

                            </div>


                            <span class="badge-info">
                                {{ $studentParent->students()->count() }} Students
                            </span>

                        </div>

                    </div>


                    @php
                        $linkedStudents = $studentParent->students()
                            ->with([
                                'schoolClass',
                                'section',
                            ])
                            ->orderBy('first_name')
                            ->limit(5)
                            ->get();
                    @endphp


                    @if($linkedStudents->isNotEmpty())

                        <div class="divide-y divide-border">

                            @foreach($linkedStudents as $student)

                                <div class="flex items-center justify-between gap-4 px-5 py-3">

                                    <div class="flex min-w-0 items-center gap-3">

                                        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-semibold text-primary">
                                            {{ mb_strtoupper(mb_substr($student->first_name, 0, 1)) }}
                                        </div>


                                        <div class="min-w-0">

                                            <p class="truncate text-sm font-medium text-text">
                                                {{ $student->fullName() }}
                                            </p>

                                            <p class="mt-0.5 truncate text-xs text-muted">

                                                {{ $student->schoolClass?->name ?? 'No Class' }}

                                                @if($student->section)
                                                    • {{ $student->section->name }}
                                                @endif

                                            </p>

                                        </div>

                                    </div>


                                    @can('students.view')

                                        <a
                                            href="{{ route('students.show', $student) }}"
                                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                                            title="View student"
                                        >
                                            <i class="fa-regular fa-eye text-xs"></i>
                                        </a>

                                    @endcan

                                </div>

                            @endforeach

                        </div>


                        @if($studentParent->students()->count() > 5)

                            <div class="border-t border-border px-5 py-3">

                                <p class="text-xs text-muted">
                                    Showing 5 of {{ $studentParent->students()->count() }} linked students.
                                </p>

                            </div>

                        @endif

                    @else

                        <div class="px-5 py-8 text-center">

                            <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-background text-muted">
                                <i class="fa-solid fa-user-graduate"></i>
                            </div>

                            <p class="mt-3 text-sm font-medium text-text">
                                No students linked
                            </p>

                            <p class="mt-1 text-xs text-muted">
                                Students can be linked to this parent from the student module.
                            </p>

                        </div>

                    @endif

                </div>

            </div>


            {{-- ====================================================
                Sidebar
            ==================================================== --}}
            <div class="col-span-12 space-y-5 xl:col-span-4">

                {{-- =================================================
                    Update
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Update Parent
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Save changes made to this record.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="rounded-lg border border-info/20 bg-infoLight p-4">

                            <div class="flex items-start gap-3">

                                <i class="fa-solid fa-circle-info mt-0.5 text-info"></i>

                                <p class="text-xs leading-5 text-text">
                                    Updating this record will also update the parent information displayed for linked students.
                                </p>

                            </div>

                        </div>


                        <div class="mt-5 flex flex-col gap-2">

                            <button
                                type="submit"
                                id="submit-button"
                                class="btn btn-primary w-full justify-center"
                            >
                                <i class="fa-solid fa-check"></i>

                                <span id="submit-text">
                                    Save Changes
                                </span>
                            </button>


                            <a
                                href="{{ route('parents.index') }}"
                                class="btn btn-secondary w-full justify-center"
                            >
                                Cancel
                            </a>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Record Overview
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Record Overview
                        </h2>

                    </div>


                    <div class="divide-y divide-border">

                        <div class="flex items-center justify-between gap-4 px-5 py-3">

                            <span class="text-xs text-muted">
                                Parent
                            </span>

                            <span class="max-w-48 truncate text-sm font-medium text-text">
                                {{ $studentParent->displayName() }}
                            </span>

                        </div>


                        <div class="flex items-center justify-between gap-4 px-5 py-3">

                            <span class="text-xs text-muted">
                                Students
                            </span>

                            <span class="text-sm font-medium text-text">
                                {{ $studentParent->students()->count() }}
                            </span>

                        </div>


                        <div class="flex items-center justify-between gap-4 px-5 py-3">

                            <span class="text-xs text-muted">
                                Created
                            </span>

                            <span class="text-xs font-medium text-text">
                                {{ $studentParent->created_at?->format('d M Y') ?? '—' }}
                            </span>

                        </div>


                        <div class="flex items-center justify-between gap-4 px-5 py-3">

                            <span class="text-xs text-muted">
                                Last Updated
                            </span>

                            <span class="text-xs font-medium text-text">
                                {{ $studentParent->updated_at?->format('d M Y') ?? '—' }}
                            </span>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Communication
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Communication
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Manage communication preferences.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="space-y-4">

                            {{-- SMS --}}
                            <div class="rounded-lg border border-border p-4">

                                <div class="flex items-start justify-between gap-4">

                                    <div class="flex gap-3">

                                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                                            <i class="fa-solid fa-comment-sms"></i>
                                        </div>

                                        <div>

                                            <label
                                                for="sms_enabled"
                                                class="text-sm font-medium text-text"
                                            >
                                                SMS Notifications
                                            </label>

                                            <p class="mt-1 text-xs leading-5 text-muted">
                                                Send SMS to the primary phone.
                                            </p>

                                        </div>

                                    </div>


                                    <select
                                        id="sms_enabled"
                                        name="sms_enabled"
                                        class="form-select w-28 shrink-0 text-xs @error('sms_enabled') border-danger @enderror"
                                    >
                                        <option
                                            value="1"
                                            @selected(
                                                (string) old(
                                                    'sms_enabled',
                                                    (int) $studentParent->sms_enabled
                                                ) === '1'
                                            )
                                        >
                                            Enabled
                                        </option>

                                        <option
                                            value="0"
                                            @selected(
                                                (string) old(
                                                    'sms_enabled',
                                                    (int) $studentParent->sms_enabled
                                                ) === '0'
                                            )
                                        >
                                            Disabled
                                        </option>
                                    </select>

                                </div>

                                @error('sms_enabled')

                                    <p class="mt-2 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>


                            {{-- Email --}}
                            <div class="rounded-lg border border-border p-4">

                                <div class="flex items-start justify-between gap-4">

                                    <div class="flex gap-3">

                                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-infoLight text-info">
                                            <i class="fa-regular fa-envelope"></i>
                                        </div>

                                        <div>

                                            <label
                                                for="email_enabled"
                                                class="text-sm font-medium text-text"
                                            >
                                                Email Notifications
                                            </label>

                                            <p class="mt-1 text-xs leading-5 text-muted">
                                                Send notices by primary email.
                                            </p>

                                        </div>

                                    </div>


                                    <select
                                        id="email_enabled"
                                        name="email_enabled"
                                        class="form-select w-28 shrink-0 text-xs @error('email_enabled') border-danger @enderror"
                                    >
                                        <option
                                            value="1"
                                            @selected(
                                                (string) old(
                                                    'email_enabled',
                                                    (int) $studentParent->email_enabled
                                                ) === '1'
                                            )
                                        >
                                            Enabled
                                        </option>

                                        <option
                                            value="0"
                                            @selected(
                                                (string) old(
                                                    'email_enabled',
                                                    (int) $studentParent->email_enabled
                                                ) === '0'
                                            )
                                        >
                                            Disabled
                                        </option>
                                    </select>

                                </div>

                                @error('email_enabled')

                                    <p class="mt-2 text-xs text-danger">
                                        {{ $message }}
                                    </p>

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    Status
                ================================================= --}}
                <div class="card overflow-hidden">

                    <div class="border-b border-border px-5 py-4">

                        <h2 class="text-base font-semibold text-text">
                            Record Status
                        </h2>

                    </div>


                    <div class="p-5">

                        <label
                            for="is_active"
                            class="mb-2 block text-sm font-medium text-text"
                        >
                            Status

                            <span class="text-danger">
                                *
                            </span>
                        </label>


                        <select
                            id="is_active"
                            name="is_active"
                            class="form-select w-full @error('is_active') border-danger @enderror"
                            required
                        >

                            <option
                                value="1"
                                @selected(
                                    (string) old(
                                        'is_active',
                                        (int) $studentParent->is_active
                                    ) === '1'
                                )
                            >
                                Active
                            </option>

                            <option
                                value="0"
                                @selected(
                                    (string) old(
                                        'is_active',
                                        (int) $studentParent->is_active
                                    ) === '0'
                                )
                            >
                                Inactive
                            </option>

                        </select>


                        @error('is_active')

                            <p class="mt-1.5 text-xs text-danger">
                                {{ $message }}
                            </p>

                        @enderror


                        <p class="mt-1.5 text-xs leading-5 text-muted">
                            Inactive records remain stored but should not be used for new student assignments.
                        </p>

                    </div>

                </div>


                {{-- =================================================
                    Danger Zone
                ================================================= --}}
                @can('parents.delete')

                    <div class="card overflow-hidden">

                        <div class="border-b border-border px-5 py-4">

                            <h2 class="text-base font-semibold text-danger">
                                Danger Zone
                            </h2>

                            <p class="mt-1 text-xs text-muted">
                                Permanent record actions.
                            </p>

                        </div>


                        <div class="p-5">

                            @if($studentParent->students()->exists())

                                <div class="rounded-lg border border-warning/20 bg-warningLight p-4">

                                    <div class="flex items-start gap-3">

                                        <i class="fa-solid fa-triangle-exclamation mt-0.5 text-warning"></i>

                                        <div>

                                            <p class="text-sm font-medium text-text">
                                                Parent cannot be deleted
                                            </p>

                                            <p class="mt-1 text-xs leading-5 text-muted">
                                                This record has students assigned to it. Reassign those students before deleting the parent.
                                            </p>

                                        </div>

                                    </div>

                                </div>

                            @else

                                <p class="text-xs leading-5 text-muted">
                                    Delete this parent record if it is no longer required. This action cannot be undone from the application interface.
                                </p>


                                <button
                                    type="button"
                                    id="delete-parent-button"
                                    class="btn btn-danger mt-4 w-full justify-center"
                                >
                                    <i class="fa-regular fa-trash-can"></i>

                                    Delete Parent
                                </button>

                            @endif

                        </div>

                    </div>

                @endcan

            </div>

        </div>

    </form>

</div>


{{-- ================================================================
    Delete Form
================================================================ --}}
@can('parents.delete')

    @if(!$studentParent->students()->exists())

        <form
            id="delete-parent-form"
            action="{{ route('parents.destroy', $studentParent) }}"
            method="POST"
            class="hidden"
        >
            @csrf
            @method('DELETE')
        </form>

    @endif

@endcan

@endsection


@push('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | Elements
    |--------------------------------------------------------------------------
    */

    const form =
        document.getElementById('parent-form');

    const submitButton =
        document.getElementById('submit-button');

    const submitText =
        document.getElementById('submit-text');

    const address =
        document.getElementById('address');

    const addressCount =
        document.getElementById('address-count');

    const email =
        document.getElementById('email');

    const emailEnabled =
        document.getElementById('email_enabled');

    const deleteButton =
        document.getElementById('delete-parent-button');

    const deleteForm =
        document.getElementById('delete-parent-form');


    /*
    |--------------------------------------------------------------------------
    | Address Counter
    |--------------------------------------------------------------------------
    */

    function updateAddressCount() {

        if (!address || !addressCount) {
            return;
        }

        addressCount.textContent =
            `${address.value.length} / 1000`;

    }


    address?.addEventListener(
        'input',
        updateAddressCount
    );

    updateAddressCount();


    /*
    |--------------------------------------------------------------------------
    | Email Preference
    |--------------------------------------------------------------------------
    */

    function updateEmailPreference() {

        if (!email || !emailEnabled) {
            return;
        }


        if (
            email.value.trim() === '' &&
            emailEnabled.value === '1'
        ) {

            emailEnabled.title =
                'Add a primary email address to use email notifications';

        } else {

            emailEnabled.removeAttribute(
                'title'
            );

        }

    }


    email?.addEventListener(
        'input',
        updateEmailPreference
    );

    emailEnabled?.addEventListener(
        'change',
        updateEmailPreference
    );

    updateEmailPreference();


    /*
    |--------------------------------------------------------------------------
    | Prevent Duplicate Update
    |--------------------------------------------------------------------------
    */

    form?.addEventListener(
        'submit',
        function () {

            if (!submitButton) {
                return;
            }


            submitButton.disabled =
                true;

            submitButton.classList.add(
                'opacity-70',
                'cursor-not-allowed'
            );


            if (submitText) {

                submitText.textContent =
                    'Saving...';

            }

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Delete Parent
    |--------------------------------------------------------------------------
    */

    deleteButton?.addEventListener(
        'click',
        function () {

            if (!deleteForm) {
                return;
            }


            const confirmed =
                window.confirm(
                    'Are you sure you want to delete this parent record? This action cannot be undone.'
                );


            if (!confirmed) {
                return;
            }


            deleteButton.disabled =
                true;

            deleteButton.classList.add(
                'opacity-70',
                'cursor-not-allowed'
            );


            deleteForm.submit();

        }
    );

});
</script>

@endpush