<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>

<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><?= $Breadcumb ?></li>
        <li class="breadcrumb-item active" aria-current="page">Data <?= $Breadcumb ?></li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">

                <div class="col-md-2 grid-margin stretch-card mb-3">
                    <a class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#tambahModal">Tambah Pembayaran</a>
                </div>

                <h6 class="card-title">Data <?= $Breadcumb ?></h6>

                <div class="table-responsive">
                    <table id="dataTableExample" class="table table-bordered table-hover table-nowrap">
                        <thead class="table-info text-dark">
                            <tr>
                                <th>#</th>
                                <th>Nama Pasien</th>
                                <th>Tanggal</th>
                                <th>Total Biaya</th>
                                <th>Metode</th>
                                <th>Keterangan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no = 1; ?>
                            <?php if (!empty($pembayaran)): ?>
                                <?php foreach ($pembayaran as $row): ?>
                                    <tr>
                                        <td><?= $no++ ?></td>
                                        <td><?= esc($row['nama_lengkap']) ?></td>
                                        <td><?= date('d-m-Y', strtotime($row['tanggal_pembayaran'])) ?></td>
                                        <td>Rp <?= number_format($row['total_biaya'], 0, ',', '.') ?></td>
                                        <td><?= esc($row['metode_pembayaran']) ?></td>
                                        <td><?= esc($row['keterangan']) ?></td>
                                        <td>
                                            <button class="btn btn-info btn-sm" onclick="lihatDetailPembayaran('<?= $row['id_pembayaran'] ?>')">
                                                <i data-feather="eye"></i> Detail
                                            </button>

                                            <!-- <button class="btn btn-warning btn-sm" onclick="editPembayaran('<?= $row['id_pembayaran'] ?>')">
                                                <i data-feather="edit"></i>
                                            </button> -->
                                            <!-- <button class="btn btn-danger btn-sm" onclick="deletePembayaran('<?= $row['id_pembayaran'] ?>')">
                                                <i data-feather="trash-2"></i>
                                            </button>  -->
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="7" class="text-center text-muted">Tidak ada data pembayaran.</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>

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

<!-- Modal Detail Pembayaran -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="detailModalLabel">Detail Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="detailPembayaranContent">
                <!-- Isi detail akan dimuat lewat AJAX -->
                <div class="text-center text-muted">Memuat data...</div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Pembayaran -->
<div class="modal fade" id="tambahModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="formTambahPembayaran">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Pembayaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <form id="formTambahPembayaran">
                        <div class="mb-3">
                            <label>Kunjungan</label>
                            <select name="id_kunjungan" required class="form-select">
                                <option value="">-- Pilih --</option>
                                <?php foreach ($kunjungan as $k): ?>
                                    <option value="<?= $k['id_kunjungan'] ?>">
                                        <?= $k['nama_lengkap'] ?> - <?= date('d-m-Y', strtotime($k['tanggal_kunjungan'])) ?>
                                    </option>
                                <?php endforeach ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Metode Pembayaran</label>
                            <select name="metode_pembayaran" class="form-select" required>
                                <option value="Cash">Cash</option>
                                <option value="Transfer">Transfer</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Keterangan</label>
                            <textarea name="keterangan" class="form-control"></textarea>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    </div>
            </form>
        </div>
    </div>
</div>

<!-- Script AJAX Submit  -->
<script>
    $('#formTambahPembayaran').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '<?= base_url("pembayaran/simpanPembayaran") ?>',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#tambahModal').modal('hide');
                    Swal.fire('Berhasil', 'Data pembayaran berhasil disimpan', 'success')
                        .then(() => location.reload());
                }
            }
        });
    });
</script>



<!-- Script AJAX untuk Detail -->
<script>
    function lihatDetailPembayaran(id) {
        $('#detailPembayaranContent').html('<div class="text-center text-muted">Memuat data...</div>');
        $('#detailModal').modal('show');

        $.ajax({
            url: '<?= base_url('pembayaran/detail_ajax') ?>/' + id,
            type: 'GET',
            dataType: 'html',
            success: function(res) {
                $('#detailPembayaranContent').html(res);
            },
            error: function(xhr, status, error) {
                $('#detailPembayaranContent').html('<div class="alert alert-danger">Gagal memuat data.</div>');
            }
        });
    }
</script>


<?= $this->endSection(); ?>