<?= $this->extend('template/layout') ?>

<?= $this->section('title') ?>Profile - <?= env('app.name') ?> <?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
   $uri      = current_url(true);
   $segment1 = $uri->setSilent()->getSegment(1);
   $segment2 = $uri->setSilent()->getSegment(2);
   $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
   <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
   <li class="breadcrumb-item">Account</li>
   <li class="breadcrumb-item">Profile</li>
   <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
   <!-- DATA UMUM USER -->
   <div class="col-lg-6 col-xl-4 order-lg-1 order-xl-1">
      <div class="card mb-g rounded-top">
         <div class="row no-gutters row-grid">
            <div class="col-12">
               <div class="d-flex flex-column align-items-center justify-content-center p-4">
                  <?= form_open('', 'id="form-avatar"') ?>
                     <input type="file" id="avatar" name="avatar" accept="image/png, image/jpg, image/jpeg" style="display: none;">
                     <a href="javascript:void(0)" id="img-upload" class="profile-photo" title="Klik gambar untuk mengganti foto" data-placement="bottom"><img class="rounded-circle shadow-2 img-thumbnail" src="<?= $avatar ?>" width="200" alt=""></a>
                  </form>

                  <h5 class="mb-0 fw-700 text-center mt-3">
                     <?= $username ?>
                     <small class="text-muted mb-0"><?= $row->nip ?></small>
                     <small class="text-muted mb-0"><?= $email ?></small>
                  </h5>
                  <div class="mt-4 text-center demo">
                     <?= $row->nama_alt ?> pada<br>
                     <?= $row->nama_unit ?>
                  </div>
               </div>
            </div>

            <?= form_open('', 'id="users_form" class="width100"') ?>
               <div class="row no-gutters row-grid">
                  <div class="col-7">
                     <div class="text-center p-3">
                        <div class="form-group" id="fg_whatsapp">
                           <input type="text" id="whatsapp" maxlength="20" name="whatsapp" value="<?= $row->whatsapp ?>" class="form-control text-center angka">
                        </div>
                     </div>
                  </div>
                  <div class="col-5">
                     <div class="text-center p-3">
                        <button type="button" class="btn btn-primary btn-block" id="btn_users" onclick="change_wa()">Update</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>

      <div class="card mb-g">
         <div class="row row-grid no-gutters">
            <div class="col-12">
               <div class="p-3">
                  <?= form_open('', 'id="password_form"') ?>
                     <div class="form-group" id="fg_password">
                        <div class="input-group">
                           <input type="password" id="password" name="password" value="<?= $password ?>" required class="form-control ginput" placeholder="New Password">
                           <div class="input-group-append">
                              <button class="btn btn-outline-secondary toggle-password" type="button" data-target="#password">
                                 <i class="fa fa-eye"></i>
                              </button>
                           </div>
                        </div>
                        <div class="invalid-feedback" id="em_password"></div>
                     </div>
                     <div class="form-group" id="fg_password_confirm">
                        <div class="input-group">
                           <input type="password" id="password_confirm" name="password_confirm" value="<?= $password_confirm ?>" required class="form-control ginput" placeholder="Confirm New Password">
                           <div class="input-group-append">
                              <button class="btn btn-outline-secondary toggle-password" type="button" data-target="#password_confirm">
                                 <i class="fa fa-eye"></i>
                              </button>
                           </div>
                        </div>
                        <div class="invalid-feedback" id="em_password_confirm"></div>
                     </div>
                     <hr>
                     <div class="invalid-feedback text-center" id="em_message"></div>
                     <div class="p-3 text-center">
                        <button type="button" class="btn btn-primary" id="btn_password" onclick="change_password()"><?= lang('App.change_password') ?></button>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- DATA GRID LOG USER -->
   <div class="col-lg-6 col-xl-8 order-lg-1 order-xl-1">
      <div class="card mb-g rounded-top">
         <div class="row row-grid">
            <div class="col-12">
               
               <ul class="nav nav-tabs nav-tabs-clean" role="tablist">
                  <li class="nav-item">
                     <a class="nav-link active" data-toggle="tab" href="#tab-home" role="tab" aria-selected="true"><i class="fal fa-clock"></i>&nbsp; Log Anda</a>
                  </li>
               </ul>

               <div class="tab-content p-3">
                  <div class="tab-pane fade active show" id="tab-home" role="tabpanel" aria-labelledby="tab-home">
                     <div id="panelfit" data-options="border:false" style="min-height: 500px !important;">
                     <!-- grid start -->
                        <table id="datagrid_log" toolbar="#toolbar_log" url="<?= site_url('account/profile/datagrid') ?>" data-options="nowrap:true,striped:false,ctrlSelect:true,rownumbers:true,pagination:true,multiSort:true,remoteFilter:true,remoteSort:true,pageSize:10,pageList:[10,20,50,100],clientPaging:false,fit:true">
                           <thead data-options="frozen:true">
                              
                           </thead>
                           <thead>
                              <tr>
                                 <th data-options="field:'aksi',sortable:true,width:450">Aktivitas</th>
                                 <th data-options="field:'wkt',sortable:true,width:150,align:'center'">Waktu</th>
                              </tr>
                           </thead>
                        </table>
                        <!-- grid end -->
                     </div>
                  </div>
               </div>

            </div>
         </div>
      </div>
   </div>
</div>
<?= $this->endSection() ?>

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>

<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/jquery.easyui.min.js') ?>"></script>
<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/datagrid-filter-1.0.6/datagrid-filter.js') ?>"></script>

<script type="text/javascript">
   
   $(document).ready(function () {
      adjustpanelfit();
   });

    $(window).resize(function() {
        adjustpanelfit();
    });

    function adjustpanelfit(){
        var height = $(window).height();
        $('#panelfit2').panel({
            height:height - 400
        });
    }
    
    $(document).on('click', '.toggle-password', function () {
       const input = $($(this).data('target'));
       const icon = $(this).find('i');

       // Toggle the input type
       if (input.attr('type') === 'password') {
           input.attr('type', 'text');
           icon.removeClass('fa-eye').addClass('fa-eye-slash');
       } else {
           input.attr('type', 'password');
           icon.removeClass('fa-eye-slash').addClass('fa-eye');
       }
   });
</script>

<script type="text/javascript">

   var datagrid_log = $('#datagrid_log').datagrid({
      queryParams: {
         "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
      },
      onDblClickRow : function(index,row){
         //show_buku();
      }
   });
   datagrid_log.datagrid('enableFilter');
   //-----------------------------------------------------
   var datagrid_notif = $('#datagrid_notif').datagrid({
      queryParams: {
         "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
      },
      onDblClickRow : function(index,row){
         //show_buku();
      }
   });
   datagrid_notif.datagrid('enableFilter');

   $(document).ready(function() {
      "use strict";

      $('#img-upload').click(function(){ 
         $('#avatar').trigger('click'); 
      });

      $('#avatar').change(function(e) {
         e.preventDefault();
         var url = '<?= $action_change_avatar ?>';
         var file = this.files[0];
         var form_data = new FormData();
         form_data.append('avatar', file);

         $.ajax({
            url: url,
            type: "post",
            dataType: 'json',
            data: form_data,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            beforeSend  : function() {
               $(".form-group").removeClass("has-error");
               $(".error-message").html('').hide();
            },
            error: function (xhr, status, message) {
               var res = JSON.parse(xhr.responseText);
               $(res.messages).each(function(i,val){
                  $.each(val,function(k,v){
                     $("#"+inputname).focus();
                     $("#"+k).addClass("is-invalid");
                     $("#em_"+k).html(v).fadeIn();
                  });
               });
            },
            success: function(result) {
               $(".error-message").html('').hide();
               $.messager.alert({
                  title: '<?= lang('App.success') ?>',
                  msg: result.message,
                  fn: function(){
                     window.location.href = "<?= base_url('account/profile') ?>";
                  }
               });
            },
            complete: function() {
               //do nothing
            }
         });
      });
   });

   function change_wa() {
      var url = '<?= $action_change_wa ?>'
      var formData = $('#users_form').serialize();
      $.ajax({
         url: url,
         type: "post",
         dataType: 'json',
         data: formData,
         beforeSend  : function() {
            $(".form-group").removeClass("has-error");
            $(".error-message").html('').hide();
            $("#btn_users").button('loading');
         },
         error: function (xhr, status, message) {
            var res = JSON.parse(xhr.responseText);
            $(res.messages).each(function(i,val){
               var inputname = Object.keys(val)[0];
               $.each(val,function(k,v){
                  $("#"+inputname).focus();
                  $("#fg_"+k).addClass("has-error");
                  $("#em_"+k).html(v).fadeIn();
               });
            });
         },
         success: function(result) {
            $(".error-message").html('').hide();
            $("#btn_users").button('reset');
            $.messager.alert('<?= lang('App.success') ?>',result.message,'info');
         },
         complete: function() {
            $("#btn_users").button('reset');
         }
      });
   }

   function change_password() {
      var url = '<?= $action_change_password ?>'
      var formData = $('#password_form').serialize();
      $.ajax({
         url: url,
         type: "post",
         dataType: 'json',
         data: formData,
         beforeSend  : function() {
            $(".form-group").removeClass("has-error");
            $(".error-message").html('').hide();
            $("#btn_password").button('loading');
         },
         error: function (xhr, status, message) {
            var res = JSON.parse(xhr.responseText);
            $(res.messages).each(function(i,val){
               var inputname = Object.keys(val)[0];
               $.each(val,function(k,v){
                  $("#"+inputname).focus();
                  $("#fg_"+k).addClass("has-error");
                  $("#em_"+k).html(v).fadeIn();
               });
            });
         },
         success: function(result) {
            $(".error-message").html('').hide();
            $("#btn_password").button('reset');
            $.messager.alert('<?= lang('App.success') ?>',result.message,'info');
         },
         complete: function() {
            $("#btn_password").button('reset');
         }
      });
   }

</script>
<?= $this->endSection() ?>