<div class="breadcrumb">
<h4><?php echo $breadcrumb ?></h4>
</div>
<div class="row">
	<div class="col-md-12">
    <div class="" id="messagealert">
        <a href="#" class="close" data-dismiss="alert"></a>
        <strong id="message"></strong>
    </div>
   
    <div class="panel panel-default" id="layoutTableUser">
      <div style="position:right;padding:5px;">
        <div class="btn-group btn-group-devided">
            <a href="#" onclick="ShowFormAdd();" class="btn btn-success btn-sm">
                <i class="fa fa-plus"> </i> Tambah Data User
            </a>
        </div>
      </div>
        <div class="panel-body">
          <table class="table table-bordered" id="tblUser">
            <thead>
            <th>Username</th>
            <th>Nama</th>
            <th>Email</th>
            <th>Role</th>
            <th></th>
            <th></th>
            </thead>				
          </table>
        </div>        
    </div>
  </div>

  <div class="col-md-12" id="layoutDetailUser">
    <div class="box">    
      <div class="topright btn-group btn-group-devided">
        <a href="#" onclick="BackToListUser();" class="btn btn-info btn-sm">
            <i class=""> </i> List Daftar User
        </a>
      </div>
      <div class="box-header with-border">
        <h3 class="box-title">Detail Information User</h3>
      </div>
      <div class="row">
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Username</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailUsername"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailFullName"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Email</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailEmail"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Handpone</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailHandpone"></span></td>
                </tr>
                
            </table>
          </div>
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Jenis Kelamin</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailGender"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Status</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailStatusActive"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Role / Peran</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailRole"></span></td>
                </tr>
             </table>
          </div>
    </div>
    </div>
  </div>

   <div class="col-md-12" id="layoutFormAddUser">
    <div class="box">
      <div class="topright btn-group btn-group-devided">
        
      </div>
      <div class="box-header with-border">
          <h3 class="box-title">Form Registrasi User</h3>
      </div>
      <div class="row">
        
        <form  id="myfrm" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Username</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddUsername"
                         id="txtAddUsername" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddFullName"
                         id="txtAddFullName" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Password</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="password" class="form-control" name="txtAddPassword"
                         id="txtAddPassword" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Email</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddMail" id="txtAddMail" autocomplete="off">
                    </td>
                </tr>
            </table>
          </div>
          <div class="col-sm-6" >
              <table class="table">
                <tr>
                    <td  width="150px;"><label>Handpone</label></td>
                    <td width="10px;">:</td>
                    <td>
                      <input type="text" class="form-control" name="txtAddPhone" id="txtAddPhone" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Jenis Kelamin</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="radio" class="rbjenkel" name="rbjenkel" value="L"> Laki-Laki 
                        <input type="radio" class="rbjenkel" name="rbjenkel"  value="W"> Wanita
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Status</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="radio" class="rbstatusactive" name="rbstatusactive" value="Y"> Active
                        <input type="radio" class="rbstatusactive" name="rbstatusactive"  value="N"> Tidak Active
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Role / Peran</label></td>
                    <td width="10px;">:</td>
                    <td>
                      <select class="form-control"  id="role" name="role">
                       <option value="">---PILIH---</option>
                       <?PHP
                             foreach($role as $key)
                             {
                                echo "<option value=$key->role_id>$key->roleName</option>";
                             }
                          echo "</select>";
                       ?>
                      </select>
                    </td>
                </tr>
                
             </table>

          </div>
            <div class="col-sm-12">
              <div class="box-footer with-border">
               <input  type="submit" id="save" name="save" class="btn btn-primary btn-sm" Value="Simpan Data User">
               <a href="#" onclick="BackToListUser();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  User
                </a>    
              </div>
            </div>
              
          </form>
        </div>
         
    </div>
  </div>

  <div class="col-md-12" id="layoutFormEditUser">
    <div class="box">
      <div class="topright btn-group btn-group-devided">
        
      </div>
      <div class="box-header with-border">
          <h3 class="box-title">Form Edit User</h3>
      </div>
      <div class="row">
        
        <form  id="myfrmEdit" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <input type="hidden" name="txtIdUsername" id="txtIdUsername">
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Username</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditUsername"
                         id="txtEditUsername" autocomplete="off" disabled>
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditFullName"
                         id="txtEditFullName" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Email</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditMail" id="txtEditMail" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Handpone</label></td>
                    <td width="10px;">:</td>
                    <td>
                      <input type="text" class="form-control" name="txtEditPhone" id="txtEditPhone" autocomplete="off">
                    </td>
                </tr>
            </table>
          </div>
          <div class="col-sm-6" >
              <table class="table">
                <tr>
                    <td  width="150px;"><label>Jenis Kelamin</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="radio" id="rbjenkel1" name="rbjenkel" value="L"> Laki-Laki 
                        <input type="radio" id="rbjenkel2" name="rbjenkel"  value="W"> Wanita
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Status</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="radio" id="rbstatusactive1" name="rbstatusactive" value="Y"> Active
                        <input type="radio" id="rbstatusactive2" name="rbstatusactive"  value="N"> Tidak Active
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Role / Peran</label></td>
                    <td width="10px;">:</td>
                    <td>
                      <select class="form-control"  id="roleEdit" name="roleEdit">
                       <option value="">---PILIH---</option>
                       <?PHP
                             foreach($role as $key)
                             {
                                echo "<option value=$key->role_id>$key->roleName</option>";
                             }
                          echo "</select>";
                       ?>
                      </select>
                    </td>
                </tr>
                
             </table>

          </div>
            <div class="col-sm-12">
              <div class="box-footer with-border">
               <input  type="submit" id="btnUpdate" name="btnUpdate" class="btn btn-primary btn-sm" Value="Simpan Data User">
               <a href="#" onclick="BackToListUser();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  User
                </a>    
              </div>
            </div>
              
          </form>
        </div>
         
    </div>

  </div>

</div>

<script>
  var table;
  function BackToListUser()
  {
    $('#layoutTableUser').show();
    $('#layoutFormEditUser').hide();
    $('#layoutDetailUser').hide();
    $('#layoutFormAddUser').hide();
    clearObject();
    table.ajax.reload();
  }

  function ShowFormAdd(){
      $('#layoutTableUser').hide();
      $('#layoutFormEditUser').hide();
      $('#layoutDetailUser').hide();
      $('#layoutFormAddUser').show();
      clearObject();
  }

  function DetailUser(id)
  {
   
    $('#layoutTableUser').hide();
    $('#layoutFormEditUser').hide();
    $('#layoutDetailUser').show();
    $('#layoutFormAddUser').hide();
    
    $.ajax({
             type: "POST",
             url: "<?php echo base_url('user/GetDataUserById') ?>",
              data: {id: id},
             dataType : "JSON",
          success : function(data)
          {
            $("#txtDetailUsername").text(data[0].username);
            $("#txtDetailFullName").text(data[0].full_name);
            $("#txtDetailEmail").text(data[0].email);
            $("#txtDetailHandpone").text(data[0].no_telp);
            $("#txtDetailRole").text(data[0].role_id);

            var gender = data[0].gender;
            if(gender == "L")
              $("#txtDetailGender" ).text('Laki-Laki');
            if(gender == "W")
             $("#txtDetailGender" ).text('Wanita');

            var status = data[0].active;
            if(status == "Y")
              $("#txtDetailStatusActive" ).text('Active');
            
            if(status == "N")
              $("#txtDetailStatusActive").text('Tidak Active');
          },
          error : function(){
             alert("Tidak dapat menampilkan data!");
          }
    });
  }


  function EditUser(id)
  {

    $('#layoutTableUser').hide();
    $('#layoutFormEditUser').show();
    $('#layoutDetailUser').hide();
    $('#layoutFormAddUser').hide();

     $.ajax({
             type: "POST",
             url: "<?php echo base_url('user/GetDataUserById') ?>",
              data: {id: id},
             dataType : "JSON",
          success : function(data)
          {
            $("#txtIdUsername").val(data[0].username);
            $("#txtEditUsername").val(data[0].username);
            $("#txtEditFullName").val(data[0].full_name);
            $("#txtEditMail").val(data[0].email);
            $("#txtEditPhone").val(data[0].no_telp);
            $("#roleEdit").val(data[0].role_id);


            var gender = data[0].gender;
            if(gender == "L")
              $("#rbjenkel1" ).prop( "checked", true);
            if(gender == "W")
              $("#rbjenkel2" ).prop("checked", true);

            var status = data[0].active;
            if(status == "Y")
              $("#rbstatusactive1" ).prop( "checked", true);
            
            if(status == "N")
              $("#rbstatusactive2" ).prop("checked", true);

          },
          error : function(){
             alert("Tidak dapat menimpan data!");
          }
    });
  }

  function clearObject()
  {
    $("#txtAddUsername").val('');
    $("#txtAddFullName").val('');
    $("#txtAddPassword").val('');
    $("#txtAddMail").val('');
    $("#txtAddPhone").val('');
    $( ".rbjenkel" ).prop( "checked", false);
    $( ".rbstatusactive" ).prop( "checked", false);
    $('#role').val('');
  }
    

    $(document).ready(function () 
    {

      $("#messagealert").hide();

      $('#layoutFormEditUser').hide();
      $('#layoutDetailUser').hide();
      $('#layoutFormAddUser').hide();

      $('form#myfrm').submit(function(event) 
      {
        event.preventDefault();
        var txtAddUsername  = $('#txtAddUsername').val();
        var txtAddFullName  = $('#txtAddFullName').val();
        var txtAddPassword  = $('#txtAddPassword').val();
        var txtAddMail      = $('#txtAddMail').val();
        var txtAddPhone     = $('#txtAddPhone').val();
        var role            = $('#role').val();

        if(txtAddUsername == "") 
        {
            alert('Username Tidak boleh kosong');
            $("#txtAddUsername").focus();
            return;
        }

        if(txtAddFullName == "") 
        {
            alert('Nama Tidak boleh kosong');
            $("#txtAddFullName").focus();
            return;
        }

        if(txtAddPassword == "") 
        {
            alert('Password Tidak boleh kosong');
            $("#txtAddPassword").focus();
            return;
        }

        if(txtAddMail == "") 
        {
            alert('Email Tidak boleh kosong');
            $("#txtAddMail").focus();
            return;
        }

        if(role == "") 
        {
            alert('Role Harus Di Pilih !');
            $('#role').focus();
            return;
        }

        var formData = new FormData($(this)[0]);    
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('user/InsertUser') ?>",
                  data: formData,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  beforeSend: function() 
                  {
                     $("#messagealert").show();
                     $("#save").val('Connecting...');
                  },
         }).done(function(data){
              if (data=='ok'){
                $("#message").text('Data Berhasil Di Simpan');
                $("#messagealert").addClass("alert alert-info");
                clearObject();
                $('#layoutFormEditUser').hide();
                $('#layoutDetailUser').hide();
                $('#layoutFormAddUser').hide();
                $("#layoutTableUser").show();
              }
              table.ajax.reload();
              $("#messagealert").fadeOut(3000);
              $("#save").val('Simpan Data User');
              
        });
      });
       

      $('form#myfrmEdit').submit(function(event) 
      {
        event.preventDefault();
        var txtEditUsername  = $('#txtEditUsername').val();
        var txtEditFullName  = $('#txtEditFullName').val();
        var txtEditMail      = $('#txtEditMail').val();
        var txtEditPhone     = $('#txtEditPhone').val();
        var roleEdit         = $('#roleEdit').val();
       
        if(txtEditUsername == "") 
        {
            alert('Username Tidak boleh kosong');
            $("#txtEditUsername").focus();
            return;
        }

        if(txtEditFullName == "") 
        {
            alert('Nama Tidak boleh kosong');
            $("#txtEditFullName").focus();
            return;
        }

        if(txtEditMail == "") 
        {
            alert('Email Tidak boleh kosong');
            $("#txtEditMail").focus();
            return;
        }

        if(txtEditPhone == "") 
        {
            alert('Phone Tidak boleh kosong');
            $("#txtEditPhone").focus();
            return;
        }

        if(roleEdit == "") 
        {
            alert('Role Harus Di Pilih !');
            $('#roleEdit').focus();
            return;
        }


        var formData = new FormData($(this)[0]);    
         $("#messagealert").show();
         
       
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('user/UpdateUser') ?>",
                  data: formData,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  beforeSend: function()
                  {
                    $("#btnUpdate").val('Connecting...');
                  },
         }).done(function(data){
              if (data=='ok')
              {
                $("#message").text('Data Berhasil Di Simpan');
                $("#messagealert").addClass("alert alert-info");
                clearObject();
                $('#layoutFormEditUser').hide();
                $('#layoutDetailUser').hide();
                $('#layoutFormAddUser').hide();
                $("#layoutTableUser").show();
                clearObject();
              }
              $("#layoutTableCustomer").show();
              table.ajax.reload();
              $("#messagealert").fadeOut(3000);
              $("#btnUpdate").val('Simpan Data User');
        });
      });
        
      table= $('#tblUser').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                  "url": "<?php echo base_url('user/GetDataUser') ?>",
                  "dataType": "json",
                  "type": "POST",
        		      "data":{  
                          '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
                         }
    		            },
            	    "columns": [
                          { "data": "username" },
            		          { "data": "full_name" },
            		          { "data": "email" },
            		          { "data": "roleName" },
                          {
                            "render": function (data, type, full, meta) 
                            {
                                return '<a href="#" onclick="return DetailUser(\'' + full.username + '\'); "><span class="glyphicon glyphicon-search"></span></a>';
                            }
                          },
                          {
                            "render": function (data, type, full, meta) 
                            {
                                return '<a href="#" onclick="return EditUser(\'' + full.username + '\'); "><span class="glyphicon glyphicon-pencil"></span></a>';
                            }
                          }

            		       ]	 
     });
    });

    function formatDate(date) 
    {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [day, month, year].join('-');
    }
</script>

<style type="text/css">
  input[type=text], textarea
  {
      border: 1px solid #ccc;
  }
  input[type=text]:focus, textarea:focus
  {
      background-color: #FFBFFF;
      border: 1px solid #ccc;
  }
</style>