@extends('layouts.app')

@section('title', 'Create Teacher Assignment')

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

            <div>

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

                <p class="mt-1 text-sm text-muted">
                    Assign a teacher to a class, section and subject for an academic year.
                </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-assignment-form"
        action="{{ route('teacher-assignments.store') }}"
        method="POST"
    >

        @csrf

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


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


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Select the academic year, teacher, class and section for this assignment.
                        </p>

                    </div>


                    <div class="p-5">

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


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

                                <label
                                    for="academic_year_id"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Academic Year

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

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

                                    <option value="">
                                        Select academic year
                                    </option>

                                    @foreach($academicYears as $academicYear)

                                        <option
                                            value="{{ $academicYear->id }}"
                                            @selected(
                                                (string) old('academic_year_id') ===
                                                (string) $academicYear->id
                                            )
                                        >
                                            {{ $academicYear->name }}

                                            @if($academicYear->is_current)
                                                — Current
                                            @endif
                                        </option>

                                    @endforeach

                                </select>

                                @error('academic_year_id')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Select the academic year in which this teaching assignment applies.
                                </p>

                            </div>


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

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

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

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

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

                                    @foreach($teachers as $teacher)

                                        <option
                                            value="{{ $teacher->id }}"
                                            @selected(
                                                (string) old('teacher_id') ===
                                                (string) $teacher->id
                                            )
                                        >
                                            {{ $teacher->fullName() }}

                                            @if($teacher->teacher_id)
                                                — {{ $teacher->teacher_id }}
                                            @endif

                                            @if($teacher->designation)
                                                — {{ $teacher->designation }}
                                            @endif
                                        </option>

                                    @endforeach

                                </select>

                                @error('teacher_id')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Choose the teacher who will be responsible for this assignment.
                                </p>

                            </div>


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

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

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

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

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

                                    @foreach($schoolClasses as $schoolClass)

                                        <option
                                            value="{{ $schoolClass->id }}"
                                            data-academic-year-id="{{ $schoolClass->academic_year_id }}"
                                            @selected(
                                                (string) old('class_id') ===
                                                (string) $schoolClass->id
                                            )
                                        >
                                            {{ $schoolClass->name }}

                                            @if($schoolClass->code)
                                                ({{ $schoolClass->code }})
                                            @endif
                                        </option>

                                    @endforeach

                                </select>

                                @error('class_id')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Classes are filtered according to the selected academic year.
                                </p>

                            </div>


                            {{-- Section --}}
                            <div>

                                <label
                                    for="section_id"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Section

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

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

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

                                    @foreach($sections as $section)

                                        <option
                                            value="{{ $section->id }}"
                                            data-class-id="{{ $section->class_id }}"
                                            @selected(
                                                (string) old('section_id') ===
                                                (string) $section->id
                                            )
                                        >
                                            {{ $section->name }}

                                            @if($section->code)
                                                ({{ $section->code }})
                                            @endif
                                        </option>

                                    @endforeach

                                </select>

                                @error('section_id')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Sections are filtered according to the selected class.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Define the subject, workload and teacher responsibility.
                        </p>

                    </div>


                    <div class="p-5">

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


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

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

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

                                <input
                                    type="text"
                                    id="subject_name"
                                    name="subject_name"
                                    value="{{ old('subject_name') }}"
                                    maxlength="100"
                                    placeholder="e.g. Mathematics"
                                    autocomplete="off"
                                    class="form-input w-full @error('subject_name') border-danger @enderror"
                                    required
                                >

                                @error('subject_name')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Enter the subject this teacher will teach in the selected class and section.
                                </p>

                            </div>


                            {{-- Periods Per Week --}}
                            <div>

                                <label
                                    for="periods_per_week"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Periods Per Week

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

                                <input
                                    type="number"
                                    id="periods_per_week"
                                    name="periods_per_week"
                                    value="{{ old('periods_per_week') }}"
                                    min="0"
                                    max="100"
                                    step="1"
                                    placeholder="e.g. 5"
                                    class="form-input w-full @error('periods_per_week') border-danger @enderror"
                                >

                                @error('periods_per_week')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Number of periods assigned to this teacher each week.
                                </p>

                            </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">
                                    Mark Yes if this teacher is responsible for the selected class and section.
                                </p>

                            </div>


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

                                <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 assignments remain stored but are excluded from active operations.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            How this assignment connects with the school 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">

                        {{-- Teacher --}}
                        <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">
                                Teacher
                            </p>

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Links the selected teacher with their teaching responsibility.
                            </p>

                        </div>


                        {{-- Class --}}
                        <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-school"></i>
                            </div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Defines where the teacher will perform this teaching assignment.
                            </p>

                        </div>


                        {{-- Subject --}}
                        <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-book-open"></i>
                            </div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Identifies the subject handled by the teacher for this assignment.
                            </p>

                        </div>

                    </div>

                </div>

            </div>


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


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

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

                        <h2 class="text-base font-semibold text-text">
                            Create Assignment
                        </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">
                                    Make sure the selected class belongs to the academic year and the section belongs to the selected class.
                                </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 Assignment
                                </span>
                            </button>


                            <a
                                href="{{ route('teacher-assignments.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">


                            {{-- Step 1 --}}
                            <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">
                                        Select Academic Year
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Choose the academic session for this teaching assignment.
                                    </p>

                                </div>

                            </div>


                            {{-- Step 2 --}}
                            <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">
                                        Select Teacher
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Choose the teacher who will handle the assignment.
                                    </p>

                                </div>

                            </div>


                            {{-- Step 3 --}}
                            <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">
                                        Choose Class & Section
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Select where the teacher will perform the assignment.
                                    </p>

                                </div>

                            </div>


                            {{-- Step 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">
                                    4
                                </div>

                                <div>

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

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Enter the subject and optional weekly teaching workload.
                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                {{-- ====================================================
                    Current Academic Year
                ==================================================== --}}
                @php
                    $currentAcademicYear = $academicYears->firstWhere(
                        'is_current',
                        true
                    );
                @endphp

                @if($currentAcademicYear)

                    <div class="card overflow-hidden">

                        <div class="p-5">

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

                                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                                    <i class="fa-regular fa-calendar-check"></i>
                                </div>

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

                                    <p class="text-xs font-medium text-muted">
                                        Current Academic Year
                                    </p>

                                    <p class="mt-1 text-sm font-semibold text-text">
                                        {{ $currentAcademicYear->name }}
                                    </p>

                                    @if(
                                        $currentAcademicYear->start_date &&
                                        $currentAcademicYear->end_date
                                    )

                                        <p class="mt-1 text-xs text-muted">
                                            {{ $currentAcademicYear->start_date->format('d M Y') }}
                                            –
                                            {{ $currentAcademicYear->end_date->format('d M Y') }}
                                        </p>

                                    @endif

                                </div>

                            </div>

                        </div>

                    </div>

                @endif

            </div>

        </div>

    </form>

</div>

@endsection


@push('scripts')

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

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

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

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

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

    const academicYearSelect =
        document.getElementById('academic_year_id');

    const classSelect =
        document.getElementById('class_id');

    const sectionSelect =
        document.getElementById('section_id');


    /*
    |--------------------------------------------------------------------------
    | Preserve Original Options
    |--------------------------------------------------------------------------
    */

    const classOptions =
        Array.from(classSelect.options)
            .filter(option => option.value)
            .map(option => ({
                value: option.value,
                text: option.textContent.trim(),
                academicYearId: option.dataset.academicYearId
            }));


    const sectionOptions =
        Array.from(sectionSelect.options)
            .filter(option => option.value)
            .map(option => ({
                value: option.value,
                text: option.textContent.trim(),
                classId: option.dataset.classId
            }));


    /*
    |--------------------------------------------------------------------------
    | Initial Selected Values
    |--------------------------------------------------------------------------
    */

    const initialClassId =
        @json((string) old('class_id', ''));

    const initialSectionId =
        @json((string) old('section_id', ''));


    /*
    |--------------------------------------------------------------------------
    | Populate Classes
    |--------------------------------------------------------------------------
    */

    function populateClasses(selectedValue = '') {

        const academicYearId =
            academicYearSelect.value;


        classSelect.innerHTML =
            '<option value="">Select class</option>';


        classOptions.forEach(function (item) {

            if (
                academicYearId &&
                String(item.academicYearId) !== String(academicYearId)
            ) {
                return;
            }


            const option =
                document.createElement('option');

            option.value =
                item.value;

            option.textContent =
                item.text;

            option.dataset.academicYearId =
                item.academicYearId;


            if (
                String(item.value) === String(selectedValue)
            ) {
                option.selected = true;
            }


            classSelect.appendChild(option);

        });


        classSelect.disabled =
            !academicYearId;

    }


    /*
    |--------------------------------------------------------------------------
    | Populate Sections
    |--------------------------------------------------------------------------
    */

    function populateSections(selectedValue = '') {

        const classId =
            classSelect.value;


        sectionSelect.innerHTML =
            '<option value="">Select section</option>';


        if (!classId) {

            sectionSelect.disabled = true;

            return;

        }


        sectionOptions.forEach(function (item) {

            if (
                String(item.classId) !== String(classId)
            ) {
                return;
            }


            const option =
                document.createElement('option');

            option.value =
                item.value;

            option.textContent =
                item.text;

            option.dataset.classId =
                item.classId;


            if (
                String(item.value) === String(selectedValue)
            ) {
                option.selected = true;
            }


            sectionSelect.appendChild(option);

        });


        sectionSelect.disabled = false;

    }


    /*
    |--------------------------------------------------------------------------
    | Academic Year Changed
    |--------------------------------------------------------------------------
    */

    academicYearSelect.addEventListener('change', function () {

        populateClasses('');

        populateSections('');

    });


    /*
    |--------------------------------------------------------------------------
    | Class Changed
    |--------------------------------------------------------------------------
    */

    classSelect.addEventListener('change', function () {

        populateSections('');

    });


    /*
    |--------------------------------------------------------------------------
    | Initial State
    |--------------------------------------------------------------------------
    */

    if (academicYearSelect.value) {

        populateClasses(initialClassId);

        populateSections(initialSectionId);

    } else {

        classSelect.disabled = true;

        sectionSelect.disabled = true;

    }


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