@extends('layouts.app-2')
@section('title')
    JO Delegate
@endsection
@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 Delegate 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">Delegate </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.handover')}}" method="POST">
            @csrf
            <input  type="text" name="joborderId" hidden value="{{$joborderId}}" class="hidden">
            <div class="card">
               <div class="card-header">
                  <div class="form-group row">
                     <select id="kordinator" name="kordinator" class="form-control">
                        @foreach ($kordinators as $kordi)
                           <option value="{{$kordi->id}}">{{$kordi->nama}}</option>
                        @endforeach <div class="row"></div>
                     </select>
                  </div>
                  
                  <div class="btn btn-secondary "><span id="total" >0</span> Selected Order</div>
                  <button type="submit" name="submit" onclick="konfirmasi()" class="btn btn-primary "><i class="fa fa-rocket"></i>Delegate</button>
               </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 style="text-align: right">Action</th> --}}
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($orders as $jo)
                           <tr>
                              <td>{{++$i}}</td>
                              <td>
                                 <input type="checkbox" class="case" name="id_item[]" value="{{$jo->id}}" />
                                    
                              </td>
                              <td>{{$jo->site}}</td>
                              <td>{{$jo->alamat}}</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-delegate')
<script>
   $(document).ready(function() {
       $('.tanggal').datepicker({
           format: "yyyy-mm-dd",
           autoclose: true
       });
   });


   var total = document.getElementById("total");
   // var total = document.getElementById("total").value;
   var jumlahCheck = 0;
   total.innerHTML = jumlahCheck;

   $(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);
       });

       $(".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;
           console.log(jumlahCheck);

       });

   });

   // $(".delegate").click(function(e){
   //       // event.preventDefault();
   //       event.preventDefault();
   //       id = e.target.dataset.id;
   //       swal({
   //         title: "Anda yakin?",
   //         text: "Anda akan delegasi order.",
   //         icon: "warning",
   //         buttons: ["Batal", "Ya"],
   //         dangerMode: true,
   //       })
   //       .then((willDelete) => {
   //         if (willDelete) {
   //           swal("Berhasil!", {
   //             icon: "success",
   //           });
   //           $(`#delegate`).onClick(konfirmasi());
   //         } else {
   //           swal("Batal menghapus.");
   //         }
   //       });
   //     })

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