@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Merk Meter</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 class="form-group col-auto">
                  <label for="search" class="sr-only">Search</label>
                  <input type="text" class="form-control" id="search" value="" placeholder="Search">
                </div>
              </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="#tambahmerk"  aria-expanded="false"> Tambah Data </button>
            </div>
          </div>
        </div>
        <!-- table -->
        <table class="table datatables" id="dataTable-1">
          <thead>
            <tr role="row">
              <th>ID</th>
              <th>Nama Merk</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="tambahmerk" 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 Merk</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('savemerk')}}" 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">ID Merek</label>
                      <input type="text" class="form-control" id="id_merek" name="id_merek" required>
                    </div>
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Nama Merek</label>
                      <input type="text" class="form-control" id="nama_merek" name="nama_merek" 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> <!-- Modals TAMBAH DATA -->
<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 Merk</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('updatemerk')}}" 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">
                      <input type="text" class="form-control" id="merek_id" name="merek_id" required hidden>
                    </div>
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Nama Merek</label>
                      <input type="text" class="form-control" id="nama_merk" name="nama_merk" 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>
@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('datamerk')}}",
        },
        "columns": [
            {data: 'kodemerek'},
            {data: 'namamerek'},
            {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('editmerk')}}/"+id,
      type: "GET",
      dataType: "JSON",
      success: function(data)
      {
        console.log(data)
        console.log(data['kodemerek']);
        console.log(data['namamerek']);
        console.log(data.kodemerek);
        console.log(data.namamerek);
        document.getElementById('merek_id').value = data.kodemerek;
        document.getElementById('nama_merk').value = data.namamerek;
        $('#modal-edit').modal('show');
      }
  });
}
 $(document).ready(function() {
  
  //edit datc
    $('.edit').on("click",function() {
    var id = $(this).attr('data-id');
    $.ajax({
      url : "{{route('editmerk')}}/"+id,
      type: "GET",
      dataType: "JSON",
      success: function(data)
      {
        console.log(data)
        console.log(data['kodemerek']);
        console.log(data['namamerek']);
        console.log(data.kodemerek);
        console.log(data.namamerek);
        document.getElementById('merek_id').value = data.kodemerek;
        document.getElementById('nama_merk').value = data.namamerek;
        $('#modal-edit').modal('show');
      }
  });
  });

});
</script>
@endsection