@extends('layouts.app')

@section('title', 'Create 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>

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

                <p class="mt-1 text-sm text-muted">
                    Add a new teacher and their employment information.
                </p>

            </div>

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

        @csrf

        <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">
                            Enter the teacher's basic 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') }}"
                                    maxlength="50"
                                    placeholder="e.g. TCH-001"
                                    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">
                                    Enter a 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') === 'male')
                                    >
                                        Male
                                    </option>

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

                                    <option
                                        value="other"
                                        @selected(old('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') }}"
                                    maxlength="100"
                                    placeholder="Enter first name"
                                    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') }}"
                                    maxlength="100"
                                    placeholder="Enter last name"
                                    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') }}"
                                    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"
                                >
                                    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">
                                    JPG, JPEG, PNG or WEBP. Maximum size 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">
                            Add the teacher's contact details and address.
                        </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') }}"
                                    maxlength="20"
                                    placeholder="e.g. 98XXXXXXXX"
                                    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') }}"
                                    maxlength="255"
                                    placeholder="teacher@example.com"
                                    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') }}</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">
                            Configure the teacher's designation and employment details.
                        </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') }}"
                                    maxlength="100"
                                    placeholder="e.g. Mathematics Teacher"
                                    autocomplete="off"
                                    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') === 'full_time')
                                    >
                                        Full Time
                                    </option>

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

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

                                    <option
                                        value="temporary"
                                        @selected(old('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') }}"
                                    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') }}"
                                    maxlength="255"
                                    placeholder="e.g. M.Ed., B.Sc., B.Ed."
                                    autocomplete="off"
                                    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(old('is_class_teacher', '0') === '0')
                                    >
                                        No
                                    </option>

                                    <option
                                        value="1"
                                        @selected(old('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 can be configured 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(old('is_active', '1') === '1')
                                    >
                                        Active
                                    </option>

                                    <option
                                        value="0"
                                        @selected(old('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 text-muted">
                                    Inactive teachers remain stored but should not receive new assignments.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            How this teacher will be used in the attendance system.
                        </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">

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

                            <p class="mt-3 text-sm font-medium text-text">
                                Class Teacher
                            </p>

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Teachers can be assigned as class teachers when required.
                            </p>

                        </div>


                        <div class="p-4">

                            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-infoLight text-info">
                                <i class="fa-solid fa-layer-group"></i>
                            </div>

                            <p class="mt-3 text-sm font-medium text-text">
                                Assignments
                            </p>

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Class and section assignments can be configured after saving.
                            </p>

                        </div>


                        <div class="p-4">

                            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-successLight text-success">
                                <i class="fa-solid fa-clipboard-user"></i>
                            </div>

                            <p class="mt-3 text-sm font-medium text-text">
                                Attendance
                            </p>

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Teacher assignments will later support student attendance management.
                            </p>

                        </div>

                    </div>

                </div>

            </div>


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


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Preview the selected teacher photo.
                        </p>

                    </div>


                    <div class="p-5">

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

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

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

                            <p
                                id="preview-name"
                                class="mt-4 text-sm font-semibold text-text"
                            >
                                New Teacher
                            </p>

                            <p
                                id="preview-designation"
                                class="mt-1 text-xs text-muted"
                            >
                                Designation
                            </p>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Review the information 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">
                                    Teacher ID and phone number must be unique. Email must also be unique when provided.
                                </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">
                                    Create Teacher
                                </span>
                            </button>


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

                        </div>

                    </div>

                </div>


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

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

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

                    </div>


                    <div class="p-5">

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

                            <div class="flex gap-3">

                                <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                    1
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-text">
                                        Personal Details
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Enter the teacher's ID, name, gender and basic information.
                                    </p>

                                </div>

                            </div>


                            <div class="flex gap-3">

                                <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                    2
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-text">
                                        Employment Details
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Set designation, employment type, joining date and qualification.
                                    </p>

                                </div>

                            </div>


                            <div class="flex gap-3">

                                <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                    3
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-text">
                                        Assign Classes
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        After saving, class and section assignments can be configured.
                                    </p>

                                </div>

                            </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) {

            if (photoPreview) {

                photoPreview.src = '';

                photoPreview.classList.add(
                    'hidden'
                );

            }

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

            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);

    });


    /*
    |--------------------------------------------------------------------------
    | Profile 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 || 'New Teacher';

    }


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

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

    updateNamePreview();


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

    function updateDesignationPreview() {

        if (!previewDesignation) {
            return;
        }

        const value =
            designation?.value.trim() ?? '';

        previewDesignation.textContent =
            value || 'Designation';

    }


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

    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 =
                'Creating...';

        }

    });

});
</script>

@endpush