@extends('layouts.admin')
@section('title')
  Klasifikasi Indikator |
@endsection
@section('css')
  <style>
  .badge{
    padding: 7px 10px;
    margin-bottom:3px;
  }
  .modal-table .table thead tr th{
    border-top: none;
    padding: 10px 10px;
    border-bottom: 3px solid #d9dce5
  }

  .modal-table thead tr:first-child th:first-child,
  .modal-table tbody tr td:first-child{
    padding-left:30px
  }

  .modal-table thead tr:first-child th:last-child,
  .modal-table tbody tr td:last-child{
    padding-right:30px
  }
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Klasifikasi Indikator</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item"><a href="">Admin</a></li>
    <li class="breadcrumb-item"><a href="">Data Master</a></li>
    <li class="breadcrumb-item active" aria-current="page">Klasifikasi Indikator</li>
  </ol>
  <div class="card card-table rounded-10 mg-t-50">
    <div class="card-body">
      <div class="pd-30">
        <div class="row">
          <div class="col-md-6">
            <form action="">
              <select class="select2" name="jenis" style="width:100%" onchange="javascript:submit()">
                @foreach ($data['jenis'] as $key => $value)
                  <option value="{{$value->id}}" {{($jenis==$value->id ? 'selected' : '')}} >{{$value->jenis_laporan}}</option>
                @endforeach
              </select>
            </form>
          </div>
          <div class="col-md-6">
            <form action="" method="get">
              <div class="search-form">
                <input type="search" class="form-control" name="search" value="{{$search}}" placeholder="Search">
                <button class="btn" type="submit"><i data-feather="search"></i></button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-hover table-bordered table-vertical-middle" style="margin-bottom:20px !important">
          <thead class="thead-light">
            <tr>
              <th width="30px" style="border-left:0">No</th>
              <th style="width:25px;text-align:center;">
                {{-- <input type="checkbox" id="check_all_view" style="position:relative;top: 2px;"> --}}
              </th>
              <th>ID DDP</th>
              <th>Nama Indikator</th>
              <th class="center" style="border-right:0">Satuan Kerja</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($data['indikator'] as $key => $value)
              <tr>
                <td style="border-left:0">{{$data['indikator']->firstItem() + $key}}</td>
                <td style="text-align:center">
                  <input type="checkbox" onchange="proses_klasifikasi_indikator('{{$value->id}}')" {{ $value->checked }} id="pilih_{{$value->id}}" >
                </td>
                <td>{{$value->id_ddp}}</td>
                <td>{{$value->nama_indikator}}</td>
                <td class="center" style="border-right:0" class="center">{{$value->singkatan_satker}}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script>

  $("#check_all_view").click(function() {
    let isChecked = this.checked;
    $('.view').not(this).each(function() {
      $(this).prop('checked', isChecked);
      let id = $(this).attr('id').split('_')[1];
      proses_otoritas_modul(id);
    });
  });

  function proses_klasifikasi_indikator(id){
    if ($('#pilih_'+id).is(':checked')){
      pilih='Y';
    }
    else{
      pilih='N';
    }
    $.ajax({
      url:'{{ route('admin.proses_klasifikasi_indikator') }}',
      method:'POST',
      data:{
        _token: "{{ csrf_token() }}",
        pilih:pilih,
        action:'edit',
        jenis:{{$jenis}},
        indikator:id
      },
      success:function(response){
        console.log(response)
      },
      error:function(error){
        console.log(error)
      }
    });
  }
  </script>
@endsection