@extends('layouts.app')

@section('title', 'Create Attendance Rule')

@section('page-title', 'Create Attendance Rule')

@section('content')

Create a new attendance rule for school timings, late attendance and attendance processing.

<a
    href="{{ route('attendance-rules.index') }}"
    class="btn btn-secondary"
>
    <i class="fa-solid fa-arrow-left"></i>
    Back
</a>


<form
    action="{{ route('attendance-rules.store') }}"
    method="POST"
    id="attendance-rule-form"
>
    @csrf

    <div class="card mt-5 overflow-hidden">

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

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

            <p class="mt-1 text-xs text-muted">
                Configure school timings, attendance thresholds and attendance processing options.
            </p>

        </div>


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


            {{-- ========================================================
                Basic Information
            ======================================================== --}}
            <div>

                <div class="mb-5">

                    <h3 class="text-sm font-semibold text-text">
                        Basic Information
                    </h3>

                    <p class="mt-1 text-xs text-muted">
                        Select the academic year and provide a name for this attendance rule.
                    </p>

                </div>


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

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

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

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

                        <p class="mt-1.5 text-xs text-muted">
                            The academic year this attendance rule applies to.
                        </p>

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

                    </div>


                    {{-- Rule Name --}}
                    <div>

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

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

                        <p class="mt-1.5 text-xs text-muted">
                            Enter a descriptive name for this attendance rule.
                        </p>

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

                    </div>

                </div>

            </div>


            {{-- ========================================================
                School Timing
            ======================================================== --}}
            <div class="mt-7 border-t border-border pt-6">

                <div class="mb-5">

                    <h3 class="text-sm font-semibold text-text">
                        School Timing
                    </h3>

                    <p class="mt-1 text-xs text-muted">
                        Define the official school time and allowed attendance punch windows.
                    </p>

                </div>


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

                    {{-- Check-In Start Time --}}
                    <div>

                        <label
                            for="check_in_start_time"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Check-In Start Time
                            <span class="text-danger">*</span>
                        </label>

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

                        <p class="mt-1.5 text-xs text-muted">
                            Earliest time students are allowed to check in.
                        </p>

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

                    </div>


                    {{-- Check-In End Time --}}
                    <div>

                        <label
                            for="check_in_end_time"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Check-In End Time
                            <span class="text-danger">*</span>
                        </label>

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

                        <p class="mt-1.5 text-xs text-muted">
                            Latest time allowed for the normal check-in window.
                        </p>

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

                    </div>


                    {{-- School Start Time --}}
                    <div>

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

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

                        <p class="mt-1.5 text-xs text-muted">
                            Official starting time of the school day.
                        </p>

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

                    </div>


                    {{-- School End Time --}}
                    <div>

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

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

                        <p class="mt-1.5 text-xs text-muted">
                            Official ending time of the school day.
                        </p>

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

                    </div>


                    {{-- Check-Out Start Time --}}
                    <div>

                        <label
                            for="check_out_start_time"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Check-Out Start Time
                        </label>

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

                        <p class="mt-1.5 text-xs text-muted">
                            Earliest time from which normal checkout is allowed.
                        </p>

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

                    </div>


                    {{-- Auto Checkout Time --}}
                    <div>

                        <label
                            for="auto_checkout_time"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Auto Checkout Time
                        </label>

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

                        <p class="mt-1.5 text-xs text-muted">
                            Time used for automatic checkout when auto checkout is enabled.
                        </p>

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

                    </div>

                </div>

            </div>


            {{-- ========================================================
                Attendance Thresholds
            ======================================================== --}}
            <div class="mt-7 border-t border-border pt-6">

                <div class="mb-5">

                    <h3 class="text-sm font-semibold text-text">
                        Attendance Thresholds
                    </h3>

                    <p class="mt-1 text-xs text-muted">
                        Configure grace time, late attendance, half-day and working-minute rules.
                    </p>

                </div>


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

                    {{-- Grace Minutes --}}
                    <div>

                        <label
                            for="grace_minutes"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Grace Minutes
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="grace_minutes"
                            name="grace_minutes"
                            value="{{ old('grace_minutes', 15) }}"
                            min="0"
                            max="120"
                            class="form-input w-full @error('grace_minutes') border-danger @enderror"
                            required
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Additional minutes allowed after school starts.
                        </p>

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

                    </div>


                    {{-- Late After Minutes --}}
                    <div>

                        <label
                            for="late_after_minutes"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Late After Minutes
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="late_after_minutes"
                            name="late_after_minutes"
                            value="{{ old('late_after_minutes', 15) }}"
                            min="0"
                            max="240"
                            class="form-input w-full @error('late_after_minutes') border-danger @enderror"
                            required
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Minutes after which attendance is considered late.
                        </p>

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

                    </div>


                    {{-- Half Day After Minutes --}}
                    <div>

                        <label
                            for="half_day_after_minutes"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Half Day After Minutes
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="half_day_after_minutes"
                            name="half_day_after_minutes"
                            value="{{ old('half_day_after_minutes', 180) }}"
                            min="0"
                            class="form-input w-full @error('half_day_after_minutes') border-danger @enderror"
                            required
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Delay threshold after which attendance becomes half-day.
                        </p>

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

                    </div>


                    {{-- Minimum Working Minutes --}}
                    <div>

                        <label
                            for="minimum_working_minutes"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Minimum Working Minutes
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="minimum_working_minutes"
                            name="minimum_working_minutes"
                            value="{{ old('minimum_working_minutes', 360) }}"
                            min="1"
                            class="form-input w-full @error('minimum_working_minutes') border-danger @enderror"
                            required
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Minimum attendance duration required for a full working day.
                        </p>

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

                    </div>


                    {{-- Early Leave Before Minutes --}}
                    <div>

                        <label
                            for="early_leave_before_minutes"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Early Leave Before Minutes
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="early_leave_before_minutes"
                            name="early_leave_before_minutes"
                            value="{{ old('early_leave_before_minutes', 30) }}"
                            min="0"
                            class="form-input w-full @error('early_leave_before_minutes') border-danger @enderror"
                            required
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Leaving this many minutes early will be recorded as early leave.
                        </p>

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

                    </div>

                </div>

            </div>


            {{-- ========================================================
                Attendance Processing
            ======================================================== --}}
            <div class="mt-7 border-t border-border pt-6">

                <div class="mb-5">

                    <h3 class="text-sm font-semibold text-text">
                        Attendance Processing
                    </h3>

                    <p class="mt-1 text-xs text-muted">
                        Control automatic checkout, manual attendance and multiple punch behaviour.
                    </p>

                </div>


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

                    {{-- Auto Checkout --}}
                    <div>

                        <label
                            for="auto_checkout"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Auto Checkout
                            <span class="text-danger">*</span>
                        </label>

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

                            <option
                                value="1"
                                @selected((string) old('auto_checkout') === '1')
                            >
                                Enabled
                            </option>
                        </select>

                        <p class="mt-1.5 text-xs text-muted">
                            Automatically checkout students who do not record a checkout punch.
                        </p>

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

                    </div>


                    {{-- Manual Attendance --}}
                    <div>

                        <label
                            for="allow_manual_attendance"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Manual Attendance
                            <span class="text-danger">*</span>
                        </label>

                        <select
                            id="allow_manual_attendance"
                            name="allow_manual_attendance"
                            class="form-select w-full @error('allow_manual_attendance') border-danger @enderror"
                            required
                        >
                            <option
                                value="1"
                                @selected((string) old('allow_manual_attendance', '1') === '1')
                            >
                                Allowed
                            </option>

                            <option
                                value="0"
                                @selected((string) old('allow_manual_attendance') === '0')
                            >
                                Not Allowed
                            </option>
                        </select>

                        <p class="mt-1.5 text-xs text-muted">
                            Allow authorized users to record attendance manually.
                        </p>

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

                    </div>


                    {{-- Manual Correction --}}
                    <div>

                        <label
                            for="allow_manual_correction"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Manual Correction
                            <span class="text-danger">*</span>
                        </label>

                        <select
                            id="allow_manual_correction"
                            name="allow_manual_correction"
                            class="form-select w-full @error('allow_manual_correction') border-danger @enderror"
                            required
                        >
                            <option
                                value="1"
                                @selected((string) old('allow_manual_correction', '1') === '1')
                            >
                                Allowed
                            </option>

                            <option
                                value="0"
                                @selected((string) old('allow_manual_correction') === '0')
                            >
                                Not Allowed
                            </option>
                        </select>

                        <p class="mt-1.5 text-xs text-muted">
                            Allow authorized users to correct attendance records manually.
                        </p>

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

                    </div>


                    {{-- Multiple Punch --}}
                    <div>

                        <label
                            for="allow_multiple_punch"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Multiple Punch
                            <span class="text-danger">*</span>
                        </label>

                        <select
                            id="allow_multiple_punch"
                            name="allow_multiple_punch"
                            class="form-select w-full @error('allow_multiple_punch') border-danger @enderror"
                            required
                        >
                            <option
                                value="1"
                                @selected((string) old('allow_multiple_punch', '1') === '1')
                            >
                                Allowed
                            </option>

                            <option
                                value="0"
                                @selected((string) old('allow_multiple_punch') === '0')
                            >
                                Not Allowed
                            </option>
                        </select>

                        <p class="mt-1.5 text-xs text-muted">
                            Allow more than one attendance punch during the same day.
                        </p>

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

                    </div>

                </div>

            </div>


            {{-- ========================================================
                Status
            ======================================================== --}}
            <div class="mt-7 border-t border-border pt-6">

                <div class="mb-5">

                    <h3 class="text-sm font-semibold text-text">
                        Rule Status
                    </h3>

                    <p class="mt-1 text-xs text-muted">
                        Control whether this attendance rule is currently available for attendance processing.
                    </p>

                </div>


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

                    {{-- 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((string) old('is_active', '1') === '1')
                            >
                                Active
                            </option>

                            <option
                                value="0"
                                @selected((string) old('is_active') === '0')
                            >
                                Inactive
                            </option>
                        </select>

                        <p class="mt-1.5 text-xs text-muted">
                            Inactive rules will not be used for new attendance processing.
                        </p>

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

                    </div>

                </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('attendance-rules.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 Attendance Rule
                </span>
            </button>

        </div>

    </div>

</form>

@endsection


@push('scripts')

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

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

    const form =
        document.getElementById('attendance-rule-form');

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

    const autoCheckout =
        document.getElementById('auto_checkout');

    const autoCheckoutTime =
        document.getElementById('auto_checkout_time');


    /*
    |--------------------------------------------------------------------------
    | Auto Checkout Time State
    |--------------------------------------------------------------------------
    */

    function updateAutoCheckoutState() {

        if (!autoCheckout || !autoCheckoutTime) {
            return;
        }

        const enabled =
            autoCheckout.value === '1';

        autoCheckoutTime.disabled =
            !enabled;

        if (!enabled) {

            autoCheckoutTime.value = '';

        }

    }


    autoCheckout?.addEventListener(
        'change',
        updateAutoCheckoutState
    );

    updateAutoCheckoutState();


    /*
    |--------------------------------------------------------------------------
    | Prevent Double Submission
    |--------------------------------------------------------------------------
    */

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

            if (!submitButton) {
                return;
            }

            submitButton.disabled =
                true;

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

            submitButton.innerHTML =
                '<i class="fa-solid fa-spinner fa-spin"></i><span>Saving...</span>';

        }
    );

});
</script>

@endpush