<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="layoutTableCustomer">
      <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 Customer
            </a>
        </div>
      </div>
        <div class="panel-body">
          <table class="table table-bordered" id="customer">
            <thead>
            <th>Kode</th>
            <th>Nama Customer</th>
            <th>E-mail</th>
            <th>Phone</th>
            <th>Status Active</th>
            <th></th>
            <th></th>
            </thead>				
          </table>
        </div>        
    </div>
  </div>

  <div class="col-md-12" id="layoutDetailCustomer" style="display: none;">
    <div class="box">    
      <div class="topright btn-group btn-group-devided">
        <a href="#" onclick="BackToListCustomer();" class="btn btn-info btn-sm">
            <i class=""> </i> List Daftar Customer
        </a>
      </div>
      <div class="box-header with-border">
        <h3 class="box-title">Detail Information Customer</h3>
      </div>
      <div class="row">
          <div class="col-sm-6" >
            <table class="table">
                 <tr>
                    <td  width="150px;"><label>Code Customer</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailCustomerCode"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama Customer</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailCustomerName"></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>
            </table>
          </div>
          <div class="col-sm-6" >
            <table class="table">
               <tr>
                    <td  width="150px;"><label>Handpone</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailHandpone"></span></td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Alamat</label></td>
                    <td width="10px;">:</td>
                    <td><span class="col-sm-12" id="txtDetailCustomerAddrees"></span></td>
                </tr>  
             </table>
          </div>
    </div>
    </div>
  </div>

   <div class="col-md-12" id="layoutformadd" style="display: none;">
    <div class="box">
      <div class="topright btn-group btn-group-devided">
        
      </div>
      <div class="box-header with-border">
          <h3 class="box-title">Form Customer</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>Kode Customer</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddCustomerCode"
                        id="txtAddCustomerCode" autocomplete="off" maxlength="10" onBlur="checkAvailability()">
                        <span id="codecustomer-availability-status"></span> 
                        <p>
                          <img src="<?php echo base_url('asset/'); ?>images/loading.gif"
                           id="loaderIcon" style="display:none" /></p>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama Customer</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddCustomerName"
                         id="txtAddCustomerName" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Email</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtAddCustomerMail" id="txtAddCustomerMail" 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="txtAddCustomerPhone" id="txtAddCustomerPhone" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Alamat</label></td>
                    <td width="10px;">:</td>
                      <td>
                            <input type="text" class="form-control" name="txtAddCustomerAddrees" id="txtAddCustomerAddrees" autocomplete="off">
                      </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 Customer">
               <a href="#" onclick="BackToListCustomer();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  Customer
                </a>    
              </div>
            </div>
              
          </form>
        </div>
         
    </div>
  </div>

  <div class="col-md-12" id="layoutformedit" style="display: none;">
    <div class="box">
      <div class="topright btn-group btn-group-devided">
         
      </div>
      <div class="box-header with-border">
          <h3 class="box-title">Form Edit Customer</h3>
      </div>
      <div class="row">
          <form  id="myfrmedit" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <input type="hidden" name="txtIdCustomer" id="txtIdCustomer">
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Kode Customer</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditCustomerCode"
                         id="txtEditCustomerCode" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Nama Customer</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditCustomerName"
                         id="txtEditCustomerName" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Email</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtEditCustomerMail" id="txtEditCustomerMail" 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="txtEditCustomerPhone" id="txtEditCustomerPhone" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Alamat</label></td>
                    <td width="10px;">:</td>
                      <td>
                            <input type="text" class="form-control" name="txtEditCustomerAddrees" id="txtEditCustomerAddrees" autocomplete="off">
                      </td>                    
                </tr>  
                <tr>
                    <td  width="150px;"><label>Status</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="radio" id="rbactive1" name="rbactive" value="Y"> Active 
                        <input type="radio" id="rbactive2" name="rbactive"  value="N"> Tidak Active
                       
                    </td>
                </tr>
             </table>
          </div>
          <div class="col-sm-12">
              <div class="box-footer with-border">
               <input  type="submit" id="saveupdate" name="save" class="btn btn-primary btn-sm" Value="Simpan Data Customer">
                <a href="#" onclick="BackToListCustomer();" class="btn btn-info btn-sm">
                  <i class=""> </i> List Daftar Customer
                </a>   
              </div>
          </div>
          </form>
        </div>
    </div>
  </div>

</div>

<script>
  var table;
  function BackToListCustomer()
  {
    $('#layoutTableCustomer').show();
    $('#layoutformedit').hide();
    $('#layoutDetailCustomer').hide();
    $('#layoutformadd').hide();

    table.ajax.reload();
  }

  function clearObject(){
    $("#txtAddCustomerName").val('');
    $("#txtAddCustomerPhone").val('');
    $("#txtAddCustomerMail").val('');
    $("#txtAddCustomerAddrees").val('');
    $("#txtAddCustomerBirthPlace").val('');
    $("#txtAddCustomerBirthDate").val('');
    $( ".rbjenkel" ).prop( "checked", false);
  
  }

  function ShowFormAdd(){
      $('#layoutTableCustomer').hide();
      $('#layoutformedit').hide();
      $('#layoutDetailCustomer').hide();
      $('#layoutformadd').show();
      clearObject();
  }

  function DetailCustomer(id)
  {
    $("#layoutDetailCustomer").show();
    $("#layoutTableCustomer").hide();
    $('#layoutformadd').hide();
    $('#layoutformedit').hide();
     $.ajax({
             type: "POST",
             url: "<?php echo base_url('customer/getDataCustomerById') ?>",
              data: {id: id},
             dataType : "JSON",
          success : function(data)
          {
            //console.log(data[0].customer_name);
            $("#txtDetailCustomerCode").text(data[0].customer_code);
            $("#txtDetailCustomerName").text(data[0].customer_name);
            $("#txtDetailEmail").text(data[0].email);
            $("#txtDetailEmail").text(data[0].email);
            $("#txtDetailHandpone").text(data[0].phone);
            $("#txtDetailCustomerAddrees").text(data[0].address);
          },
          error : function(){
             alert("Tidak dapat menampilkan data!");
          }
    });
  }


    function EditCustomer(id)
    {
      $("#layoutDetailCustomer").hide();
      $("#layoutTableCustomer").hide();
      $('#layoutformadd').hide();
      $('#layoutformedit').show();
     
       $.ajax({
               type: "POST",
               url: "<?php echo base_url('customer/getDataCustomerById') ?>",
                data: {id: id},
               dataType : "JSON",
            success : function(data)
            {
             
              $( "#txtEditCustomerCode" ).prop( "disabled", true);
              $("#txtEditCustomerCode").val(data[0].customer_code);
              $("#txtIdCustomer").val(data[0].id);
              $("#txtEditCustomerName").val(data[0].customer_name);
              $("#txtEditCustomerMail").val(data[0].email);
              $("#txtEditCustomerPhone").val(data[0].phone);
              $("#txtEditCustomerAddrees").val(data[0].address);
              

              var active = data[0].isactive;
              if(active == "Y")
                $("#rbactive1" ).prop( "checked", true);
              if(active == "N")
                $("#rbactive2" ).prop("checked", true);


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

    function checkAvailability() {
      $("#loaderIcon").show();
      //data: {id : $("#instituteid").val()}, 
      var strCode = $("#txtAddCustomerCode").val();
      var Code = jQuery.trim(strCode);
      jQuery.ajax({
         url : "<?php echo base_url('customer/checkAvailability') ?>",
         data:"code=" + Code ,
         type: "POST",
         success:function(data)
         {
            if(data !="")
               $("#txtAddCustomerCode").val('');
            $("#codecustomer-availability-status").html(data);
            $("#loaderIcon").hide();
         },
         error:function (){}
      });
   }

    

    $(document).ready(function () 
    {

      $("#messagealert").hide();
      $("#layoutDetailCustomer").hide();
      $("#layoutformedit").hide();
      $('#layoutformadd').hide();
      
      $('form#myfrm').submit(function(event) 
      {
        event.preventDefault();
        var txtAddCustomerCode  = $('#txtAddCustomerCode').val();
        var txtAddCustomerName  = $('#txtAddCustomerName').val();
        var txtAddCustomerMail  = $('#txtAddCustomerMail').val();
        var txtAddCustomerPhone = $('#txtAddCustomerPhone').val();
        var txtAddCustomerBirthPlace = $('#txtAddCustomerBirthPlace').val();
        var txtAddCustomerBirthDate  = $('#txtAddCustomerBirthDate').val();
        var rbjenkel                 = $(".rbjenkel:checked").val();
        var txtAddCustomerAddrees    = $('#txtAddCustomerAddrees').val();

        if(txtAddCustomerCode == "") 
        {
            alert('Kode Customer Tidak boleh kosong');
            $("#txtAddCustomerCode").focus();
            return;
        }

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

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

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

        var formData = new FormData($(this)[0]);    
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('customer/InsertCustomer') ?>",
                  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();
                $("#layoutDetailCustomer").hide();
                $("#layoutformedit").hide();
                $('#layoutformadd').hide();
                $("#layoutTableCustomer").show();
              }
              table.ajax.reload();
              $("#messagealert").fadeOut(3000);
              $("#save").val('Simpan Data Customer');
              
        });
      });
       

      $('form#myfrmedit').submit(function(event) 
      {
        event.preventDefault();
        var txtIdCustomer  = $('#txtIdCustomer').val();
        var txtEditCustomerName  = $('#txtEditCustomerName').val();
        var txtEditCustomerMail  = $('#txtEditCustomerMail').val();
        var txtEditCustomerPhone = $('#txtEditCustomerPhone').val();
        var txtEditCustomerAddrees    = $('#txtEditCustomerAddrees').val();

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

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

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

        var formData = new FormData($(this)[0]);    
         $("#messagealert").show();
         
       
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('customer/UpdateCustomer') ?>",
                  data: formData,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  beforeSend: function()
                  {
                    $("#saveupdate").val('Connecting...');
                  },
         }).done(function(data){


              if (data=='1'){
                $("#message").text('Data Berhasil Di Simpan');
                $("#messagealert").addClass("alert alert-info");;
                $("#messagealert").fadeOut(3000);
                clearObject();
              }
              
              table.ajax.reload();
              $("#saveupdate").val('Simpan Data Customer');
              $("#layoutDetailCustomer").hide();
              $("#layoutformedit").hide();
              $('#layoutformadd').hide();
              $("#layoutTableCustomer").show();
        });
      });
        
      table= $('#customer').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                  "url": "<?php echo base_url('customer/getDataCustomer') ?>",
                  "dataType": "json",
                  "type": "POST",
        		      "data":{  
                          '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
                         }
    		            },
            	    "columns": [
                          { "data": "customer_code" },
            		          { "data": "customer_name" },
            		          { "data": "email" },
            		          { "data": "phone" },
                          { "data": "isactive" },
                          {
                            "render": function (data, type, full, meta) 
                            {
                                return '<a href="#" onclick="return DetailCustomer(\'' + full.id + '\'); "><span class="glyphicon glyphicon-search"></span></a>';
                            }
                          },
                          {
                            "render": function (data, type, full, meta) 
                            {
                                return '<a href="#" onclick="return EditCustomer(\'' + full.id + '\'); "><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>