<?php $this->load->view('home/layout/meta'); ?>
<?php $this->load->view('home/layout/header'); ?>
<?php  //$this->load->view('home/layout/aside'); ?>

  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Alur Tamu</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item active">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">

            <!-- Sales Card -->
            <div class="col-xxl-4 col-md-6 ">
              <div class="card info-card sales-card  "  style="background-color:#0d6efd;color:white">
                <div class="card-body ">
                  <h5 class="card-title" style="color:white">Pertama<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:#0d6efd">
                      <i class="bi bi-pencil-fill"></i>
                    </div>
                    <div class="ps-3">
                      <h4>Mengisi Identitas</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 -->

            <!-- Revenue Card -->
            <div class="col-xxl-4 col-md-6">
               <div class="card info-card sales-card  "  style="background-color:#fd7e14;color:white">
                <div class="card-body">
                  <h5 class="card-title" style="color:white">Kedua<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:#fd7e14">
                      <i class="bi bi-megaphone-fill"></i>
                    </div>
                    <div class="ps-3">
                      <h4>Menunggu Panggilan</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 -->

            <!-- Customers Card -->
            <div class="col-xxl-4 col-md-6">
              <div class="card info-card sales-card  "  style="background-color:green;color:white">
                <div class="card-body">
                  <h5 class="card-title" style="color:white">Ketiga<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:green">
                      <i class="bi bi-chat-left-text-fill"></i>
                    </div>
                    <div class="ps-3">
                      <h4>Bertemu</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 -->

            <!-- Reports --> 
			
            <div class="col-12">
			<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">
                <?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); 
			?>
                <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">
                  </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</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputText" name="asalinstansi">
                  </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">
                  </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" required>
                      <option  value="">Pilih Salah Satu</option>
					  <?php foreach($kategori->result() as $row){ $no++;?>
                      <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 -->
            <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 -->

          <!-- Budget Report -->
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Pertanyaan yang sering di ajukan</h5>

              <div class="accordion accordion-flush" id="faq-group-1">

                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-target="#faqsOne-1" type="button" data-bs-toggle="collapse">
                      Debitis adipisci eius?
                    </button>
                  </h2>
                  <div id="faqsOne-1" class="accordion-collapse collapse" data-bs-parent="#faq-group-1">
                    <div class="accordion-body">
                      Ut quasi odit odio totam accusamus vero eius. Nostrum asperiores voluptatem eos nulla ab dolores est asperiores iure. Quo est quis praesentium aut maiores. Corrupti sed aut expedita fugit vero dolorem. Nemo rerum sapiente. A quaerat dignissimos.
                    </div>
                  </div>
                </div>

                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-target="#faqsOne-2" type="button" data-bs-toggle="collapse">
                      Omnis fugiat quis repellendus?
                    </button>
                  </h2>
                  <div id="faqsOne-2" class="accordion-collapse collapse" data-bs-parent="#faq-group-1">
                    <div class="accordion-body">
                      In minus quia impedit est quas deserunt deserunt et. Nulla non quo dolores minima fugiat aut saepe aut inventore. Qui nesciunt odio officia beatae iusto sed voluptatem possimus quas. Officia vitae sit voluptatem nostrum a.
                    </div>
                  </div>
                </div>

                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-target="#faqsOne-3" type="button" data-bs-toggle="collapse">
                      Et occaecati praesentium aliquam modi incidunt?
                    </button>
                  </h2>
                  <div id="faqsOne-3" class="accordion-collapse collapse" data-bs-parent="#faq-group-1">
                    <div class="accordion-body">
                      Voluptates magni amet enim perspiciatis atque excepturi itaque est. Sit beatae animi incidunt eum repellat sequi ea saepe inventore. Id et vel et et. Nesciunt itaque corrupti quia ducimus. Consequatur maiores voluptatum fuga quod ut non fuga.
                    </div>
                  </div>
                </div>

                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-target="#faqsOne-4" type="button" data-bs-toggle="collapse">
                      Quo unde eaque vero dolor quis ipsam?
                    </button>
                  </h2>
                  <div id="faqsOne-4" class="accordion-collapse collapse" data-bs-parent="#faq-group-1">
                    <div class="accordion-body">
                      Numquam ut reiciendis aliquid. Quia veritatis quasi ipsam sed quo ut eligendi et non. Doloremque sed voluptatem at in voluptas aliquid dolorum.
                    </div>
                  </div>
                </div>

                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-target="#faqsOne-5" type="button" data-bs-toggle="collapse">
                      Natus sunt quo atque mollitia accusamus?
                    </button>
                  </h2>
                  <div id="faqsOne-5" class="accordion-collapse collapse" data-bs-parent="#faq-group-1">
                    <div class="accordion-body">
                      Aut necessitatibus maxime quis dolor et. Nihil laboriosam molestiae qui molestias placeat corrupti non quo accusamus. Nemo qui quis harum enim sed. Aliquam molestias pariatur delectus voluptas quidem qui rerum id quisquam. Perspiciatis voluptatem voluptatem eos. Vel aut minus labore at rerum eos.
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </div><!-- End F.A.Q Group 1 -->
        </div><!-- End Right side columns -->

      </div>
    </section>

  </main><!-- End #main -->
  
   <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>
<?php $this->load->view('home/layout/foot'); ?>