@extends('layouts.app')

@section('title', 'Transactions — ' . $student->name)

@section('content')
    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('students.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left"></i>
            </a>
            <div>
                <h5 class="fw-semibold mb-0">Transactions</h5>
                <small class="text-muted">{{ $student->name }}</small>
            </div>
        </div>
        <button class="btn btn-dark btn-sm" id="btnAddTransaction">
            <i class="bi bi-plus-lg me-1"></i> Add Transaction
        </button>
    </div>

    {{-- Student info card --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-3">
            <div class="row g-2 small text-muted">
                <div class="col-md-3">
                    <span class="fw-medium text-dark">Student ID:</span>
                    <span class="font-monospace ms-1">{{ $student->unique_id }}</span>
                </div>
                <div class="col-md-3">
                    <span class="fw-medium text-dark">Trade:</span>
                    <span class="ms-1">{{ $student->trade?->name ?? '—' }}</span>
                </div>
                <div class="col-md-3">
                    <span class="fw-medium text-dark">Session:</span>
                    <span class="ms-1">
                        {{ $student->session ? $student->session->year_from . ' – ' . $student->session->year_to : '—' }}
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="fw-medium text-dark">Branch:</span>
                    <span class="ms-1">{{ $student->branch?->name ?? '—' }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Transactions table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="p-3">
                <table id="txTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th>Reason</th>
                            <th style="width:120px">Month</th>
                            <th style="width:120px">Amount (₹)</th>
                            <th style="width:120px">Pending (₹)</th>
                            <th style="width:140px">Final Amount (₹)</th>
                            <th style="width:140px">Added By</th>
                            <th style="width:160px">Date</th>
                            <th style="width:130px">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('transactions.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    const studentId       = {{ $student->id }};
    const admissionFee    = {{ $student->trade?->admission_fee ?? 0 }};
    const examFee         = {{ $student->trade?->exam_fee ?? 0 }};
    const monthlyFee      = {{ $student->trade?->monthly_fee ?? 0 }};
    const isAdmin         = {{ auth()->user()->role === 'admin' ? 'true' : 'false' }};

    // ── DataTable ──────────────────────────────────────────────────────
    const table = new DataTable('#txTable', {
        processing: true,
        serverSide: true,
        ajax: {
            url: `/students/${studentId}/transactions/data`,
            type: 'GET',
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            { data: 'reason', name: 'reason' },
            {
                data: 'fee_month', name: 'fee_month', searchable: false,
                render: v => v || '<span class="text-muted">&mdash;</span>'
            },
            {
                data: 'amount', name: 'amount', searchable: false,
                render: v => `₹${Number(v).toLocaleString('en-IN')}`
            },
            {
                data: 'discount', name: 'discount', searchable: false,
                render: v => v > 0
                    ? `<span class="text-success">₹${Number(v).toLocaleString('en-IN')}</span>`
                    : '—'
            },
            {
                data: 'final_amount', name: 'final_amount', searchable: false,
                render: v => `<strong>₹${Number(v).toLocaleString('en-IN')}</strong>`
            },
            { data: 'added_by', name: 'added_by', orderable: false, searchable: false },
            { data: 'payment_date', name: 'created_at', searchable: false },
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, row) => {
                    let html = `<div class="d-flex gap-1">
                        <a href="/students/${studentId}/transactions/${row.id}/bill"
                           class="btn btn-sm btn-outline-secondary"
                           title="Download Bill" target="_blank">
                            <i class="bi bi-file-earmark-pdf"></i>
                        </a>`;
                    if (isAdmin) {
                        html += `
                        <button class="btn btn-sm btn-outline-secondary btn-edit-tx"
                                data-id="${row.id}"
                                data-reason="${row.reason}"
                                data-amount="${row.amount}"
                                data-discount="${row.discount}"
                                data-late-penalty="${row.late_penalty}"
                                title="Edit">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger btn-delete-tx"
                                data-id="${row.id}"
                                title="Delete">
                            <i class="bi bi-trash"></i>
                        </button>`;
                    }
                    html += `</div>`;
                    return html;
                }
            },
        ],
        order: [[7, 'desc']],
        pageLength: 15,
        language: { processing: '<div class="spinner-border spinner-border-sm text-secondary"></div>' }
    });

    // ── Add Transaction modal ─────────────────────────────────────────
    const addModalEl = document.getElementById('addTransactionModal');
    const addModal   = new bootstrap.Modal(addModalEl);
    const addForm    = document.getElementById('addTransactionForm');

    document.getElementById('btnAddTransaction').addEventListener('click', () => {
        addForm.reset();
        clearErrors(addForm);
        document.getElementById('txDiscount').value = 0;
        document.getElementById('txFinalAmount').value = '';
        document.getElementById('txAmount').readOnly = false;
        document.getElementById('customReasonRow').classList.add('d-none');
        document.getElementById('feeDateRow').classList.add('d-none');
        document.getElementById('txPaymentDate').value = '';
        document.getElementById('txFeeYear').value = new Date().getFullYear();
        document.getElementById('txFeeMonth').value = '';
        addModal.show();
    });

    // Reason type change → load fees or toggle fields
    document.getElementById('txReasonType').addEventListener('change', function () {
        const type        = this.value;
        const amountInput = document.getElementById('txAmount');
        const customRow   = document.getElementById('customReasonRow');
        const feeDateRow  = document.getElementById('feeDateRow');

        customRow.classList.add('d-none');
        feeDateRow.classList.add('d-none');

        if (type === 'admission_fee') {
            amountInput.value    = admissionFee;
            amountInput.readOnly = false;
        } else if (type === 'exam_fee') {
            amountInput.value    = examFee;
            amountInput.readOnly = false;
        } else if (type === 'monthly_fee') {
            amountInput.value    = monthlyFee;
            amountInput.readOnly = false;
            feeDateRow.classList.remove('d-none');
            const today = new Date().toLocaleDateString('en-CA');
            document.getElementById('txPaymentDate').value = today;
            document.getElementById('txFeeYear').value = today.slice(0, 4);
            document.getElementById('txFeeMonth').value = today.slice(5, 7);
        } else {
            amountInput.value    = '';
            amountInput.readOnly = false;
        }

        if (type === 'other') {
            customRow.classList.remove('d-none');
        }

        recalcFinal('txAmount', 'txDiscount', null, 'txFinalAmount');
    });

    // Auto-calculate final amount
    ['txAmount', 'txDiscount'].forEach(id => {
        document.getElementById(id).addEventListener('input', () =>
            recalcFinal('txAmount', 'txDiscount', null, 'txFinalAmount')
        );
    });

    addForm.addEventListener('submit', function (e) {
        e.preventDefault();
        clearErrors(addForm);
        const spinner = document.getElementById('addTxSpinner');
        spinner.classList.remove('d-none');

        $.ajax({
            url: `/students/${studentId}/transactions`,
            method: 'POST',
            data: {
                reason_type:   document.getElementById('txReasonType').value,
                custom_reason: document.getElementById('txCustomReason').value,
                payment_date:  document.getElementById('txPaymentDate').value,
                fee_month:     buildFeeMonth(),
                amount:        document.getElementById('txAmount').value,
                discount:      document.getElementById('txDiscount').value,
                remark:        document.getElementById('txRemark').value,
            },
            success: res => {
                addModal.hide();
                table.ajax.reload(null, false);
                toast('success', res.message);
            },
            error: xhr => {
                if (xhr.status === 422) showErrors(addForm, xhr.responseJSON.errors, {
                    reason_type:   'txReasonType',
                    custom_reason: 'txCustomReason',
                    payment_date:  'txPaymentDate',
                    fee_month:     'txFeeMonth',
                    amount:        'txAmount',
                    discount:      'txDiscount',
                });
                else toast('error', 'Something went wrong.');
            },
            complete: () => spinner.classList.add('d-none')
        });
    });

    // ── Edit Transaction modal (admin only) ───────────────────────────
    if (isAdmin) {
        const editModalEl = document.getElementById('editTransactionModal');
        const editModal   = new bootstrap.Modal(editModalEl);
        const editForm    = document.getElementById('editTransactionForm');

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

            clearErrors(editForm);
            document.getElementById('editTxId').value           = btn.dataset.id;
            document.getElementById('editTxReason').value       = btn.dataset.reason;
            document.getElementById('editTxAmount').value       = btn.dataset.amount;
            document.getElementById('editTxDiscount').value     = btn.dataset.discount;
            document.getElementById('editTxLatePenalty').value  = btn.dataset.latePenalty || 0;
            recalcFinal('editTxAmount', 'editTxDiscount', 'editTxLatePenalty', 'editTxFinalAmount');
            editModal.show();
        });

        ['editTxAmount', 'editTxDiscount', 'editTxLatePenalty'].forEach(id => {
            document.getElementById(id).addEventListener('input', () =>
                recalcFinal('editTxAmount', 'editTxDiscount', 'editTxLatePenalty', 'editTxFinalAmount')
            );
        });

        editForm.addEventListener('submit', function (e) {
            e.preventDefault();
            clearErrors(editForm);
            const txId   = document.getElementById('editTxId').value;
            const spinner = document.getElementById('editTxSpinner');
            spinner.classList.remove('d-none');

            $.ajax({
                url: `/students/${studentId}/transactions/${txId}`,
                method: 'PUT',
                data: {
                    reason:       document.getElementById('editTxReason').value,
                    amount:       document.getElementById('editTxAmount').value,
                    discount:     document.getElementById('editTxDiscount').value,
                    late_penalty: document.getElementById('editTxLatePenalty').value,
                },
                success: res => {
                    editModal.hide();
                    table.ajax.reload(null, false);
                    toast('success', res.message);
                },
                error: xhr => {
                    if (xhr.status === 422) showErrors(editForm, xhr.responseJSON.errors, {
                        reason:   'editTxReason',
                        amount:   'editTxAmount',
                        discount: 'editTxDiscount',
                    });
                    else toast('error', 'Something went wrong.');
                },
                complete: () => spinner.classList.add('d-none')
            });
        });

        // ── Delete ────────────────────────────────────────────────────
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.btn-delete-tx');
            if (!btn) return;

            Swal.fire({
                title: 'Delete this transaction?',
                text: 'This action cannot be undone.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
                confirmButtonColor: '#dc3545',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
            }).then(r => {
                if (!r.isConfirmed) return;
                $.ajax({
                    url: `/students/${studentId}/transactions/${btn.dataset.id}`,
                    method: 'DELETE',
                    success: res => { table.ajax.reload(null, false); toast('success', res.message); },
                    error:   ()  => toast('error', 'Something went wrong.')
                });
            });
        });
    }

    // ── Helpers ───────────────────────────────────────────────────────
    function recalcFinal(amountId, discountId, penaltyId, finalId) {
        const amount   = Math.max(0, parseInt(document.getElementById(amountId).value)  || 0);
        const discount = Math.max(0, parseInt(document.getElementById(discountId).value) || 0);
        const penalty  = penaltyId ? Math.max(0, parseInt(document.getElementById(penaltyId).value) || 0) : 0;
        document.getElementById(finalId).value = Math.max(0, amount - discount) + penalty;
    }

    function buildFeeMonth() {
        const year = document.getElementById('txFeeYear').value;
        const month = document.getElementById('txFeeMonth').value;

        return year && month ? `${year}-${month}-01` : '';
    }

    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