@push('scripts')
    <script>

        // Select all "select all" checkboxes
            const selectAllBoxes = document.querySelectorAll("input[type=checkbox][data-target]");
           
            selectAllBoxes.forEach(selectAll => {
                const targetSelector = selectAll.getAttribute("data-target");
                const targets = document.querySelectorAll(targetSelector);

                // When select-all is toggled
                selectAll.addEventListener("change", () => {
                    targets.forEach(cb => cb.checked = selectAll.checked);
                });

                // Keep select-all synced when individual checkboxes change
                targets.forEach(cb => {
                    cb.addEventListener("change", () => {
                        selectAll.checked = [...targets].every(t => t.checked);
                    });
                });
                // targets.forEach(cb => cb.checked = selectAll.checked);
                selectAll.checked = [...targets].every(t => t.checked);
            });
    </script>
@endpush

@push('styles')
    <style>
        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .pilih-bentuk svg {
            width: 100px;
            height: 100px;
            display: block;
            margin: auto;
        }

        .pilih-bentuk i {
            font-size: 100px;
            color: grey;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
        }
    </style>
@endpush

<div class="row clearfix">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="card">
            <div class="header">
                <a href="{{ route('role.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-md-3">
                        <b>Nama Role</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input type="text" class="form-control" name="nama_role"
                                    value="@if (isset($datas)) {{ $datas->nama_role }} @endif">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p style="font-weight:bold;">Akses Toko</p>
                    </div>
                </div>

                <div class="row">
                    @foreach ($tokos as $toko)
                        <div class="col-md-3">
                            <div class="form-check form-check-inline">
                                <input type="checkbox"
                                    id="toko_{{ $toko->id }}"
                                    name="toko_id[]" value="{{ $toko->id }}"
                                    @if(in_array($toko->id, @$toko_ids ?? [])) checked @endif
                                    class="form-check-input">
                                <label for="toko_{{ $toko->id }}"
                                    class="form-check-label">
                                    {{ $toko->nama_toko }}
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <p style="font-weight:bold;">Akses Menu</p>
                        <div class="form-check form-check-inline">
                                                            <input type="checkbox"
                                                                id="_all" data-target=".check"
                                                                class="form-check-input">
                                                            <label for="_all"
                                                                class="form-check-label">
                                                                Select All
                                                            </label>
                                                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class=" table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nama Menu</th>
                                        <th>Submenu</th>
                                        <th>Nama Akses</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $myMenu = "";
                                    @endphp
                                    @foreach ($grouped_menu as $menuKey => $item)
                                        @foreach ($item as $key => $menu_list)
                                            <tr>
                                                <td>
                                                    @if ($myMenu != $menuKey)
                                                    {{ $menuKey }}
                                                     @php
                                                            $myMenu = $menuKey;
                                                        @endphp
                                                     @endif
                                                </td>
                                                <td>
                                                    
                                                    
                                                        <div class="form-check form-check-inline">
                                                            <input type="checkbox"
                                                                id="{{ $key }}_all" data-target=".select-{{ $key }}"
                                                                class="form-check-input check">
                                                            <label for="{{ $key }}_all"
                                                                class="form-check-label">
                                                                {{ str_replace('_', ' ', $key) }}
                                                            </label>
                                                        </div>
                                                       
                                                   
                                                </td>
                                                <td>
                                                
                                                    @foreach ($menu_list as $menu_aksi)
                                                        @if (isset($datas))
                                                            <div class="form-check form-check-inline">
                                                                <input type="checkbox"
                                                                    id="{{ $menu_aksi['nama_menu'] }}_{{ $menu_aksi['aksi_menu'] }}"
                                                                    name="menu_id[]" value="{{ $menu_aksi['nama_menu'] }}:{{ $menu_aksi['aksi_menu'] }}"
                                                                    @if (\Helper::hakAksesUser($id, $menu_aksi['nama_menu'], $menu_aksi['aksi_menu'])) checked @endif
                                                                    class="form-check-input check select-{{ $menu_aksi['nama_menu'] }}">
                                                                <label for="{{ $menu_aksi['nama_menu'] }}_{{ $menu_aksi['aksi_menu'] }}"
                                                                    class="form-check-label">
                                                                    {{ str_replace('_', ' ', $menu_aksi['aksi_menu']) }}
                                                                </label>
                                                            </div>
                                                        @else
                                                            <div class="form-check form-check-inline">
                                                                <input type="checkbox"
                                                                    id="{{ $menu_aksi['nama_menu'] }}_{{ $menu_aksi['aksi_menu'] }}"
                                                                    name="menu_id[]" value="{{ $menu_aksi['nama_menu'] }}:{{ $menu_aksi['aksi_menu'] }}"
                                                                    class="form-check-input check select-{{ $menu_aksi['nama_menu'] }}">
                                                                <label
                                                                    for="{{ $menu_aksi['nama_menu'] }}_{{ $menu_aksi['aksi_menu'] }}"
                                                                    class="form-check-label">
                                                                    {{ str_replace('_', ' ', $menu_aksi['aksi_menu']) }}
                                                                    
                                                                </label>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </td>
                                            </tr>
                                        @endforeach
                                        
                                    @endforeach
                                    {{-- @foreach ($menu_lists as $menu_list)
                                        <tr>
                                            <td>
                                                @if($menu_list->nama_menu == 'Konsultasi')
                                                    Prospek (Konsultasi)
                                                @elseif($menu_list->nama_menu == 'form_konsultasi')
                                                    Form Booking Service
                                                @else
                                                    {{ str_replace('_', ' ', $menu_list->nama_menu) }}
                                                @endif
                                            </td>
                                            <td>
                                                @php
                                                    $menu_action = $menu_model
                                                        ->where('nama_menu', $menu_list->nama_menu)
                                                        ->orderBy('aksi_menu')
                                                        ->get();
                                                @endphp
                                                @foreach ($menu_action as $menu_aksi)
                                                    @if (isset($datas))
                                                        <div class="form-check form-check-inline">
                                                            <input type="checkbox"
                                                                id="{{ $menu_aksi->nama_menu }}_{{ $menu_aksi->aksi_menu }}"
                                                                name="menu_id[]" value="{{ $menu_aksi->id }}"
                                                                @if (\Helper::hakAksesUser($id, $menu_aksi->nama_menu, $menu_aksi->aksi_menu)) checked @endif
                                                                class="form-check-input">
                                                            <label for="{{ $menu_aksi->nama_menu }}_{{ $menu_aksi->aksi_menu }}"
                                                                class="form-check-label">
                                                                {{ str_replace('_', ' ', $menu_aksi->aksi_menu) }}
                                                            </label>
                                                        </div>
                                                    @else
                                                        <div class="form-check form-check-inline">
                                                            <input type="checkbox"
                                                                id="{{ $menu_aksi->nama_menu }}_{{ $menu_aksi->aksi_menu }}"
                                                                name="menu_id[]" value="{{ $menu_aksi->id }}"
                                                                class="form-check-input">
                                                            <label
                                                                for="{{ $menu_aksi->nama_menu }}_{{ $menu_aksi->aksi_menu }}"
                                                                class="form-check-label">
                                                                {{ str_replace('_', ' ', $menu_aksi->aksi_menu) }}
                                                                
                                                            </label>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </td>
                                        </tr>
                                    @endforeach --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                

                <div class="row">
                    <div class="col-md-3">
                        <div class="form-line">
                            <button type="submit" class="btn btn-success">Simpan</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</div>


<div class="row">
    <div class="col-md-12">
        <hr>
    </div>
</div>
<div class="row" style="margin-bottom: 50px;">
    <div class="col-md-12" style="text-align: right;">
    </div>
</div>