@extends('layouts.app')

@section('title', 'Sections')

@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>
            <h1 class="text-xl font-semibold text-text">
                Sections
            </h1>

            <p class="mt-1 text-sm text-muted">
                Manage class sections, capacity, student allocation and academic structure.
            </p>
        </div>

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

            @can('sections.view')
                <a
                    href="{{ route('sections.export', [
                        'search' => request('search'),
                        'academic_year_id' => request('academic_year_id'),
                        'class_id' => request('class_id'),
                        'status' => request('status'),
                    ]) }}"
                    class="btn btn-secondary"
                >
                    <i class="fa-solid fa-file-export"></i>
                    <span>Export CSV</span>
                </a>
            @endcan

            @can('sections.create')
                <a
                    href="{{ route('sections.create') }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-plus"></i>
                    <span>New Section</span>
                </a>
            @endcan

        </div>

    </div>


    {{-- ============================================================
        Filters
    ============================================================ --}}
    <div class="card p-4">

        <form
            id="section-filter-form"
            action="{{ route('sections.index') }}"
            method="GET"
            class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-12"
        >

            {{-- Search --}}
            <div class="relative md:col-span-2 xl:col-span-4">

                <label for="search" class="sr-only">
                    Search sections
                </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 section, class, code..."
                    autocomplete="off"
                    class="form-input w-full pl-9"
                >

            </div>


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

                <label for="academic_year_id" class="sr-only">
                    Academic Year
                </label>

                <select
                    id="academic_year_id"
                    name="academic_year_id"
                    class="form-select w-full"
                >
                    <option value="">
                        All Academic Years
                    </option>

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

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

            </div>


            {{-- Class --}}
            <div class="xl:col-span-2">

                <label for="class_id" class="sr-only">
                    Class
                </label>

                <select
                    id="class_id"
                    name="class_id"
                    class="form-select w-full"
                >
                    <option value="">
                        All Classes
                    </option>

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

                            @if($schoolClass->academicYear)
                                — {{ $schoolClass->academicYear->name }}
                            @endif
                        </option>
                    @endforeach
                </select>

            </div>


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

                <label for="status" class="sr-only">
                    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>


            {{-- Actions --}}
            <div class="flex gap-2 xl:col-span-2">

                <button
                    type="submit"
                    class="btn btn-secondary flex-1 justify-center"
                >
                    <i class="fa-solid fa-filter"></i>
                    <span>Filter</span>
                </button>

                @if(
                    filled(request('search')) ||
                    filled(request('academic_year_id')) ||
                    filled(request('class_id')) ||
                    (request('status') !== null && request('status') !== '')
                )
                    <a
                        href="{{ route('sections.index') }}"
                        class="btn btn-secondary px-3"
                        title="Reset filters"
                    >
                        <i class="fa-solid fa-rotate-left"></i>
                    </a>
                @endif

            </div>

        </form>

    </div>


    {{-- ============================================================
        Active Filters
    ============================================================ --}}
    @if(
        filled(request('search')) ||
        filled(request('academic_year_id')) ||
        filled(request('class_id')) ||
        (request('status') !== null && request('status') !== '')
    )

        @php
            $selectedAcademicYear = filled(request('academic_year_id'))
                ? $academicYears->firstWhere('id', (int) request('academic_year_id'))
                : null;

            $selectedClass = filled(request('class_id'))
                ? $schoolClasses->firstWhere('id', (int) request('class_id'))
                : null;
        @endphp

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

            <span class="text-xs font-medium text-muted">
                Active filters:
            </span>

            @if(filled(request('search')))
                <span class="badge-info">
                    {{-- <i class="fa-solid fa-magnifying-glass mr-1"></i> --}}
                    {{ request('search') }}
                </span>
            @endif

            @if($selectedAcademicYear)
                <span class="badge-info">
                    <i class="fa-regular fa-calendar mr-1"></i>
                    {{ $selectedAcademicYear->name }}
                </span>
            @endif

            @if($selectedClass)
                <span class="badge-info">
                    <i class="fa-solid fa-school mr-1"></i>
                    {{ $selectedClass->name }}
                </span>
            @endif

            @if(request('status') === '1')
                <span class="badge-success">
                    Active
                </span>
            @elseif(request('status') === '0')
                <span class="badge-danger">
                    Inactive
                </span>
            @endif

            <a
                href="{{ route('sections.index') }}"
                class="text-xs font-medium text-primary hover:underline"
            >
                Clear all
            </a>

        </div>

    @endif


    {{-- ============================================================
        Bulk Actions
    ============================================================ --}}
    @can('sections.delete')

        <div
            id="bulk-actions"
            class="hidden items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3"
        >

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

                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-check text-xs"></i>
                </div>

                <div>
                    <p
                        id="selected-count"
                        class="text-sm font-medium text-text"
                    >
                        0 selected
                    </p>

                    <p class="text-xs text-muted">
                        Selected sections
                    </p>
                </div>

            </div>

            <button
                type="button"
                id="bulk-delete-button"
                class="btn btn-danger"
            >
                <i class="fa-regular fa-trash-can"></i>
                <span>Delete Selected</span>
            </button>

        </div>

    @endcan


    {{-- ============================================================
        Sections 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">
                    Section List
                </h2>

                <p class="mt-1 text-xs text-muted">
                    @if($sections->total() > 0)
                        Showing
                        {{ number_format($sections->firstItem()) }}
                        to
                        {{ number_format($sections->lastItem()) }}
                        of
                        {{ number_format($sections->total()) }}
                        sections.
                    @else
                        No sections available.
                    @endif
                </p>
            </div>

            @if($sections->total() > 0)
                <div class="text-xs text-muted">
                    Page
                    <span class="font-medium text-text">
                        {{ $sections->currentPage() }}
                    </span>
                    of
                    <span class="font-medium text-text">
                        {{ $sections->lastPage() }}
                    </span>
                </div>
            @endif

        </div>


        <div class="overflow-x-auto">

            <table class="table">

                <thead>
                    <tr>

                        @can('sections.delete')
                            <th class="w-12">
                                <input
                                    type="checkbox"
                                    id="select-all"
                                    class="rounded border-border"
                                    aria-label="Select all sections"
                                >
                            </th>
                        @endcan

                        <th>
                            Section
                        </th>

                        <th>
                            Class
                        </th>

                        <th>
                            Academic Year
                        </th>

                        <th class="text-center">
                            Capacity
                        </th>

                        <th class="min-w-44">
                            Occupancy
                        </th>

                        <th class="text-center">
                            Available
                        </th>

                        <th>
                            Status
                        </th>

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

                    </tr>
                </thead>


                <tbody>

                    @forelse($sections as $section)

                        @php
                            $studentCount = (int) ($section->students_count ?? 0);

                            $capacity = (int) $section->capacity;

                            $availableSeats = max(
                                0,
                                $capacity - $studentCount
                            );

                            $occupancyPercentage = $capacity > 0
                                ? min(
                                    100,
                                    round(($studentCount / $capacity) * 100)
                                )
                                : 0;

                            $isFull = $capacity > 0 &&
                                $studentCount >= $capacity;
                        @endphp

                        <tr>

                            {{-- Checkbox --}}
                            @can('sections.delete')
                                <td>
                                    <input
                                        type="checkbox"
                                        value="{{ $section->id }}"
                                        class="row-checkbox rounded border-border"
                                        aria-label="Select {{ $section->name }}"
                                    >
                                </td>
                            @endcan


                            {{-- Section --}}
                            <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-solid fa-layer-group"></i>
                                    </div>

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

                                        @can('sections.view')
                                            <a
                                                href="{{ route('sections.show', $section) }}"
                                                class="block truncate text-sm font-medium text-text transition hover:text-primary"
                                            >
                                                {{ $section->name }}
                                            </a>
                                        @else
                                            <p class="truncate text-sm font-medium text-text">
                                                {{ $section->name }}
                                            </p>
                                        @endcan

                                        <p class="mt-1 text-xs text-muted">
                                            {{ $section->code ?: 'No code' }}
                                        </p>

                                    </div>

                                </div>

                            </td>


                            {{-- Class --}}
                            <td>

                                @if($section->schoolClass)

                                    <div>

                                        @can('school-classes.view')
                                            <a
                                                href="{{ route('school-classes.show', $section->schoolClass) }}"
                                                class="text-sm font-medium text-text transition hover:text-primary"
                                            >
                                                {{ $section->schoolClass->name }}
                                            </a>
                                        @else
                                            <p class="text-sm font-medium text-text">
                                                {{ $section->schoolClass->name }}
                                            </p>
                                        @endcan

                                        @if($section->schoolClass->code)
                                            <p class="mt-1 text-xs text-muted">
                                                {{ $section->schoolClass->code }}
                                            </p>
                                        @endif

                                    </div>

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

                            </td>


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

                                @if($section->schoolClass?->academicYear)

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

                                        <span class="whitespace-nowrap text-sm font-medium text-text">
                                            {{ $section->schoolClass->academicYear->name }}
                                        </span>

                                        @if($section->schoolClass->academicYear->is_current)
                                            <span class="badge-info">
                                                Current
                                            </span>
                                        @endif

                                    </div>

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

                            </td>


                            {{-- Capacity --}}
                            <td class="text-center">

                                <div>
                                    <p class="text-sm font-medium text-text">
                                        {{ number_format($studentCount) }}
                                        /
                                        {{ number_format($capacity) }}
                                    </p>

                                    <p class="mt-1 text-xs text-muted">
                                        Students
                                    </p>
                                </div>

                            </td>


                            {{-- Occupancy --}}
                            <td>

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

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

                                        <span class="text-xs text-muted">
                                            {{ $occupancyPercentage }}%
                                        </span>

                                        @if($isFull)
                                            <span class="text-xs font-medium text-danger">
                                                Full
                                            </span>
                                        @elseif($occupancyPercentage >= 80)
                                            <span class="text-xs font-medium text-warning">
                                                Nearly Full
                                            </span>
                                        @else
                                            <span class="text-xs font-medium text-success">
                                                Available
                                            </span>
                                        @endif

                                    </div>

                                    <div class="h-1.5 w-full overflow-hidden rounded-full bg-background">

                                        @if($isFull)

                                            <div
                                                class="h-full rounded-full bg-danger"
                                                style="width: {{ $occupancyPercentage }}%"
                                            ></div>

                                        @elseif($occupancyPercentage >= 80)

                                            <div
                                                class="h-full rounded-full bg-warning"
                                                style="width: {{ $occupancyPercentage }}%"
                                            ></div>

                                        @else

                                            <div
                                                class="h-full rounded-full bg-success"
                                                style="width: {{ $occupancyPercentage }}%"
                                            ></div>

                                        @endif

                                    </div>

                                </div>

                            </td>


                            {{-- Available Seats --}}
                            <td class="text-center">

                                @if($availableSeats <= 0)

                                    <span class="badge-danger">
                                        Full
                                    </span>

                                @elseif($availableSeats <= 5)

                                    <span class="rounded-lg bg-warningLight px-2 py-1 text-xs font-medium text-warning">
                                        {{ number_format($availableSeats) }}
                                    </span>

                                @else

                                    <span class="badge-success">
                                        {{ number_format($availableSeats) }}
                                    </span>

                                @endif

                            </td>


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

                                @if($section->is_active)

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

                                @else

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

                                @endif

                            </td>


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

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

                                    @can('sections.view')
                                        <a
                                            href="{{ route('sections.show', $section) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                                            title="View section"
                                            aria-label="View {{ $section->name }}"
                                        >
                                            <i class="fa-regular fa-eye text-xs"></i>
                                        </a>
                                    @endcan


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


                                    @can('sections.delete')
                                        <form
                                            action="{{ route('sections.destroy', $section) }}"
                                            method="POST"
                                            class="delete-form"
                                        >
                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                data-name="{{ $section->name }}"
                                                data-related="{{ ($section->students_count ?? 0) + ($section->teacher_assignments_count ?? 0) + ($section->attendances_count ?? 0) }}"
                                                class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-dangerLight hover:text-danger"
                                                title="Delete section"
                                                aria-label="Delete {{ $section->name }}"
                                            >
                                                <i class="fa-regular fa-trash-can text-xs"></i>
                                            </button>
                                        </form>
                                    @endcan

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="@can('sections.delete') 9 @else 8 @endcan"
                                class="py-14 text-center"
                            >

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

                                @if(
                                    filled(request('search')) ||
                                    filled(request('academic_year_id')) ||
                                    filled(request('class_id')) ||
                                    (request('status') !== null && request('status') !== '')
                                )

                                    <p class="mt-4 text-sm font-medium text-text">
                                        No matching sections found
                                    </p>

                                    <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                        No sections match the current search or filter criteria.
                                    </p>

                                    <a
                                        href="{{ route('sections.index') }}"
                                        class="btn btn-secondary mt-4"
                                    >
                                        <i class="fa-solid fa-rotate-left"></i>
                                        Clear Filters
                                    </a>

                                @else

                                    <p class="mt-4 text-sm font-medium text-text">
                                        No sections found
                                    </p>

                                    <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                        Create sections under your classes to organize students and attendance.
                                    </p>

                                    @can('sections.create')
                                        <a
                                            href="{{ route('sections.create') }}"
                                            class="btn btn-primary mt-4"
                                        >
                                            <i class="fa-solid fa-plus"></i>
                                            New Section
                                        </a>
                                    @endcan

                                @endif

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- ========================================================
            Pagination
        ======================================================== --}}
        @if($sections->hasPages())

            <div class="border-t border-border px-5 py-4">
                {{ $sections->withQueryString()->links() }}
            </div>

        @endif

    </div>

</div>


{{-- ================================================================
    Bulk Delete Form
================================================================ --}}
@can('sections.delete')

    <form
        id="bulk-delete-form"
        action="{{ route('sections.bulk-delete') }}"
        method="POST"
        class="hidden"
    >
        @csrf
        @method('DELETE')

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

@endcan

@endsection


@push('scripts')

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

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

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

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

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

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

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

    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-button');

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

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


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

    let searchTimer = null;

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

        clearTimeout(searchTimer);

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

    });


    /*
    |--------------------------------------------------------------------------
    | Academic Year Filter
    |--------------------------------------------------------------------------
    |
    | When an academic year changes, remove an incompatible selected class
    | before submitting the filter.
    |
    */

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

        const academicYearId =
            this.value;

        if (classFilter && classFilter.value) {

            const selectedOption =
                classFilter.options[
                    classFilter.selectedIndex
                ];

            const selectedClassAcademicYear =
                selectedOption?.dataset.academicYear;

            if (
                academicYearId &&
                selectedClassAcademicYear !== academicYearId
            ) {
                classFilter.value = '';
            }

        }

        filterForm?.submit();

    });


    /*
    |--------------------------------------------------------------------------
    | Class Filter
    |--------------------------------------------------------------------------
    */

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

        const selectedOption =
            this.options[this.selectedIndex];

        const academicYearId =
            selectedOption?.dataset.academicYear;

        /*
        | If a class is selected, automatically synchronize the academic
        | year filter with that class.
        */

        if (
            this.value &&
            academicYearFilter &&
            academicYearId
        ) {
            academicYearFilter.value =
                academicYearId;
        }

        filterForm?.submit();

    });


    /*
    |--------------------------------------------------------------------------
    | Status Filter
    |--------------------------------------------------------------------------
    */

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


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

    function getSelectedCheckboxes() {
        return document.querySelectorAll(
            '.row-checkbox:checked'
        );
    }


    /*
    |--------------------------------------------------------------------------
    | Bulk Action State
    |--------------------------------------------------------------------------
    */

    function updateBulkActions() {

        const selected =
            getSelectedCheckboxes();

        const count =
            selected.length;

        if (selectedCount) {
            selectedCount.textContent =
                `${count} selected`;
        }

        if (bulkActions) {

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

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

        }

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

    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 section.'
            );

            return;
        }

        const confirmed =
            window.confirm(
                `Are you sure you want to delete ${selected.length} selected section(s)? Sections containing students, teacher assignments or attendance records will be skipped automatically.`
            );

        if (!confirmed) {
            return;
        }

        if (
            !bulkDeleteForm ||
            !bulkDeleteInputs
        ) {
            return;
        }

        bulkDeleteInputs.innerHTML = '';

        selected.forEach(function (checkbox) {

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

            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = checkbox.value;

            bulkDeleteInputs.appendChild(input);

        });

        bulkDeleteButton.disabled = true;

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

        bulkDeleteForm.submit();

    });


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

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

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

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

                const name =
                    button?.dataset.name ??
                    'this section';

                const related =
                    Number(
                        button?.dataset.related ?? 0
                    );

                /*
                |--------------------------------------------------------------
                | Related Records
                |--------------------------------------------------------------
                */

                if (related > 0) {

                    event.preventDefault();

                    window.alert(
                        `"${name}" contains related students, teacher assignments or attendance records and cannot be deleted. Set it to inactive instead.`
                    );

                    return;
                }

                /*
                |--------------------------------------------------------------
                | Confirmation
                |--------------------------------------------------------------
                */

                const confirmed =
                    window.confirm(
                        `Are you sure you want to delete "${name}"? This action cannot be undone.`
                    );

                if (!confirmed) {
                    event.preventDefault();
                }

            });

        });


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

    updateBulkActions();

});
</script>

@endpush