<?php $this->load->view('home/layout/meta'); ?>
<?php $this->load->view('home/layout/header'); ?>
<?php  //$this->load->view('home/layout/aside'); ?>
<style>
        /* Gaya CSS untuk mengatur tampilan combobox */
        .combobox-container {
            position: relative;
            display: inline-block;
        }

        .combobox-list {
            position: absolute;
            display: none;
            border: 1px solid #ccc;
            max-height: 150px; /* Tinggi maksimum daftar pencarian */
            overflow-y: auto;
            background-color: #fff;
            width: 100%; /* Lebar sesuai dengan input */
        }

        .combobox-list-item {
            padding: 5px;
            cursor: pointer;
        }

        .combobox-list-item:hover {
            background-color: #f0f0f0;
        }
		.padding-card{
			padding-top:5px;
			padding-bottom:0px;
			
			padding-right:5px;
			padding-left:5px;
			background-color:#012970;
			
		}
    </style>
  <main id="main" class="main">
    <div class="pagetitle">
      <h1 style="font-size:30px;font-weight:900">Aplikasi Tamu</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item active" style="font-size:20px;font-weight:900">Badan Kepegawaian dan Pengembangan Sumber Daya Manusia Kota Madiun</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->
    <section class="section dashboard">
      <div class="row ">
        <!-- Left side columns -->
        <div class="col-lg-8 ">
          <div class="row padding-card">
            <!-- Sales Card -->
            <div class="col-xxl-12  padding-card">
			<div class="card" >
            <div class="card-body">
			<?php if($alert !=''){?>
				<div class="alert alert-<?php echo $alert;?> bg-<?php echo $alert;?> text-light border-0 alert-dismissible fade show" role="alert" id="pesan">
					<?php echo $pesan;?>
				</div>			
			<?php }?>
              <h5 class="card-title">Silahkan mengisi form berikut ini :</h5>
              <!-- Horizontal Form -->
			<?php 	
			$attribute = array('role' => 'form', 'method' => 'post');
			echo form_open(base_url().'home/tamu', $attribute); 
			?>
			 <input type="hidden" class="form-control" id="inputText" name="alamat">
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">Nama Lengkap</label>
                  <div class="col-sm-10">
                   <input type="text" class="form-control" id="inputText" name="nama" oninput="capitalizeWords(this)" oninvalid="this.setCustomValidity('Harap masukkan nama lengkap anda.')" oninput="setCustomValidity('')" required>
                  </div>
                </div>
				<!--
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">Alamat</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputText" name="alamat">
                  </div>
                </div>-->
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">Asal Instansi / Alamat</label>
                  <div class="col-sm-10">
      <select class="form-control" name="asalinstansi" id="combobox" required oninvalid="this.setCustomValidity('Harap pilih salah satu opsi  atau Jika tidak ada di pilihan, langsung ketik asal instansi / alamat dan Tekan Enter.')" oninput="setCustomValidity('')">
    <option value="">Pilih Salah Satu</option>
    <?php
    foreach($asalinstansi->result() as $row){
    ?>
    <option value="<?php echo $row->namaasalinstansi ?>"><?php echo $row->namaasalinstansi ?></option>
    <?php }?>
</select>

					<span style="font-size:13px;font-weight:900"><i>Jika tidak ada di pilihan, langsung ketik asal instansi / alamat dan "Tekan Enter"</i></span>
                  </div>			  			  
                </div>
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">Nomor Telp / Hp</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputText" name="nohp" required oninvalid="this.setCustomValidity('Harap masukkan nomor telp / hp anda.')" oninput="setCustomValidity('')"required>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label">Jenis Pelayanan</label>
                  <div class="col-sm-10">
				  <select class="form-select "  name="idkategori" id="combobox2" required oninvalid="this.setCustomValidity('Harap pilih salah satu opsi ')" oninput="setCustomValidity('')"required>
                      <option  value="">Pilih Salah Satu</option>
					  <?php foreach($kategori->result() as $row){?>
                      <option value="<?php echo $row->idkategori?>"><?php echo $row->namakategori;?></option>
					  <?php }?>
                    </select>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="inputEmail3" class="col-sm-2 col-form-label"></label>
                  <div class="col-sm-10">
                     <button type="submit" class="btn btn-primary" name="simpan">Simpan</button>
                  </div>
                </div>
             <?php echo form_close(); ?><!-- End Horizontal Form -->
            </div>
              </div>
            </div><!-- End Reports -->
            <!-- Top Selling -->
          </div>
        </div><!-- End Left side columns -->
        <!-- Right side columns -->
        <div class="col-lg-4">
          <!-- Recent Activity -->
		<style>
		.elemenimg {
			padding-top: 15px;    /* Padding sebesar 10 piksel di atas */
			padding-right: 0px;   /* Padding sebesar 15 piksel di kanan */
			padding-bottom: 0px;  /* Padding sebesar 10 piksel di bawah */
			padding-left: 0px;    /* Padding sebesar 15 piksel di kiri */
		}		
		</style>
          <!-- Budget Report -->
          <div class="card elemenimg padding-card">
            <div class="card-body">
				 <img src="<?php echo base_url().'images/alur.webp';?>" alt="Alur Tamu di BKDSDM" style="width:100%;height:610px"  data-toggle="modal" data-target="#myModal">
            </div>
          </div><!-- End F.A.Q Group 1 -->
        </div><!-- End Right side columns
		

<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog ">
    <div class="modal-content">

      <!-- Konten Modal -->
      <div class="modal-body">
         <img src="<?php echo base_url().'images/alur.webp';?>" alt="Alur Tamu di BKDSDM" style="width:100%;">
      </div>

      <!-- Tombol Tutup Modal -->
      <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>

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

<!-- Bootstrap JavaScript (jQuery and Popper.js required) -->
<script src="<?php echo base_url().'assets_v2/assets/select/';?>code.jquery.com_jquery-3.5.1.slim.min.js"></script>
<script src="<?php echo base_url().'assets_v2/assets/select/';?>cdn.jsdelivr.net_npm_popper.js@1.16.0_dist_umd_popper.min.js"></script>
<script src="<?php echo base_url().'assets_v2/assets/select/';?>stackpath.bootstrapcdn.com_bootstrap_4.5.2_js_bootstrap.min.js"></script>
		<!--
		      <div class="col-md-12">
               <div class="card info-card sales-card  "  style="background-color:#6610f2;color:white">
                <div class="card-body">
                  <h5 class="card-title"  style="color:white">Waktu<span></span></h5> 
                  <div class="d-flex align-items-center">
                    <div class="card-icon rounded-circle d-flex align-items-center justify-content-center"  style="color:#6610f2">
                      <i class="bi bi-clock-history" style="color:#6610f2"></i>
                    </div>
                    <div class="ps-3">
                      <h4><p id="waktu"></p></h4>
                       <!-- <span class="text-success small pt-1 fw-bold">12%</span> <span class="text-muted small pt-2 ps-1">increase</span>
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- End Sales Card -->
			
      </div>
    </section>
  </main><!-- End #main -->
  <script type="text/javascript" language="javascript" src="https://tamu.gedungdiklatmadiun.id/assets_v2/assets/datatable/jquery-3.6.0.min.js"></script>
   <script>
        function tampilkanWaktu() {
            // Membuat objek Date untuk mendapatkan waktu dan tanggal saat ini
            var sekarang = new Date();
            // Mendapatkan hari dalam bentuk teks (Minggu, Senin, dst.)
            var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'][sekarang.getDay()];
            // Mendapatkan tanggal, bulan, dan tahun
            var tanggal = sekarang.getDate();
            var bulan = sekarang.getMonth() + 1; // Ingat, bulan dimulai dari 0
            var tahun = sekarang.getFullYear();
            // Mendapatkan jam, menit, dan detik
            var jam = sekarang.getHours();
            var menit = sekarang.getMinutes();
            var detik = sekarang.getSeconds();
            // Membuat format jam, menit, dan detik menjadi dua digit (misalnya, 01, 02, 03)
            jam = padZero(jam);
            menit = padZero(menit);
            detik = padZero(detik);
            bulan = padZero(bulan);
            tanggal = padZero(tanggal);
            // Menampilkan hasil dalam elemen HTML dengan ID "waktu"
            var waktuDiv = document.getElementById("waktu");
            waktuDiv.innerHTML = `${hari}, ${tanggal}/${bulan}/${tahun},  ${jam}:${menit}:${detik}`;
        }
        // Fungsi untuk menambahkan "0" di depan angka jika kurang dari 10
        function padZero(angka) {
            return angka < 10 ? "0" + angka : angka;
        }
        // Memanggil fungsi tampilkanWaktu setiap detik
        setInterval(tampilkanWaktu, 1000);
        // Memanggil fungsi tampilkanWaktu agar menampilkan waktu saat halaman dimuat
        tampilkanWaktu();
		
    </script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
	
<script>
 $(document).ready(function () {
            $('#combobox').select2({
                placeholder: 'Pilih atau Ketik Disini', // Teks yang ditampilkan sebagai placeholder
                allowClear: true, // Izinkan menghapus pilihan
                width: '100%', // Lebar combobox
                tags: true, // Izinkan input kustom
                createTag: function(params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    };
                }
            }).on('select2:select', function (e) {
                if(e.params.data.newOption){
                    // Tindakan yang ingin Anda lakukan saat opsi baru dipilih
                    console.log('Opsi baru dipilih:', e.params.data);
                }
            }).on('select2:open', function (e) {
                // Fokus pada input Select2 saat dropdown terbuka
                var searchField = $('.select2-search__field');
                searchField.focus();
            });
        });
	
    $(document).ready(function () {
        $('#combobox2').select2({
            placeholder: 'Bisa Ketik Disini', // Teks yang ditampilkan sebagai placeholder
            allowClear: true, // Izinkan menghapus pilihan
            width: '100%', // Lebar combobox
        });
    });	
</script>	
<script>
function capitalizeWords(input) {
    input.value = input.value.replace(/\b\w/g, function(txt) {
        return txt.toUpperCase();
    });
}
</script>
<script>
    // Fungsi untuk menyembunyikan pesan setelah 10 detik
    setTimeout(function() {
        $('#pesan').alert('close');
    }, 10000); // 10000 milidetik = 10 detik
</script>	

  <!-- ======= Footer ======= -->
  <footer id="footer" class="footer" style="margin-top:-10px">
    <div class="copyright">
       <strong><span>BKDSDM</span></strong>. Kota Madiun   <a href="https://bootstrapmade.com/"> - <?php echo date('Y')?>.</a>
    </div> 
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="<?php echo base_url().'assets_v2/assets/';?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="<?php echo base_url().'assets_v2/assets/';?>/vendor/quill/quill.min.js"></script>
 <!-- Template Main JS File -->
  <script src="<?php echo base_url().'assets_v2/assets/';?>/js/main.js"></script>

</body>

</html>