@extends('layouts.app')

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

@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('teachers.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 teachers"
            >
                <i class="fa-solid fa-arrow-left text-sm"></i>
            </a>

            <div>

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

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

                    @if($teacher->is_active)

                        <span class="badge-success">
                            Active
                        </span>

                    @else

                        <span class="badge-danger">
                            Inactive
                        </span>

                    @endif

                </div>

                <p class="mt-1 text-sm text-muted">
                    Update {{ $teacher->fullName() }}'s personal and employment information.
                </p>

            </div>

        </div>


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

            <span>
                View Teacher
            </span>
        </a>

    </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="teacher-form"
        action="{{ route('teachers.update', $teacher) }}"
        method="POST"
        enctype="multipart/form-data"
    >

        @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">


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Update the teacher's personal information.
                        </p>

                    </div>


                    <div class="p-5">

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

                            {{-- Teacher ID --}}
                            <div>

                                <label
                                    for="teacher_id"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Teacher ID

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

                                <input
                                    type="text"
                                    id="teacher_id"
                                    name="teacher_id"
                                    value="{{ old('teacher_id', $teacher->teacher_id) }}"
                                    maxlength="50"
                                    autocomplete="off"
                                    class="form-input w-full @error('teacher_id') border-danger @enderror"
                                    required
                                    autofocus
                                >

                                @error('teacher_id')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Unique identification number for this teacher.
                                </p>

                            </div>


                            {{-- Gender --}}
                            <div>

                                <label
                                    for="gender"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Gender

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

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

                                    <option value="">
                                        Select gender
                                    </option>

                                    <option
                                        value="male"
                                        @selected(old('gender', $teacher->gender) === 'male')
                                    >
                                        Male
                                    </option>

                                    <option
                                        value="female"
                                        @selected(old('gender', $teacher->gender) === 'female')
                                    >
                                        Female
                                    </option>

                                    <option
                                        value="other"
                                        @selected(old('gender', $teacher->gender) === 'other')
                                    >
                                        Other
                                    </option>

                                </select>

                                @error('gender')

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

                                @enderror

                            </div>


                            {{-- First Name --}}
                            <div>

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

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

                                <input
                                    type="text"
                                    id="first_name"
                                    name="first_name"
                                    value="{{ old('first_name', $teacher->first_name) }}"
                                    maxlength="100"
                                    autocomplete="given-name"
                                    class="form-input w-full @error('first_name') border-danger @enderror"
                                    required
                                >

                                @error('first_name')

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

                                @enderror

                            </div>


                            {{-- Last Name --}}
                            <div>

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

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

                                <input
                                    type="text"
                                    id="last_name"
                                    name="last_name"
                                    value="{{ old('last_name', $teacher->last_name) }}"
                                    maxlength="100"
                                    autocomplete="family-name"
                                    class="form-input w-full @error('last_name') border-danger @enderror"
                                >

                                @error('last_name')

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

                                @enderror

                            </div>


                            {{-- Date of Birth --}}
                            <div>

                                <label
                                    for="date_of_birth"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Date of Birth

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

                                <input
                                    type="date"
                                    id="date_of_birth"
                                    name="date_of_birth"
                                    value="{{ old(
                                        'date_of_birth',
                                        $teacher->date_of_birth?->format('Y-m-d')
                                    ) }}"
                                    max="{{ now()->subDay()->format('Y-m-d') }}"
                                    class="form-input w-full @error('date_of_birth') border-danger @enderror"
                                >

                                @error('date_of_birth')

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

                                @enderror

                            </div>


                            {{-- Profile Photo --}}
                            <div>

                                <label
                                    for="profile_photo"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Replace Profile Photo

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

                                <input
                                    type="file"
                                    id="profile_photo"
                                    name="profile_photo"
                                    accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                                    class="form-input w-full @error('profile_photo') border-danger @enderror"
                                >

                                @error('profile_photo')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Leave empty to keep the current photo. Maximum 2 MB.
                                </p>

                            </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 phone, email and residential information.
                        </p>

                    </div>


                    <div class="p-5">

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

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

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

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

                                <input
                                    type="text"
                                    id="phone"
                                    name="phone"
                                    value="{{ old('phone', $teacher->phone) }}"
                                    maxlength="20"
                                    autocomplete="tel"
                                    class="form-input w-full @error('phone') border-danger @enderror"
                                    required
                                >

                                @error('phone')

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

                                @enderror

                            </div>


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

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

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

                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    value="{{ old('email', $teacher->email) }}"
                                    maxlength="255"
                                    autocomplete="email"
                                    class="form-input w-full @error('email') border-danger @enderror"
                                >

                                @error('email')

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

                                @enderror

                            </div>


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

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

                                    <label
                                        for="address"
                                        class="block text-sm font-medium text-text"
                                    >
                                        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="3"
                                    maxlength="1000"
                                    placeholder="Enter teacher's residential address..."
                                    class="form-input w-full resize-y @error('address') border-danger @enderror"
                                >{{ old('address', $teacher->address) }}</textarea>

                                @error('address')

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

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Manage designation, qualification and employment settings.
                        </p>

                    </div>


                    <div class="p-5">

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

                            {{-- Designation --}}
                            <div>

                                <label
                                    for="designation"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Designation

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

                                <input
                                    type="text"
                                    id="designation"
                                    name="designation"
                                    value="{{ old('designation', $teacher->designation) }}"
                                    maxlength="100"
                                    class="form-input w-full @error('designation') border-danger @enderror"
                                    required
                                >

                                @error('designation')

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

                                @enderror

                            </div>


                            {{-- Employment Type --}}
                            <div>

                                <label
                                    for="employment_type"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Employment Type

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

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

                                    <option value="">
                                        Select employment type
                                    </option>

                                    <option
                                        value="full_time"
                                        @selected(
                                            old(
                                                'employment_type',
                                                $teacher->employment_type
                                            ) === 'full_time'
                                        )
                                    >
                                        Full Time
                                    </option>

                                    <option
                                        value="part_time"
                                        @selected(
                                            old(
                                                'employment_type',
                                                $teacher->employment_type
                                            ) === 'part_time'
                                        )
                                    >
                                        Part Time
                                    </option>

                                    <option
                                        value="contract"
                                        @selected(
                                            old(
                                                'employment_type',
                                                $teacher->employment_type
                                            ) === 'contract'
                                        )
                                    >
                                        Contract
                                    </option>

                                    <option
                                        value="temporary"
                                        @selected(
                                            old(
                                                'employment_type',
                                                $teacher->employment_type
                                            ) === 'temporary'
                                        )
                                    >
                                        Temporary
                                    </option>

                                </select>

                                @error('employment_type')

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

                                @enderror

                            </div>


                            {{-- Joining Date --}}
                            <div>

                                <label
                                    for="joining_date"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Joining Date

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

                                <input
                                    type="date"
                                    id="joining_date"
                                    name="joining_date"
                                    value="{{ old(
                                        'joining_date',
                                        $teacher->joining_date?->format('Y-m-d')
                                    ) }}"
                                    class="form-input w-full @error('joining_date') border-danger @enderror"
                                    required
                                >

                                @error('joining_date')

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

                                @enderror

                            </div>


                            {{-- Qualification --}}
                            <div>

                                <label
                                    for="qualification"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Qualification

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

                                <input
                                    type="text"
                                    id="qualification"
                                    name="qualification"
                                    value="{{ old(
                                        'qualification',
                                        $teacher->qualification
                                    ) }}"
                                    maxlength="255"
                                    placeholder="e.g. M.Ed., B.Sc., B.Ed."
                                    class="form-input w-full @error('qualification') border-danger @enderror"
                                >

                                @error('qualification')

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

                                @enderror

                            </div>


                            {{-- Class Teacher --}}
                            <div>

                                <label
                                    for="is_class_teacher"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Class Teacher

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

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

                                    <option
                                        value="0"
                                        @selected(
                                            (string) old(
                                                'is_class_teacher',
                                                (int) $teacher->is_class_teacher
                                            ) === '0'
                                        )
                                    >
                                        No
                                    </option>

                                    <option
                                        value="1"
                                        @selected(
                                            (string) old(
                                                'is_class_teacher',
                                                (int) $teacher->is_class_teacher
                                            ) === '1'
                                        )
                                    >
                                        Yes
                                    </option>

                                </select>

                                @error('is_class_teacher')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Class and section assignment is managed separately.
                                </p>

                            </div>


                            {{-- Status --}}
                            <div>

                                <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) $teacher->is_active
                                            ) === '1'
                                        )
                                    >
                                        Active
                                    </option>

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

                                </select>

                                @error('is_active')

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

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            System information associated with this teacher.
                        </p>

                    </div>


                    <div class="grid grid-cols-1 divide-y divide-border sm:grid-cols-3 sm:divide-x sm:divide-y-0">

                        <div class="p-4">

                            <p class="text-xs font-medium text-muted">
                                Created
                            </p>

                            <p class="mt-1.5 text-sm font-medium text-text">
                                {{ $teacher->created_at?->format('d M Y') ?? '—' }}
                            </p>

                            <p class="mt-1 text-xs text-muted">
                                {{ $teacher->created_at?->format('h:i A') ?? '' }}
                            </p>

                        </div>


                        <div class="p-4">

                            <p class="text-xs font-medium text-muted">
                                Last Updated
                            </p>

                            <p class="mt-1.5 text-sm font-medium text-text">
                                {{ $teacher->updated_at?->format('d M Y') ?? '—' }}
                            </p>

                            <p class="mt-1 text-xs text-muted">
                                {{ $teacher->updated_at?->format('h:i A') ?? '' }}
                            </p>

                        </div>


                        <div class="p-4">

                            <p class="text-xs font-medium text-muted">
                                Assignments
                            </p>

                            <p class="mt-1.5 text-sm font-medium text-text">
                                {{ $teacher->assignments_count ?? $teacher->assignments()->count() }}
                            </p>

                            <p class="mt-1 text-xs text-muted">
                                Teacher assignments
                            </p>

                        </div>

                    </div>

                </div>

            </div>


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


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Current profile information.
                        </p>

                    </div>


                    <div class="p-5">

                        <div class="flex flex-col items-center text-center">

                            @if($teacher->hasPhoto())

                                <img
                                    id="photo-preview"
                                    src="{{ asset('storage/' . $teacher->profile_photo) }}"
                                    alt="{{ $teacher->fullName() }}"
                                    class="h-24 w-24 rounded-xl object-cover"
                                >

                                <div
                                    id="photo-placeholder"
                                    class="hidden h-24 w-24 items-center justify-center rounded-xl bg-primary/10 text-primary"
                                >
                                    <i class="fa-solid fa-user-tie text-3xl"></i>
                                </div>

                            @else

                                <img
                                    id="photo-preview"
                                    src=""
                                    alt="Teacher profile preview"
                                    class="hidden h-24 w-24 rounded-xl object-cover"
                                >

                                <div
                                    id="photo-placeholder"
                                    class="flex h-24 w-24 items-center justify-center rounded-xl bg-primary/10 text-primary"
                                >
                                    <i class="fa-solid fa-user-tie text-3xl"></i>
                                </div>

                            @endif


                            <p
                                id="preview-name"
                                class="mt-4 text-sm font-semibold text-text"
                            >
                                {{ $teacher->fullName() }}
                            </p>


                            <p
                                id="preview-designation"
                                class="mt-1 text-xs text-muted"
                            >
                                {{ $teacher->designation }}
                            </p>


                            <div class="mt-3 flex flex-wrap justify-center gap-2">

                                <span class="badge-info">
                                    {{ $teacher->teacher_id }}
                                </span>

                                @if($teacher->is_class_teacher)

                                    <span class="badge-success">
                                        Class Teacher
                                    </span>

                                @endif

                            </div>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                    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 Teacher
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Review changes before saving.
                        </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">
                                    Changes to teacher information will be reflected throughout the attendance system.
                                </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('teachers.show', $teacher) }}"
                                class="btn btn-secondary w-full justify-center"
                            >
                                Cancel
                            </a>

                        </div>

                    </div>

                </div>


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

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

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

                    </div>


                    <div class="p-5">

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

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

                                <span class="text-sm text-muted">
                                    Account Status
                                </span>

                                @if($teacher->is_active)

                                    <span class="badge-success">
                                        Active
                                    </span>

                                @else

                                    <span class="badge-danger">
                                        Inactive
                                    </span>

                                @endif

                            </div>


                            <div class="border-t border-border"></div>


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

                                <span class="text-sm text-muted">
                                    Class Teacher
                                </span>

                                @if($teacher->is_class_teacher)

                                    <span class="badge-success">
                                        Yes
                                    </span>

                                @else

                                    <span class="badge-secondary">
                                        No
                                    </span>

                                @endif

                            </div>


                            <div class="border-t border-border"></div>


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

                                <span class="text-sm text-muted">
                                    Employment
                                </span>

                                <span class="text-sm font-medium text-text">
                                    {{ str($teacher->employment_type)->replace('_', ' ')->title() }}
                                </span>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

@endsection


@push('scripts')

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

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

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

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

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

    const profilePhoto =
        document.getElementById('profile_photo');

    const photoPreview =
        document.getElementById('photo-preview');

    const photoPlaceholder =
        document.getElementById('photo-placeholder');

    const firstName =
        document.getElementById('first_name');

    const lastName =
        document.getElementById('last_name');

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

    const previewName =
        document.getElementById('preview-name');

    const previewDesignation =
        document.getElementById('preview-designation');

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

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


    /*
    |--------------------------------------------------------------------------
    | Profile Photo Preview
    |--------------------------------------------------------------------------
    */

    profilePhoto?.addEventListener('change', function () {

        const file =
            this.files?.[0];

        if (!file) {
            return;
        }

        if (!file.type.startsWith('image/')) {
            return;
        }


        const reader =
            new FileReader();


        reader.onload = function (event) {

            if (!photoPreview) {
                return;
            }

            photoPreview.src =
                event.target.result;

            photoPreview.classList.remove(
                'hidden'
            );

            photoPlaceholder?.classList.add(
                'hidden'
            );

        };


        reader.readAsDataURL(file);

    });


    /*
    |--------------------------------------------------------------------------
    | Name Preview
    |--------------------------------------------------------------------------
    */

    function updateNamePreview() {

        if (!previewName) {
            return;
        }

        const first =
            firstName?.value.trim() ?? '';

        const last =
            lastName?.value.trim() ?? '';

        const name =
            `${first} ${last}`.trim();

        previewName.textContent =
            name || 'Teacher';

    }


    firstName?.addEventListener(
        'input',
        updateNamePreview
    );

    lastName?.addEventListener(
        'input',
        updateNamePreview
    );


    /*
    |--------------------------------------------------------------------------
    | Designation Preview
    |--------------------------------------------------------------------------
    */

    function updateDesignationPreview() {

        if (!previewDesignation) {
            return;
        }

        previewDesignation.textContent =
            designation?.value.trim() ||
            'Designation';

    }


    designation?.addEventListener(
        'input',
        updateDesignationPreview
    );


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

    function updateAddressCount() {

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

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

    }


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

    updateAddressCount();


    /*
    |--------------------------------------------------------------------------
    | Prevent Duplicate Submission
    |--------------------------------------------------------------------------
    */

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

        if (!submitButton) {
            return;
        }

        submitButton.disabled =
            true;

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

        if (submitText) {

            submitText.textContent =
                'Saving...';

        }

    });

});
</script>

@endpush