@extends('layouts.app')

@section('title', 'Create Class')

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

            <div>

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

                <p class="mt-1 text-sm text-muted">
                    Add a new class to the school's academic structure.
                </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="school-class-form"
        action="{{ route('school-classes.store') }}"
        method="POST"
    >

        @csrf

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

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

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

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

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

                        <p class="mt-1 text-xs text-muted">
                            Enter the primary information used to identify this class.
                        </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 this class belongs to.
                                </p>

                            </div>


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

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

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

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

                                @error('name')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Use a clear name such as Grade 1, Class 5 or Nursery.
                                </p>

                            </div>


                            {{-- Code --}}
                            <div>

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

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

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

                                @error('code')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    A short code used to identify the class.
                                </p>

                            </div>


                            {{-- Display Order --}}
                            <div>

                                <label
                                    for="display_order"
                                    class="mb-2 block text-sm font-medium text-text"
                                >
                                    Display Order
                                </label>

                                <input
                                    type="number"
                                    id="display_order"
                                    name="display_order"
                                    value="{{ old('display_order', 0) }}"
                                    min="0"
                                    max="9999"
                                    step="1"
                                    class="form-input w-full @error('display_order') border-danger @enderror"
                                >

                                @error('display_order')

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

                                @enderror

                                <p class="mt-1.5 text-xs text-muted">
                                    Lower numbers appear first in class lists.
                                </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 classes remain stored but should not be used for new assignments.
                                </p>

                            </div>


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

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

                                    <label
                                        for="description"
                                        class="block text-sm font-medium text-text"
                                    >
                                        Description

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

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

                                </div>

                                <textarea
                                    id="description"
                                    name="description"
                                    rows="4"
                                    maxlength="1000"
                                    placeholder="Add any additional information about this class..."
                                    class="form-input w-full resize-y @error('description') border-danger @enderror"
                                >{{ old('description') }}</textarea>

                                @error('description')

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

                                @enderror

                            </div>

                        </div>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-xs text-muted">
                            How this class will fit into 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-layer-group"></i>
                            </div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Sections can be created after the class has been saved.
                            </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-user-graduate"></i>
                            </div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Students can later be assigned to this class and its sections.
                            </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">
                                Attendance records will remain associated with this class.
                            </p>

                        </div>

                    </div>

                </div>

            </div>


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

                {{-- 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 Class
                        </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">
                                    Class names and codes must be unique within the selected academic year.
                                </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 Class
                                </span>
                            </button>


                            <a
                                href="{{ route('school-classes.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">
                                        Select Academic Year
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Choose the session in which the class will operate.
                                    </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">
                                        Enter Class Details
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        Provide a clear class name and optional short code.
                                    </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">
                                        Create Sections
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        After saving, create sections such as A, B or C under this class.
                                    </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('school-class-form');

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

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

    const codeInput =
        document.getElementById('code');

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

    const descriptionCount =
        document.getElementById('description-count');


    /*
    |--------------------------------------------------------------------------
    | Class Code
    |--------------------------------------------------------------------------
    |
    | Codes are stored uppercase by SchoolClassRequest as well.
    |
    */

    codeInput?.addEventListener('input', function () {

        const start =
            this.selectionStart;

        const end =
            this.selectionEnd;

        this.value =
            this.value.toUpperCase();

        this.setSelectionRange(
            start,
            end
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Description Counter
    |--------------------------------------------------------------------------
    */

    function updateDescriptionCount() {

        if (!description || !descriptionCount) {
            return;
        }

        const length =
            description.value.length;

        descriptionCount.textContent =
            `${length} / 1000`;

    }

    description?.addEventListener(
        'input',
        updateDescriptionCount
    );

    updateDescriptionCount();


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