<div class="container mt-4">
    <div class="card modern-card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">
            
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">History Kunjungan</h5>
                <input type="text" id="dateRangeFilter" class="form-control me-2" placeholder="Pilih rentang waktu..." style="max-width: 200px;">
            </div>

            <div class="table-responsive">
                <table id="tableHistory" class="table modern-table align-middle w-100">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>NIS</th>
                            <th>Kelas</th>
                            <th>Kamar</th>
                            <th>Nama Wali</th>
                            <th>Alamat</th>
                            <th>Jam Masuk</th>
                            <th>Petugas Masuk</th>
                            <th>Jam Keluar</th>
                            <th>Petugas Keluar</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<script>
$(document).ready(function() {

    let isInitialLoad = true;
    $('#dateRangeFilter').val('');

    $('#dateRangeFilter').daterangepicker({
        autoUpdateInput: false,
        locale: { cancelLabel: false, format: 'YYYY-MM-DD' },
        linkedCalendars: false
    });

    $('#dateRangeFilter').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        table.ajax.reload();
    });

    $('#dateRangeFilter').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        table.ajax.reload();
    });

    let table = $('#tableHistory').DataTable({
        dom: '<"dataTables_top d-flex justify-content-between mb-3"l f>rtip',
        processing: true,
        serverSide: true,
        responsive: false,
        autoWidth: false,
        order: [],
        ajax: {
            url: "<?= base_url('history/get_data'); ?>",
            type: "POST",
            data: function(d) {
                if (isInitialLoad) { isInitialLoad = false; return; }

                let dateVal = $('#dateRangeFilter').val();
                if (dateVal) {
                    let dates = dateVal.split(' - ');
                    if (dates[0]) d.startDate = dates[0];
                    if (dates[1]) d.endDate = dates[1];
                }
                // jika dateVal kosong, startDate dan endDate tidak dikirim
            }
        },
        columns: [
            { data: 0, orderable: false }, // No
            { data: 1 }, // Nama
            { data: 2 }, // NIS
            { data: 3 }, // Kelas
            { data: 4 }, // Kelas
            { data: 5 }, // Nama Wali
            { data: 6 }, // Alamat
            { 
                data: 7, // Jam Masuk
                render: function(data) { return data ? data : ''; }
            },
            { 
                data: 8, // Media Masuk
                orderable: false,
                render: function(data) { return data ? data : ''; }
            },
            { 
                data: 9, // Jam Keluar
                render: function(data) { return data ? data : ''; }
            },
            { 
                data: 10, // Media Keluar
                orderable: false,
                render: function(data) { return data ? data : ''; }
            }
        ],
        language: {
            processing: `<div class="d-flex justify-content-center"><div class="spinner-border text-success"></div></div>`
        }
    });

    $('.dataTables_filter input').attr('placeholder', 'Cari nama, nis, kelas...').css({
        'padding': '6px 12px',
        'border-radius': '6px',
        'border': '1px solid #ced4da',
        'font-size': '0.9rem',
        'box-sizing': 'border-box'
    });

    table.on('draw', function() {
        $('#tableHistory tbody tr').each(function() {
            $(this).find('td').each(function(index) {
                let header = $('#tableHistory thead th').eq(index).text().trim();
                $(this).attr('data-label', header + ' : ');
            });
        });
    });

});
</script>
