<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header bg-secondary">
            <div class="row">
              <div class="col-sm-6">
                <h3 class="card-title">Quick Setting</h3>
              </div>
              <div class="col-sm-6">
              </div>
            </div>
          </div>
          <!-- /.card-header -->
            <div class="card-body" id="dispay1">
            	<h6>Setting Dasar</h6><hr>
            	<form id="form1">
            	<div class="row">
	            	<div class="col-md-7">
	            	<table class="table table-borderless">
	            		<tbody>
                            <tr>
                              <td class="p-2" style="max-width: 100px;">Nomor WhatsApp Penerima Notif</td>
                              <td class="p-2" style="max-width: 10px;">:</td>
                              <td class="p-2"><input type="text" class="form-control form-control-sm" name="nomor" required="required"></td>
                            </tr>
                            <tr>
                              <td class="p-2" style="max-width: 100px;">Alamat Lengkap</td>
                              <td class="p-2" style="max-width: 10px;">:</td>
                              <td class="p-2"><input type="text" class="form-control form-control-sm" name="alamat" required="required"></td>
                            </tr>
                            <tr>
                              <td class="p-2" style="max-width: 100px;">Kabupaten</td>
                              <td class="p-2" style="max-width: 10px;">:</td>
                              <td class="p-2"><input type="text" class="form-control form-control-sm" name="kabupaten" required="required"></td>
                            </tr>
                          </tbody>
                      </table>
	            	</div>
	            	<div class="col-md-5">
	            		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>Isi nomor whtasapp untuk pemerima notif saat ada registrasi pelanggan baru, seperti nomor whatapp pemilik atau teknisi, beri tanda ( , ) untuk memisakhan jika nomor di isi lebih dari 1. <span class="text-danger">Contoh => 081298xxxx31,081298xxxx32</span></li>
	            		</ul>
	            	</div>
	            </div>
	        	</form>
			</div>
			<div class="card-body" id="dispay2" style="display: none;">
			    <h6>Setting Mikrotik</h6><hr>
			    <form id="form2">
			    <div class="row">
	            	<div class="col-md-7">
	            		<div class="row">
                          <div class="col-sm-6">
                            <div class="card-body pb-0">
                              <div class="form-group">
                                <label>Nama Mikrotik</label>
                                <input type="text" class="form-control" name="nmk" required="required">
                              </div>
                              <div class="form-group">
                                <label>IP Address</label>
                                <input type="text" class="form-control" name="ipa" required="required">
                              </div>
                              <div class="form-group">
                                <label>Port API Mikrotik</label>
                                <input type="text" class="form-control" name="pam" required="required">
                              </div>
                              <div class="form-group">
                                <label>Port Remote Modem</label>
                                <input type="text" class="form-control" name="prm" required="required">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="card-body pb-0">
                              <div class="form-group">
                                <label>Username</label>
                                <input type="text" class="form-control" name="usm" required="required">
                              </div>
                              <div class="form-group">
                                <label>Password</label>
                                <input type="text" class="form-control" name="psw" required="required">
                              </div>
                              <div class="form-group">
                                <label>Profile PPPOE Remote</label>
                                <input type="text" class="form-control" name="profile_remote" placeholder="Isi jika di perlukan">
                                <i class="text-danger">Khusus yang memiliki pelanggan hotspot bulanan, jika modem/router ingin bisa di remote oleh aplikasi menggunakan koneksi PPPOE</i>
                              </div>
                            </div>
                          </div>
                        </div>
	            	</div>
	            	<div class="col-md-5">
	            		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>Pemberian nama bebas</li>
	            			<li>IP Address isi dengan IP Public anda atau tunnel yang mengarah ke API mikrotik anda</li>
	            			<li>Port API mikrotik sesuaikan dengan mikrotik anda</li>
	            			<li>Port Remote di gunakan untuk akses remote modem pelanggan anda, pastikan port remote yang di isi mengarah ke Port 80 atau 8080 di settingan dstnat mikrotik anda</li>
	            			<li>Untuk username dan password kami saran kan di buat khusus untuk aplikasi</li>
	            			<li>Profile PPPOE Remote ini khusus jika ingin pengguna ada layanan Hotspot yang di tagih setiap bulan dan ingin bisa remote modem atau router pengguna dari jarak jauh. silahkan anda buat profile di pppos khusus untuk remote saja.</li>
	            			<li class="text-danger">Jika anda tidak memiliki Tunnel API / Remote. bisa request ke kami melalui chat WhatsApp yang ada di website</li>
	            			<li class="text-danger">Akun Tunnel akan kami berikan secara gratis selama menggunakan layanan kami.</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/setting_mikrotik.png" width="45%">
	            		</center>
	            	</div>
	            </div>
	        	</form>
			</div>
			<div class="card-body" id="dispay3" style="display: none;">
			    <h6>Setting Profile Paket</h6><hr>
			    <form id="form3">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="row">
                            <div class="col-md-6">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Jenis Profile</label>
                                        <select class="form-control" name="jenis" data-select="jenis-select1" required>
                                            <option value="">Pilih</option>
                                            <option value="PPPOE">PPPOE</option>
                                            <option value="Hotspot">Hotspot</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                      <label>Nama Profile Di Mikrotik</label>
                                      <input type="text" class="form-control" name="profile" required>
                                      <i class="text-danger"><small>Nama Profile Harus sama dengan yang ada di Mikrotik</small></i>
                                    </div>
                                    <div class="form-group" id="group-jenis1">
                                        <label>Jenis Hotspot</label>
                                        <select class="form-control" name="jenishs" id="jenis-select2" data-select="jenis-select2">
                                            <option value="">Pilih</option>
                                            <option value="1">Sekali Pakai</option>
                                            <option value="0">Berulangkali</option>
                                        </select>
                                        <i class="text-danger"><small>Pilih <b>Berulangkali</b> jika user hotspot di tagihan setiap bulan</small></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Nama Paket</label>
                                        <input type="text" class="form-control" name="namapaket" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Harga Paket</label>
                                        <input type="text" class="form-control rupiah" name="harga" required>
                                    </div>
                                    <div class="form-group" id="group-jenis3">
                                        <label>Fee Agen Voucher</label>
                                        <input type="text" class="form-control rupiah" name="fee" id="fee">
                                        <i class="text-danger">Isi jika menggunakan Aplikasi Agen Voucher</i>
                                    </div>
                                    <div class="form-group" id="group-jenis2">
                                        <label>Durasi</label>
                                        <input type="text" class="form-control" name="durasi" placeholder="6H" id="durasi">
                                        <i class="text-danger">Contoh : 3H => 3 Jam , 1D => 1 Hari </i>
                                    </div>
                                </div>
                            </div>
                        </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>Profile Paket disini hanya memberikan 1 sample saja jika memiliki lebih banyak paket silahkan isi di menu "Setting" => "Profile Paket"</li>
	            			<li>Jenis Profile silahkan Pilih "PPPOE" atau "Hotspot"</li>
	            			<li>Jika kamu memilik Jenis Profile "Hotspot" adnda akan diberi pilihan Jenis Hotspot</li>
	            			<li class="text-danger">Fee Agen isi dengan nominal Fee yang akan di berikan langsung saat Agen Voucher membuat Voucher di APK Agen Voucher</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/profile_paket.png" width="45%">
	            		</center>
			    	</div>
			    </div>
			    </form>
			</div>
			<div class="card-body" id="dispay4" style="display: none;">
			    <h6>Setting Profile Tagihan</h6><hr>
			    <form id="form4">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="row">
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Nama Profile Tagihan</label>
                                <input type="text" class="form-control" name="namaprotag" required="required">
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>PPN Tagihan</label>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="ppn" id="exampleRadios1" value="1" <?php echo ($server['ppn'] == 1 ) ? 'checked' : ''; ?>>
                                  <label class="form-check-label" for="exampleRadios1">
                                    Harga Paket Tanpa PPN <?= $ppnnow.'%' ?>
                                  </label>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="ppn" id="exampleRadios2" value="2" <?php echo ($server['ppn'] == 2 ) ? 'checked' : ''; ?>>
                                  <label class="form-check-label" for="exampleRadios2">
                                    Harga Paket Ditambah PPN <?= $ppnnow.'%' ?>
                                  </label>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="ppn" id="exampleRadios3" value="3" <?php echo ($server['ppn'] == 3 ) ? 'checked' : ''; ?>>
                                  <label class="form-check-label" for="exampleRadios3">
                                    Harga Paket Termasuk PPN <?= $ppnnow.'%' ?>
                                  </label>
                                </div>
                                <?php if($server['ppn'] == 4)  { ?>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="ppn" id="exampleRadios4" value="4" <?php echo ($server['ppn'] == 4 ) ? 'checked' : ''; ?>>
                                  <label class="form-check-label" for="exampleRadios4">
                                    Harga Ditambah PPN <?= $ppnnow.'%' ?> dan Subsidi 3 angka terakhir
                                  </label>
                                </div>
                                <?php } ?>
                                <!--<label>PPN Tagihan</label>-->
                                <!--<input type="text" class="form-control" name="ppn" required="required">-->
                                <!--<i class="text-danger">Isi angaka '0' jika tagihan sudah berikut PPN.</i>-->
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Konpensasi Tagihan</label>
                                <input type="text" class="form-control" name="konpensasi" required="required">
                                <i class="text-danger">Isi nilai persentase potongan tagihan perhari '3.333'</i>
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Tanggal Kirim Tagihan</label>
                                <input type="text" class="form-control" name="kirim" required="required">
                                <i class="text-danger">Isi tanggal pengiriman tagihan setiap bulan nya</i>
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Tanggal Buat Tagihan</label>
                                <input type="text" class="form-control" name="buat" required="required">
                                <i class="text-danger">Isi angka jumlah hari sebelum kirim tagihan</i>
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Tanggal Isolir</label>
                                <input type="text" class="form-control" name="isolir" required="required">
                                <i class="text-danger">Isi tanggal saat isolir pelanggan</i>
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" value="1" name="peringatan" checked>
                                <label>Kirim Pesan Peringatan</label><br>
                                <i class="text-danger">Mengirim pesan peringatan 1 hari sebelum isolir pelanggan</i>
                              </div>
                            </div>
                        </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>Profile Tagihan adalah Waktu Automatisasi dan pemberian PPN untuk pelanggan yang di tagih setiap bulan.</li>
	            			<li class="text-danger">Jika memiliki 2 atau lebih priode tagihan silahkan isi di menu "Setting" => "Profile Tagihan"</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/profile_tagihan.png" width="45%">
	            		</center>
			    	</div>
			    </div>
				</form>
			</div>
			<div class="card-body" id="dispay5" style="display: none;">
			    <h6>Master Topologi</h6><hr>
			    <form id="form5">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Nama Topologi ODP</label>
                                <input type="text" class="form-control" name="namatop" required="required">
                              </div>
                              <div class="form-group">
                                <label>Jumlah Port</label>
                                <input type="text" class="form-control" name="jumlah" required="required">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group" >
                                <label>Pilih Lokasi Maps / Isi Koordinat</label>
                                <input class="form-control" type="text" id="latlong" required name="koordinat">
                                <i class="text-danger"><small>Anda bisa pilih salah satu untuk mengisi bagian ini</small></i>
                                <!-- Input hidden untuk latitude dan longitude -->
                                <input type="hidden" id="latitude" data-maps="latitude" name="latitude" required="required">
                                <input type="hidden" id="longitude" data-maps="longitude" name="longitude" required="required">
                                <div id="map" style="height:250px;margin-top: 10px;"></div>
                              </div>
                            </div>
                        </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>master topologi untuk mengklasifikasikan titik rumah pelanggan ke titik pusat yang biasa di sebut ODP.</li>
	            			<li class="text-danger">Untuk menambah lebih banyak titik nya silahkan isi di menu "Master" => "Master Topologi".</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/master_topologi.png" width="45%">
	            		</center>
			    	</div>
			    </div>
				</form>
			</div>
			<div class="card-body" id="dispay6" style="display: none;">
			    <h6>Master Desa</h6><hr>
			    <form id="form6">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="card-body pb-0">
                            <div class="form-group">
                              <label>Nama Desa</label>
                              <input type="text" class="form-control" name="desa" required="required">
                            </div>
                         </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>master desa untuk mengklasifikasikan wilayah pelanggan berdasarkan Desa</li>
	            			<li class="text-danger">Untuk menambah lebih banyak nama desa silahkan isi di menu "Master" => "Master Desa".</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/master_desa.png" width="45%">
	            		</center>
			    	</div>
			    </div>
				</form>
			</div>
			<div class="card-body" id="dispay7" style="display: none;">
			    <h6>Group Akses</h6><hr>
			    <form id="form7">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="row">
	                        <div class="card-body pb-0">
	                          <div class="form-group">
	                            <label>Nama Group Akses</label>
	                            <input type="text" class="form-control" name="ngakses" required="required">
	                          </div>
	                          <div class="form-group form-check-inline">
	                            <input type="checkbox" class="form-check-input" value="Y" name="market">
	                            <label class="form-check-label">Data Hanya Tiap Marketing</label>
	                          </div>
	                        </div>
	                        <div class="card-body pb-0">
	                          <div class="form-group">
	                            <label>List Akses</label><br>
	                            <div class="row">
	                               <?php
                                    // Query untuk mendapatkan data dari database
                                    $db = mysqli_query($con, "SELECT * FROM master_menu WHERE user_akses = '1' AND master = '0' ORDER BY urutan");

                                    if ($db) {

                                        $json_array = $_SESSION['menu_ids'];

                                        while ($menu = mysqli_fetch_assoc($db)) {
                                            $menu_id = htmlspecialchars($menu['id']);
                                            $menu_name = htmlspecialchars($menu['nama']);
                                            $user_menu = !empty($menu['user_menu']) ? explode("_", $menu['user_menu']) : [];

                                            $checked_menu = isset($json_array[$menu_id]);

                                            echo '<div class="col-6">';
                                            echo '    <div class="form-group form-check">';
                                            echo '        <input type="checkbox" class="form-check-input" value="' . $menu_id . '" name="menu_ids[' . $menu_id . '][menu]" ' . ($checked_menu ? 'checked' : '') . '>';
                                            echo '        <label class="form-check-label" for="exampleCheck' . $menu_id . '">' . $menu_name . '</label>';
                                            echo '    </div>';

                                            if ($user_menu) {
                                                $sub_menu_data = $checked_menu ? $json_array[$menu_id]['sub_menu'] : [];
                                                foreach ($user_menu as $keymenu) {
                                                    $keymenu = htmlspecialchars($keymenu);
                                                    $checked_submenu = in_array($keymenu, $sub_menu_data);
                                                    echo '    <div class="form-group form-check-inline">';
                                                    echo '        <input type="checkbox" class="form-check-input" value="' . $keymenu . '" name="menu_ids[' . $menu_id . '][sub_menu][]" ' . ($checked_submenu ? 'checked' : '') . '>';
                                                    echo '        <label class="form-check-label" for="exampleCheck' . $keymenu . '">' . $keymenu . '</label>';
                                                    echo '    </div>';
                                                }
                                            }

                                            echo '</div>';
                                        }

                                        // Pastikan untuk membebaskan hasil query
                                        mysqli_free_result($db);
                                    } else {
                                        echo 'Error executing query: ' . mysqli_error($con);
                                    }

                                    // Tutup koneksi
                                    // mysqli_close($con);
                                    ?>

	                          </div>
	                        </div>
	                      </div>
	                    </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>Group Akses untuk memilih akses kepada pengguna apk di bawah anda</li>
	            			<li>Anda bisa memberikan akses kepada Admin / Teknisi / dll. sesuai kebutuhan anda dan masing - masing memiliki akses yang berbeda.</li>
	            			<li class="text-danger">Jika akan memebedakan akses lebih dari 1 silahkan isi di menu "User" => "Group Akses".</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/group_akses.png" width="45%">
	            		</center>
			    	</div>
			    </div>
				</form>
			</div>
			<div class="card-body" id="dispay8" style="display: none;">
			    <h6>User Akses</h6><hr>
			    <form id="form8">
			    <div class="row">
			    	<div class="col-md-7">
			    		<div class="row">
                          <div class="col-sm-6">
                            <div class="card-body pb-0">
                              <div class="form-group">
                                <label>Nama</label>
                                <input type="text" class="form-control" name="nma" required="required">
                              </div>
                              <div class="form-group">
                                <label>Nomor WhatsApp</label>
                                <input type="text" class="form-control" name="nwa" required="required">
                              </div>
                              <div class="form-group">
                                <label>Email</label>
                                <input type="text" class="form-control" name="email" required="required">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="card-body pb-0">
                              <div class="form-group">
                                <label>Username</label>
                                <input type="text" class="form-control" name="username" required="required">
                              </div>
                              <div class="form-group">
                                <label>Password</label>
                                <input type="text" class="form-control" name="password" required="required">
                              </div>
                            </div>
                          </div>
                        </div>
			    	</div>
			    	<div class="col-md-5">
			    		<h6>INFORMASI</h6>
	            		<ul>
	            			<li>User Akses untuk membuat akses kepada Admin / Teknisi / lainnya. Sesuai dengan Group Akses yang sudah di isi sebelum nya</li>
	            			<li class="text-danger">Jika akan memebedakan akses lebih dari 1 silahkan isi di menu "User" => "User Akses".</li>
	            		</ul>
	            		<center>
	            			<h6><b>Letak Menu</b></h6>
	            			<img src="dist/img/user_akses.png" width="45%">
	            		</center>
			    	</div>
			    </div>
				</form>
			</div>
			<div class="card-body" id="dispay9" style="display: none;">
				<form id="form9">
					<input type="hidden" class="form-control" name="finish2" required="required">
				</form>
				<div id="fullDataInput"></div>
			</div>
			<div class="col-md-7 m-4">
				<div id="statusLog"> </div>
			</div>
			<div class="card-footer">
				<div class="row">
				    <button type="button" id="back" class="btn btn-secondary btn-sm m-1" style="display: none;">Sebelumnya</button>
				    <button type="button" id="next" class="btn btn-primary btn-sm m-1">Selanjutnya</button>
				    <form method="post">
				    <!-- <button type="submit" id="finish" class="btn btn-info btn-sm m-1" style="display: none;">Simpan Data</button> -->
				    	<input type="submit" id="finish" name="finish" class="btn btn-info btn-sm m-1" style="display: none;" value="Simpan Data">
				    </form>
				</div>
			</div>

            <script>

let currentDisplay = 1;
const totalDisplays = 9; // Sesuaikan dengan jumlah display yang ada

// Menampilkan dan menyembunyikan display berdasarkan nomor
function showDisplay(current, next) {

    // Sembunyikan display yang sedang aktif
    document.getElementById('dispay' + current).style.display = 'none';
    
    // Tampilkan display yang berikutnya
    document.getElementById('dispay' + next).style.display = 'block';

    document.getElementById('statusLog').innerHTML = '';
	document.getElementById('statusLog').classList.remove('text-success');
	document.getElementById('statusLog').classList.remove('text-danger');
    
    // Menyembunyikan atau menampilkan tombol "Sebelumnya" dan "Selanjutnya"
    if (next === 1) {
        document.getElementById('back').style.display = 'none';
        document.getElementById('next').style.display = 'inline-block';
    } else if (next === totalDisplays) {
        document.getElementById('next').style.display = 'none';
        document.getElementById('finish').style.display = 'inline-block';
    } else {
        document.getElementById('back').style.display = 'inline-block';
        document.getElementById('next').style.display = 'inline-block';
        document.getElementById('finish').style.display = 'none';
    }

    if (document.getElementById('dispay9').style.display === 'block') {
    // Proses untuk menyusun FormData dari setiap form (form1, form2, ..., formN)
	    const allFormData = {}; // Objek untuk menyimpan data per display
		let allFormsValid = true; // Variabel untuk memeriksa apakah semua form valid

		// Loop untuk setiap form
		for (let i = 1; i <= totalDisplays; i++) {
		    const form = document.getElementById('form' + i);

		    // Mengecek apakah form ada dan valid sebelum melanjutkan
		    if (form) {
		        // Menambahkan data dari setiap form ke objek allFormData
		        const formEntries = new FormData(form);
		        let formDataObj = {};

		        formEntries.forEach((value, key) => {
		            formDataObj[key] = value; // Menyimpan pasangan key-value dalam objek
		        });

		        // Menyimpan data untuk form tertentu (display)
		        allFormData['form' + i] = formDataObj;
		    } else {
		        console.error(`Form with ID form${i} not found.`);
		    }
		}

		let displayData = `<div class="row">`;

		// Objek untuk menyimpan nama form yang sesuai dengan formKey
		const formNames = {
		    'form1': 'Setting Dasar',
		    'form2': 'Setting Mikrotik',
		    'form3': 'Setting Profile Paket',
		    'form4': 'Setting Profile Tagihan',
		    'form5': 'Master Topologi',
		    'form6': 'Master Desa',
		    'form7': 'Group Akses',
		    'form8': 'User Akses',
		    // Anda dapat menambahkan form lainnya jika diperlukan
		};

		// Objek untuk mengganti nama key pada formData
		const keyNames = {
		    'nomor': 'Nomor WhatsApp',
		    'alamat': 'Alamat',
		    'kabupaten': 'Kabupaten',
		    'nmk': 'Nama Mikrotik',
		    'ipa': 'IP Address / Tunnel',
		    'pam': 'Port API Mikrotik',
		    'prm': 'Port Remote Mikrotik',
		    'usm': 'User Mikrotik',
		    'psw': 'Password Mikrotik',
		    'profile_remote': 'Profile Remote',
		    'jenis': 'Jenis',
		    'profile': 'Profile Paket',
		    'namapaket': 'Nama Paket',
		    'harga': 'Harga Paket',
		    'namaprotag': 'Nama Profile Tagihan',
		    'ppn': 'PPN Tagihan',
		    'konpensasi': 'Konpensasi',
		    'kirim': 'Tgl Kirim Tagihan',
		    'buat': 'Mebuat Tagihan',
		    'isolir': 'Tgl Isolir Pelanggan',
		    'peringatan': 'Peringatan Tagihan',
		    'namatop': 'Nama Topologi (ODP)',
		    'jumlah': 'Jumlah Port',
		    'koordinat': 'Titik Koordinat',
		    'desa': 'Nama Desa',
		    'ngakses': 'Nama Group Akses',
		    'nma': 'Nama User',
		    'nwa': 'Nomor WhatsApp User',
		    'email': 'Email User',
		    'username': 'Username',
		    'password': 'Password',
		    // Tambahkan lebih banyak key sesuai dengan yang Anda butuhkan
		};

		Object.keys(allFormData).forEach((formKey) => {
		    // Pastikan form9 tidak ditampilkan
		    if (formKey !== 'form9') {
		        // Ambil data untuk form tertentu
		        const formData = allFormData[formKey];

		        // Menambahkan header untuk setiap form dengan nama form yang sesuai
		        displayData += `<div class="col-md-6"><div class="card"><div class="card-body">`;

		        // Mengambil nama form sesuai dengan formKey
		        const formName = formNames[formKey] || `Data ${formKey}`; // Jika tidak ada nama, tampilkan formKey secara default

		        // Menampilkan nama form
		        displayData += `<h6>${formName}</h6><hr class="m-1">`;

		        // Loop melalui data form dan tampilkan key-value
		        for (const [key, value] of Object.entries(formData)) {
		            // Jika key ada di dalam keyNames, ganti dengan nama baru
		            const displayKey = keyNames[key] || key;  // Ganti nama key jika ada di keyNames

		            // Menyaring data kosong dan key 'menu_ids' tidak ditampilkan
		            if (value !== '' && !key.startsWith('menu_ids') && key !== 'latitude' && key !== 'longitude' && key !== 'peringatan') {
		                displayData += `
		                    <div class="row">
		                        <div class="col-5">
		                            <p><strong>${displayKey}</strong></p>
		                        </div>
		                        <div class="col-7">
		                            <p>: ${value}</p>
		                        </div>
		                    </div>`;
		            }
		        }

		        // Menutup kolom untuk satu form
		        displayData += `</div></div></div>`;
		    }
		});

		displayData += '</div>';
		document.getElementById('fullDataInput').innerHTML += displayData;


	}
}

// Validasi form di setiap display
function validateForm(current) {
    const form = document.getElementById('form' + current);
    const inputs = form.querySelectorAll('input[required]');
    let valid = true;

    inputs.forEach(input => {
        if (!input.value.trim()) {
            valid = false;
        }
    });

    return valid;
}

// Menyimpan data form ke sessionStorage
function saveFormData(current) {
    const formData = new FormData(document.getElementById('form' + current));
    const formDataObject = {};
    formData.forEach((value, key) => {
        formDataObject[key] = value;
    });
    sessionStorage.setItem('form' + current, JSON.stringify(formDataObject));
}

// Mengisi data form dari sessionStorage
function loadFormData(current) {
    const savedData = sessionStorage.getItem('form' + current);
    if (savedData) {
        const formData = JSON.parse(savedData);
        const form = document.getElementById('form' + current);
        Object.keys(formData).forEach(key => {
            const input = form.querySelector('[name="' + key + '"]');
            if (input) {
                input.value = formData[key];
            }
        });
    }
}



// Misalnya di bagian "Selanjutnya", pastikan form data dikirim dengan benar
document.getElementById('next').addEventListener('click', function() {
    if (validateForm(currentDisplay)) {
        saveFormData(currentDisplay);

        // Ambil data form yang akan dikirim ke PHP
        const formData = new FormData(document.getElementById('form' + currentDisplay));

		document.getElementById('statusLog').classList.add('spinner-border', 'text-warning');

        // Kirim data form ke PHP untuk pengecekan koneksi Mikrotik
        fetch('list_data/save_to_ss.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Lanjutkan ke display berikutnya
                if (currentDisplay < totalDisplays) {
                	document.getElementById('statusLog').innerHTML = data.message;
			        document.getElementById('statusLog').classList.remove('spinner-border', 'text-warning', 'text-danger');
			        document.getElementById('statusLog').classList.add('text-success');
			        // Memberi jeda 1 detik sebelum melanjutkan ke form berikutnya
				    setTimeout(function() {
				        // Pindah ke form berikutnya setelah jeda
				        currentDisplay++;
				        showDisplay(currentDisplay - 1, currentDisplay);
				        loadFormData(currentDisplay); // Isi form dengan data yang telah disimpan
				    }, 500); // 1000 milidetik = 1 detik
                }
            } else {
                document.getElementById('statusLog').innerHTML = data.message;
		        document.getElementById('statusLog').classList.remove('spinner-border', 'text-warning', 'text-success');
		        document.getElementById('statusLog').classList.add('text-danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('statusLog').innerHTML = 'Terjadi kesalahan. Silakan coba lagi.';
		    document.getElementById('statusLog').classList.remove('spinner-border', 'text-warning', 'text-success');
		    document.getElementById('statusLog').classList.add('text-danger');
        });
    } else {
    	document.getElementById('statusLog').innerHTML = 'Form belum lengkap! Mohon isi semua kolom.';
	    document.getElementById('statusLog').classList.remove('spinner-border', 'text-warning', 'text-success');
	    document.getElementById('statusLog').classList.add('text-danger');
        // alert('Form belum lengkap! Mohon isi semua kolom.');
    }
});


// Menangani klik pada tombol "Sebelumnya"
document.getElementById('back').addEventListener('click', function() {
    if (currentDisplay > 1) {
        // Simpan data form saat ini ke sessionStorage
        saveFormData(currentDisplay);

        currentDisplay--;
        showDisplay(currentDisplay + 1, currentDisplay);
        loadFormData(currentDisplay); // Isi form dengan data yang telah disimpan
    }
});

// Memuat data saat halaman dimuat
window.addEventListener('load', function() {
    loadFormData(currentDisplay);
});

			</script>

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


<script>
// Ambil semua elemen dropdown dalam modal
const jenisSelects = document.querySelectorAll('[data-select]');

// Sembunyikan semua grup pada awalnya
document.querySelectorAll('[id^="group-"]').forEach(group => {
    group.style.display = 'none';
});

// Fungsi untuk mengupdate tampilan grup
function updateGroupVisibility() {
    const jenisSelect = document.querySelector('select[name="jenis"]');
    const jenishsSelect = document.querySelector('select[name="jenishs"]');
    const group1 = document.getElementById('group-jenis1');
    const group2 = document.getElementById('group-jenis2');
    const group3 = document.getElementById('group-jenis3');
    const select2 = document.getElementById('jenis-select2');
    const fee = document.getElementById('fee');
    const durasi = document.getElementById('durasi');

    // Reset nilai input grup
    function resetGroup(group) {
        const input = group.querySelector('select, input');
        if (input) {
            input.value = '';
        }
        group.style.display = 'none';
    }

    // Tampilkan grup berdasarkan pilihan di dropdown
    if (jenisSelect.value === "Hotspot") {
        group1.style.display = 'block';
        group1.querySelector('select').required = true; 
    } else {
        resetGroup(group1);
    }

    if (jenishsSelect) {
        if (jenishsSelect.value === "1") {
            group2.style.display = 'block'; 
            group3.style.display = 'block'; 
            jenishsSelect.required = true; 
            fee.required = true;
            durasi.required = true;
        } else {
            resetGroup(group2);
            resetGroup(group3);
            jenishsSelect.required = false; 
            fee.required = false;
            durasi.required = false;
        }
    }
}


// Cek apakah select sudah ada isinya dan update tampilan
function initializeGroupVisibility() {
    const jenisSelect = document.querySelector('select[name="jenis"]');
    const jenishsSelect = document.querySelector('select[name="jenishs"]');

    if (jenisSelect.value) {
        updateGroupVisibility();
    }

    if (jenishsSelect && jenishsSelect.value) {
        updateGroupVisibility();
    }
}

// Tambahkan event listener untuk setiap dropdown
jenisSelects.forEach(select => {
    select.addEventListener('change', updateGroupVisibility);
});

// Inisialisasi tampilan grup pada load
initializeGroupVisibility();
</script>

<?php 

if (isset($_POST['finish'])) {  // Assuming 'finish' is set in session when form is complete
    try {
        // Mulai transaksi
        $pdo->beginTransaction();

        // Update data server
        $quick_setting = 'off';
        $stmt = $pdo->prepare("UPDATE data_server SET nomor_whatsapp = :nomor, alamat = :alamat, kabupaten = :kabupaten, quick_setting = :quick_setting WHERE id = :idtik");
        $stmt->bindParam(':nomor', $_SESSION['nomor']);
        $stmt->bindParam(':alamat', $_SESSION['alamat']);
        $stmt->bindParam(':kabupaten', $_SESSION['kabupaten']);
        $stmt->bindParam(':quick_setting', $quick_setting);
        $stmt->bindParam(':idtik', $_SESSION['master'], PDO::PARAM_INT);
        $stmt->execute();

        // Insert setting mikrotik
        $user_remote = 'Test';
        $last_remote = date('Y-m-d H:i:s');
        $stmt = $pdo->prepare("INSERT INTO setting_mikrotik 
            (id_data_server, nama, ip_address, port_api, port_remote, username, password, profile_remote, user_remote, last_remote) 
            VALUES (:id_data_server, :nama, :ip_address, :port_api, :port_remote, :username, :password, :profile_remote, :user_remote, :last_remote)");

        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':nama', $_SESSION['nmk']);
        $stmt->bindParam(':ip_address', $_SESSION['ipa']);
        $stmt->bindParam(':port_api', $_SESSION['pam']);
        $stmt->bindParam(':port_remote', $_SESSION['prm']);
        $stmt->bindParam(':username', $_SESSION['usm']);
        $stmt->bindParam(':password', $_SESSION['psw']);
        $stmt->bindParam(':profile_remote', $_SESSION['profile_remote']);
        $stmt->bindParam(':user_remote', $user_remote);
        $stmt->bindParam(':last_remote', $last_remote);
        $stmt->execute();
        $lastInsertIdMikrotik = $pdo->lastInsertId();

        // Insert profile paket
        $status = (isset($_SESSION['jenishs']) && $_SESSION['jenishs'] == 1) ? 1 : NULL;
        $durasi = (isset($_SESSION['durasi'])) ? $_SESSION['durasi'] : NULL;
        $nominal = preg_replace("/[^0-9]/", "", $_SESSION['harga']);
        $cekfee = preg_replace("/[^0-9]/", "", $_SESSION['fee']);
        $fee = (!empty($cekfee)) ? $cekfee : NULL;

        $stmt = $pdo->prepare("INSERT INTO profile_paket 
            (id_data_server, jenis_profile, nama_profile, durasi, nama, harga_paket, vi_agen, status) 
            VALUES (:id_data_server, :jenis_profile, :nama_profile, :durasi, :nama, :harga_paket, :vi_agen, :status)");
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':jenis_profile', $_SESSION['jenis']);
        $stmt->bindParam(':nama_profile', $_SESSION['profile']);
        $stmt->bindParam(':durasi', $durasi);
        $stmt->bindParam(':nama', $_SESSION['namapaket']);
        $stmt->bindParam(':harga_paket', $nominal);
        $stmt->bindParam(':vi_agen', $fee);
        $stmt->bindParam(':status', $status);
        $stmt->execute();

        // Insert profile tagihan
        $peringatan = ($_SESSION['peringatan'] == 1) ? $_SESSION['isolir'] - 1 : NULL;
        $ppnset = ($_SESSION['ppn'] == 0 ) ? 0 : $_SESSION['ppn'];

        $stmt = $pdo->prepare("INSERT INTO profile_tagihan 
            (id_data_server, nama, kirim_tagihan, buat_tagihan, limit_tagihan, konpensasi, ppn, peringatan_tagihan) 
            VALUES (:id_data_server, :nama, :kirim_tagihan, :buat_tagihan, :limit_tagihan, :konpensasi, :ppn, :peringatan_tagihan)");
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':nama', $_SESSION['namaprotag']);
        $stmt->bindParam(':kirim_tagihan', $_SESSION['kirim']);
        $stmt->bindParam(':buat_tagihan', $_SESSION['buat']);
        $stmt->bindParam(':limit_tagihan', $_SESSION['isolir']);
        $stmt->bindParam(':konpensasi', $_SESSION['konpensasi']);
        $stmt->bindParam(':ppn', $ppnset);
        $stmt->bindParam(':peringatan_tagihan', $peringatan);
        $stmt->execute();

        // Insert master topologi
        $stmt = $pdo->prepare("INSERT INTO master_topologi 
            (id_data_server, nama, titik_koordinat, jumlah_port) 
            VALUES (:id_data_server, :nama, :titik_koordinat, :jumlah_port)");
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':nama', $_SESSION['namatop']);
        $stmt->bindParam(':titik_koordinat', $_SESSION['koordinat']);
        $stmt->bindParam(':jumlah_port', $_SESSION['jumlah']);
        $stmt->execute();

        // Insert master desa
        $stmt = $pdo->prepare("INSERT INTO master_desa (id_data_server, nama) VALUES (:id_data_server, :nama)");
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':nama', $_SESSION['desa']);
        $stmt->execute();

        // Insert group akses
        $market = (isset($_SESSION['market']) && $_SESSION['market'] == 'Y') ? 'Y' : '';
        if (isset($_SESSION['menu_ids'])) {
            $menu_ids = $_SESSION['menu_ids'];
            $json_string = json_encode($menu_ids, JSON_PRETTY_PRINT);
        }

        $stmt = $pdo->prepare("INSERT INTO group_akses 
            (id_data_server, nama, akses, per_marketing) 
            VALUES (:id_data_server, :nama, :akses, :per_marketing)");
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->bindParam(':nama', $_SESSION['ngakses']);
        $stmt->bindParam(':akses', $json_string);
        $stmt->bindParam(':per_marketing', $market);
        $stmt->execute();

        // Mengambil ID terakhir yang diinsert ke dalam tabel `group_akses`
        $lastInsertId = $pdo->lastInsertId();

        // Insert user akses
        $hashedPassword = password_hash($_SESSION['password'], PASSWORD_DEFAULT);
        $stmt = $pdo->prepare("INSERT INTO user_akses 
            (nama, nomor_whatsapp, username, password, id_group_akses, id_data_server) 
            VALUES (:nama, :nomor_whatsapp, :username, :password, :id_group_akses, :id_data_server)");
        $stmt->bindParam(':nama', $_SESSION['nma']);
        $stmt->bindParam(':nomor_whatsapp', $_SESSION['nwa']);
        $stmt->bindParam(':username', $_SESSION['username']);
        $stmt->bindParam(':password', $hashedPassword);
        $stmt->bindParam(':id_group_akses', $lastInsertId);
        $stmt->bindParam(':id_data_server', $_SESSION['master']);
        $stmt->execute();

        // Commit transaksi
        $pdo->commit();

        // Perform Mikrotik update
        $script = ':global hsa "";:global pppa "";:local id [/system license get software-id];:local idbm ($id."'.$lastInsertIdMikrotik.'");:local uptim [/system resource get uptime];:local bname [/system resource get board-name];:foreach i in=[/ppp active find] do={:local name [/ppp active get $i name];:local ip [/ppp active get $i address];:set $pppa ("$pppa$name_$ip|");};:foreach h in=[/ip hotspot user find comment!="" and uptime<20m] do={:local cek [:pick [/ip hotspot user get $h comment] 0 6];:if ($cek = "Login.") do={:local hsuser [/ip hotspot user get $h name];:local hscom [:pick [/ip hotspot user get $h comment] 6 50];:set $hsa ("$hsa$hsuser_$hscom|");}};/tool fetch url="https://bilspro.com/api/mikrotik.php" mode=https http-method=post http-data="{\"id\":\"$idbm\",\"bm\":\"$bname\",\"ut\":\"$uptim\",\"hsa\":\"$hsa\",\"pppa\":\"$pppa\"}" keep-result=no;:delay 1s;:set $pppa ("");:set $hsa ("");';

        $API = new RouterosAPI();
        $API->debug = false;

        // Ambil data koneksi Mikrotik dari $_SESSION
        $ip_address = $_SESSION['ipa']; // IP Mikrotik
        $username = $_SESSION['usm'];   // Username Mikrotik
        $password = $_SESSION['psw'];   // Password Mikrotik
        $port_api = $_SESSION['pam'];   // Port API Mikrotik

        // Menghubungkan ke API Mikrotik menggunakan data yang dikirim melalui POST
        if ($API->connect2($ip_address, $username, $password, $port_api)) {
            $API->write('/system/license/getall');
            $READ = $API->read(false);
            $ARRAY = $API->parseResponse($READ);

            // Scheduler update logic
            $arrsc=$API->comm('/system/scheduler/getall', 
              array(
            ".proplist"=> ".id",
            "?name" => "SchBilsPro" ,
            ));
            $scd = $arrsc[0][".id"];

            $arrs=$API->comm('/system/script/getall', 
              array(
            ".proplist"=> ".id",
            "?name" => "BilsProAPI" ,
            ));
            $scp = $arrs[0][".id"];

            if ($scd != '') {
                $API->comm("/system/scheduler/set",
                  array(
                     ".id" => $scd,
                     "interval"   => "40s",
                     "on-event"   => "/system script run BilsProAPI",
                     )
                  );

            } else {

                $API->comm('/system/scheduler/add', array(
                    "name"        => "SchBilsPro",
                    "interval"    => "40s",
                    "on-event"    => "/system script run BilsProAPI",
                ));
            }

            if ($scp != '' ) {
                $API->comm("/system/script/set",
                  array(
                     ".id"      => $scp,
                     "source"   => $script,
                     )
                  );

            } else {

                $API->comm('/system/script/add', array(
                    "name"     => "BilsProAPI",
                    "source"   => $script,
                ));
            }

            $date = date('Y-m-d H:i:s');
            $board_id = $ARRAY[0]['software-id'].$lastInsertIdMikrotik;
            $stmt = $pdo->prepare("UPDATE setting_mikrotik SET board_id = :board_id, last_time = :last_time WHERE id = :id");

			// Bind parameters to the prepared statement
			$stmt->bindParam(':board_id', $board_id);
			$stmt->bindParam(':last_time', $date);
			$stmt->bindParam(':id', $lastInsertIdMikrotik, PDO::PARAM_INT);

			// Execute the query
			$stmt->execute();
        }
        sweetAlert("Data telah disimpan, dan menu akan di hilang", "success", "?".encrypt_url('dashboard'));
    } catch (Exception $e) {
        // Rollback transaksi jika terjadi error
        $pdo->rollBack();
        sweetAlert("Terjadi kesalahan" . $e->getMessage(), "error");
    }
}

?>
