@extends('template')
@section('main') 

    <div class="pagetitle">
      <h1>Data Tables</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Tables</li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section">
      <div class="row">
        <div class="col-lg-12">

          <div class="card">
            <div class="card-body table-responsive">
              <h5 class="card-title">Datatables</h5>
              <p>Add lightweight datatables to your project with using the <a href="https://github.com/fiduswriter/Simple-DataTables" target="_blank">Simple DataTables</a> library. Just add <code>.datatable</code> class name to any table you wish to conver to a datatable</p>

              <!-- Table with stripped rows -->
              <table class="table datatable" id="datatable-responsive">
                <thead>
                  <tr>
                    <th width="8px;"><input id="check-all" type="checkbox"></th>
                    <th scope="col">#</th>
                    <th scope="col">No. Tiket</th>
                    <th scope="col">Tgl. Kirim</th>
                    <th scope="col">Age</th>
                    <th scope="col">Start Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Brandon Jacob</td>
                    <td>Designer</td>
                    <td>28</td>
                    <td>2016-05-25</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Bridie Kessler</td>
                    <td>Developer</td>
                    <td>35</td>
                    <td>2014-12-05</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Ashleigh Langosh</td>
                    <td>Finance</td>
                    <td>45</td>
                    <td>2011-08-12</td>
                  </tr>
                  <tr>
                    <th scope="row">4</th>
                    <td>Angus Grady</td>
                    <td>HR</td>
                    <td>34</td>
                    <td>2012-06-11</td>
                  </tr>
                  <tr>
                    <th scope="row">5</th>
                    <td>Raheem Lehner</td>
                    <td>Dynamic Division Officer</td>
                    <td>47</td>
                    <td>2011-04-19</td>
                  </tr>
                </tbody>
              </table>
              <!-- End Table with stripped rows -->

            </div>
          </div>

        </div>
      </div>
    </section>

@endsection

@section('footer_scripts')
<script>
  $(document).ready(function(){
  $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  });
  var table = $('#datatable-responsive').DataTable({
        dom: '<"toolbar"><l>Bfrtip',
        processing: true,
        serverSide: true,
        ordering: false,
        destroy: true,
        initComplete:   function()  //Adding Custom button in Tools
        {
        $("div.toolbar").html('<button type="button" style="float:left;" onclick="delete_all()" class="badge bg-red">Delete All</button>');
        },
        ajax: '{{route('menu.jsondata')}}',
        columns:[                
            {data:'x', name:'Check All',orderable: false},  
            {data:'No', name:'No',className: "th-center"},
            {data: 'id', name:'ID',className: "th-td-center"},
            {data: 'id_induk', name:'ID Parent',className: "th-td-center"},
            {data: 'nama', name:'name',className: "th-center"},
            {data: 'icon', name:'Icon',className: "th-center"},
            {data: 'url',  name:'Slug',className: "th-center"},
            {data: 'order',  name:'Order',className: "th-td-center"},
            {data: 'action', name: 'action',className: "th-td-center"}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
         var index = iDisplayIndex +1;
        $('td:eq(1)',nRow).html(index);
        return nRow;
       }
    });

    $(document).on('click','.btn-delete',function(e){
        e.preventDefault();
        var href=$(this).attr('href');

        swal({
            title: "Anda Yakin?",
            text: "Sistem akan menghapus data ini!",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yakin, hapus saja!",
            cancelButtonText: "Tidak, batalkan!",
            closeOnConfirm: false,
            closeOnCancel: true
        },
        function(isConfirm){
            if (isConfirm) {
                window.location.href=href;
            }
        }); 
    });

    });

      //Checkbox all
      $(document).ready(function(){ 
    $("#check-all").click(function(){ 
      if($(this).is(":checked")) 
        $(".check-item").prop("checked", true); 
      else
        $(".check-item").prop("checked", false); 
    });
    
    
     

  });

  function delete_all(){
  
        swal({
            title: "Anda Yakin?",
            text: "Sistem akan menghapus semua data yang dipilih!",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yakin, hapus saja!",
            cancelButtonText: "Tidak, batalkan!",
            closeOnConfirm: false,
            closeOnCancel: true
        },
        function(isConfirm){
            if (isConfirm) {
              $("#form-delete").submit(); // Submit form
              return true;
            }else{
              $(this).find('button[type="submit"]').prop( 'disabled', true );
              return false;
            }
        });        
  }
</script>
@endsection