@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <style>
        .ia-filters {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            flex-wrap: wrap;
            padding: 16px 0 8px;
        }
        .ia-filters .filter-group {
            display: flex;
            flex-direction: column;
            min-width: 220px;
        }
        .ia-filters .filter-group label {
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }
        .ia-filters .btn-clear {
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 13px;
            color: #1f2937;
            height: 38px;
        }
        .ia-filters .btn-clear:hover { background: #f3f4f6; }

        .program-pill {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .program-pill.prog-from { background: #eef2ff; color: #3730a3; }
        .program-pill.prog-to { background: #ecfdf5; color: #065f46; }

        #kt_table_initial_account .badge { font-weight: 600; }
    </style>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card card-page">
                <div class="card-body">
                    <div class="row gy-12 g-xl-12">
                        <div class="col-xxl-12">
                            <div class="card card-xxl-stretch">
                                <div class="card-header border-0 pt-5 pb-3 align-items-center">
                                    <div class="card-title d-flex flex-column">
                                        <h3 class="fw-bold text-gray-800 fs-2 mb-1">Initial Account</h3>
                                        <span class="text-muted fs-7">Carry-over balances and transfers between programs</span>
                                    </div>
                                </div>

                                <div class="card-body py-0">
                                    <div class="ia-filters">
                                        <div class="filter-group">
                                            <label for="filter_student">Student</label>
                                            <select id="filter_student" class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="All students">
                                                <option value="">All students</option>
                                                @foreach($students as $student)
                                                    <option value="{{ $student->id }}">{{ trim($student->first_name . ' ' . $student->last_name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="filter-group">
                                            <label for="filter_type">Type</label>
                                            <select id="filter_type" class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="All types">
                                                <option value="">All types</option>
                                                <option value="BALANCE">Balance</option>
                                                <option value="OVERPAY">Overpay</option>
                                            </select>
                                        </div>
                                        <div class="filter-group">
                                            <label for="filter_transfer">Transfer status</label>
                                            <select id="filter_transfer" class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="All">
                                                <option value="">All</option>
                                                <option value="YES">Transferred</option>
                                                <option value="NO">Not transferred</option>
                                            </select>
                                        </div>
                                        <button type="button" id="filter_clear" class="btn-clear">
                                            <i class="fa-solid fa-rotate-left me-1"></i> Clear
                                        </button>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_initial_account">
                                            <thead>
                                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                    <th class="min-w-30px">ID</th>
                                                    <th class="min-w-150px">Student</th>
                                                    <th class="min-w-125px">Transfer from</th>
                                                    <th class="min-w-100px">Amount</th>
                                                    <th class="min-w-100px">Type</th>
                                                    <th class="min-w-125px">Transfer to</th>
                                                    <th class="min-w-100px text-center">Transferred</th>
                                                    <th class="min-w-50px text-end"></th>
                                                </tr>
                                            </thead>
                                            <tbody class="fw-semibold text-gray-600"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        let iaTable;

        $(function() {
            $(".dropdown-toggle").dropdown();
            iaTable = buildTable();

            $('#filter_student, #filter_type, #filter_transfer').on('change', function() {
                iaTable.ajax.reload();
            });

            $('#filter_clear').on('click', function() {
                $('#filter_student, #filter_type, #filter_transfer').val('').trigger('change');
            });
        });

        function buildTable() {
            return $('#kt_table_initial_account').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('initial-account/list') }}",
                    data: function(d) {
                        d.student_id = $('#filter_student').val();
                        d.type = $('#filter_type').val();
                        d.is_transfer = $('#filter_transfer').val();
                    }
                },
                order: [[0, 'desc']],
                columns: [
                    {data: 'ID', name: 'ID'},
                    {data: 'student_name', name: 'student_name'},
                    {data: 'transfor_from', name: 'transfor_from'},
                    {data: 'amount', name: 'amount', className: 'text-end-not'},
                    {data: 'type', name: 'type'},
                    {data: 'transfor_to', name: 'transfor_to'},
                    {data: 'is_transfer', name: 'is_transfer', className: 'text-center'},
                    {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-end'}
                ]
            });
        }
    </script>
@endsection