{% csrf_token %}
    <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
        <h5 class="h5">List Pembayaran Pasien History</h5>
        <button type="button" id="daftarkan-pasien" data-toggle="modal" data-target="#mdTambahPasien" class="btn btn-info btn-sm text-light"><i class="fas fa-plus"></i> Filter</button>
    </div>
    <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
        aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
        <div class="accordion-body">
            <!-- <h5 class="mt-3 h5">History</h5> -->
            <div class="row gy-3">
                <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="table-history">
                    <thead>
                        <th>#</th>
                        <th>Kode Booking</th>
                        <th>Waktu Berobat</th>
                        <th>No. RM</th>
                        <th>Nama Pasien</th>
                        <th>Layanan</th>
                        <th>Status</th>
                        <th>Dokter</th>
                        <th>Act</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function () {
        $('#table-history').dataTable({
            serverSide: true,
            sAjaxSource: "https://assyifa.aklik.id/pembayaran/pembayaranpasien/data",  // new url
            order: [[2, 'desc']],
            columns: [
                {
                    "data": null,
                    "render": function (data, type, row, meta) {
                        return `<span>${meta.settings._iDisplayStart + meta.row + 1}</span>`;
                    }
                },
                {name: "kode_booking", data: 1},
                {
                    "data": 2,//2 ini key dari data yg akan digunakan, created_at ada pada array [2]
                    "width" : "20%",
                    "render": function(data, type, row) {
                        return formatDate(data);
                    }
                },
                {name: "nomor_rekam_medis", data: 3},
                {name: "nama_pasien", data: 4},
                {name: "ruang_rawat_pasien", data: 5},
                {name: "status", data: 6},
                {name: "nama_dokter", data: 7},
                {
                    "data": null,
                    "render": function (data, type, row) {
                        return `
                        <div style="width:100%; overflow-x: auto; white-space: nowrap;" class="button-container">
                            <a class="btn btn-success btn-sm text-light mr-1" href="/pembayaran/siapkankasir/${ row[0] }">Detail</a>
                        </div>
                        `;
                    },
                    "class": "text-center",
                },
            ],
        });
    });

    function formatDate(dateString) {
        const months = [
            "Jan.", "Feb.", "Mar.", "Apr.", "Mei", "Jun.", "Jul.", "Ags.", "Sep.", "Okt.", "Nov.", "Des."
        ];
    
        const date = new Date(dateString);
    
        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getHours();
        const minutes = date.getMinutes();
    
        // Format the time to include leading zero for single-digit minutes
        const formattedMinutes = (minutes < 10) ? `0${minutes}` : minutes;
    
        // Format the time to use 12-hour clock with "AM" or "PM"
        const ampm = (hours < 12) ? "AM" : "PM";
        const formattedHours = (hours > 12) ? hours - 12 : hours;
    
        return `${day} ${month} ${year}, ${formattedHours}.${formattedMinutes} ${ampm}`;
    }
</script>