@extends('layouts.cp')
@section('title', 'Menu Access — Web')

@section('content')

<div class="bg-white rounded-xl border border-gray-200 p-6">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-sm font-medium text-gray-900">Menu Access</h2>
            <p class="text-xs text-gray-500 mt-1">Set which roles can access each menu.</p>
        </div>
        <div class="flex items-center gap-2">
            <button type="button" onclick="syncMenus()" id="sync-btn"
                    class="text-xs px-3 py-1.5 border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 flex items-center gap-1">
                <span id="sync-icon">⟳</span>
                <span id="sync-label">Sync to Main App</span>
            </button>
            <a href="{{ route('web.menu-privileges.index') }}"
               class="text-xs px-3 py-1.5 border border-blue-200 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100">
                Menu Privileges →
            </a>
        </div>
    </div>

    @if($menus->isEmpty())
        <p class="text-sm text-gray-400">No menus configured.</p>
    @else
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-100">
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Menu</th>
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Access Roles</th>
                <th class="text-right text-xs text-gray-400 font-medium pb-3">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($menus as $menu)
            @php
                $menuAccess = $accesses->get($menu->id, collect());
            @endphp
            <tr class="{{ $menu->level === 1 ? 'bg-gray-50' : '' }}">
                <td class="py-3
                    {{ $menu->level === 1 ? 'font-medium text-gray-900' : '' }}
                    {{ $menu->level === 2 ? 'pl-5 text-gray-600' : '' }}
                    {{ $menu->level === 3 ? 'pl-10 text-gray-500 text-xs' : '' }}">
                    @if($menu->level > 1)
                        <span class="text-gray-300 mr-1">└</span>
                    @endif
                    {{ $menu->name }}
                    @if($menu->slug)
                        <span class="font-mono text-gray-300 text-xs ml-1">{{ $menu->slug }}</span>
                    @endif
                </td>

                {{-- Access Roles --}}
                <td class="py-3">
                    @if($menuAccess->isNotEmpty())
                        <div class="flex flex-wrap gap-1">
                            @foreach($menuAccess as $access)
                                <span class="flex items-center gap-1 text-xs px-2 py-0.5 bg-green-50 text-green-600 rounded-full">
                                    {{ $access->role->name ?? 'Unknown' }}
                                    <button type="button"
                                        onclick="removeAccess({{ $access->role_id }}, {{ $menu->id }}, '{{ addslashes($access->role->name ?? '') }}')"
                                        class="text-green-400 hover:text-red-500 ml-1 font-bold">
                                        ✕
                                    </button>
                                </span>
                            @endforeach
                        </div>
                    @else
                        <span class="text-xs text-gray-300">—</span>
                    @endif
                </td>

                {{-- Actions --}}
                <td class="py-3 text-right">
                    @if($menu->level === 1)
                    <button type="button"
                        onclick="openAccessModal({{ $menu->id }}, '{{ addslashes($menu->name) }}')"
                        class="text-xs px-3 py-1.5 border border-green-200 bg-green-50 hover:bg-green-100 text-green-700 rounded-lg">
                        Give Access
                    </button>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

{{-- Give Access Modal --}}
<div id="access-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeAccessModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="text-sm font-semibold text-gray-900">Give Menu Access</h3>
                <p class="text-xs text-gray-400 mt-0.5" id="access-modal-menu-name"></p>
            </div>
            <button onclick="closeAccessModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Role --}}
        <div class="mb-4">
            <label class="block text-xs text-gray-500 mb-1">Role</label>
            <select id="access-role" onchange="loadAccess()"
                    class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                <option value="">Select role...</option>
                @foreach($roles as $role)
                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- Sub menu dropdown --}}
        <div id="submenu-wrap" class="mb-4">
            <label class="block text-xs text-gray-500 mb-1">Sub Menu</label>
            <select id="access-submenu" onchange="loadSubSubMenus()"
                    class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                <option value="">— Select sub menu —</option>
            </select>
        </div>

        {{-- Layer 3 checkboxes --}}
        <div id="access-layer3-wrap" class="mb-5 hidden">
            <label class="block text-xs text-gray-500 mb-2">Sub-sub Menus</label>
            <div id="access-layer3" class="space-y-2"></div>
        </div>

        {{-- Include all children --}}
        <div class="mb-5">
            <label class="flex items-center gap-2 p-3 border border-gray-100 rounded-lg cursor-pointer hover:bg-gray-50">
                <input type="checkbox" id="access-include-parent" class="w-4 h-4"/>
                <div>
                    <p class="text-sm text-gray-700">Include all sub menus & sub-sub menus</p>
                    <p class="text-xs text-gray-400">Automatically gives access to all children under this menu</p>
                </div>
            </label>
        </div>

        <div class="flex gap-3">
            <button onclick="saveAccess()"
                class="flex-1 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                Save Access
            </button>
            <button onclick="closeAccessModal()"
                class="px-4 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600">
                Cancel
            </button>
        </div>
    </div>
</div>

<script>
let currentParentMenuId = null;
let currentAccessMenuIds = [];

// ── Give Access Modal ────────────────────────────────────

function openAccessModal(parentMenuId, menuName) {
    currentParentMenuId  = parentMenuId;
    currentAccessMenuIds = [];
    document.getElementById('access-modal-menu-name').textContent = menuName;
    document.getElementById('access-role').value = '';
    document.getElementById('access-submenu').innerHTML = '<option value="">— Select sub menu —</option>';
    document.getElementById('access-layer3-wrap').classList.add('hidden');
    document.getElementById('access-layer3').innerHTML = '';

    const subMenuWrap = document.getElementById('submenu-wrap');
    subMenuWrap.classList.remove('hidden');

    fetch(`{{ route('web.menu-access.children') }}?parent_id=${parentMenuId}`)
        .then(r => r.json())
        .then(children => {
            const select = document.getElementById('access-submenu');
            if (children.length === 0) {
                subMenuWrap.classList.add('hidden');
            } else {
                subMenuWrap.classList.remove('hidden');
                children.forEach(child => {
                    const opt = document.createElement('option');
                    opt.value = child.id;
                    opt.textContent = child.name;
                    select.appendChild(opt);
                });
            }
        });

    document.getElementById('access-modal').classList.remove('hidden');
}

function closeAccessModal() {
    document.getElementById('access-modal').classList.add('hidden');
}

function loadSubSubMenus() {
    const subMenuId       = document.getElementById('access-submenu').value;
    const layer3Wrap      = document.getElementById('access-layer3-wrap');
    const layer3Container = document.getElementById('access-layer3');
    layer3Container.innerHTML = '';

    if (!subMenuId) { layer3Wrap.classList.add('hidden'); return; }

    fetch(`{{ route('web.menu-access.children') }}?parent_id=${subMenuId}`)
        .then(r => r.json())
        .then(children => {
            if (children.length === 0) { layer3Wrap.classList.add('hidden'); return; }
            layer3Wrap.classList.remove('hidden');
            children.forEach(child => {
                const label = document.createElement('label');
                label.className = 'flex items-center gap-2 p-2 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer';
                label.innerHTML = `
                    <input type="checkbox" class="access-layer3-check w-4 h-4" value="${child.id}"/>
                    <span class="text-sm text-gray-700">${child.name}</span>
                `;
                layer3Container.appendChild(label);
            });
        });
}

function loadAccess() {
    const roleId = document.getElementById('access-role').value;
    if (!roleId) return;

    fetch(`{{ route('web.menu-access.access.get') }}?role_id=${roleId}`)
        .then(r => r.json())
        .then(menuIds => {
            currentAccessMenuIds = menuIds;
            document.querySelectorAll('.access-layer3-check').forEach(cb => {
                cb.checked = menuIds.includes(parseInt(cb.value));
            });
        });
}

function saveAccess() {
    const roleId = document.getElementById('access-role').value;
    if (!roleId) { alert('Please select a role first.'); return; }

    const checkedLayer3 = [];
    document.querySelectorAll('.access-layer3-check:checked').forEach(c => checkedLayer3.push(parseInt(c.value)));

    const subMenuId     = document.getElementById('access-submenu').value;
    const subMenuHidden = document.getElementById('submenu-wrap').classList.contains('hidden');
    const includeAll    = document.getElementById('access-include-parent').checked;

    let menuIds = currentAccessMenuIds.map(id => parseInt(id));
    if (currentParentMenuId) menuIds.push(parseInt(currentParentMenuId));

    if (includeAll) {
        fetch(`{{ route('web.menu-access.children') }}?parent_id=${currentParentMenuId}`)
            .then(r => r.json())
            .then(async children => {
                for (const child of children) {
                    menuIds.push(parseInt(child.id));
                    const grandRes      = await fetch(`{{ route('web.menu-access.children') }}?parent_id=${child.id}`);
                    const grandchildren = await grandRes.json();
                    grandchildren.forEach(g => menuIds.push(parseInt(g.id)));
                }
                checkedLayer3.forEach(id => menuIds.push(id));
                menuIds = [...new Set(menuIds)].filter(id => !isNaN(id) && id > 0);
                sendAccessSave(roleId, menuIds);
            });
    } else {
        if (!subMenuHidden && subMenuId) menuIds.push(parseInt(subMenuId));
        checkedLayer3.forEach(id => menuIds.push(id));
        menuIds = [...new Set(menuIds)].filter(id => !isNaN(id) && id > 0);
        sendAccessSave(roleId, menuIds);
    }
}

function sendAccessSave(roleId, menuIds) {
    fetch('{{ route('web.menu-access.access.save') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ role_id: roleId, menu_ids: menuIds })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { closeAccessModal(); window.location.reload(); }
        else alert('Error: ' + (data.message ?? 'Unknown error'));
    })
    .catch(err => alert('Fetch error: ' + err.message));
}

function removeAccess(roleId, menuId, roleName) {
    if (!confirm('Remove ' + roleName + ' access from this menu?')) return;

    fetch('{{ route('web.menu-access.access.remove') }}', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ role_id: roleId, menu_id: menuId })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) window.location.reload();
        else alert('Error removing access');
    });
}

function syncMenus() {
    const btn   = document.getElementById('sync-btn');
    const label = document.getElementById('sync-label');
    const icon  = document.getElementById('sync-icon');
    btn.disabled      = true;
    label.textContent = 'Syncing...';
    fetch('{{ route('dashboard.sync') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ type: 'menus' })
    })
    .then(r => r.json())
    .then(data => {
        label.textContent = data.success ? 'Synced!' : 'Failed';
        icon.textContent  = data.success ? '✓' : '✕';
        setTimeout(() => { label.textContent = 'Sync to Main App'; icon.textContent = '⟳'; btn.disabled = false; }, 2000);
    })
    .catch(() => { label.textContent = 'Error'; btn.disabled = false; });
}
</script>

@endsection