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

@section('content')

<div class="bg-white rounded-xl border border-gray-200 p-6">
    <div class="flex items-center gap-2">
        <a href="{{ route('web.menu-access.index') }}"
           class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50">
            ← Menu Access
        </a>
        <button type="button" onclick="syncPrivileges()" 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>
    </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 w-64">Menu</th>
                <th class="text-left text-xs text-gray-400 font-medium pb-3">Roles with Privileges</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
                $menuPrivs   = $privileges->get($menu->id, collect());
                $hasPrivileges = $menuPrivs->isNotEmpty();
            @endphp
            <tr class="{{ $menu->level === 1 ? 'bg-gray-50' : '' }}">
                {{-- Menu Name --}}
                <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>

                {{-- Roles with Privileges --}}
                <td class="py-3">
                    @if($hasPrivileges)
                        <div class="flex flex-wrap gap-1">
                            @foreach($menuPrivs as $priv)
                                @php
                                    $active = collect(['view','create','edit','edit_draft','review','download','delete','deactivate'])
                                        ->filter(fn($k) => $priv->$k)
                                        ->values();
                                @endphp
                                <span class="flex items-center gap-1 text-xs px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full"
                                      title="{{ $active->join(', ') }}">
                                    {{ $priv->role->name ?? 'Unknown' }}
                                    <span class="text-blue-300">({{ $active->count() }})</span>
                                    <button type="button"
                                        onclick="removePrivilege({{ $priv->role_id }}, {{ $menu->id }}, '{{ addslashes($priv->role->name ?? '') }}')"
                                        class="text-blue-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">
                    <button type="button"
                        onclick="openModal({{ $menu->id }}, '{{ addslashes($menu->name) }}', {{ $menu->level }})"
                        class="text-xs px-3 py-1.5 border rounded-lg
                            {{ $hasPrivileges ? 'border-blue-200 bg-blue-50 hover:bg-blue-100 text-blue-700' : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                        {{ $hasPrivileges ? 'Edit Privileges' : 'Set Privileges' }}
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

{{-- Privilege Modal --}}
<div id="privilege-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeModal()"></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 id="priv-modal-title" class="text-sm font-semibold text-gray-900">Set Privileges</h3>
                <p class="text-xs text-gray-400 mt-0.5" id="modal-menu-name"></p>
            </div>
            <button onclick="closeModal()" 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="modal-role" onchange="loadPrivileges()"
                    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>

        {{-- Privileges --}}
        <div class="mb-4">
            <div class="flex items-center justify-between mb-2">
                <label class="text-xs text-gray-500">Privileges</label>
                <label class="flex items-center gap-2 text-xs text-gray-500 cursor-pointer">
                    <input type="checkbox" id="check-all" onchange="toggleAll(this)" class="w-3.5 h-3.5"/>
                    Select All
                </label>
            </div>
            <div class="grid grid-cols-2 gap-2">
                @foreach([
                    'view'       => 'View',
                    'create'     => 'Create',
                    'edit'       => 'Edit',
                    'edit_draft' => 'Edit Draft',
                    'review'     => 'Review',
                    'download'   => 'Download',
                    'delete'     => 'Delete',
                    'deactivate' => 'Deactivate / Activate',
                ] as $key => $label)
                <label class="flex items-center gap-2 p-2 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <input type="checkbox" name="privileges[]" value="{{ $key }}" class="priv-check w-4 h-4"/>
                    <span class="text-sm text-gray-700">{{ $label }}</span>
                </label>
                @endforeach
            </div>
        </div>

        {{-- Apply to children --}}
        <div id="apply-children-wrap" class="mb-5 hidden">
            <label class="flex items-center gap-2 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                <input type="checkbox" id="apply-children" class="w-4 h-4"/>
                <div>
                    <p class="text-sm text-gray-700">Apply to sub-menus</p>
                    <p class="text-xs text-gray-400">Same privileges will be applied to all children and grandchildren</p>
                </div>
            </label>
        </div>

        <div class="flex gap-3">
            <button onclick="savePrivileges()"
                class="flex-1 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                Save Privileges
            </button>
            <button onclick="closeModal()"
                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 currentMenuId   = null;
let currentMenuLevel = null;

function openModal(menuId, menuName, level) {
    currentMenuId    = menuId;
    currentMenuLevel = level;
    document.getElementById('modal-menu-name').textContent  = menuName;
    document.getElementById('modal-role').value             = '';
    document.getElementById('check-all').checked            = false;
    document.getElementById('priv-modal-title').textContent = 'Set Privileges';
    document.querySelectorAll('.priv-check').forEach(c => c.checked = false);

    const applyWrap = document.getElementById('apply-children-wrap');
    level < 3 ? applyWrap.classList.remove('hidden') : applyWrap.classList.add('hidden');

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

function closeModal() {
    document.getElementById('privilege-modal').classList.add('hidden');
}

function toggleAll(checkbox) {
    document.querySelectorAll('.priv-check').forEach(c => c.checked = checkbox.checked);
}

function loadPrivileges() {
    const roleId = document.getElementById('modal-role').value;
    if (!roleId || !currentMenuId) return;

    document.getElementById('priv-modal-title').textContent = 'Edit Privileges';

    fetch(`{{ route('web.menu-privileges.get') }}?role_id=${roleId}&menu_id=${currentMenuId}`)
        .then(r => r.json())
        .then(data => {
            const privKeys = ['view','create','edit','edit_draft','review','download','delete','deactivate'];
            privKeys.forEach(key => {
                const cb = document.querySelector(`.priv-check[value="${key}"]`);
                if (cb) cb.checked = data ? (data[key] === true || data[key] === 1) : false;
            });
            const allChecked = privKeys.every(key => {
                const cb = document.querySelector(`.priv-check[value="${key}"]`);
                return cb && cb.checked;
            });
            document.getElementById('check-all').checked = allChecked;
        });
}

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

    const privileges     = [];
    const applyChildren  = document.getElementById('apply-children')?.checked ?? false;
    document.querySelectorAll('.priv-check:checked').forEach(c => privileges.push(c.value));

    fetch('{{ route('web.menu-privileges.save') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            role_id:        roleId,
            menu_id:        currentMenuId,
            apply_children: applyChildren,
            privileges:     privileges
        })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { closeModal(); window.location.reload(); }
        else alert('Error saving privileges.');
    });
}

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

    fetch('{{ route('web.menu-privileges.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 privilege.');
    });
}

function syncPrivileges() {
    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: 'privileges' })
    })
    .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