@extends('layouts.admin')
@section('title')
  Otoritas Modul |
@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('breadcrumb')
  <h4 class="mg-b-0 tx-spacing--1">Otoritas Modul</h4>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-style2 mg-t-10">
      <li class="breadcrumb-item"><a href="">Manajemen User</a></li>
      <li class="breadcrumb-item active" aria-current="page">Otoritas Modul</li>
    </ol>
  </nav>
@endsection
@section('content')
  <div class="card card-table rounded-10 mg-t-50px">
    <div class="card-body">
      <div class="pd-30">
        <div class="row">
          <div class="col-md-4">
            <form action="">
              <select class="select2" name="hak_akses" style="width:100%" onchange="javascript:submit()">
                @foreach ($data['hak_akses'] as $key => $value)
                  <option value="{{$value->id}}" {{($hak_akses==$value->id ? 'selected' : '')}} >{{$value->hak_akses}}</option>
                @endforeach
              </select>
            </form>
          </div>
        </div>
      </div>
      <table class="table table-hover table-vertical-middle" style="margin-bottom:20px !important">
        <thead class="thead-light">
          <tr>
            <th width="30px">No</th>
            <th style="width:25px;text-align:center;">
              <input type="checkbox" id="check_all_view" style="position:relative;top: 2px;">
            </th>
            <th>Nama Modul</th>
            <th width="200px">Fitur Modul</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($data['modul'] as $key => $value)
            @php($otoritas=$value->otoritas)
            <tr style="background:whitesmoke">
              <td style="text-align:left">{{$key+1}}</td>
              <td style="text-align:center">
                <input type="checkbox" onchange="proses_otoritas_modul('{{$value->id}}')" class="view" id="view_{{$value->id}}" {{ ($otoritas == 'Y' ? 'checked' : null ) }}  >
              </td>
              <td style="white-space:nowrap;text-align:left" >{{$value->nama_modul}}</td>
              <td>
               <button class="btn {{ ($otoritas == 'Y' ? 'btn-primary' : 'btn-danger' ) }}  btn-xs btn-block"  @if($otoritas == 'Y') onclick="piih_fitur_modul({{$value->id}})" @endif id="fitur_{{$value->id}}">
                  {{ ($otoritas == 'Y' ? 'Pilih Fitur Modul' : 'Modul Belum Aktif' ) }}
                </button>
              </td>
            </tr>
            @foreach ($value->submodul as $key2 => $value2)
              @php($otoritas=$value2->otoritas)
              <tr>
                <td style="text-align:left">{{$key+1}}.{{$key2+1}}</td>
                <td style="text-align:center">
                  <input type="checkbox" onchange="proses_otoritas_modul('{{$value2->id}}')" class="view" id="view_{{$value2->id}}" {{ ($otoritas == 'Y' ? 'checked' : null ) }}  >
                </td>
                <td style="white-space:nowrap;text-align:left">{{$value2->nama_modul}}</td>
                <td>
                  <button class="btn {{ ($otoritas == 'Y' ? 'btn-primary' : 'btn-danger' ) }}  btn-xs btn-block"  @if($otoritas == 'Y') onclick="piih_fitur_modul({{$value2->id}})" @endif id="fitur_{{$value2->id}}">
                    {{ ($otoritas == 'Y' ? 'Pilih Fitur Modul' : 'Modul Belum Aktif' ) }}
                  </button>
                </td>
              </tr>
            @endforeach
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" role="dialog" id="modal-fitur-modul">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="title">Pilih Otoritas Fitur</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body modal-table pd-0">
          <table class="table table-hover table-bordered">
            <thead class="thead-light">
              <tr>
                <th width="30px">No</th>
                <th width="200px">Nama Modul</th>
                <th class="pd-r-20" >Nama Fitur Modul</th>
                <th style="width:100px;text-align:center">Non Aktif</th>
                <th style="width:100px;text-align:center">Akses Penuh</th>
                <th style="width:100px;text-align:center">Akses Pribadi</th>
                <th style="width:100px;text-align:center">Akses Satuan Kerja</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <input type="hidden" id="id" name="id">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
        </div>
      </div>
    </div>
  </div>

@endsection
@section('js')
  <script>

  function piih_fitur_modul(id){
    $.get("{{ url('api/get_fitur_modul/'.$hak_akses) }}/"+id,function(result){
      console.log(result);
      let tbody = $("#modal-fitur-modul table tbody");
      tbody.empty();
      if (result && result.length > 0) {
          no = 0;
          $.each(result, function(index, item) {
            $.each(item.fitur, function(index2, item2) {
              no = no+1;
              let row =
              '<tr>' +
                  '<td>' + no + '</td>' +
                  '<td>' + item.modul + '</td>' +
                  '<td>' + item2.nama_fitur + '</td>' +

                  // Non Aktif
                  '<td style="text-align:center">'+
                    '<input type="radio" name="fitur_modul_'+item2.id+'" onclick="proses_otoritas_fitur_modul(0,'+item2.id+')" '+(item2.otoritas==0?'checked':'')+'>'+
                  '</td>'+

                  // Akses Penuh
                  '<td style="text-align:center">'+
                    '<input type="radio" name="fitur_modul_'+item2.id+'" onclick="proses_otoritas_fitur_modul(1,'+item2.id+')" '+(item2.otoritas==1?'checked':'')+'>'+
                  '</td>'+

                  // Akses Pribadi
                  '<td style="text-align:center">'+
                    '<input type="radio" name="fitur_modul_'+item2.id+'" onclick="proses_otoritas_fitur_modul(2,'+item2.id+')" '+(item2.otoritas==2?'checked':'')+'>'+
                  '</td>'+

                  // Akses Lokasi Kerja
                  '<td style="text-align:center">'+
                    '<input type="radio" name="fitur_modul_'+item2.id+'" onclick="proses_otoritas_fitur_modul(3,'+item2.id+')" '+(item2.otoritas==3?'checked':'')+'>'+
                  '</td>'+

              '</tr>';
              tbody.append(row);
            });
          });
      } else {
          tbody.append('<tr><td colspan="4" style="text-align:center;">Tidak ada data</td></tr>');
      }
      $('#modal-fitur-modul').modal('show');
    });
  }

  function proses_otoritas_fitur_modul(otoritas, fitur) {
    $.ajax({
      url: '{{ route('admin.proses_otoritas_fitur') }}',
      type: 'POST',
      data: {
        _token: "{{ csrf_token() }}",
        fitur: fitur,
        action:'edit',
        hak_akses: {{ $hak_akses }},
        nama_hak_akses : '{{ $data['detail']->hak_akses }}',
        otoritas: otoritas
      },
      success: function (response) {
        console.log("Update sukses:", response);
        // kalau mau kasih notifikasi
        // toastr.success("Otoritas berhasil diperbarui");
      },
      error: function (xhr) {
        console.error("Update gagal:", xhr.responseText);
        // toastr.error("Terjadi kesalahan saat menyimpan otoritas");
      }
    });
  }

  $("#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_otoritas_modul(id){
    if ($('#view_'+id).is(':checked')){
      view='Y';
    }
    else{
      view='N';
    }
    $.ajax({
      url:'{{ route('admin.proses_otoritas_modul') }}',
      method:'POST',
      data:{
        _token: "{{ csrf_token() }}",
        view:view,
        action:'edit',
        hak_akses:{{$hak_akses}},
        nama_hak_akses : '{{ $data['detail']->hak_akses }}',
        id:id
      },
      success:function(response){
        let button = $('#fitur_' + id);
        if (view === 'Y') {
          button.removeClass('btn-danger').addClass('btn-primary');
          button.attr('onclick', 'piih_fitur_modul('+id+')');
          button.text('Pilih Fitur Modul');
        } else {
          button.removeClass('btn-primary').addClass('btn-danger');
          button.attr('onclick','');
          button.text('Modul Belum Aktif');
        }
        console.log(response)
      },
      error:function(error){
        console.log(error)
      }
    });
  }
  </script>
@endsection