@extends('layouts.app')

@section('title', 'Academic Years')

@section('page-title', 'Academic Years')

@section('page-description')
    Manage academic years, active periods and the current academic session.
@endsection

@section('content')

    {{-- ============================================================
        Toolbar
    ============================================================ --}}
    {{-- ============================================================
    Toolbar
============================================================ --}}
    <div class="card mb-5 p-4">

        <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">

            {{-- ========================================================
            Search & Filters
        ======================================================== --}}
            <form  id="academic-year-filter-form" action="{{ route('academic-years.index') }}" method="GET"
                class="flex flex-1 flex-col gap-3 sm:flex-row sm:items-center">

                {{-- Search --}}
                <div class="relative w-full sm:max-w-sm">

                    <label for="search" class="sr-only">
                        Search academic years
                    </label>

                    {{-- <i
                    class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted"
                ></i> --}}

                    <input type="search" id="search" name="search" value="{{ request('search') }}"
                        placeholder="Search academic year..." autocomplete="off" class="form-input w-full pl-9">

                </div>


                {{-- Status --}}
                <div class="w-full sm:w-44">

                    <label for="status" class="sr-only">
                        Filter by status
                    </label>

                    <select id="status" name="status" class="form-select w-full">

                        <option value="">
                            All Status
                        </option>

                        <option value="1" @selected(request('status') === '1')>
                            Active
                        </option>

                        <option value="0" @selected(request('status') === '0')>
                            Inactive
                        </option>

                    </select>

                </div>


                {{-- Current --}}
                <div class="w-full sm:w-44">

                    <label for="current" class="sr-only">
                        Filter current academic year
                    </label>

                    <select id="current" name="current" class="form-select w-full">

                        <option value="">
                            All Years
                        </option>

                        <option value="1" @selected(request('current') === '1')>
                            Current
                        </option>

                        <option value="0" @selected(request('current') === '0')>
                            Not Current
                        </option>

                    </select>

                </div>


                {{-- Filter --}}
                <button type="submit" class="btn btn-secondary shrink-0">
                    <i class="fa-solid fa-filter"></i>

                    <span>
                        Filter
                    </span>
                </button>


                {{-- Reset --}}
                @if (request()->hasAny(['search', 'status', 'current']))
                    <a href="{{ route('academic-years.index') }}" class="btn btn-secondary shrink-0">
                        <i class="fa-solid fa-rotate-left"></i>

                        <span>
                            Reset
                        </span>
                    </a>
                @endif

            </form>


            {{-- ========================================================
            Actions
        ======================================================== --}}
            <div class="flex flex-wrap items-center gap-2">

                {{-- @can('academic-years.view') --}}

                <a href="{{ route('academic-years.export', [
                    'search' => request('search'),
                    'status' => request('status'),
                    'current' => request('current'),
                ]) }}"
                    class="btn btn-secondary">
                    <i class="fa-solid fa-file-export"></i>

                    <span>
                        Export CSV
                    </span>
                </a>

                {{-- @endcan --}}


                {{-- @can('academic-years.create') --}}

                <a href="{{ route('academic-years.create') }}" class="btn btn-primary">
                    <i class="fa-solid fa-plus"></i>

                    <span>
                        New Academic Year
                    </span>
                </a>

                {{-- @endcan --}}

            </div>

        </div>

    </div>


    {{-- ============================================================
        Academic Years Table
    ============================================================ --}}
    <div class="card overflow-hidden">

        {{-- Table Header --}}
        <div class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

            <div>

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

                <p class="mt-1 text-xs text-muted">
                    {{ $academicYears->total() }}
                    {{ Str::plural('academic year', $academicYears->total()) }}
                    found
                </p>

            </div>

            {{-- Bulk Actions --}}
            <div id="bulk-actions" class="hidden items-center gap-2">

                <span id="selected-count" class="text-xs font-medium text-muted">
                    0 selected
                </span>

                {{-- @can('academic-years.delete') --}}
                    <button type="button" id="bulk-delete" class="btn btn-danger">
                        <i class="fa-regular fa-trash-can"></i>

                        <span>
                            Delete Selected
                        </span>
                    </button>
                {{-- @endcan --}}

            </div>

        </div>


        {{-- Desktop / Tablet Table --}}
        <div class="overflow-x-auto">

            <table class="table">

                <thead>

                    <tr>

                        <th class="w-12">

                            <input type="checkbox" id="select-all"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary/20"
                                aria-label="Select all academic years">

                        </th>

                        <th>
                            Academic Year
                        </th>

                        <th>
                            Start Date
                        </th>

                        <th>
                            End Date
                        </th>

                        <th>
                            Duration
                        </th>

                        <th>
                            Current
                        </th>

                        <th>
                            Status
                        </th>

                        <th class="text-right">
                            Actions
                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($academicYears as $academicYear)
                        <tr class="transition-colors hover:bg-background/70">

                            {{-- Checkbox --}}
                            <td>

                                <input type="checkbox" name="selected[]" value="{{ $academicYear->id }}"
                                    class="row-checkbox h-4 w-4 rounded border-border text-primary focus:ring-primary/20"
                                    aria-label="Select {{ $academicYear->name }}">

                            </td>


                            {{-- Academic Year --}}
                            <td>

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

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

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

                                        <p class="font-medium text-text">
                                            {{ $academicYear->name }}
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            Academic session
                                        </p>

                                    </div>

                                </div>

                            </td>


                            {{-- Start Date --}}
                            <td class="whitespace-nowrap text-sm text-text">

                                {{ $academicYear->start_date->format('d M Y') }}

                            </td>


                            {{-- End Date --}}
                            <td class="whitespace-nowrap text-sm text-text">

                                {{ $academicYear->end_date->format('d M Y') }}

                            </td>


                            {{-- Duration --}}
                            <td class="whitespace-nowrap">

                                <span class="text-sm text-muted">
                                    {{ $academicYear->start_date->diffInDays($academicYear->end_date) + 1 }}
                                    days
                                </span>

                            </td>


                            {{-- Current --}}
                            <td>

                                @if ($academicYear->is_current)
                                    <span class="badge-info gap-1.5">

                                        <span class="h-1.5 w-1.5 rounded-full bg-info"></span>

                                        Current

                                    </span>
                                @else
                                    <span class="text-xs text-muted">
                                        —
                                    </span>
                                @endif

                            </td>


                            {{-- Status --}}
                            <td>

                                @if ($academicYear->is_active)
                                    <span class="badge-success gap-1.5">

                                        <span class="h-1.5 w-1.5 rounded-full bg-success"></span>

                                        Active

                                    </span>
                                @else
                                    <span class="badge-danger gap-1.5">

                                        <span class="h-1.5 w-1.5 rounded-full bg-danger"></span>

                                        Inactive

                                    </span>
                                @endif

                            </td>


                            {{-- Actions --}}
                            <td>

                                <div class="flex items-center justify-start gap-1">

                                    <a href="{{ route('academic-years.show', $academicYear) }}"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-infoLight hover:text-info"
                                        title="View" aria-label="View {{ $academicYear->name }}">
                                        <i class="fa-regular fa-eye text-xs"></i>
                                    </a>

                                    <a href="{{ route('academic-years.edit', $academicYear) }}"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-primary/10 hover:text-primary"
                                        title="Edit" aria-label="Edit {{ $academicYear->name }}">
                                        <i class="fa-solid fa-pen text-xs"></i>
                                    </a>

                                    <form action="{{ route('academic-years.destroy', $academicYear) }}" method="POST"
                                        class="inline delete-form">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-dangerLight hover:text-danger"
                                            title="Delete" aria-label="Delete {{ $academicYear->name }}"
                                            data-name="{{ $academicYear->name }}">
                                            <i class="fa-regular fa-trash-can text-xs"></i>
                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="8" class="px-5 py-12 text-center">

                                <div
                                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-background text-muted">
                                    <i class="fa-regular fa-calendar-xmark text-lg"></i>
                                </div>

                                <h3 class="mt-4 text-sm font-semibold text-text">
                                    No academic years found
                                </h3>

                                <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">

                                    @if (request()->hasAny(['search', 'status', 'current']))
                                        No records match your current search or filters.
                                    @else
                                        Create your first academic year to begin organizing school records.
                                    @endif

                                </p>

                                <div class="mt-4">

                                    @if (request()->hasAny(['search', 'status', 'current']))
                                        <a href="{{ route('academic-years.index') }}" class="btn btn-secondary">
                                            <i class="fa-solid fa-rotate-left"></i>

                                            Clear Filters
                                        </a>
                                    @else
                                        <a href="{{ route('academic-years.create') }}" class="btn btn-primary">
                                            <i class="fa-solid fa-plus"></i>

                                            New Academic Year
                                        </a>
                                    @endif

                                </div>

                            </td>

                        </tr>
                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Pagination --}}
        @if ($academicYears->hasPages())
            <div
                class="flex flex-col gap-3 border-t border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

                <p class="text-xs text-muted">

                    Showing

                    <span class="font-medium text-text">
                        {{ $academicYears->firstItem() }}
                    </span>

                    to

                    <span class="font-medium text-text">
                        {{ $academicYears->lastItem() }}
                    </span>

                    of

                    <span class="font-medium text-text">
                        {{ $academicYears->total() }}
                    </span>

                    results

                </p>

                <div>
                    {{ $academicYears->withQueryString()->links() }}
                </div>

            </div>
        @endif

    </div>
    {{-- ============================================================
    Bulk Delete Form
============================================================ --}}
    <form id="bulk-delete-form" action="{{ route('academic-years.bulk-delete') }}" method="POST" class="hidden">
        @csrf
        @method('DELETE')

        <div id="bulk-delete-inputs"></div>
    </form>

@endsection

@push('scripts')

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

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

    const filterForm =
        document.getElementById('academic-year-filter-form');

    const searchInput =
        document.getElementById('search');

    const statusFilter =
        document.getElementById('status');

    const currentFilter =
        document.getElementById('current');

    const selectAll =
        document.getElementById('select-all');

    const rowCheckboxes =
        document.querySelectorAll('.row-checkbox');

    const bulkActions =
        document.getElementById('bulk-actions');

    const selectedCount =
        document.getElementById('selected-count');

    const bulkDeleteButton =
        document.getElementById('bulk-delete');

    const bulkDeleteForm =
        document.getElementById('bulk-delete-form');

    const bulkDeleteInputs =
        document.getElementById('bulk-delete-inputs');


    /*
    |--------------------------------------------------------------------------
    | Search
    |--------------------------------------------------------------------------
    */

    let searchTimer = null;

    if (searchInput && filterForm) {

        searchInput.addEventListener('input', function () {

            clearTimeout(searchTimer);

            searchTimer = setTimeout(function () {
                filterForm.submit();
            }, 500);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | Select Filters
    |--------------------------------------------------------------------------
    */

    statusFilter?.addEventListener('change', function () {
        filterForm?.submit();
    });

    currentFilter?.addEventListener('change', function () {
        filterForm?.submit();
    });


    /*
    |--------------------------------------------------------------------------
    | Selected Rows
    |--------------------------------------------------------------------------
    */

    function getSelectedCheckboxes() {

        return document.querySelectorAll(
            '.row-checkbox:checked'
        );

    }


    function updateBulkActions() {

        const selected =
            getSelectedCheckboxes();

        const count =
            selected.length;


        /*
        | Selected count
        */

        if (selectedCount) {

            selectedCount.textContent =
                `${count} selected`;

        }


        /*
        | Show / hide bulk toolbar
        */

        if (bulkActions) {

            bulkActions.classList.toggle(
                'hidden',
                count === 0
            );

            bulkActions.classList.toggle(
                'flex',
                count > 0
            );

        }


        /*
        | Select all state
        */

        if (selectAll) {

            selectAll.checked =
                rowCheckboxes.length > 0 &&
                count === rowCheckboxes.length;

            selectAll.indeterminate =
                count > 0 &&
                count < rowCheckboxes.length;

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Select All
    |--------------------------------------------------------------------------
    */

    selectAll?.addEventListener('change', function () {

        rowCheckboxes.forEach(function (checkbox) {

            checkbox.checked =
                selectAll.checked;

        });

        updateBulkActions();

    });


    /*
    |--------------------------------------------------------------------------
    | Individual Checkbox
    |--------------------------------------------------------------------------
    */

    rowCheckboxes.forEach(function (checkbox) {

        checkbox.addEventListener(
            'change',
            updateBulkActions
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Bulk Delete
    |--------------------------------------------------------------------------
    */

    bulkDeleteButton?.addEventListener(
        'click',
        function () {

            const selected =
                getSelectedCheckboxes();

            if (selected.length === 0) {

                window.alert(
                    'Please select at least one academic year.'
                );

                return;
            }


            const confirmed =
                window.confirm(
                    `Are you sure you want to delete ${selected.length} selected academic year(s)? The current academic year will be protected automatically.`
                );


            if (!confirmed) {
                return;
            }


            /*
            |--------------------------------------------------------------------------
            | Clear Previous Inputs
            |--------------------------------------------------------------------------
            */

            bulkDeleteInputs.innerHTML = '';


            /*
            |--------------------------------------------------------------------------
            | Add Selected IDs
            |--------------------------------------------------------------------------
            */

            selected.forEach(function (checkbox) {

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

                input.type = 'hidden';

                input.name = 'ids[]';

                input.value = checkbox.value;

                bulkDeleteInputs.appendChild(input);

            });


            /*
            |--------------------------------------------------------------------------
            | Submit
            |--------------------------------------------------------------------------
            */

            bulkDeleteButton.disabled = true;

            bulkDeleteForm.submit();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Individual Delete
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll('.delete-form')
        .forEach(function (form) {

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

                    const button =
                        form.querySelector(
                            '[data-name]'
                        );

                    const name =
                        button?.dataset.name ??
                        'this academic year';

                    const confirmed =
                        window.confirm(
                            `Are you sure you want to delete ${name}?`
                        );

                    if (!confirmed) {

                        event.preventDefault();

                    }

                }
            );

        });


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

    updateBulkActions();

});
</script>

@endpush