@extends('admin.admin-template')

@section('css')
<link href="{{asset('vendor/azia/lib/datatables.net-dt/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<link href="{{asset('vendor/azia/lib/datatables.net-responsive-dt/css/responsive.dataTables.min.css')}}" rel="stylesheet">
@endsection
@section('content')
<br><br>
<div class="container">
  <div class="az-content-body">
    <div class="az-dashboard-one-title">
      <div>
        <h2 class="az-dashboard-title">Hi, Selamat Datang {{Auth::user()->username}} !</h2>
      </div>
      <div class="az-content-header-right">
        
      </div>
    </div><!-- az-dashboard-one-title -->

    <div class="az-dashboard-nav">
      @include('admin.nav')
    </div>

    <div class="row row-sm mg-b-20 mg-lg-b-0">
      <div class="col-sm-12 mg-t-20 mg-lg-t-0">
        <div class="card card-table-one">
          <h6 class="card-title">Daftar Kepala Desa</h6>
          <p class="az-content-text mg-b-20">Berikut Nama Kepala Desa di Kabupaten Lamongan</p>
          {{-- <a href="{{route('admin.pegawai.print')}}">Print Kartu</a> --}}
          <div class="table-responsive">
            <form method="get" name=myform>
              {{ csrf_field() }}
              
            <table class="table" id="dt">
              <thead>
                <tr>
                  <th style="width: 50px; text-align: center"><input type="checkbox" class="selectall"> </th>
                  <th>Nomor KTP</th>
                  <th style="text-align: left">Nama Lengkap</th>
                  <th style="text-align: left">Unit Kerja</th>
                  <th style="text-align: center">Gender</th>
                  <th class="text-center">Laporan</th>
                  <th style="text-align: center">Status</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach ($pegawais as $pegawai)
                <tr>
                  <td style="text-align: center"><input type="checkbox" name="id[]" class="selectbox" value="{{ $pegawai->id }}"></td>
                  <td>{{$pegawai->nomor_ktp}}</td>
                  <td style="text-align: left">{{$pegawai->nama_lengkap}}</td>
                  <td style="text-align: left">{{$pegawai->kecamatan->name}} - {{$pegawai->desa->name}}</td>
                  <td style="text-align: center">{{$pegawai->gender->name}}</td>
                  <td style="text-align: center">{{$pegawai->laporan()->count()}}</td>
                  <td style="text-align: center">{{$pegawai->status}}</td>
                  <td class="text-center">
                    <a href="{{route('admin.pegawai.show',['id'=>$pegawai->id])}}" class="btn btn-primary">Detail</a>
                  </td>
                </tr>
                @endforeach
                
              </tbody>
            </table>

            <button formaction="{{route('admin.pegawai.printPdf')}}" type="submit" class="btn btn-primary">Cetak</button>
            </form>
          </div><!-- table-responsive -->
        </div><!-- card -->
        <br><br>
      </div><!-- col-lg -->

    </div><!-- row -->
  </div>
</div>
@endsection

@section('script')
<script src="{{asset('vendor/azia/lib/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendor/azia/lib/datatables.net-dt/js/dataTables.dataTables.min.js')}}"></script>
<script src="{{asset('vendor/azia/lib/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendor/azia/lib/datatables.net-responsive-dt/js/responsive.dataTables.min.js')}}"></script>

<script>
  $(function(){
    $('#dt').DataTable();
  });
</script>
<script type="text/javascript">
  $('.selectall').click(function(){
      $('.selectbox').prop('checked', $(this).prop('checked'));
      $('.selectall2').prop('checked', $(this).prop('checked'));
  })
  $('.selectall2').click(function(){
      $('.selectbox').prop('checked', $(this).prop('checked'));
      $('.selectall').prop('checked', $(this).prop('checked'));
  })
  $('.selectbox').change(function(){
      var total = $('.selectbox').length;
      var number = $('.selectbox:checked').length;
      if(total == number){
          $('.selectall').prop('checked', true);
          $('.selectall2').prop('checked', true);
      } else{
          $('.selectall').prop('checked', false);
          $('.selectall2').prop('checked', false);
      }
  })
</script>
@endsection