{% csrf_token %}
<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">Pasien Rawat Jalan</h5>
        <p class="mt-3 h5"></p>
        <div class="row gy-3" style="padding: 0px;">
            <div id="data-search" style="display: flex;justify-content: space-between;"></div>
            <table width="100%" style="width:100% !important; cursor: pointer;" id="item-rajal" class="table dataTable table-striped table-bordered">
                <thead>
                    <tr>
                        <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>
                    </tr>
                </thead>
            </table>
            <div id="data-pagination" style="display: flex;margin-bottom: 10px;justify-content: space-between;align-items: center;"></div>
        </div>
    </div>
</div>

<!-- Modal Informed-->
<div class="modal fade" id="mdInformedRajal" tabindex="-1" role="dialog" aria-labelledby="mdInformedRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdInformedRajalLabel">Informed</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>  


<!-- Modal Consent-->
<div class="modal fade" id="mdConsentRajal" tabindex="-1" role="dialog" aria-labelledby="mdConsentRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdConsentRajalLabel">Consent</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Refusal-->
<div class="modal fade" id="mdRefusalRajal" tabindex="-1" role="dialog" aria-labelledby="mdRefusalRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdRefusalRajalLabel">Refusal</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>  
<!-- Modal Refusal-->
<div class="modal fade" id="mdRefusalRajal" tabindex="-1" role="dialog" aria-labelledby="mdRefusalRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdRefusalRajalLabel">Refusal</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Asesmen Perawat-->
<div class="modal fade" id="mdAsesPerawatRajal" tabindex="-1" role="dialog" aria-labelledby="mdAsesPerawatRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdAsesPerawatRajalLabel">Asesmen Perawat</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
                <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenPerawat">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Asesmen Dokter-->
<div class="modal fade" id="mdAsesDokterRajal" tabindex="-1" role="dialog" aria-labelledby="mdAsesDokterRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdAsesDokterRajalLabel">Asesmen Dokter</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
                <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenDokter">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Lembar Pertama-->
<div class="modal fade" id="mdLembarpertamaRajal" tabindex="-1" role="dialog" aria-labelledby="mdLembarpertamaRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdLembarpertamaRajalLabel">Lembar CPPT</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Rekam Medis/Resume Medis-->
<div class="modal fade" id="mdRekammedisRajal" tabindex="-1" role="dialog" aria-labelledby="mdRekammedisRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="mdRekammedisRajalLabel">Rekam Medis</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Keterangan Sakit-->
<div class="modal fade" id="mdSuratKeteranganRajal" tabindex="-1" role="dialog" aria-labelledby="mdSuratKeteranganRajalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 80%" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mdSuratKeteranganRajalLabel">Rekam Medis</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm">Print</button>
            </div>
        </div>
    </div>
</div>

<style>
    .dataTables_filter{
        {% comment %} float: right; {% endcomment %}
    }
    #item-rajal_length label {
        display: flex;
        place-items: center;
    }
    select[name="item-rajal_length"] {
        width: 50px;
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        margin: 0px 10px;
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }
    select[name="item-rajal_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }
</style>

<script>
    $('#item-rajal').DataTable
    ({
            "responsive":true,
            "dom": 'lifBtp',
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "initComplete": function(settings, json) {
                $('#item-rajal_length').appendTo('#data-search');
                $('#item-rajal_filter').appendTo('#data-search');
                $('#item-rajal_info').appendTo('#data-pagination');
                $('#item-rajal_paginate').appendTo('#data-pagination');
            },
            "ajax": {
                "url": "{% url 'get_rajal' %}",
                "dataSrc": ""  // Specify that the data source is at the root level
            },
            "language": {
                "search": "", // Remove the search label
                "searchPlaceholder": "Search..." // Set the placeholder text
            },
            "columns": [
                {
                "data": null,
                "render": function (data, type, row, meta) {
                    // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                    return meta.row + 1;
                }
                },
                { "data": "kode_booking"},
                { "data": "created_at"},
                { "data": "nomor_rekam_medis" },
                { "data": "nama_pasien"},
                { "data": "ruang_rawat_pasien"},
                { "data": "status"},
                { "data": "nama_dokter"},
                {
                "data": null,
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `
                    <div style="width:250px; overflow-x: auto; white-space: nowrap;" class="button-container">
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdInformedRajal" data-toggle="modal" onclick="getInformedRajal(${row.id})">Informed</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdConsentRajal" data-toggle="modal" onclick="getConsentRajal(${row.id})">Consent</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdRefusalRajal" data-toggle="modal" onclick="getRefusalRajal(${row.id})">Refusal</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdAsesPerawatRajal" data-toggle="modal" onclick="getAsesmenPerawatRajal(${row.id})">Asesmen Perawat</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdAsesDokterRajal" data-toggle="modal" onclick="getAsesmenDokterRajal(${row.id})">Asesmen Dokter</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdLembarpertamaRajal" data-toggle="modal" onclick="getLembarpertamaRajal(${row.id})">Lembar CPPT</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdRekammedisRajal" data-toggle="modal" onclick="getRekammedisRajal(${row.id})">Rekam Medis</button>
                        <button style="color:#fff" class="btn btn-success btn-sm" data-target="#mdSuratKeteranganRajal" data-toggle="modal" onclick="getSuratKeteranganRajal(${row.id})">Surat Keterangan Sakit</button>
                    </div>`
                    ;
                },
                "class": "text-center",
            },
            ],
    });
        // $('.dataTable').parent('div').addClass('scrollX');

</script>

<script>
    function getInformedRajal(id){
        $('#mdInformedRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/informed/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdInformedRajal .modal-body').html(data);
                getData(id)
                // Find the form and button elements
                var myForm = document.getElementById('formInformed');
                var submitButton = document.getElementById('submitInformed');
                submitButton.addEventListener('click', function() {
                    getDataOdontogram(id)
                    // // Collect form data
                    var formData = new FormData(myForm);
    
                    Swal.fire({
                        title: 'Loading',
                        html: '<div class="lds-dual-ring"></div>', // You can use a custom loading spinner here
                        icon: 'warning',
                        allowOutsideClick: false,
                        showCancelButton: false,
                        showConfirmButton: false,
                    });

                    // Perform Ajax request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/pemeriksaan/Informed/' + id + '/', true);

                    // Set up the callback
                    xhr.onload = function() {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            Swal.fire({
                                title: 'Asesmen telah ditambahkan.',
                                text: 'Terimakasih.',
                                customClass: {
                                    icon: 'custom-swal-icon', // Add a custom class for the icon
                                },
                                timer: 3000,
                                imageUrl: 'https://wavahusada.com/pendaftaran/public/images/Puas.png', // Your custom image URL
                                imageWidth: 135, // Set the width of the image
                                imageHeight: 100, // Set the height of the image
                            })
                            location.reload()
                        } else {
                            console.error('Request failed with status:', xhr.status);
                        }
                    };

                    // Send the form data as the request payload
                    xhr.send(formData);
                });

            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getConsentRajal(id){
        $('#mdConsentRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/consent/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdConsentRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getRefusalRajal(id){
        $('#mdRefusalRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/refusal/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdRefusalRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getAsesmenPerawatRajal(id){
        $('#mdAsesPerawatRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/asesmenperawat/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesPerawatRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    
    function getAsesmenDokterRajal(id){
        $('#mdAsesDokterRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/asesmendokter/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesDokterRajal .modal-body').html(data);
                getData(id)
                // Find the form and button elements
                var myForm = document.getElementById('formAsesmen');
                var submitButton = document.getElementById('submitAsesmenDokter');
                submitButton.addEventListener('click', function() {
                    getDataOdontogram(id)
                    // // Collect form data
                    var formData = new FormData(myForm);
    
                    Swal.fire({
                        title: 'Loading',
                        html: '<div class="lds-dual-ring"></div>', // You can use a custom loading spinner here
                        icon: 'warning',
                        allowOutsideClick: false,
                        showCancelButton: false,
                        showConfirmButton: false,
                    });

                    // Perform Ajax request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/pemeriksaan/asesmendokter/' + id + '/', true);

                    // Set up the callback
                    xhr.onload = function() {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            Swal.fire({
                                title: 'Asesmen telah ditambahkan.',
                                text: 'Terimakasih.',
                                customClass: {
                                    icon: 'custom-swal-icon', // Add a custom class for the icon
                                },
                                timer: 3000,
                                imageUrl: 'https://wavahusada.com/pendaftaran/public/images/Puas.png', // Your custom image URL
                                imageWidth: 135, // Set the width of the image
                                imageHeight: 100, // Set the height of the image
                            })
                            location.reload()
                        } else {
                            console.error('Request failed with status:', xhr.status);
                        }
                    };

                    // Send the form data as the request payload
                    xhr.send(formData);
                });

            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    function getLembarpertamaRajal(id){
        $('#mdLembarpertamaRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/lembarpertama/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdLembarpertamaRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getRekammedisRajal(id){
        $('#mdRekammedisRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/rekammedis/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdRekammedisRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    function getSuratKeteranganRajal(id){
        $('#mdSuratKeteranganRajal .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/suratketerangansakit/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdSuratKeteranganRajal .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            } 
        });
    }  
</script>