@extends('layouts.app')

@section('title', 'Create Academic Year')

@section('page-title', 'Create Academic Year')

@section('content')
{{-- @section('page-description') --}}
Create a new academic year for attendance and academic records.
{{-- @endsection --}}

{{-- @section('page-actions') --}}
    <a
        href="{{ route('academic-years.index') }}"
        class="btn btn-secondary"
    >
        <i class="fa-solid fa-arrow-left"></i>
        Back
    </a>
{{-- @endsection --}}


<form
    action="{{ route('academic-years.store') }}"
    method="POST"
    id="academic-year-form"
>
    @csrf

    <div class="card overflow-hidden">

        {{-- Header --}}
        <div class="border-b border-border px-5 py-4">
            <h2 class="text-base font-semibold text-text">
                Academic Year Information
            </h2>

            <p class="mt-1 text-xs text-muted">
                Enter the academic year period and its current status.
            </p>
        </div>

        {{-- Form --}}
        <div class="p-5 lg:p-6">

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

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

                    <label
                        for="name"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Academic Year
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        placeholder="e.g. 2083/2084"
                        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

                </div>

                {{-- Start Date --}}
                <div>

                    <label
                        for="start_date"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Start Date
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="date"
                        id="start_date"
                        name="start_date"
                        value="{{ old('start_date') }}"
                        class="form-input w-full @error('start_date') border-danger @enderror"
                        required
                    >

                    @error('start_date')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

                {{-- End Date --}}
                <div>

                    <label
                        for="end_date"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        End Date
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="date"
                        id="end_date"
                        name="end_date"
                        value="{{ old('end_date') }}"
                        class="form-input w-full @error('end_date') border-danger @enderror"
                        required
                    >

                    @error('end_date')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

                {{-- Current Academic Year --}}
                <div>

                    <label
                        for="is_current"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Current Academic Year
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="is_current"
                        name="is_current"
                        class="form-select w-full @error('is_current') border-danger @enderror"
                        required
                    >
                        <option value="0" @selected(old('is_current', '0') === '0')>
                            No
                        </option>

                        <option value="1" @selected(old('is_current') === '1')>
                            Yes
                        </option>
                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Mark this as the currently running academic year.
                    </p>

                    @error('is_current')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

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

                    <label
                        for="is_active"
                        class="mb-1.5 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>

                    <p class="mt-1.5 text-xs text-muted">
                        Inactive academic years will not be available for new records.
                    </p>

                    @error('is_active')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

            </div>

        </div>

        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-3 border-t border-border bg-background/50 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

            <a
                href="{{ route('academic-years.index') }}"
                class="btn btn-secondary"
            >
                Cancel
            </a>

            <button
                type="submit"
                class="btn btn-primary"
                id="submit-button"
            >
                <i class="fa-solid fa-floppy-disk"></i>

                <span>Save Academic Year</span>
            </button>

        </div>

    </div>

</form>

@endsection