@extends('layouts.app')

@section('title', 'Students')

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

    {{-- Filters --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-3 col-sm-6">
                    <label class="form-label small mb-1">Name</label>
                    <input type="text" class="form-control form-control-sm" id="fName" placeholder="Search name…">
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small mb-1">Phone</label>
                    <input type="text" class="form-control form-control-sm" id="fPhone" placeholder="Search phone…">
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small mb-1">Student ID</label>
                    <input type="text" class="form-control form-control-sm" id="fUuid" placeholder="Search ID…">
                </div>
                <div class="col-md-1 col-sm-6">
                    <label class="form-label small mb-1">Session</label>
                    <select class="form-select form-select-sm" id="fSession">
                        <option value="">All</option>
                        @foreach($sessions as $session)
                            <option value="{{ $session->id }}">{{ $session->year_from }}–{{ $session->year_to }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small mb-1">Branch</label>
                    <select class="form-select form-select-sm" id="fBranch">
                        <option value="">All</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1 col-sm-6">
                    <label class="form-label small mb-1">Trade</label>
                    <select class="form-select form-select-sm" id="fTrade">
                        <option value="">All</option>
                        @foreach($trades as $trade)
                            <option value="{{ $trade->id }}">{{ $trade->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1 col-sm-12 d-flex gap-2">
                    <button class="btn btn-dark btn-sm w-100" id="btnSearch">
                        <i class="bi bi-search"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm w-100" id="btnClear" title="Clear filters">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="p-3">
                <table id="studentsTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            {{-- <th style="width:280px">Student ID</th> --}}
                            <th style="width:180px">Unique Id</th>
                            <th>Name / Phone</th>
                            <th style="width:130px">Trade</th>
                            <th style="width:130px">Session</th>
                            <th style="width:130px">Branch</th>
                            <th style="width:100px">Status</th>
                            <th style="width:120px">Created</th>
                            <th style="width:160px">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('students.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    // ── DataTable ──────────────────────────────────────────────
    const table = new DataTable('#studentsTable', {
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("students.data") }}',
            type: 'GET',
            data: d => {
                d.f_name    = document.getElementById('fName').value;
                d.f_phone   = document.getElementById('fPhone').value;
                d.f_uuid    = document.getElementById('fUuid').value;
                d.f_session = document.getElementById('fSession').value;
                d.f_branch  = document.getElementById('fBranch').value;
                d.f_trade   = document.getElementById('fTrade').value;
            }
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            // {
            //     data: 'uuid', name: 'uuid',
            //     render: (uuid) =>
            //         `<span class="font-monospace text-muted small uuid-copy" role="button"
            //                title="Click to copy" data-uuid="${uuid}">${uuid}</span>`
            // },
            {
                data: 'unique_id', name: 'unique_id',
                render: (uniqueId) =>
                    uniqueId
                        ? `<span class="font-monospace small">${uniqueId}</span>`
                        : '<span class="text-muted">&mdash;</span>'
            },
            {
                data: 'name', name: 'name',
                render: (name, t, row) =>
                    `<div class="fw-medium">
                        <a href="/students/${row.id}/transactions"
                           class="text-decoration-none">
                            ${name}
                        </a>
                     </div>
                     <div class="text-muted small">${row.phone}</div>`
            },
            { data: 'trade_name', name: 'trade_id', searchable: false },
            { data: 'session_label', name: 'session_id', searchable: false },
            { data: 'branch_name', name: 'branch_id', searchable: false },
            {
                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-student"
                                data-id="${row.id}"
                                data-name="${row.name}"
                                data-phone="${row.phone}"
                                data-address="${row.address}"
                                data-branch-id="${row.branch_id}"
                                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-student"
                                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: [[7, 'desc']],
        pageLength: 15,
        language: { processing: '<div class="spinner-border spinner-border-sm text-secondary"></div>' }
    });

    // ── Filter buttons ─────────────────────────────────────────
    document.getElementById('btnSearch').addEventListener('click', () => table.ajax.reload());

    document.getElementById('btnClear').addEventListener('click', () => {
        ['fName', 'fPhone', 'fUuid'].forEach(id => document.getElementById(id).value = '');
        ['fSession', 'fBranch', 'fTrade'].forEach(id => {
            const el = document.getElementById(id);
            el.value = '';
            $(el).trigger('change');
        });
        table.ajax.reload();
    });

    // Reload on Enter key in text filters
    ['fName', 'fPhone', 'fUuid'].forEach(id => {
        document.getElementById(id).addEventListener('keydown', e => {
            if (e.key === 'Enter') table.ajax.reload();
        });
    });

    // ── Select2 for filter dropdowns ──────────────────────────
    if (typeof $.fn.select2 === 'function') {
        $('#fSession, #fBranch, #fTrade').select2({ width: '100%', minimumResultsForSearch: 5 });
    }

    // ── Modal helpers ──────────────────────────────────────────
    const modalEl  = document.getElementById('studentModal');
    const modal    = new bootstrap.Modal(modalEl);
    const form     = document.getElementById('studentForm');
    const spinner  = document.getElementById('studentSpinner');
    const tradeRow = document.getElementById('tradeRow');
    const sessionRow   = document.getElementById('sessionRow');
    const immutableNotice = document.getElementById('immutableNotice');

    // Init Select2 inside modal (must use dropdownParent)
    modalEl.addEventListener('shown.bs.modal', () => {
        if (typeof $.fn.select2 === 'function') {
            $('#studentTrade, #studentSession, #studentBranch').select2({
                dropdownParent: $(modalEl),
                width: '100%',
            });
        }
    });

    function openModal(data = null) {
        form.reset();
        clearErrors(form);

        // Reset Select2 values
        $('#studentTrade, #studentSession, #studentBranch').val('').trigger('change');

        if (data) {
            // Edit mode — hide trade/session
            document.getElementById('studentModalTitle').textContent = 'Edit Student';
            document.getElementById('studentId').value = data.id;
            document.getElementById('studentName').value    = data.name;
            document.getElementById('studentPhone').value   = data.phone;
            document.getElementById('studentAddress').value = data.address;
            $('#studentBranch').val(data.branch_id).trigger('change');

            tradeRow.classList.add('d-none');
            sessionRow.classList.add('d-none');
            immutableNotice.classList.remove('d-none');
        } else {
            // Add mode — show trade/session
            document.getElementById('studentModalTitle').textContent = 'Add Student';
            document.getElementById('studentId').value = '';

            tradeRow.classList.remove('d-none');
            sessionRow.classList.remove('d-none');
            immutableNotice.classList.add('d-none');
        }

        modal.show();
    }

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

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

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

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

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

    // ── Copy UUID on click ─────────────────────────────────────
    document.addEventListener('click', function (e) {
        const el = e.target.closest('.uuid-copy');
        if (!el) return;
        navigator.clipboard.writeText(el.dataset.uuid).then(() => {
            toast('success', 'Student ID copied to clipboard.');
        });
    });

    // ── Form submit (create + edit) ────────────────────────────
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const id = document.getElementById('studentId').value;
        submitForm(id, false);
    });

    function submitForm(id, force) {
        const url = id ? `/students/${id}` : '{{ route("students.store") }}';

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

        const payload = {
            name:      document.getElementById('studentName').value,
            phone:     document.getElementById('studentPhone').value,
            address:   document.getElementById('studentAddress').value,
            branch_id: document.getElementById('studentBranch').value,
        };

        if (!id) {
            payload.trade_id   = document.getElementById('studentTrade').value;
            payload.session_id = document.getElementById('studentSession').value;
        }

        if (force) {
            payload.force = 1;
        }

        $.ajax({
            url,
            method: id ? 'PUT' : 'POST',
            data: payload,
            success: res => {
                if (res.requires_confirmation) {
                    spinner.classList.add('d-none');
                    Swal.fire({
                        title: 'Duplicate Phone Number',
                        html: `This phone number already exists for student ID: <code class="user-select-all">${res.existing_uuid}</code>.<br>Do you still want to continue?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, continue',
                        cancelButtonText: 'Cancel',
                        reverseButtons: true,
                        confirmButtonColor: '#0d6efd',
                    }).then(r => {
                        if (r.isConfirmed) submitForm(id, true);
                    });
                    return;
                }
                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) {
        const fieldMap = {
            name:       'studentName',
            phone:      'studentPhone',
            address:    'studentAddress',
            trade_id:   'studentTrade',
            session_id: 'studentSession',
            branch_id:  'studentBranch',
        };
        Object.entries(errors).forEach(([field, messages]) => {
            const inputId = fieldMap[field] || field;
            const input   = form.querySelector(`#${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