<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
<script type="text/javascript" src="../style/jquery.signature.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style/jquery.signature.css">
<style type="text/css">
body{
    margin-top:20px;
    color: #1a202c;
    text-align: left;
    background-color: #e2e8f0;    
}
.main-body {
    padding: 0px;
}
.card {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}

</style>

<?php
	include "../dashboard/header.php";
  include "../koneksi.php";

  $data = mysqli_query ($koneksi, " select * from user
                    where User_ID = $_GET[id]");
  $row = mysqli_fetch_array ($data);
?>
    <div class="main-body">
    
          <!-- Breadcrumb -->
          <nav aria-label="breadcrumb" class="main-breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.html">User</a></li>
              <li class="breadcrumb-item active" aria-current="page">User Profile</li>
            </ol>
          </nav>
          <!-- /Breadcrumb -->
    
          <div class="row">
            <div class="col-md-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex flex-column align-items-center text-center">
                    <img src="../file/<?php echo $row['Foto']; ?>" width="150">
                    <div class="mt-3">
                      <h4><?php echo $row['User_Name']; ?></h4>
                      <p class="text-secondary mb-1"><?php echo $row['Kasta']=='1'? 'P P I C' : 'ADMIN WAREHOUSE' ; ?></p>
                      <button class="btn btn-primary" id="foto" data-id="<?php echo $_GET['id']; ?>">Upload Profile</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card mt-3">
                <div class="card-body">
                <div class="d-flex flex-column align-items-center text-center">
                    <img src="..\file\<?php echo $row['Paraf']; ?>" width="150">
                    <div class="mt-3">
                      <button class="btn btn-primary" id="paraf">Upload Paraf</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div class="card mb-3">
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">NIK</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <?php echo $row['Nik']; ?>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Nama</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <?php echo $row['User_Name']; ?>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Jabatan</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <?php echo $row['Kasta']=='1'? 'P P I C' : 'ADMIN WAREHOUSE' ; ?>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">No HP</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      (320) 380-4539
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Motto</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      Bay Area, San Francisco, CA
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <a class="btn btn-info " id="edit" data-id="<?php echo $_GET['id']; ?>">Edit</a>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>

<div id="modal-edit" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <form role="form" id="form-edit" method="post" action="input.php" autocomplete="off">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Data User</h4>
        </div>
          <div class="modal-body">
            <div id="data-edit">
            
            </div>        
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary" >Simpan</button>
          </div>
        </form>   
      </div>
    </div>
  </div> 

  <div id="modal-foto" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <form enctype="multipart/form-data" method="post" action="upload1.php" autocomplete="off">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Upload Profile</h4>
        </div>
          <div class="modal-body">
            
            <div class="mb-3">
              <input type="hidden" name="user_id" class="form-control" value="<?php echo $row['User_ID']; ?>">
            </div>

            <div class="mb-3">
              <label class="form-label">Foto</label>
              <input type="file" name="foto" class="form-control" >
            </div>
  
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary" >Simpan</button>
          </div>
        </form>   
      </div>
    </div>
  </div> 

  <div id="modal-paraf" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form enctype="multipart/form-data" method="post" action="upload.php" autocomplete="off">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Upload Paraf</h4>
        </div>
          <div class="modal-body">
            <div id="data-paraf">
            
            </div>
           
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary" >Simpan</button>
          </div>
        </form>   
      </div>
    </div>
  </div> 

  <script type="text/javascript">
    $(document).on('click','#edit',function(e){
    e.preventDefault();
    $("#modal-edit").modal('show');
    $.post('edit.php',
      {id:$(this).attr('data-id')},
      function(html){
        $("#data-edit").html(html);
      }   
    );
  });

  $("#form-edit").submit(function(e) {
    e.preventDefault();
    
    $("#error_nik").html('');
    $("#error_user").html('');
    $("#error_password").html('');
    $("#error_kasta").html('');
    
    var dataform = $("#form-edit").serialize();
    $.ajax({
      url: "update.php",
      type: "post",
      data: dataform,
      success: function(result) {
        var hasil = JSON.parse(result);
        if (hasil.hasil !== "sukses") {
          $("#error_edit_nik").html(hasil.error.edit_nik);
          $("#error_edit_user").html(hasil.error.edit_user);
          $("#error_edit_password").html(hasil.error.edit_password);
          $("#error_edit_kasta").html(hasil.error.edit_kasta);
        } else {
          $('#modal-edit').modal('hide');
          $("#nik").val('');
          $("#user").val('');
          $("#password").val('');
          $("#kasta").val('');
          location.reload(true);
        }
      }
    });
  });

  $(document).on('click','#foto',function(e){
    e.preventDefault();
    $("#modal-foto").modal('show');
  });

  // $(document).on('click','#paraf',function(e){
  //   e.preventDefault();
  //   $("#modal-paraf").modal('show');
  // });

  $(document).on('click','#paraf',function(e){
    e.preventDefault();
    $("#modal-paraf").modal('show');
    $.post('sign.php',
      {id:$(this).attr('data-id')},
      function(html){
        $("#data-paraf").html(html);
      }   
    );
  });

 
  </script>