@extends('layouts.app')

@section('title', 'Monthly Fee')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-semibold mb-0">Monthly Fee</h5>
    </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 / Phone</label>
                    <input type="text" class="form-control form-control-sm" id="fName" placeholder="Search name or phone…">
                </div>
                <div class="col-md-2 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-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">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">Month</label>
                    <input type="month" class="form-control form-control-sm" id="fMonth"
                           value="{{ now()->format('Y-m') }}">
                </div>
                <div class="col-md-1 col-sm-6">
                    <label class="form-label small mb-1">Status</label>
                    <select class="form-select form-select-sm" id="fStatus">
                        <option value="">All</option>
                        <option value="unpaid">Unpaid</option>
                        <option value="paid">Paid</option>
                    </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="mfTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th>Name / Phone</th>
                            <th style="width:140px">Trade</th>
                            <th style="width:120px">Session</th>
                            <th style="width:130px">Branch</th>
                            <th style="width:130px">Monthly Fee (₹)</th>
                            <th style="width:100px">Status</th>
                            <th style="width:120px">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('monthly-fee.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    // ── DataTable ──────────────────────────────────────────────────────
    const table = new DataTable('#mfTable', {
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("monthly-fee.data") }}',
            type: 'GET',
            data: d => {
                const [year, month] = (document.getElementById('fMonth').value || '').split('-');
                d.f_name    = document.getElementById('fName').value;
                d.f_trade   = document.getElementById('fTrade').value;
                d.f_branch  = document.getElementById('fBranch').value;
                d.f_session = document.getElementById('fSession').value;
                d.f_month   = month || '';
                d.f_year    = year  || '';
                d.f_status  = document.getElementById('fStatus').value;
            }
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            {
                data: 'name', name: 'name',
                render: (name, t, row) =>
                    `<div class="fw-medium">${name}</div>
                     <div class="text-muted small">${row.phone}</div>`
            },
            { data: 'trade_name',    name: 'trade_name',    orderable: false, searchable: false },
            { data: 'session_label', name: 'session_label', orderable: false, searchable: false },
            { data: 'branch_name',   name: 'branch_name',   orderable: false, searchable: false },
            {
                data: 'monthly_fee', name: 'monthly_fee', orderable: false, searchable: false,
                render: v => `₹${Number(v).toLocaleString('en-IN')}`
            },
            {
                data: 'is_paid', name: 'is_paid', orderable: false, searchable: false,
                render: (paid, t, row) => paid
                    ? `<span class="badge bg-success-subtle text-success border border-success-subtle">
                           Paid <small class="ms-1">₹${Number(row.tx_amount).toLocaleString('en-IN')}</small>
                       </span>`
                    : '<span class="badge bg-danger-subtle text-danger border border-danger-subtle">Unpaid</span>'
            },
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, row) => row.is_paid
                    ? `<a href="${row.bill_url}"
                          class="btn btn-sm btn-outline-secondary"
                          title="Download Bill" target="_blank">
                           <i class="bi bi-file-earmark-pdf me-1"></i> Bill
                       </a>`
                    : `<button class="btn btn-sm btn-outline-primary btn-pay-fee"
                               data-student-id="${row.id}"
                               data-student-name="${row.name}"
                               data-monthly-fee="${row.monthly_fee}"
                               title="Pay Fee">
                           <i class="bi bi-cash-coin me-1"></i> Pay Fee
                       </button>`
            },
        ],
        order: [[1, 'asc']],
        pageLength: 25,
        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', () => {
        document.getElementById('fName').value   = '';
        document.getElementById('fMonth').value  = '{{ now()->format("Y-m") }}';
        document.getElementById('fStatus').value = '';
        ['fTrade', 'fBranch', 'fSession'].forEach(id => {
            const el = document.getElementById(id);
            el.value = '';
            $(el).trigger('change');
        });
        table.ajax.reload();
    });

    document.getElementById('fName').addEventListener('keydown', e => {
        if (e.key === 'Enter') table.ajax.reload();
    });

    document.getElementById('fMonth').addEventListener('change', () => table.ajax.reload());
    document.getElementById('fStatus').addEventListener('change', () => table.ajax.reload());

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

    // ── Pay Fee Modal ──────────────────────────────────────────────────
    const modalEl = document.getElementById('payFeeModal');
    const modal   = new bootstrap.Modal(modalEl);
    const form    = document.getElementById('payFeeForm');

    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-pay-fee');
        if (!btn) return;

        clearErrors(form);
        form.reset();
        document.getElementById('mfStudentId').value       = btn.dataset.studentId;
        document.getElementById('mfStudentName').textContent = btn.dataset.studentName;
        document.getElementById('mfAmount').value          = btn.dataset.monthlyFee;
        document.getElementById('mfDiscount').value        = 0;
        document.getElementById('mfLatePenalty').value     = 0;
        document.getElementById('mfFeeMonth').value        = document.getElementById('fMonth').value;
        recalcFinal();
        modal.show();
    });

    ['mfDiscount', 'mfLatePenalty'].forEach(id =>
        document.getElementById(id).addEventListener('input', recalcFinal)
    );

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        clearErrors(form);
        const studentId = document.getElementById('mfStudentId').value;
        const spinner   = document.getElementById('payFeeSpinner');
        spinner.classList.remove('d-none');

        $.ajax({
            url: `/monthly-fee/${studentId}`,
            method: 'POST',
            data: {
                fee_month:    document.getElementById('mfFeeMonth').value,
                discount:     document.getElementById('mfDiscount').value,
                late_penalty: document.getElementById('mfLatePenalty').value,
                remark:       document.getElementById('mfRemark').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, {
                        fee_month:    'mfFeeMonth',
                        discount:     'mfDiscount',
                        late_penalty: 'mfLatePenalty',
                    });
                } else {
                    toast('error', 'Something went wrong.');
                }
            },
            complete: () => spinner.classList.add('d-none')
        });
    });

    // ── Helpers ────────────────────────────────────────────────────────
    function recalcFinal() {
        const amount   = Math.max(0, parseInt(document.getElementById('mfAmount').value)      || 0);
        const discount = Math.max(0, parseInt(document.getElementById('mfDiscount').value)    || 0);
        const penalty  = Math.max(0, parseInt(document.getElementById('mfLatePenalty').value) || 0);
        document.getElementById('mfFinalAmount').value = Math.max(0, amount - discount) + penalty;
    }

    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, fieldMap) {
        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