<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="layoutTableProduct">
      <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 Produk
            </a>
        </div>
      </div>
        <div class="panel-body">
          <table class="table table-bordered" id="product">
            <thead>
            <th>Product Code</th>
            <th>Product Name</th>
            <th width="100px;">Status Active</th>
            <th width="50px;"></th>
            <th width="50px;"></th>
            </thead>				
          </table>
        </div>        
    </div>
  </div>

  <div class="col-md-12" id="layoutFormAddProduct" 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 Tambah Produk Baru</h3>
          <div style="position:right;padding:5px;">
        </div>
      </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="200px;"><label>Kode Produk</label></td>
                <td width="10px;">:</td>
                <td>
                  <div class="col-sm-12">
                      <input type="text" class="form-control" name="txtAddProductCode"
                       id="txtAddProductCode" autocomplete="off" onBlur="checkAvailability()">
                  </div>
                   <span id="codeproduct-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="200px;"><label>Nama Produk</label></td>
                <td width="10px;">:</td>
                <td>
                  <div class="col-sm-12">
                      <input type="text" class="form-control" name="txtAddProductName"
                       id="txtAddProductName" autocomplete="off">
                      </div>
                  </td>
              </tr>
              <tr>
                  <td  width="150px;"><label>Deskripsi</label></td>
                  <td width="10px;">:</td>
                  <td>
                      <div class="col-sm-12">
                        <textarea rows="4" cols="38" id="txtAddProductDeskripsi" name="txtAddProductDeskripsi"></textarea>
                      </div>
                  </td>
              </tr>
            </table>
          </div>
          <div class="col-sm-6" >
            <table class="table">
              <tr>
                  <td  width="200px;"><label>Gambar Produk</label></td>
                  <td width="10px;">:</td>
                  <td>
                      <div class="col-sm-6">
                      <input type="file" name="fupload"  id="fupload">
                      <img src="" id="txtAddProductImageTag" width="200px" />
                      </div>
                  </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 Produk">
               <a href="#" onclick="BackToListProduct();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  Produk
                </a>    
              </div>
          </div>
        </form>
    </div>
    </div>    
  </div>

  <div class="col-md-12" id="layoutformeditProduct" 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 Produk</h3>
      </div>
      <div class="row">
          <form  id="myfrmedit" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <input type="hidden" name="txtIdProduct" id="txtIdProduct">
          <div class="col-sm-6" >
            <table class="table">
              <tr>
                <td  width="200px;"><label>Kode Produk</label></td>
                <td width="10px;">:</td>
                <td>
                  <div class="col-sm-12">
                      <input type="text" class="form-control" name="txtEditProductCode"
                       id="txtEditProductCode" autocomplete="off">
                      </div>
                  </td>
              </tr>
              <tr>
                <td  width="200px;"><label>Nama Produk</label></td>
                <td width="10px;">:</td>
                <td>
                  <div class="col-sm-12">
                      <input type="text" class="form-control" name="txtEditProductName"
                       id="txtEditProductName" autocomplete="off">
                      </div>
                  </td>
              </tr>
              <tr>
                  <td  width="150px;"><label>Deskripsi</label></td>
                  <td width="10px;">:</td>
                  <td>
                      <div class="col-sm-12">
                        <textarea rows="4" cols="38" id="txtEditProductDeskripsi" name="txtEditProductDeskripsi"></textarea>
                      </div>
                  </td>
              </tr>
            </table>
          </div>
          <div class="col-sm-6" >
            <table class="table">
              <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>
              <tr>
                  <td  width="200px;"><label>Gambar Produk</label></td>
                  <td width="10px;">:</td>
                  <td>
                      <div class="col-sm-6">
                      <input type="file" name="fupload" id="fuploadEdit">
                      <img src="" id="txtEditProductImageTag" width="200px" />
                      </div>
                  </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 Produk">
               <a href="#" onclick="BackToListProduct();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  Produk
                </a>    
              </div>
          </div>
          </form>
        </div>
    </div>
  </div>

  <div class="col-md-12" id="layoutFormDetailProduct" 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">Detail Produk</h3>
      </div>
      <div class="row">
          <form  id="myfrmdetail" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <div class="col-sm-6" >
            <table class="table">
              <tr>
                <td  width="200px;"><label>Kode Produk</label></td>
                <td width="10px;">:</td>
                <td><span class="col-sm-12" id="txtDetailProductCode"></span></td>
              </tr>
              <tr>
                <td  width="200px;"><label>Nama Produk</label></td>
                <td width="10px;">:</td>
                <td><span class="col-sm-12" id="txtDetailProductName"></span></td>
              </tr>
              <tr>
                  <td  width="150px;"><label>Deskripsi</label></td>
                  <td width="10px;">:</td>
                  <td><span class="col-sm-12" id="txtDetailProductDeskripsi"></span></td>
              </tr>
            </table>
          </div>
          <div class="col-sm-6" >
            <table class="table">
              <tr>
                  <td  width="200px;"><label>Gambar Produk</label></td>
                  <td  width="10px;">:</td>
                  <td><img src="" id="txtDetailProductImageTag" width="200px" /></td>
              </tr>
            </table>
          </div>
          <div class="col-sm-12">
              <div class="box-footer with-border">
               <a href="#" onclick="BackToListProduct();" class="btn btn-info btn-sm">
                  <i class=""> </i>Kembali Ke List  Produk
                </a>    
              </div>
          </div>
          </form>
        </div>
    </div>
  </div>
</div>

<script>
    var table;


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

    function clearObject()
    {
      $("#txtAddProductCode").val('');
      $("#txtAddProductName").val('');
      $("#txtAddProductDeskripsi").val('');
      $("#fupload").val('');
      $('#txtAddProductImageTag').attr('src', '');
      var $el = $('#fupload');
      $el.wrap('<form>').closest('form').get(0).reset();
      $el.unwrap();
      
    }
    
    function ShowFormAdd(){
      $('#layoutFormAddProduct').show();
      $('#layoutTableProduct').hide();
      $('#layoutformeditProduct').hide();
      $('#layoutFormDetailProduct').hide();
       clearObject();
    }

    function BackToListProduct(){
      $('#layoutTableProduct').show();
      $('#layoutFormAddProduct').hide();
      $('#layoutformeditProduct').hide();
      $('#layoutFormDetailProduct').hide();
      clearObject();
      table.ajax.reload();
    }

    function EditProduct(id)
    {
      $('#layoutFormDetailProduct').hide();
      $("#layoutFormAddProduct").hide();
      $("#layoutTableProduct").hide();
      $('#layoutformeditProduct').show();

      var dir = "<?php echo base_url('asset/file_product/') ?>";
       $.ajax({
               type: "POST",
               url: "<?php echo base_url('product/GetDataProductById') ?>",
                data: {id: id},
               dataType : "JSON",
            success : function(data)
            {

              $("#txtEditProductCode" ).prop( "disabled", true);
              $("#txtIdProduct").val(data[0].id);
              $("#txtEditProductCode").val(data[0].product_code);
              $("#txtEditProductName").val(data[0].product_name);
              $("#txtEditProductDeskripsi").val(data[0].description);
              
              //rbnewproduct1
              if(data[0].file_name == null || data[0].file_name == '')
                $("#txtEditProductImageTag").attr("src",'');  
              else
                $("#txtEditProductImageTag").attr("src",dir + data[0].file_name);


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

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

    function readURLEdit(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#txtEditProductImageTag').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#txtAddProductImageTag').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#fuploadEdit").change(function(){
        readURLEdit(this);
    });


    $("#fupload").change(function(){
        readURL(this);
    });

    function DetailProduct(id)
    {
      $('#layoutFormDetailProduct').show();
      $("#layoutFormAddProduct").hide();
      $("#layoutTableProduct").hide();
      $('#layoutformeditProduct').hide();
      var dir = "<?php echo base_url('asset/file_product/') ?>";
       $.ajax({
               type: "POST",
               url: "<?php echo base_url('product/GetDataProductById') ?>",
                data: {id: id},
               dataType : "JSON",
            success : function(data)
            {
              $("#txtDetailProductCode").text(data[0].product_code);
              $("#txtDetailProductName").text(data[0].product_name);
              $("#txtDetailProductDeskripsi").text(data[0].description);
              if(data[0].file_name == null || data[0].file_name == '')
                $("#txtDetailProductImageTag").attr("src",'');  
              else
                $("#txtDetailProductImageTag").attr("src",dir + data[0].file_name);
            },
            error : function(){
               alert("Tidak dapat menimpan data!");
            }
      });
      
    }
   
    $(document).ready(function () {
        
      $('#layoutFormAddProduct').hide();
      $('#layoutformeditProduct').hide();
      $('#layoutFormDetailProduct').hide();
      $("#messagealert").hide();
      
      $('form#myfrmedit').submit(function(event) 
      {
        event.preventDefault();
       
        var txtEditProductName      = $('#txtEditProductName').val();
        var txtEditProductDeskripsi = $('#txtEditProductDeskripsi').val();
        
        if(txtEditProductName == "") 
        {
            alert('Nama Produk Tidak boleh kosong');
            $("#txtEditProductName").focus();
            return;
        }

        var formData = new FormData($(this)[0]);    
        $("#messagealert").show();
        
        $.ajax({
                type: "POST",
                url : "<?php echo base_url('product/UpdateProduct') ?>",
                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();
                $("#layoutFormAddProduct").hide();
                $('#layoutformeditProduct').hide();
                $("#layoutTableProduct").show();
              }
              table.ajax.reload();
              $("#saveupdate").val('Simpan Data Produk');
               
        });
      });


      $('form#myfrm').submit(function(event) 
      {
        event.preventDefault();
        var txtAddProductCode       = $('#txtAddProductCode').val();
        var txtAddProductName       = $('#txtAddProductName').val();
        var txtAddProductDeskripsi  = $('#txtAddProductDeskripsi').val();
        
        if(txtAddProductCode == "") 
        {
            alert('Kode Produk Tidak boleh kosong');
            $("#txtAddProductCode").focus();
            return;
        }       

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

        
        var formData = new FormData($(this)[0]);    
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('product/InsertProduct') ?>",
                  data: formData,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  beforeSend: function() 
                  {
                    $("#messagealert").show();
                    $("#save").val('Connecting...');
                  },
            success : function(data)
            {
            if (data=='1')
            {
              $("#message").text('Data Berhasil Di Simpan');
              $("#messagealert").addClass("alert alert-info");
              clearObject();
              $("#layoutFormAddProduct").hide();
              $('#layoutformeditProduct').hide();
              $("#layoutTableProduct").show();
            }
            table.ajax.reload();
            $("#messagealert").fadeOut(3000);
            $("#save").val('Simpan Data Produk');
          },
          error : function(){
           alert("Tidak dapat menimpan data!");
          }
          });
        });
      
      table = $('#product').DataTable({
            "processing": true,
            "serverSide": true,

            "ajax":{
                    "url": "<?php echo base_url('product/GetDataProduct') ?>",
                    "dataType": "json",
                    "type": "POST",
          		      "data":{  
                            '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
                           }
      		            },
              	    "columns": [
                            { "data": "product_code" },
              		          { "data": "product_name" },
                            { "data": "isactive" },
                            {
                              "render": function (data, type, full, meta) 
                              {
                                  return '<a href="#" onclick="return DetailProduct(\'' + full.id + '\'); "><span class="glyphicon glyphicon-search"></span></a>';
                              }
                            },
                            {
                              "render": function (data, type, full, meta) 
                              {
                                  return '<a href="#" onclick="return EditProduct(\'' + full.id + '\'); "><span class="glyphicon glyphicon-pencil"></span></a>';
                              }
                            }
              		       ]	 
	     });
    });


  function formatRupiah(bilangan, prefix)
  {
    var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
    split = number_string.split(','),
    sisa  = split[0].length % 3,
    rupiah   = split[0].substr(0, sisa),
    ribuan   = split[0].substr(sisa).match(/\d{1,3}/gi);
       
    if (ribuan) {
       separator = sisa ? '.' : '';
       rupiah += separator + ribuan.join('.');
    }
    
    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
  }

</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>