@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
  @endpush
  <div class="preloader" id="preloader" >
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
          <li class="breadcrumb-item" aria-current="page">{{ $title }}</li>
          <li class="breadcrumb-item active" aria-current="page">Detail Role</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">Master {{$title}} Detail</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-12 mt-2">
          <div class="card">
            <div class="card bg-secondary" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <h5 class="card-title">Role Akses : {{ $role->role_access }}</h5>
              <div class="row mt-3">
                <div class="col-12">
                  <div class="row">
                    <div class="row">
                      @foreach ($menuNavigasi as $data)
                        <div class="row col-sm-3 mt-3">
                          <div class="col-sm-12">
                            <div class="form-check">
                              <div class="form-group">
                                <input class="form-check-input menu" type="checkbox" {{ cek_akses($role->id, $data->id) }}
                                  data-menu="{{ $data->id }}" data-role="{{ $role->id }}" id="{{ "parent_".$data->id }}"> 
                                  <label for="{{ "parent_".$data->id }}">{{ $data->menu }}</label>
                              </div>
                            </div>
                            @foreach ($data->menu_id as $item)
                              <div class="form-check mt-2">
                                <div class="form-group">
                                  <div class="col-sm-12" style="margin-left: 5%">
                                    <input class="form-check-input submenu" type="checkbox" id="{{ "child_".$item->id }}"
                                      {{ cek_submenu($role->id, $data->id, $item->id) }} data-role2="{{ $role->id }}"
                                      data-menu2="{{ $data->id }}" data-submenu2="{{ $item->id }}">
                                      <label for="{{ "child_".$item->id }}">{{ $item->submenu }}</label>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                        </div>
                      @endforeach
                    </div>
                  </div>
                </div>
              </div>
              <hr>
              <a href="{{ route('sistem-role') }}" class="btn btn-sm btn-warning">Kembali</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @push('script')
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/toastr.min.js') }}"></script>
    <script>
      // menu
      $(".menu").on("click", function(){
        const menu_id = $(this).data('menu')
        const role_id = $(this).data('role')
        $.ajax({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type: "POST",
          url: "{{ route('sistem-role-simpan_detail') }}",
          data: {
            menu_id: menu_id,
            role_id: role_id
          },
          success: function(html) {
            alert("Data berhasil diubah");
            location.reload();
          } 
        });
      })

      // sub menu
      $(".submenu").on("click", function(){
        const role_id = $(this).data('role2')
        const menu_id = $(this).data('menu2')
        const sub_menu_id = $(this).data('submenu2')

        $.ajax({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type: "POST",
          url: "{{ route('sistem-role-simpan_detail-submenu') }}",
          data: {
            role_id: role_id,
            menu_id: menu_id,
            sub_menu_id: sub_menu_id,
          },
          success: function(html) {
            alert("Data berhasil diubah");
            location.reload();
          } 
        });
      })
    </script>
    <script>
      $(document).ready(function () {
        $(".preloader").fadeOut(500);
      })
      function icon_pack() {
        $("#modal_ikon").modal("show")
      }
    </script>
    <script>
      @if(session()->has('success'))
        toastr.success('{{ session('success') }}', 'BERHASIL'); 
      @elseif(session()->has('error'))
        toastr.error('{{ session('error') }}', 'GAGAL'); 
      @endif
    </script>
  @endpush
@endsection