{% 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</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">Semua Pasien</h5> -->
            <div class="row gy-3">
                <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="table-pembayaran">
        <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>
        {% for x in semuapendaftaran %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ x.kode_booking }}</td>
            <td>{{ x.created_at }} WIB</td>
            <td>{{ x.nomor_rekam_medis }}</td>
            <td>{{ x.nama_pasien }}</td>
            <td>{{ x.ruang_rawat_pasien }}
            {% if x.dokter_ranap %}
            ke RANAP
                {% endif %}

            </td>
            <td>{{ x.status }}</td>
            <td>{{ x.nama_dokter }} | {{ x.poli_nama }}</td>
            <td>
                <div style="display: flex;justify-content: space-around;">
                    <button type="button" class="btn btn-info btn-sm text-light"
                            onclick="panggilPasien('{{ x.nama_pasien }}')"
                            style="margin-right: 5px;">Panggil
                    </button>
                    <a class="btn btn-success btn-sm text-light mr-1" href="/pembayaran/siapkankasir/{{ x.id }}/">
                        Bayar
                    </a>
                </div>
            </td>
        </tr>

        <!-- <tr>
            <td colspan="8">
                <div class="row">
                    <div class="col text-end">
                        <button type="button" class="btn btn-warning"
                                onclick="panggilPasien('{{ x.pasien.first_name }}')"
                                style="margin-left: 5px; margin-right: 5px;">Panggilan Pembayaran
                        </button>
                    </div>
                    <div class="col"><a class="btn btn-success mr-1" href="/pembayaran/siapkankasir/{{ x.id }}/">
                        Bayar/Detail
                    </a></div>
                </div>
            </td>
        </tr> -->
        {% endfor %}
    </table>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function() {
        $('#table-pembayaran').DataTable({
            "scrollX": true,
            "responsive": true,
        })
    })
    function panggilPasien(nama){
        let name = nama.split(',')[0].trim();
        speak(`pasien atas nama ${name} silahkan ke loket pembayaran`)
    }
</script>