@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Ukuran</h2>
    @if (Session::has('status'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ Session::get('status') }}<button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    @endif
    <div class="card shadow">
      <div class="card-body">
        <div class="toolbar row mb-3">
          <div class="col">
            <form class="form-inline">
              <div class="form-row">
              </div>
            </form>
          </div>
          <div class="col ml-auto">
            <div class="dropdown float-right">
              <button class="btn btn-primary float-right ml-3 " type="button" id="actionMenuButton" data-toggle="modal" data-target="#tambahukuran"  aria-expanded="false"> Tambah Data </button>
            </div>
          </div>
        </div>
        <!-- table -->
        <table  class="table datatables" id="dataTable-1">
          <thead>
            <tr role="row">
              <th>Kode</th>
              <th>Jenis</th>
              <th>Tgl DiBuat</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
           
          </tbody>
        </table>
      </div>
    </div>
  </div> <!-- simple table -->
</div> <!-- end section -->
<div class="modal fade" id="tambahukuran" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Tambah Data Ukuran </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('saveukuran')}}" method="POST" >
          @csrf
          <div class="container-fluid">
            <div class="col-md-12">
            <div class="card shadow mb-8">
              <div class="card-body">
                  <div class="form-row">
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom3">Kode Ukuran</label>
                      <input type="text" class="form-control" id="kode" name="kode" required>
                      <div class="valid-feedback"> Looks good! </div>
                    </div>
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Jenis Ukuran</label>
                      <input type="text" class="form-control" id="jenis" name="jenis" required>
                      <div class="valid-feedback"> Looks good! </div>
                    </div>
                </div><!-- /.form-row -->
            </div>
            </div> 
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" style="float: right margin-right:50px"  class="btn btn-primary" >Save</button>
          </div>
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
  <div class="modal inmodal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Edit Data Ukuran</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{{route('updateukuran')}}" method="POST" >
            @csrf
            <div class="container-fluid">
              <div class="col-md-12">
              <div class="card shadow mb-8">
                <div class="card-body">
                    <div class="form-row">
                      <div class="col-md-10 mb-3">
                        <label for="validationCustom4">Ukuran</label>
                        <input type="text" class="form-control" id="ukuran_id" name="ukuran_id" required >
                      </div>
                      <div class="col-md-10 mb-3">
                       
                        <input type="hidden" class="form-control" id="kode_ukuran" name="kode_ukuran" required >
                        <div class="valid-feedback"> Looks good! </div>
                      </div>
                  </div><!-- /.form-row -->
              </div>
              </div>
              </div> 
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" style="float: right margin-right:50px" class="btn btn-primary">SIMPAN</button>
              </div>
          </div>
        </form>
        </div>
      </div>
    </div>
  </div>
  </div>
@endsection
@section('page_javascripts')
<script >
  $(".alert-dismissible").fadeTo(5000, 500).slideUp(500, function(){
  $(".alert-dismissible").alert('close');
});
</script>
<script>
  var table = $('#dataTable-1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url:"{{ route('dataukuran')}}",
        },
        "columns": [
            {data: 'ket'},
            {data: 'kodeukuran'},
            {data: 'tgldibuat'},
            {data: 'action', orderable: false, searchable: false}
            //{data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        "lengthMenu": [[15, 100, -1], [15, 100, "Semua"]],
        "order": [[3, 'desc']],
                /*"dom": "lTfigt",
                 "tableTools": {
                 "sSwfPath": "{{asset('js/plugins/dataTables/swf/copy_csv_xls_pdf.swf')}}"
                 }*/
          columnDefs: [
            {
                searchable: false,
                orderable: false,
                targets: 0,
            },
        ],
    });
    table.on( 'draw.dt', function () {
    var PageInfo = $('#dataTable-1').DataTable().page.info();
         table.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    });

</script>
<script>
 function edit(id) {
    console.log(id);
     $.ajax({
      url : "{{route('editukuran')}}/"+id,
      type: "GET",
      dataType: "JSON",
      success: function(data)
      {
        document.getElementById('ukuran_id').value = data.kodeukuran;
        document.getElementById('kode_ukuran').value = data.kodeukuran;
        $('#modal-edit').modal('show');
      }
  });
}
</script>
@endsection