<div class="container mt-5">
    <div class="jumbotron bg-light p-5 rounded shadow-sm">
        <h1 class="display-4 text-center mb-4">TRITECH SOLUTION JORNEY</h1>
        <p class="lead text-center">TAMBAH DATA SERVIS</p>
        <hr class="my-4">
        <div class="text-center">
            <button type="button" class="btn btn-primary btn-lg w-100 mb-3 tambahDatasrv" data-bs-toggle="modal" data-bs-target="#formservis">
                Tambah data aduan servis
            </button>
            <button type="button" class="btn btn-success btn-lg w-100" data-bs-toggle="modal" data-bs-target="#forminputplgn">
                Register Pelanggan Baru
            </button>
        </div>
    </div>
</div>

<!-- Modal Pelanggan Baru -->
<div class="modal fade" id="forminputplgn" tabindex="-1" aria-labelledby="tmbhplgn" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tmbhplgn">Tambah Data Pelanggan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formPelanggan" action="<?= BASEURL; ?>/pelanggan/tambah" method="post">
                    <input type="hidden" id="idpel" name="IDPEL">
                    <div class="mb-3">
                        <label for="nama_pel" class="form-label">Nama Pelanggan</label>
                        <input type="text" class="form-control" id="nama_pel" name="NAMA_PEL">
                    </div>
                    <div class="mb-3">
                        <label for="alamat" class="form-label">Alamat</label>
                        <input type="text" class="form-control" id="alamat" name="ALAMAT">
                    </div>
                    <div class="mb-3">
                        <label for="hp" class="form-label">HP</label>
                        <input type="text" class="form-control" id="hp" name="HP">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Tambah Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="formservis" tabindex="-1" aria-labelledby="tmbhsrv" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tmbhsrv">Tambah Data servis</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="forminputservis" action="<?= BASEURL; ?>/servis/tambah" method="post">
                    <input type="hidden" id="IDSERVIS" name="IDSERVIS">
                    <div class="mb-3">
                        <label for="IDPEL" class="form-label">Pelanggan</label>
                        <select class="form-select" id="idpel" name="IDPEL">
                            <option value="">Pilih Pelanggan</option>
                            <?php foreach ($data['pelanggan'] as $pelanggan) : ?>
                                <option value="<?= $pelanggan['IDPEL']; ?>">
                                    <?= $pelanggan['NAMA_PEL']; ?> - <?= $pelanggan['HP']; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="NAMABRG" class="form-label">Nama Barang</label>
                        <input type="text" class="form-control" id="namabrg" name="NAMABRG">
                    </div>
                    <div class="mb-3">
                        <label for="TGL" class="form-label">Tanggal</label>
                        <input type="date" class="form-control" id="tgl" name="TGL">
                    </div>
                    <div class="mb-3">
                        <label for="KELUHAN" class="form-label">Keluhan</label>
                        <input type="text" class="form-control" id="keluhan" name="KELUHAN">
                    </div>
                    <div class="mb-3">
                    <label for="STATUS" class="form-label">Status</label>
                        <select class="form-select" name="STATUS" id="status" aria-label="Default select example">
                            <option value="Dikerjakan">Dikerjakan</option>
                            <option value="Ready">Ready</option>
                            <option value="Selesai">Selesai</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Tambah Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Menangani klik tombol "Proses"
    document.querySelectorAll('.tombol-proses').forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            // Mengambil nilai ID Servis dari atribut data-idservis
            const IDSERVIS = this.getAttribute('data-idservis');
            // Mengatur nilai ID Servis di formulir
            document.getElementById('IDSERVIS').value = IDSERVIS;
            // Submit formulir secara otomatis
            document.getElementById('forminputservis').submit();
        });
    });
</script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
