<?php 
include 'connect.php';
session_start();

	$sql = "SELECT * FROM `bahagian/unit`";
	$result = mysqli_query($conn,$sql);
	//$row = mysqli_fetch_array($result);
	
	$sql1 = "select * from `user` where kad_pengenalan = '".$_SESSION['kadPengenalan']."' ";
	$result1 = mysqli_query($conn,$sql1);
	$row1 = mysqli_fetch_array($result1);
	$count = mysqli_num_rows($result1);
	
	//echo $_SESSION['kadPengenalan'];
	
	$userID = $row1["id_user"];	
	
	$sql2 = "SELECT * FROM `alamat` ORDER BY `nama_pengirim` ASC";
	$result2 = mysqli_query($conn,$sql2);
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Sistem Pendaftaran Surat</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/logo_tab.png" rel="icon">

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/quill/quill.snow.css" rel="stylesheet">
  <link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/simple-datatables/style.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">
  
  <!-- Script logout -->
  <script type="text/javascript" src="internalPage/logoutConfirmation.js"></script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <!-- =======================================================
  * Template Name: NiceAdmin - v2.2.0
  * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>

<?php 
  include 'header.php';
  
  ?>
  <main id="main" class="main" style="margin-top:25px">
	<h4>Please wait for <span id="count"></span> seconds to view session timeout popup.</h4>
     <!--Start Show Session Expire Warning Popup here -->
    <div class="modal fade" id="session-expire-warning-modal" aria-hidden="true" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">                  
                    <h4 class="modal-title">Session Expire Warning</h4>
                </div>
                <div class="modal-body">
                    Your session will expire in <span id="seconds-timer"></span> seconds. Do you want to extend the session?
                </div>
                <div class="modal-footer">
                    <button id="btnOk" type="button" class="btn btn-default" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px;  background-color: #428bca; color: #FFF;">Ok</button>
                    <button id="btnSessionExpiredCancelled" type="button" class="btn btn-default" data-dismiss="modal" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;">Cancel</button>
                    <button id="btnLogoutNow" type="button" class="btn btn-default" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px;  background-color: #428bca; color: #FFF;">Logout now</button>
                </div>
            </div>
        </div>
    </div>
    <!--End Show Session Expire Warning Popup here -->
    <!--Start Show Session Expire Popup here -->
    <div class="modal fade" id="session-expired-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Session Expired</h4>
                </div>
                <div class="modal-body">
                    Your session is expired.
                </div>
                <div class="modal-footer">
                    <button id="btnExpiredOk" onclick="sessionExpiredRedirect()" type="button" class="btn btn-primary" data-dismiss="modal" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;">Ok</button>
                </div>
            </div>
        </div>
    </div>
  
	<div class="pagetitle">
      <h1>Pendaftaran Surat Masuk</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="">Surat Masuk / Pendaftaran Surat Masuk</a></li>          
        </ol>
      </nav>
    </div><!-- End Page Title -->
    <section class="section">
      <div class="row">
         <div class="card">
            <div class="card-body">
              <h5 class="card-title"></h5>
			  
			  <!-- Default Tabs -->
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Maklumat Surat Masuk</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false" disabled >Maklumat Pendaftaran Cek</button>
                </li>
                
              </ul>
			  <div class="tab-content pt-5" id="myTabContent">
				<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
				
                  <!-- No Labels Form -->
					 <form class="row g-3" action="internalPage/insertSuratMasuk.php?userID=<?php echo $userID?>" method="post" enctype="multipart/form-data">
						<div class="row mb-3">
						  <label for="inputText" class="col-sm-2 col-form-label">Rujukan Surat:</label>
						  <div class="col-sm-6">
							<input type="text" class="form-control" name="rujukanSurat" id="rujukanSurat" style="text-transform:uppercase;" required >
						  </div>
						</div>
						<div class="row mb-3">						
						  <label for="inputDate" class="col-sm-2 col-form-label">Tarikh Surat:</label>
						  <div class="col-sm-6">
							<input type="date" class="form-control" name="tarikhSurat" data-date-format="dd/mm/yy" id="tarikhSurat" required>
						  </div>
						</div>
						<div class="row mb-3">
						  <label for="inputDate" class="col-sm-2 col-form-label">Tarikh Terima:</label>
						  <div class="col-sm-6" >
							<input type="date" class="form-control" name="tarikhTerima" id="tarikhTerima"  data-date-format="dd/mm/yy" required>
						  </div>
						</div>
						<div class="row mb-3">
						  <label for="inputNumber" class="col-sm-2 col-form-label">Perkara:</label>
						  <div class="col-sm-6">
							<input type="text" class="form-control" name="perkara1" id="perkara1" style="text-transform:uppercase;" required>
							<input type="text" class="form-control" name="perkara2" id="perkara2" style="text-transform:uppercase;">
							<input type="text" class="form-control" name="perkara3" id="perkara3" style="text-transform:uppercase;"> 						
						  </div>
						</div>
						<div class="row mb-3">
						  <label class="col-sm-2 col-form-label">Bahagian/Unit:</label>
						  <div class="col-sm-6">
						  <?php 
									while ($row = mysqli_fetch_array($result))
									{
								
								?>
							<input type="checkbox" id="bahagian[]" name="bahagian[]" value="<?php echo $row["nama_bahagian"]; ?>" />
							<label for="bahagian[]"><?php echo $row["nama_bahagian"]; ?></label><br>
							  <?php
									}
							  ?>
						  </div>
						</div>
						
						<div class="row mb-3">
						  <label class="col-sm-2 col-form-label">Nama Pengirim:</label>
						  <div class="col-sm-6">
							<select class="form-select" aria-label="Default select example" name="namapengirim" id="namapengirim" >
							  <option selected></option>
							  <?php 
									while ($row2 = mysqli_fetch_array($result2))
									{
								
								?>
							  <option value="<?php echo $row2['nama_pengirim']; ?>"><?php echo $row2['nama_pengirim']; ?></option>							  
							  <?php
									}
							  ?>
							  
							</select>
							<button onclick="myFunction()">Daftar alamat</button>
						  </div>
						</div>
						<!--insert alamat-->
						<div class="row mb-3" id="dartarAlamat" name="daftarAlamat" style="display: none">
							<div class="row mb-3">
							  <label for="inputText" class="col-sm-2 col-form-label">Nama Pengirim:</label>
							  <div class="col-sm-6">
								<input type="text" class="form-control" name="AddNamaPengirim" id="AddNamaPengirim">
							  </div>
							</div>
							
							<div class="row mb-3">
							  <label for="inputNumber" class="col-sm-2 col-form-label">Alamat:</label>
							  <div class="col-sm-6">
								<input type="text" class="form-control" name="alamat1" id="alamat1">
								<input type="text" class="form-control" name="alamat2" id="alamat2">
								<input type="text" class="form-control" name="alamat3" id="alamat3">						
							  </div>
							</div>
							<div class="row mb-3">
							  <label for="inputNumber" class="col-sm-2 col-form-label">No. Telefon:</label>
							  <div class="col-sm-6">
								<input type="text" class="form-control" name="noTel" id="noTel">						
							  </div>
							</div>
							<div class="row mb-3">
							  <label for="inputNumber" class="col-sm-2 col-form-label">Email:</label>
							  <div class="col-sm-6">
								<input type="text" class="form-control" name="email" id="email">						
							  </div>
							</div>					
						</div><!--end insert alamat-->
						
						<div class="row mb-3">
						  <label class="col-sm-2 col-form-label">Sesi:</label>
						  <div class="col-sm-6">
							<select class="form-select" aria-label="Default select example" name="sesi" id="sesi" required>
							  <option selected></option>
							  <option value="PAGI">PAGI</option>
							  <option value="PETANG">PETANG</option>
							  
							</select>
						  </div>
						</div>
						
						
						<div class="row mb-3">
						  <label for="inputNumber" class="col-sm-2 col-form-label">File Upload:</label>
						  <div class="col-sm-6">
							<input class="form-control" type="file" id="file" name="myfile" >
						  </div>
						</div>
						
						
						<div class="text-center">
						  <button type="submit" class="btn btn-primary">Tambah</button>
						  <button type="reset" class="btn btn-secondary">Reset</button>
						</div>
					</form>
	  
                </div>
            </div>
          </div>     
          </div>
        </div>
      </div>
    </section>
  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer" class="footer">
    <div class="copyright">
      &copy; Copyright <strong><span>Majlis Agama Islam Negeri Pulau Pinang @ 2022</span></strong>.
    </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="assets/vendor/apexcharts/apexcharts.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/chart.js/chart.min.js"></script>
  <script src="assets/vendor/echarts/echarts.min.js"></script>
  <script src="assets/vendor/quill/quill.min.js"></script>
  <script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
  <script src="assets/vendor/tinymce/tinymce.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <script src="asserts/js/jquery-1.11.1.min.js"></script> 

  <script src="sessionTimeout.js"></script>
  <!-- This will init session -->
  <script>
    initSessionMonitor();
  </script> 

<!-- This script is only for show cound down timer on HTML Page -->
<script type="text/javascript">
window.onload = function(){
(function(){
  var counter = 600;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }    
    if (counter === 0) {      
        clearInterval(counter);
    }
  }, 1000);

})();
}
</script>
  
<script>
function myFunction() {
  var x = document.getElementById("dartarAlamat");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>

</html>