@extends('layouts.master')
@section('content')
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <form action="{{route($route.'.store')}}" method="POST" class="">
                {{csrf_field()}}
                
                <table class="w-full text-left border-collapse" 
                    data-toggle="table"
                    data-search="false"
                    data-show-refresh ="false"
                    data-page-size="700">
                    <thead class="bg-slate-100 border-b border-slate-100">
                    <tr>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="20">#</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center" >Menu</th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="100"><label><input type="checkbox" class="checkread"> Lihat</label></th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="100"><label><input type="checkbox" class="checkadd"> Tambah</label></th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="100"><label><input type="checkbox" class="checkedit"> Edit</label></th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="100"><label><input type="checkbox" class="checkdel"> Hapus</label></th>
                        <th class="text-[10px] border font-bold text-slate-900 text-center"  width="100"><label><input type="checkbox" class="checkdownload"> Unggah</label></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($menu as $key1 => $parent)
                        <tr>
                            <td class="text-[10px] border font-bold text-slate-900 text-center">
                                @if(count($parent['level1']) > 0)
                                <a href="javascript:;" class="show_detail" data-id="{{$parent['id']}}" data-status="1">
                                    <i id="parent{{$parent['id']}}" class="ri-subtract-line"></i>
                                </a>
                                @endif
                            </td>
                            <td class="text-[10px] border font-bold text-slate-900 text-center">{{$parent['title']}}</td>
                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                <input type="checkbox" name="is_read[]"
                                    value="is_read+{{$parent['id']}}" @if($parent['checked']['is_read'] == 1) {{'checked'}} @endif>
                            </td>
                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                <input type="checkbox" name="is_create[]"
                                    value="is_create+{{$parent['id']}}" @if($parent['checked']['is_create'] == 1) {{'checked'}} @endif>
                            </td>
                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                <input type="checkbox" name="is_update[]"
                                    value="is_update+{{$parent['id']}}" @if($parent['checked']['is_update'] == 1) {{'checked'}} @endif>
                            </td>
                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                <input type="checkbox" name="is_delete[]"
                                    value="is_delete+{{$parent['id']}}" @if($parent['checked']['is_delete'] == 1) {{'checked'}} @endif>
                            </td>
                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                <input type="checkbox" name="is_download[]"
                                    value="is_download+{{$parent['id']}}" @if($parent['checked']['is_download'] == 1) {{'checked'}} @endif>
                            </td>
                            
                        </tr>
                        @if($parent['level1'])
                            @foreach($parent['level1'] as $key2 => $level1)
                                <tr class="parent_{{$parent['id']}} hide_child">
                                    <td class="text-[10px] border font-bold text-slate-900 text-center">
                                        @if(count($level1['level2']) > 0)<a href="javascript:;"
                                                                            class="show_detail"
                                                                            data-id="{{$level1['id']}}"
                                                                            data-status="1"><i
                                                    id="parent{{$level1['id']}}"
                                                    class="ri-subtract-line"></i></a>@endif
                                    </td>
                                    <td class="text-[10px] border font-bold text-slate-900 text-center" style="text-indent:30px;">--- {{$level1['title']}}</td>
                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                        <input type="checkbox" name="is_read[]" value="is_read+{{$level1['id']}}" @if($level1['checked']['is_read'] == 1) {{'checked'}} @endif>
                                    </td>
                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                        <input type="checkbox" name="is_create[]" value="is_create+{{$level1['id']}}" @if($level1['checked']['is_create'] == 1) {{'checked'}} @endif>
                                    </td>
                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                        <input type="checkbox" name="is_update[]" value="is_update+{{$level1['id']}}" @if($level1['checked']['is_update'] == 1) {{'checked'}} @endif>
                                    </td>
                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                        <input type="checkbox" name="is_delete[]" value="is_delete+{{$level1['id']}}" @if($level1['checked']['is_delete'] == 1) {{'checked'}} @endif>
                                    </td>
                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                        <input type="checkbox" name="is_download[]" value="is_download+{{$level1['id']}}" @if($level1['checked']['is_download'] == 1) {{'checked'}} @endif>
                                    </td>

                                    
                                </tr>
                                @if($level1['level2'])
                                    @foreach($level1['level2'] as $key3 => $level2)
                                        <tr class="parent_{{$level1['id']}} hide_child">
                                            <td class="text-[10px] border font-bold text-slate-900 text-center">
                                                @if(count($level2['level3']) > 0)<a href="javascript:;"
                                                                                    class="show_detail"
                                                                                    data-id="{{$level2['id']}}"
                                                                                    data-status="1"><i
                                                            id="parent{{$level2['id']}}"
                                                            class="ri-subtract-line"></i></a>@endif
                                            </td>
                                            <td style="text-indent: 60px">------ {{$level2['title']}}</td>
                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                <input type="checkbox" name="is_read[]" value="is_read+{{$level2['id']}}" @if($level2['checked']['is_read'] == 1) {{'checked'}} @endif>
                                            </td>
                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                <input type="checkbox" name="is_create[]" value="is_create+{{$level2['id']}}" @if($level2['checked']['is_create'] == 1) {{'checked'}} @endif>
                                            </td>
                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                <input type="checkbox" name="is_update[]" value="is_update+{{$level2['id']}}" @if($level2['checked']['is_update'] == 1) {{'checked'}} @endif>
                                            </td>
                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                <input type="checkbox" name="is_delete[]" value="is_delete+{{$level2['id']}}" @if($level2['checked']['is_delete'] == 1) {{'checked'}} @endif>
                                            </td>
                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                <input type="checkbox" name="is_download[]" value="is_download+{{$level2['id']}}" @if($level2['checked']['is_download'] == 1) {{'checked'}} @endif>
                                            </td>
                                        </tr>
                                        @if($level2['level3'])
                                            @foreach($level2['level3'] as $key4 => $level3)
                                                <tr class="parent_{{$level2['id']}} hide_child">
                                                    <td class="text-[10px] border font-bold text-slate-900 text-center">
                                                        @if(count($level3['level4']) > 0)<a href="javascript:;"
                                                                                            class="show_detail"
                                                                                            data-id="{{$level3['id']}}"
                                                                                            data-status="1"><i
                                                                    id="parent{{$level3['id']}}"
                                                                    class="ri-subtract-line"></i></a>@endif
                                                    </td>
                                                    <td style="text-indent: 90px;">--------- {{$level3['title']}}</td>
                                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                        <input type="checkbox" name="is_read[]" value="is_read+{{$level3['id']}}" @if($level3['checked']['is_read'] == 1) {{'checked'}} @endif>
                                                    </td>
                                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                        <input type="checkbox" name="is_create[]" value="is_create+{{$level3['id']}}" @if($level3['checked']['is_create'] == 1) {{'checked'}} @endif>
                                                    </td>
                                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                        <input type="checkbox" name="is_update[]" value="is_update+{{$level3['id']}}" @if($level3['checked']['is_update'] == 1) {{'checked'}} @endif>
                                                    </td>
                                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                        <input type="checkbox" name="is_delete[]" value="is_delete+{{$level3['id']}}" @if($level3['checked']['is_delete'] == 1) {{'checked'}} @endif>
                                                    </td>
                                                    <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                        <input type="checkbox" name="is_download[]" value="is_download+{{$level3['id']}}" @if($level3['checked']['is_download'] == 1) {{'checked'}} @endif>
                                                    </td>
                                                </tr>
                                                @if($level3['level4'])
                                                    @foreach($level3['level4'] as $key5 => $level4)
                                                        <tr class="parent_{{$level3['id']}} hide_child">
                                                            <td class="text-[10px] border font-bold text-slate-900 text-center">
                                                                <span style="color: #7F8FA4">{{$level4['id']}}</span>
                                                            </td>
                                                            <td style="text-indent: 130px">------------ {{$level4['title']}}</td>
                                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                                <input type="checkbox" name="is_read[]" value="is_read+{{$level4['id']}}" @if($level4['checked']['is_read'] == 1) {{'checked'}} @endif>
                                                            </td>
                                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                                <input type="checkbox" name="is_create[]" value="is_create+{{$level4['id']}}" @if($level4['checked']['is_create'] == 1) {{'checked'}} @endif>
                                                            </td>
                                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                                <input type="checkbox" name="is_update[]" value="is_update+{{$level4['id']}}" @if($level4['checked']['is_update'] == 1) {{'checked'}} @endif>
                                                            </td>
                                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                                <input type="checkbox" name="is_delete[]" value="is_delete+{{$level4['id']}}" @if($level4['checked']['is_delete'] == 1) {{'checked'}} @endif>
                                                            </td>
                                                            <td class="gridjs-td gridjs-th text-sm text-gray-500 text-center">
                                                                <input type="checkbox" name="is_download[]" value="is_download+{{$level4['id']}}" @if($level4['checked']['is_download'] == 1) {{'checked'}} @endif>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    @endforeach
                                @endif
                            @endforeach
                        @endif
                    @endforeach
                    </tbody>
                </table>
                <input type="hidden" name="group_id" value="{{encode_id(@$id)}}">
                <div class="flex justify-center justify-items-center mt-2 gap-2">
                    <a href="{{route('modules.management.role.index')}}" class="p-2 text-white bg-red-500 rounded"><i class="ri-close-line"></i> Batal</a>
                    <button class="p-2 text-white bg-emerald-500 rounded"><i class="ri-save-line"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('js')
	<script type="text/javascript">
        function toggle(toggle) {
            toggle == 'undefined' ? toggle = 0 : toggle = toggle;
            if (toggle == 0) {
                $('.show_detail').attr('data-status', '1');
                $('.show_detail').click();
            } else {
                $('.show_detail').attr('data-status', '0');
                $('.show_detail').click();
            }
        }
        $(document).ready(function () {
            $('.hide_child').show();
            $('.show_detail').click(function () {
                var id = $(this).attr('data-id');
                var status = $(this).attr('data-status');
                if (status == 1) {
                    $(this).attr('data-status', '0');
                    $(".parent_" + id).show('falt');
                    $("#parent" + id).removeClass('ri-subtract-line').addClass('ri-subtract-line');
                } else {
                    $(this).attr('data-status', '1');
                    $(".parent_" + id).hide('falt');
                    $("#parent" + id).removeClass('ri-subtract-line').addClass('ri-subtract-line');
                }
            });

            $('#menu_group').change(function () {
                window.location.href = "{{url('system/groups/access/'.encode_id(@$id))}}/" + this.value;
            });

            $('.checkread').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_read[]"]').prop('checked', checked);
            });
            $('.checkverify').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_verify[]"]').prop('checked', checked);
            });
            $('.checkadd').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_create[]"]').prop('checked', checked);
            });
            $('.checkedit').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_update[]"]').prop('checked', checked);
            });
            $('.checkdel').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_delete[]"]').prop('checked', checked);
            });
            $('.checkapprove').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_approve[]"]').prop('checked', checked);
            });
            $('.checkdownload').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_download[]"]').prop('checked', checked);
            });

            $('.checkbalaibesar').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_balaibesar[]"]').prop('checked', checked);
            });
            $('.checktipea').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_tipe_a[]"]').prop('checked', checked);
            });
            $('.checktipeb').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_tipe_b[]"]').prop('checked', checked);
            });
            $('.checkloka').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_loka[]"]').prop('checked', checked);
            });
            $('.checkpusat').change(function () {
                var checked = $(this).prop('checked');
                $('.table').find('input[name*="is_pusat[]"]').prop('checked', checked);
            });
        });
    </script>
@endsection