@extends('layouts.app')

@section('title', 'All Transactions')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-semibold mb-0">All Transactions</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-4 col-sm-6">
                    <label class="form-label small mb-1">Date From</label>
                    <input type="date" class="form-control form-control-sm" id="fDateFrom">
                </div>

                <div class="col-md-4 col-sm-6">
                    <label class="form-label small mb-1">Date To</label>
                    <input type="date" class="form-control form-control-sm" id="fDateTo">
                </div>

                <div class="col-md-4 col-sm-6">
                    <label class="form-label small mb-1">Student</label>
                    <input type="text" class="form-control form-control-sm" id="fStudent" placeholder="Name or ID…">
                </div>

                <div class="col-md-4 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-4 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">Reason Type</label>
                    <select class="form-select form-select-sm" id="fReason">
                        <option value="">All</option>
                        <option value="admission_fee">Admission Fee</option>
                        <option value="exam_fee">Exam Fee</option>
                       <option value="betterment_fee">Betterment Fee</option>
                       <option value="monthly_fee">Monthly Fee</option>
                        <option value="other">Other</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="allTxTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th style="width:160px">Date</th>
                            <th style="width:100px">Month</th>
                            <th>Student</th>
                            <th style="width:130px">Trade</th>
                            <th style="width:110px">Session</th>
                            <th>Reason</th>
                            <th style="width:110px">Amount (₹)</th>
                            <th style="width:110px">Pending (₹)</th>
                            <th style="width:130px">Final Amount (₹)</th>
                            <th style="width:120px">Added By</th>
                            <th style="width:80px"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
(function () {
    const table = new DataTable('#allTxTable', {
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("transactions.data") }}',
            type: 'GET',
            data: d => {
                d.f_date_from = document.getElementById('fDateFrom').value;
                d.f_date_to   = document.getElementById('fDateTo').value;
                d.f_student   = document.getElementById('fStudent').value;
                d.f_trade     = document.getElementById('fTrade').value;
                d.f_branch    = document.getElementById('fBranch').value;
                d.f_session   = document.getElementById('fSession').value;
                d.f_reason    = document.getElementById('fReason').value;
            }
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            { data: 'payment_date', name: 'transactions.payment_date', searchable: false },
            { data: 'month', name: 'month', searchable: false },
            {
                data: 'student_name', name: 'students.name',
                render: (name, t, row) =>
                    `<a href="/students/${row.student_id}/transactions" class="text-decoration-none fw-medium">${name}</a>
                     <div class="small text-muted">${row.branch_name}</div>`
            },
            { data: 'trade_name',    name: 'trade_name',    orderable: false, searchable: false },
            { data: 'session_label', name: 'session_label', orderable: false, searchable: false },
            { data: 'reason',        name: 'transactions.reason' },
            {
                data: 'amount', name: 'transactions.amount', searchable: false,
                render: v => `₹${Number(v).toLocaleString('en-IN')}`
            },
            {
                data: 'discount', name: 'transactions.discount', searchable: false,
                render: v => v > 0
                    ? `<span class="text-success">₹${Number(v).toLocaleString('en-IN')}</span>`
                    : '—'
            },
            {
                data: 'final_amount', name: 'transactions.final_amount', searchable: false,
                render: v => `<strong>₹${Number(v).toLocaleString('en-IN')}</strong>`
            },
            { data: 'added_by', name: 'added_by', orderable: false, searchable: false },
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, row) =>
                    `<a href="/students/${row.student_id}/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>`
            },
        ],
        order: [[1, 'desc']],
        pageLength: 15,
        language: { processing: '<div class="spinner-border spinner-border-sm text-secondary"></div>' }
    });

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

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

    ['fStudent'].forEach(id => {
        document.getElementById(id).addEventListener('keydown', e => {
            if (e.key === 'Enter') table.ajax.reload();
        });
    });

    $('#fTrade, #fBranch, #fSession, #fReason').select2({ width: '100%', minimumResultsForSearch: 5 });
})();
</script>
@endpush