@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">Kordinator 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">Kordinator</li>
              <li class="breadcrumb-item active">Detail</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

   <section class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card  card-outline">
               <div class="card-body box-profile">
                  <div class="text-center">
                  <img style=" object-fit:cover; height:95px;width:95px" class="profile-user-img img-circle img-fluid"
                        src="{{asset('storage/' .$kordinator->foto_diri)}}"
                        alt="User profile picture">
                  </div>

                  <h3 class="profile-username text-center">{{$kordinator->nama}}</h3>

                  <p class="text-muted text-center">{{$kordinator->area}}</p>

                  

               </div>
               <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- About Me Box -->
            <div class="card card-info">
               <div class="card-header">
                  <h3 class="card-title">{{$kordinator->kode_referral}}</h3>
               </div>
               <!-- /.card-header -->
               <div class="card-body">
               
                  {{-- <strong><i class="fas fa-map-marker-alt mr-1"></i> TTL</strong>

                  <p class="text-muted">{{$kordinator->ttl}}</p>
                  <hr> --}}
                  <strong><i class="fas fa-user-alt mr-1"></i> {{count($teknisis)}} Teknisi</strong>

                  {{-- <p class="text-muted">{{count($teknisis)}}</p> --}}

                  <hr>
                  <strong><i class="fas fa-file-alt mr-1"></i> {{count($orders)}} Order</strong>

                  {{-- <p class="text-muted">{{count($orders)}}</p> --}}

               
               </div>
               <!-- /.card-body -->
            </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
               <div class="card card-light card-tabs">
                  <div class="card-header p-0 pt-1">
                     <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                           <a class="nav-link active" id="biodata-tab" data-toggle="pill" href="#biodata" role="tab" aria-controls="biodata" aria-selected="true">Biodata</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" id="ktp-tab" data-toggle="pill" href="#ktp" role="tab" aria-controls="ktp" aria-selected="false">Kartu Identitas</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" id="order-tab" data-toggle="pill" href="#order" role="tab" aria-controls="order" aria-selected="false">Order</a>
                        </li>
                        
                     </ul>
                  </div>
                  <div class="card-body">
                     <div class="tab-content" id="custom-tabs-one-tabContent">

                        <div class="tab-pane fade show active" id="biodata" role="tabpanel" aria-labelledby="biodata-tab">
                           <form action="{{route('kordinator.update', $kordinator)}}" method="POST" class="form-horizontal" enctype="multipart/form-data">
                              @csrf
                              @method('PUT')
                              <div class="form-group row">
                                 <label for="namaKordinator" class="col-sm-2 col-form-label">Name</label>
                                 <div class="col-sm-10">
                                    <input type="text" class="form-control" id="namaKordinator" name="namaKordinator" value="{{$kordinator->nama}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="area" class="col-sm-2 col-form-label">Area</label>
                                 <div class="col-sm-10">
                                    <input type="text" class="form-control" id="area" name="area" value="{{$kordinator->area}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="ttl" class="col-sm-2 col-form-label">TTL</label>
                                 <div class="col-sm-10">
                                    <input type="date" class="form-control" id="ttl" name="ttl" value="{{$kordinator->ttl}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="email" class="col-sm-2 col-form-label">Email</label>
                                 <div class="col-sm-10">
                                    <input type="email" class="form-control" id="email" name="email" disabled value="{{$kordinator->email}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="noKordinator" class="col-sm-2 col-form-label">No. HP</label>
                                 <div class="col-sm-10">
                                    <input type="number" class="form-control" id="noKordinator" name="noKordinator" value="{{$kordinator->no_hp}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="bank" class="col-sm-2 col-form-label">Bank</label>
                                 <div class="col-sm-10">
                                    <input type="text" class="form-control" id="bank" name="bank" value="{{$kordinator->bank}}">
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="noRek" class="col-sm-2 col-form-label">No. Rek</label>
                                 <div class="col-sm-10">
                                    <input type="number" class="form-control" id="noRek" name="noRek" value="{{$kordinator->no_rek}}">
                                 </div>
                              </div>
                              <hr>
                              
                              <div class="form-group row">
                                 <label for="fotoDiri" class="col-sm-2 col-form-label">Foto Diri</label>
                                 <div class="col-sm-10">
                                    <div class="input-group">
                                       <div class="custom-file">
                                       <input type="file" class="custom-file-input" id="fotoDiri" name="fotoDiri">
                                       <label class="custom-file-label" for="fotoDiri">Choose file</label>
                                       </div>
                                       <div class="input-group-append">
                                       <span class="input-group-text" id="">Upload</span>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <label for="fotoKtp" class="col-sm-2 col-form-label">Foto Ktp</label>
                                 <div class="col-sm-10">
                                    <div class="input-group">
                                       <div class="custom-file">
                                       <input type="file" class="custom-file-input" id="fotoKtp" name="fotoKtp">
                                       <label class="custom-file-label" for="fotoKtp">Choose file</label>
                                       </div>
                                       <div class="input-group-append">
                                       <span class="input-group-text" id="">Upload</span>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           
                              
                              <div class="form-group row">
                              <div class="offset-sm-2 col-sm-10">
                                 <button type="submit" class="btn btn-secondary">Update</button>
                              </div>
                              </div>
                           </form> 
                           
                        </div>

                        <div class="tab-pane fade" id="ktp" role="tabpanel" aria-labelledby="ktp-tab">
                           <img class="img-fluid rounded " src="{{asset('storage/'. $kordinator->foto_ktp)}}" alt="">
                        </div>

                        <div class="tab-pane fade" id="order" role="tabpanel" aria-labelledby="order-tab">
                           <table class="table">
                              <thead>
                                 <tr>
                                    <th>No</th>
                                    <th>Site</th>
                                    <th>Status</th>
                                 </tr>
                              </thead>
                              <tbody>
                                 @foreach ($orders as $order)
                                    <tr>
                                       <td>{{++$i}}</td>
                                       <td>{{$order->site}}</td>
                                       <td>
                                          @if ($order->status == 3)
                                             <p class=" text-info">Menunggu Kordinator</p>
                                             @elseif($order->status == 4)
                                             <p class=" text-info">Menunggu Teknisi</p>
                                             @elseif($order->status == 5)
                                             <p class=" text-info">On Progress</p>
                                             @elseif($order->status == 6)
                                             <p class=" text-info">Report Photo</p>
                                             @elseif($order->status == 7)
                                             <p class=" text-info">Finish/p>
                                             @elseif($order->status == 9)
                                             <p class=" text-info">Done</p>
                                             @elseif($order->status == 202)
                                             <p class=" text-danger">Pending</p>
                                          @endif
                                       </td>
                                    </tr>
                                 @endforeach
                              </tbody>
                           </table>
                        </div>
                        
                     </div>
                  </div>
                  <!-- /.card -->
               </div>
            <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
         </div>
         <!-- /.row -->
      </div><!-- /.container-fluid -->
   </section>
@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