@extends('layouts.app')

@section('judul', 'Manajemen Menu')
@section('subjudul', 'Susunan menu & submenu sidebar dan role yang dapat melihatnya')

@section('aksi-header')
    <button type="button" class="btn btn-primary tombol-tambah" data-jenis="menu"><i class="fas fa-plus mr-1"></i> Menu</button>
    <button type="button" class="btn btn-outline-primary tombol-tambah" data-jenis="grup"><i class="fas fa-folder-plus mr-1"></i> Grup</button>
    <button type="button" class="btn btn-outline-secondary tombol-tambah" data-jenis="header"><i class="fas fa-heading mr-1"></i> Judul bagian</button>
@endsection

@section('konten')
    @php
        $labelJenis = ['header' => ['Judul bagian', 'secondary'], 'grup' => ['Grup', 'info'], 'menu' => ['Menu', 'primary']];
        $barisMenu = function ($m, $anak = false) {
            return ['id' => $m->id, 'jenis' => $m->jenis, 'judul' => $m->judul, 'ikon' => $m->ikon, 'route' => $m->route,
                'id_induk' => $m->id_induk, 'roles' => $m->roles->pluck('id')->all(), 'terkunci' => $m->terkunci];
        };
    @endphp

    <div class="alert alert-light border small">
        <i class="fas fa-circle-info mr-1 text-primary"></i>
        Menu hanya mengatur <b>tampilan</b> sidebar. Hak membuka halaman tetap ditentukan permission role, jadi menu yang ditampilkan untuk role yang tidak berhak akan berujung "Akses ditolak".
        Grup tampil bila ada submenu yang tampil; judul bagian tampil bila ada menu di bawahnya.
    </div>

    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead><tr><th>Menu</th><th>Halaman</th><th>Role yang melihat</th><th class="text-right">Aksi</th></tr></thead>
                            <tbody>
                            @foreach ($pohon as $m)
                                @foreach (collect([$m])->concat($m->jenis === 'grup' ? $m->anak : []) as $baris)
                                    @php($anak = $baris->id_induk !== null)
                                    <tr id="menu-{{ $baris->id }}" class="{{ $baris->aktif ? '' : 'teks-redup' }} {{ $baris->jenis === 'header' ? 'table-light' : '' }}">
                                        <td style="{{ $anak ? 'padding-left:2.5rem' : '' }}">
                                            @if ($anak)<i class="fas fa-turn-up fa-rotate-90 teks-redup mr-2"></i>@endif
                                            @if ($baris->ikon)<i class="{{ $baris->ikon }} mr-1" style="width:1.1rem;text-align:center"></i>@endif
                                            <span class="{{ $baris->jenis === 'header' ? 'small fw-semibold text-uppercase' : 'fw-semibold' }}">{{ $baris->judul }}</span>
                                            <span class="badge badge-lembut-{{ $labelJenis[$baris->jenis][1] }} ml-1">{{ $labelJenis[$baris->jenis][0] }}</span>
                                            @if (! $baris->aktif)<span class="badge badge-lembut-secondary">Disembunyikan</span>@endif
                                            @if ($baris->terkunci)<i class="fas fa-lock fa-xs teks-redup ml-1" title="Item sistem"></i>@endif
                                        </td>
                                        <td class="small">
                                            @if ($baris->route)
                                                <code>{{ $pilihanRoute[$baris->route] ?? $baris->route }}</code>
                                                @unless (isset($pilihanRoute[$baris->route]))<div class="text-danger">Halaman tidak ditemukan</div>@endunless
                                            @else
                                                <span class="teks-redup">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($baris->jenis === 'menu')
                                                @forelse ($baris->roles as $r)
                                                    <span class="badge badge-lembut-primary mb-1">{{ $r->nama_role }}</span>
                                                @empty
                                                    <span class="small text-danger">Tidak ada</span>
                                                @endforelse
                                            @else
                                                <span class="small teks-redup">{{ $baris->jenis === 'grup' ? 'Mengikuti submenu' : 'Mengikuti menu di bawahnya' }}</span>
                                            @endif
                                        </td>
                                        <td class="text-right text-nowrap">
                                            @foreach (['naik' => 'fa-arrow-up', 'turun' => 'fa-arrow-down'] as $arah => $ikonArah)
                                                <form method="POST" action="{{ route('menu.geser', $baris) }}" class="d-inline">
                                                    @csrf
                                                    <input type="hidden" name="arah" value="{{ $arah }}">
                                                    <button type="submit" class="btn btn-sm btn-light border" title="{{ ucfirst($arah) }}"><i class="fas {{ $ikonArah }}"></i></button>
                                                </form>
                                            @endforeach
                                            <button type="button" class="btn btn-sm btn-outline-primary tombol-ubah" title="Ubah" data-menu="{{ json_encode($barisMenu($baris)) }}"><i class="fas fa-pen"></i></button>
                                            <x-form-aksi :action="route('menu.aktif', $baris)" label="" :ikon="$baris->aktif ? 'fa-eye-slash' : 'fa-eye'"
                                                         :warna="$baris->aktif ? 'outline-secondary' : 'outline-success'" class="btn-sm"
                                                         :judul="($baris->aktif ? 'Sembunyikan ' : 'Tampilkan ').$baris->judul.'?'"
                                                         :pesan="$baris->aktif ? 'Menu disembunyikan dari semua role.' : 'Menu tampil kembali bagi role yang dipilih.'"
                                                         :tombol-konfirmasi="$baris->aktif ? 'Ya, sembunyikan' : 'Ya, tampilkan'" />
                                            @unless ($baris->terkunci)
                                                <x-form-aksi :action="route('menu.destroy', $baris)" label="" ikon="fa-trash" warna="outline-danger" class="btn-sm"
                                                             :judul="'Hapus '.$baris->judul.'?'" pesan="Item menu dihapus permanen. Halaman tujuannya tidak terpengaruh." tombol-konfirmasi="Ya, hapus">
                                                    @method('DELETE')
                                                </x-form-aksi>
                                            @endunless
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="far fa-eye mr-1"></i> Pratinjau sidebar</h3></div>
                <div class="card-body">
                    <select id="pratinjau-role" class="custom-select custom-select-sm mb-3">
                        @foreach ($daftarRole as $r)
                            <option value="{{ $r->id }}">{{ $r->nama_role }}</option>
                        @endforeach
                    </select>
                    @foreach ($pratinjau as $idRole => $menuRole)
                        <ul class="list-unstyled mb-0 pratinjau" data-role="{{ $idRole }}" style="{{ $loop->first ? '' : 'display:none' }};background:var(--ss-navy);border-radius:.5rem;padding:.75rem;color:#dfe7f3">
                            @forelse ($menuRole as $item)
                                @if ($item['jenis'] === 'header')
                                    <li class="small mt-2 mb-1" style="opacity:.6;letter-spacing:.05em">{{ $item['judul'] }}</li>
                                @else
                                    <li class="py-1"><i class="{{ $item['ikon'] }} mr-2" style="width:1rem;text-align:center"></i>{{ $item['judul'] }}
                                        @if ($item['jenis'] === 'grup')<i class="fas fa-angle-down fa-xs ml-1"></i>
                                            <ul class="list-unstyled pl-4">
                                                @foreach ($item['anak'] as $anak)
                                                    <li class="py-1 small"><i class="{{ $anak['ikon'] }} mr-2"></i>{{ $anak['judul'] }}</li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endif
                            @empty
                                <li class="small" style="opacity:.7">Tidak ada menu untuk role ini.</li>
                            @endforelse
                        </ul>
                    @endforeach
                    <p class="small teks-redup mt-2 mb-0">Pengguna dengan beberapa role melihat gabungan menunya.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-menu" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" id="form-menu" class="modal-content form-validasi" data-aksi-tambah="{{ route('menu.store') }}" data-aksi-ubah="{{ url('menu') }}">
                @csrf
                <input type="hidden" name="_method" value="POST" id="metode">
                <input type="hidden" name="jenis" id="isian-jenis" value="{{ old('jenis', 'menu') }}">
                <input type="hidden" name="_baris" id="id-baris" value="{{ old('_baris') }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="judul-modal">Tambah menu</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="isian-judul">Judul <span class="wajib">*</span></label>
                        <input type="text" id="isian-judul" name="judul" maxlength="100" required value="{{ old('judul') }}" class="form-control @error('judul') is-invalid @enderror">
                        @error('judul')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group khusus khusus-grup khusus-menu">
                        <label for="isian-ikon">Ikon <span class="wajib">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text" style="width:2.6rem;justify-content:center"><i id="pratinjau-ikon" class="fas fa-circle"></i></span></div>
                            <input type="text" id="isian-ikon" name="ikon" maxlength="60" value="{{ old('ikon') }}" placeholder="fas fa-inbox" class="form-control @error('ikon') is-invalid @enderror">
                            @error('ikon')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <small class="form-text teks-redup">Nama ikon Font Awesome 6, mis. <code>fas fa-inbox</code>, <code>fas fa-users</code>, <code>far fa-file</code>.</small>
                    </div>
                    <div class="form-group khusus khusus-menu">
                        <label for="isian-route">Halaman tujuan <span class="wajib">*</span></label>
                        <select id="isian-route" name="route" class="custom-select @error('route') is-invalid @enderror">
                            <option value="">— Pilih halaman —</option>
                            @foreach ($pilihanRoute as $nama => $uri)
                                <option value="{{ $nama }}" @selected(old('route') === $nama)>{{ $uri }} ({{ $nama }})</option>
                            @endforeach
                        </select>
                        @error('route')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group khusus khusus-menu">
                        <label for="isian-induk">Di dalam grup</label>
                        <select id="isian-induk" name="id_induk" class="custom-select @error('id_induk') is-invalid @enderror">
                            <option value="">— Tidak (menu utama) —</option>
                            @foreach ($daftarGrup as $g)
                                <option value="{{ $g->id }}" @selected(old('id_induk') == $g->id)>{{ $g->judul }}</option>
                            @endforeach
                        </select>
                        @error('id_induk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group khusus khusus-menu mb-0">
                        <label class="d-block">Ditampilkan untuk role <span class="wajib">*</span></label>
                        @foreach ($daftarRole as $r)
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input isian-role" id="role-{{ $r->id }}" name="roles[]" value="{{ $r->id }}" @checked(in_array($r->id, old('roles', [])))>
                                <label class="custom-control-label font-weight-normal" for="role-{{ $r->id }}">{{ $r->nama_role }}</label>
                            </div>
                        @endforeach
                        @error('roles')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk mr-1"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
$(function () {
    const $form = $('#form-menu');
    const namaJenis = { header: 'judul bagian', grup: 'grup', menu: 'menu' };

    function tampilkanIsian(jenis) {
        $('#isian-jenis').val(jenis);
        $('.khusus').hide().filter(`.khusus-${jenis}`).show();
        $('#isian-route').prop('required', jenis === 'menu');
        $('#isian-ikon').prop('required', jenis !== 'header');
    }

    // menu: null = tambah (dengan jenis), objek = ubah. kosongkan=false setelah galat validasi.
    function siapkan(menu, jenis, kosongkan = true) {
        const ubah = !!menu;
        jenis = ubah ? menu.jenis : jenis;
        $form.attr('action', ubah ? `${$form.data('aksi-ubah')}/${menu.id}` : $form.data('aksi-tambah'));
        $('#metode').val(ubah ? 'PUT' : 'POST');
        $('#id-baris').val(ubah ? menu.id : '');
        $('#judul-modal').text(`${ubah ? 'Ubah' : 'Tambah'} ${namaJenis[jenis]}`);
        tampilkanIsian(jenis);
        if (kosongkan) {
            $form.find('.is-invalid').removeClass('is-invalid');
            $('#isian-judul').val(ubah ? menu.judul : '');
            $('#isian-ikon').val(ubah ? (menu.ikon || '') : '');
            $('#isian-route').val(ubah ? (menu.route || '') : '');
            $('#isian-induk').val(ubah ? (menu.id_induk || '') : '');
            $('.isian-role').each(function () { this.checked = ubah && menu.roles.includes(parseInt(this.value, 10)); });
        }
        $('#isian-route').prop('disabled', ubah && menu.terkunci);
        $('#isian-induk option').prop('disabled', false);
        if (ubah) $(`#isian-induk option[value="${menu.id}"]`).prop('disabled', true);
        $('#isian-ikon').trigger('input');
        $('#modal-menu').modal('show');
    }

    $('.tombol-tambah').on('click', function () { siapkan(null, this.dataset.jenis); });
    $('.tombol-ubah').on('click', function () { siapkan(JSON.parse(this.dataset.menu)); });
    $('#isian-ikon').on('input', function () { $('#pratinjau-ikon').attr('class', /^(fas|far|fab) fa-[a-z0-9-]+$/.test(this.value.trim()) ? this.value.trim() : 'fas fa-circle'); });
    $('#pratinjau-role').on('change', function () { $('.pratinjau').hide().filter(`[data-role="${this.value}"]`).show(); });

    @if ($errors->any())
        const idGagal = $('#id-baris').val();
        const $asal = $('.tombol-ubah').filter((i, el) => idGagal && JSON.parse(el.dataset.menu).id == idGagal);
        siapkan($asal.length ? JSON.parse($asal[0].dataset.menu) : null, $('#isian-jenis').val() || 'menu', false);
    @endif
});
</script>
@endpush