<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update Data SEP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- SweetAlert2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        /* Hapus style .form-container */
        /* Tambahkan style lain jika perlu */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>

<body>
    <!-- Asumsi struktur template dashboard Anda -->
    <div id="layoutSidenav_content">
        <main>
            <!-- Gunakan container-fluid seperti contoh Batal SEP -->
            <div class="container-fluid px-4"> 
                <h1 class="mt-4">Update Data SEP</h1> 
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                    <li class="breadcrumb-item active">Update Data SEP</li>
                </ol>

                <!-- PERBAIKAN: Gunakan struktur card seperti Batal SEP -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div id="loading" class="loading-overlay" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                        
                        <form id="updateSepForm">
                            <div class="form-group row">
                                <label for="kd_registrasi" class="col-sm-3 col-form-label">Kode Registrasi</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="kd_registrasi" name="KD_REGISTRASI" required placeholder="Masukkan Kode Registrasi">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="no_sep" class="col-sm-3 col-form-label">No. SEP</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="no_sep" name="NO_SEP" required placeholder="Masukkan Nomor SEP">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="tgl_sep" class="col-sm-3 col-form-label">Tanggal SEP</label>
                                <div class="col-sm-9">
                                    <input type="date" class="form-control" id="tgl_sep" name="TGL_SEP" required>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="nm_dokter" class="col-sm-3 col-form-label">Nama DPJP</label>
                                <div class="col-sm-9">
                                    <select id="nm_dokter" name="nm_dokter" class="form-control" required>
                                        <option value="" disabled selected>Memuat dokter...</option>
                                    </select>
                                     <input type="hidden" id="nm_dpjp_hidden" name="NM_DPJP">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="kd_poli" class="col-sm-3 col-form-label">Kode Poli</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="kd_poli" name="KD_POLI" readonly placeholder="Otomatis terisi">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="nm_poli" class="col-sm-3 col-form-label">Nama Poli</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="nm_poli" name="NM_POLI" readonly placeholder="Otomatis terisi">
                                </div>
                            </div>

                             <div class="form-group row">
                                <label for="dpjp" class="col-sm-3 col-form-label">Kode DPJP (HFIS)</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dpjp" name="DPJP" readonly placeholder="Otomatis terisi">
                                </div>
                            </div>

                            <div class="form-group row mt-4">
                                <div class="col-sm-12"> 
                                    <button type="submit" class="btn btn-primary btn-block">UBAH SEP</button> 
                                </div>
                            </div>
                        </form>
                    </div> <!-- Penutup card-body -->
                </div> <!-- Penutup card -->
            </div> <!-- Penutup container-fluid -->
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; By IT Support RSU Ananda Purwokerto 2024</div>
                    <div>
                        <a href="#">Privacy Policy</a>
                        &middot;
                        <a href="#">Terms &amp; Conditions</a>
                    </div>
                </div>
            </div>
        </footer>
    </div> <!-- Penutup layoutSidenav_content -->

    <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            let dokterData = []; 
            const loadingIndicator = $('#loading');

            function loadDokter() {
                const dokterDropdown = $('#nm_dokter');
                loadingIndicator.show(); 

                $.ajax({
                    url: '<?php echo base_url("rekamedis/refdoktersep1"); ?>', 
                    type: 'POST', 
                    dataType: 'json',
                    success: function(data) {
                        dokterDropdown.empty().append('<option value="" disabled selected>Pilih Nama DPJP</option>');
                        if (data && Array.isArray(data.response)) {
                            dokterData = data.response; 
                            
                            if (dokterData.length > 0) {
                                $.each(dokterData, function(index, dokter) {
                                    const option = new Option(dokter.nm_dokter, dokter.kd_hfis_dokter); 
                                    dokterDropdown.append(option);
                                });
                            } else {
                                 dokterDropdown.empty().append('<option value="" disabled selected>Tidak ada dokter ditemukan</option>');
                            }
                        } 
                        else if(data && data.error) {
                             console.error("Error dari server (load dokter):", data.error);
                             dokterDropdown.empty().append('<option value="" disabled selected>Error: '+ data.error +'</option>');
                             Swal.fire('Error', 'Gagal memuat data dokter: ' + data.error, 'error');
                        }
                        else {
                           console.error("Gagal memuat dokter: Format data salah", data); 
                           dokterDropdown.empty().append('<option value="" disabled selected>Error: Format data salah</option>');
                           Swal.fire('Error', 'Format data dokter tidak sesuai.', 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error (Load Dokter):", status, error);
                        console.log("Status Kode:", xhr.status);
                        console.log("Respons Mentah dari Server:", xhr.responseText); 
                        dokterDropdown.empty().append('<option value="" disabled selected>Gagal memuat dokter</option>');
                        Swal.fire('Error', 'Gagal menghubungi server untuk memuat data dokter. Periksa Console (F12).', 'error');
                    },
                    complete: function() {
                        loadingIndicator.hide(); 
                    }
                });
            }

            loadDokter();

            $('#nm_dokter').on('change', function() {
                const selectedDokterKode = $(this).val(); 
                const selectedDokterNama = $(this).find('option:selected').text();
                 $('#nm_dpjp_hidden').val(selectedDokterNama);

                const selectedDokterData = dokterData.find(dokter => dokter.kd_hfis_dokter === selectedDokterKode);

                if (selectedDokterData) {
                    $('#kd_poli').val(selectedDokterData.kd_poliklinik || ''); 
                    $('#nm_poli').val(selectedDokterData.nm_spesialis || ''); 
                    $('#dpjp').val(selectedDokterData.kd_hfis_dokter || ''); 
                } else {
                    $('#kd_poli').val('');
                    $('#nm_poli').val('');
                    $('#dpjp').val('');
                }
            });

            $('#updateSepForm').on('submit', function(event) {
                event.preventDefault(); 
                loadingIndicator.show(); 

                const formData = {
                    KD_REGISTRASI: $('#kd_registrasi').val(),
                    NO_SEP: $('#no_sep').val(),
                    TGL_SEP: $('#tgl_sep').val(),
                    KD_POLI: $('#kd_poli').val(), 
                    NM_POLI: $('#nm_poli').val(), 
                    DPJP: $('#dpjp').val(),       
                    NM_DPJP: $('#nm_dpjp_hidden').val() 
                };

                console.log("Data yang dikirim:", formData); 

                $.ajax({
                    url: '<?php echo base_url("rekamedis/updateSEP1"); ?>', 
                    type: 'POST',
                    data: formData,
                    dataType: 'json', 
                    success: function(response) {
                        console.log("Respons Sukses:", response);
                        
                        // --- PERBAIKAN DI SINI ---
                        // Sesuaikan pengecekan dengan respons controller Anda
                        if (response && response.status === true) { 
                             Swal.fire('Sukses!', response.message || 'Data SEP berhasil diupdate.', 'success');
                        } 
                        else {
                             // Ambil pesan error dari controller, atau gunakan pesan default
                             const errorMessage = response.message || 'Terjadi kesalahan saat update data.';
                             Swal.fire('Gagal', errorMessage, 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error (Update SEP):", status, error);
                         console.log("Status Kode:", xhr.status);
                        console.log("Respons Mentah dari Server:", xhr.responseText); 
                        Swal.fire('Error', 'Gagal mengirim data update SEP ke server. Periksa Console (F12).', 'error');
                    },
                     complete: function() {
                        loadingIndicator.hide(); 
                    }
                });
            });

        });
    </script>

</body>

</html>

