@extends('layouts.app-2')
@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
   <div class="container-fluid">
      <div class="row mb-2">
         <div class="col-sm-6">
            <h1 class="m-0 text-dark">JO Draft Detail</h1>
         </div><!-- /.col -->
         <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="#">Home</a></li>
               <li class="breadcrumb-item">JO </li>
               <li class="breadcrumb-item ">Draft</li>
               <li class="breadcrumb-item active">Detail</li>
            </ol>
         </div><!-- /.col -->
      </div><!-- /.row -->
   </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
   <div class="container-fluid">
      <form action="{{route('job.publish')}}" method="post">
         @csrf
         <input type="hidden" name="pelanggan_id" value="{{$pelanggan_id}}">
         <div class="card">
            <div class="card-header">
               <button id="btn_publish" name="submit" class="btn btn-primary" type="submit"><i class="fa fa-rocket"></i> Publish</button>
               <div class="btn btn-secondary"><span id="total">0</span> Selected Order</div>

            </div>
            <!-- /.card-header -->
            <div class="card-body">
               <table id="example1" class="table table-bordered table-striped">
                  <thead>
                     <tr>
                        <th>No</th>
                        <th><input type="checkbox" name="" id="selectall"></th>
                        <th>Site</th>
                        <th>Alamat</th>
                        <th>Lat Long</th>
                        {{-- <th style="text-align: right">Action</th> --}}
                     </tr>
                  </thead>
                  <tbody>
                     @foreach ($orders as $order)
                     <tr>
                        <td>{{++$i}}</td>
                        <td class="px-4 py-3">
                           <input type="checkbox" class="case" name="id_item[]" value="{{$order->id}}" />
                        </td>
                        <td>{{$order->site}}</td>
                        <td>{{$order->alamat}}</td>
                        <td>{{$order->latitude}} - {{$order->longitude}}</td>

                     </tr>
                     @endforeach

                  </tbody>
               </table>
            </div>
            <!-- /.card-body -->
         </div>
      </form>
   </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@push('datatables')
<!-- <script>
   $(function () {
     $("#example1").DataTable({
       "responsive": true,
       "autoWidth": false,
     });
     $('#example2').DataTable({
       "paging": true,
       "lengthChange": false,
       "searching": false,
       "ordering": true,
       "info": true,
       "autoWidth": false,
       "responsive": true,
     });
   });
 </script> -->
@endpush

@push('jo-publish')
<script>
   // $(document).ready(function() {
   //     $('.tanggal').datepicker({
   //         format: "yyyy-mm-dd",
   //         autoclose: true
   //     });
   // });

   var total = document.getElementById("total");
   $("#btn_publish").hide();

   $(function() {

      $("#selectall").change(function() {
         if (this.checked) {
            $(".case").each(function() {
               this.checked = true;
            });
            var jumlahCheck = $(".case").length;
         } else {
            $(".case").each(function() {
               this.checked = false;
            });
            var jumlahCheck = 0;
         }

         // menampilkan output ke elemen hasil
         total.innerHTML = jumlahCheck;
         // console.log(jumlahCheck);
         btnPublish(jumlahCheck);
      });

      $(".case").click(function() {
         if ($(this).is(":checked")) {
            var isAllChecked = 0;
            var jumlahCheck = $('input:checkbox:checked').length;

            $(".case").each(function() {
               if (!this.checked)
                  isAllChecked = 1;
            });

            if (isAllChecked == 0) {
               $("#selectall").prop("checked", true);

               jumlahCheck = $(".case").length;
            }


         } else {
            $("#selectall").prop("checked", false);

            jumlahCheck = $('input:checkbox:checked').length;
         }
         total.innerHTML = jumlahCheck;

         btnPublish(jumlahCheck);
         // console.log(jumlahCheck);

      });


   });

   function btnPublish(jumlah) {

      if (jumlah == 0) {

         $("#btn_publish").hide();
      } else {
         $("#btn_publish").show();
      }

   }

   function konfirmasi() {
      confirm("Apakah anda yakin ingin mensubmit penyaluran ?");
   }
</script>
@endpush