@extends('layouts.app')

@section('title', 'Sessions')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-semibold mb-0">Academic Sessions</h5>
        <button class="btn btn-dark btn-sm" id="btnAddSession">
            <i class="bi bi-plus-lg me-1"></i> Add Session
        </button>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="p-3">
                <table id="sessionsTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th>Session</th>
                            <th style="width:100px">Status</th>
                            <th style="width:130px">Created</th>
                            <th style="width:150px">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('sessions.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    // ── DataTable ──────────────────────────────────────────────
    const table = new DataTable('#sessionsTable', {
        processing: true,
        serverSide: true,
        ajax: { url: '{{ route("sessions.data") }}', type: 'GET' },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            { data: 'label', name: 'year_from' },
            {
                data: 'is_active', name: 'is_active', searchable: false,
                render: v => v
                    ? '<span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>'
                    : '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Blocked</span>'
            },
            { data: 'created_at', name: 'created_at', searchable: false },
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, row) => `
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-secondary btn-edit-session"
                                data-id="${row.id}"
                                data-year-from="${row.year_from}"
                                data-year-to="${row.year_to}"
                                title="Edit">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm ${row.is_active ? 'btn-outline-warning' : 'btn-outline-success'} btn-toggle-session"
                                data-id="${row.id}"
                                data-active="${row.is_active ? 1 : 0}"
                                title="${row.is_active ? 'Block' : 'Unblock'}">
                            <i class="bi bi-${row.is_active ? 'slash-circle' : 'check-circle'}"></i>
                            ${row.is_active ? 'Block' : 'Unblock'}
                        </button>
                    </div>`
            }
        ],
        order: [[1, 'desc']],
        pageLength: 10,
        language: { processing: '<div class="spinner-border spinner-border-sm text-secondary"></div>' }
    });

    // ── Modal helpers ──────────────────────────────────────────
    const modal   = new bootstrap.Modal(document.getElementById('sessionModal'));
    const form    = document.getElementById('sessionForm');
    const spinner = document.getElementById('sessionSpinner');

    function openModal(id = null, yearFrom = '', yearTo = '') {
        form.reset();
        clearErrors(form);
        document.getElementById('sessionId').value           = id ?? '';
        document.getElementById('sessionModalTitle').textContent = id ? 'Edit Session' : 'Add Session';
        document.getElementById('yearFrom').value            = yearFrom;
        document.getElementById('yearTo').value              = yearTo;
        modal.show();
    }

    // ── Open for create ────────────────────────────────────────
    document.getElementById('btnAddSession').addEventListener('click', () => openModal());

    // ── Open for edit ──────────────────────────────────────────
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-edit-session');
        if (btn) openModal(btn.dataset.id, btn.dataset.yearFrom, btn.dataset.yearTo);
    });

    // ── Toggle block / unblock ─────────────────────────────────
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-toggle-session');
        if (!btn) return;

        const id       = btn.dataset.id;
        const isActive = parseInt(btn.dataset.active);
        const action   = isActive ? 'Block' : 'Unblock';

        Swal.fire({
            title: `${action} this session?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: action,
            confirmButtonColor: isActive ? '#dc3545' : '#198754',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: `/sessions/${id}/toggle`,
                method: 'PATCH',
                success: res => { table.ajax.reload(null, false); toast('success', res.message); },
                error:   ()  => toast('error', 'Something went wrong.')
            });
        });
    });

    // ── Form submit (create + edit) ────────────────────────────
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const id  = document.getElementById('sessionId').value;
        const url = id ? `/sessions/${id}` : '{{ route("sessions.store") }}';

        clearErrors(form);
        spinner.classList.remove('d-none');

        $.ajax({
            url,
            method: id ? 'PUT' : 'POST',
            data: {
                year_from: document.getElementById('yearFrom').value,
                year_to:   document.getElementById('yearTo').value,
            },
            success: res => {
                modal.hide();
                table.ajax.reload(null, false);
                toast('success', res.message);
            },
            error: xhr => {
                if (xhr.status === 422) {
                    showErrors(form, xhr.responseJSON.errors);
                } else {
                    toast('error', 'Something went wrong.');
                }
            },
            complete: () => spinner.classList.add('d-none')
        });
    });

    // ── Utilities ──────────────────────────────────────────────
    function clearErrors(form) {
        form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        form.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
    }

    function showErrors(form, errors) {
        Object.entries(errors).forEach(([field, messages]) => {
            const fieldMap = { year_from: 'yearFrom', year_to: 'yearTo' };
            const inputId  = fieldMap[field] || field;
            const input    = document.getElementById(inputId);
            if (input) {
                input.classList.add('is-invalid');
                const fb = input.nextElementSibling;
                if (fb && fb.classList.contains('invalid-feedback')) fb.textContent = messages[0];
            }
        });
    }

    function toast(icon, title) {
        Swal.fire({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true, icon, title });
    }
})();
</script>
@endpush