@extends('layouts.app-2')
@section('title')
    Order Delegate Detail
@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">Order Delegate</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">Order </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('kordinator.delegasi')}}" method="POST">
            @csrf
            <div class="card">
               <div class="card-header">
                  <div class="form-group row">
                     <select id="teknisi" name="teknisi" class="form-control">
                        @foreach ($teknisis as $teknisi)
                           <option value="{{$teknisi->id}}">{{$teknisi->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>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($orders as $order)
                            <tr>
                              <td>{{++$i}}</td>
                              <td><input type="checkbox" class="case" name="id_item[]" value="{{$order->id}}" /></td>
                              
                              <td>
                                 {{$order->site}}
                              </td>
                              <td>{{$order->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-kordinator')
<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);

       });

   });

   function konfirmasi() {
       confirm("Apakah anda yakin ingin mendelegasikan order ini ?");
   }

   $(document).ready(function() {
       $('.js-example-basic').select2();
   });
</script>
@endpush