@extends('layouts.app')

@section('title', 'Configure Permissions - NGBVD')

@section('content')
@php
    $assignedPermissions = $assignedPermissions ?? [];
    $permissionGroups = $permissionGroups ?? [];
    $roleRef = $role->uuid ?? $role->id;
@endphp

<div class="ngbvd-page-header mb-3">
    <div>
        <h2>Configure Permissions</h2>
        <p>Role: <strong>{{ $role->name }}</strong>. Assign module and action permissions for this role.</p>
    </div>
    <div class="ml-auto ngbvd-hero-actions">
        <a href="{{ url('/roles/list') }}" class="btn ngbvd-btn-soft"><i class="ti-arrow-left"></i> Back to Roles</a>
    </div>
</div>

<form method="POST" action="{{ url('/roles/permissions/'.$roleRef) }}" class="ngbvd-permission-shell" id="ngbvdPermissionForm">
    @csrf

    <aside class="ngbvd-permission-side">
        <div class="ngbvd-permission-side-head">
            <strong>Modules</strong>
            <small>{{ count($permissionGroups) }} group(s)</small>
        </div>
        <div class="ngbvd-permission-search">
            <i class="ti-search"></i>
            <input type="text" id="permissionSearch" placeholder="Search permissions..." autocomplete="off">
        </div>
        <nav class="ngbvd-permission-module-list">
            @foreach($permissionGroups as $groupName => $permissions)
                <a href="#perm-{{ Str::slug($groupName) }}" data-group="{{ strtolower($groupName) }}">
                    <span>{{ ucwords(str_replace('_', ' ', $groupName)) }}</span>
                    <small>{{ count($permissions) }}</small>
                </a>
            @endforeach
        </nav>
    </aside>

    <section class="ngbvd-permission-main">
        @foreach($permissionGroups as $groupName => $permissions)
            @php $groupId = 'perm-'.Str::slug($groupName); @endphp
            <div class="ngbvd-permission-group" id="{{ $groupId }}" data-group-card="{{ strtolower($groupName) }}">
                <div class="ngbvd-permission-group-header">
                    <div>
                        <h4>{{ ucwords(str_replace('_', ' ', $groupName)) }}</h4>
                        <small>{{ count($permissions) }} configurable action(s)</small>
                    </div>
                    <div class="ngbvd-permission-group-actions">
                        <button type="button" class="btn btn-sm ngbvd-btn-soft" data-select-group="{{ $groupId }}"><i class="ti-check"></i> Select module</button>
                        <button type="button" class="btn btn-sm ngbvd-btn-soft" data-clear-group="{{ $groupId }}"><i class="ti-close"></i> Clear module</button>
                    </div>
                </div>

                <div class="ngbvd-permission-grid">
                    @foreach($permissions as $key => $permission)
                        <label class="ngbvd-permission-option" data-permission-text="{{ strtolower(($permission['label'] ?? $key).' '.($permission['description'] ?? '').' '.$key) }}">
                            <input type="checkbox" name="permissions[]" value="{{ $key }}" {{ in_array($key, $assignedPermissions) ? 'checked' : '' }}>
                            <span class="ngbvd-permission-option-body">
                                <strong>{{ $permission['label'] ?? $key }}</strong>
                                @if(!empty($permission['description']))
                                    <small>{{ $permission['description'] }}</small>
                                @endif
                                <code>{{ $key }}</code>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>
        @endforeach

        <div class="ngbvd-permission-sticky-actions">
            <div class="ngbvd-selected-count"><span id="selectedPermissionCount">0</span> permission(s) selected</div>
            <div class="ngbvd-form-actions">
                <button type="button" class="btn ngbvd-btn-soft" id="clearAllPermissions"><i class="ti-close"></i> Clear All</button>
                <button type="button" class="btn ngbvd-btn-soft" id="selectAllPermissions"><i class="ti-check"></i> Select All</button>
                <button type="submit" class="btn ngbvd-btn-primary"><i class="ti-save"></i> Save Permissions</button>
            </div>
        </div>
    </section>
</form>

<style>
.ngbvd-permission-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.ngbvd-permission-side{position:sticky;top:92px;background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:22px;padding:18px;box-shadow:0 18px 42px rgba(15,23,42,.08)}.ngbvd-permission-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ngbvd-permission-side-head strong{color:#111827;font-size:16px}.ngbvd-permission-side-head small{color:#6b7280}.ngbvd-permission-search{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:0 12px;margin-bottom:14px}.ngbvd-permission-search input{border:0;background:transparent;outline:0;height:40px;width:100%}.ngbvd-permission-module-list{display:flex;flex-direction:column;gap:8px;max-height:58vh;overflow:auto;padding-right:4px}.ngbvd-permission-module-list a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#374151;background:#f9fafb;border:1px solid #eef2f7;border-radius:14px;padding:11px 12px;font-weight:600}.ngbvd-permission-module-list a:hover,.ngbvd-permission-module-list a.active{background:#fff7e6;border-color:rgba(184,134,11,.35);color:#92400e}.ngbvd-permission-module-list small{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:2px 8px;color:#6b7280}.ngbvd-permission-main{min-width:0}.ngbvd-permission-group{background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:22px;padding:18px;margin-bottom:18px;box-shadow:0 18px 42px rgba(15,23,42,.07)}.ngbvd-permission-group-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid #eef2f7;padding-bottom:14px;margin-bottom:16px}.ngbvd-permission-group-header h4{margin:0 0 4px;color:#111827}.ngbvd-permission-group-header small{color:#6b7280}.ngbvd-permission-group-actions{display:flex;gap:8px;flex-wrap:wrap}.ngbvd-permission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.ngbvd-permission-option{position:relative;display:flex;gap:12px;padding:14px;border:1px solid #e5e7eb;border-radius:16px;background:#fbfdff;cursor:pointer;transition:.18s ease;min-height:110px}.ngbvd-permission-option:hover{border-color:rgba(184,134,11,.45);box-shadow:0 12px 28px rgba(15,23,42,.07);transform:translateY(-1px)}.ngbvd-permission-option input{margin-top:4px}.ngbvd-permission-option:has(input:checked){background:#fff7e6;border-color:rgba(184,134,11,.55)}.ngbvd-permission-option-body{display:flex;flex-direction:column;gap:5px}.ngbvd-permission-option strong{color:#111827}.ngbvd-permission-option small{color:#6b7280;line-height:1.35}.ngbvd-permission-option code{font-size:11px;background:#f3f4f6;color:#4b5563;border-radius:999px;padding:3px 8px;width:max-content}.ngbvd-permission-sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid #e5e7eb;border-radius:18px;padding:14px;display:flex;justify-content:space-between;gap:14px;align-items:center;box-shadow:0 -10px 28px rgba(15,23,42,.08);z-index:5}.ngbvd-selected-count{font-weight:700;color:#374151}.ngbvd-form-actions{display:flex;gap:10px;flex-wrap:wrap}.ngbvd-permission-hidden{display:none!important}@media(max-width:1000px){.ngbvd-permission-shell{grid-template-columns:1fr}.ngbvd-permission-side{position:relative;top:auto}.ngbvd-permission-group-header,.ngbvd-permission-sticky-actions{flex-direction:column;align-items:stretch}.ngbvd-form-actions{justify-content:flex-start}}
</style>

<script>
document.addEventListener('DOMContentLoaded',function(){var form=document.getElementById('ngbvdPermissionForm');if(!form)return;var countEl=document.getElementById('selectedPermissionCount');function updateCount(){countEl.textContent=form.querySelectorAll('input[name="permissions[]"]:checked').length;}form.addEventListener('change',updateCount);updateCount();document.getElementById('selectAllPermissions').addEventListener('click',function(){form.querySelectorAll('input[name="permissions[]"]').forEach(function(i){i.checked=true;});updateCount();});document.getElementById('clearAllPermissions').addEventListener('click',function(){form.querySelectorAll('input[name="permissions[]"]').forEach(function(i){i.checked=false;});updateCount();});document.querySelectorAll('[data-select-group]').forEach(function(btn){btn.addEventListener('click',function(){var box=document.getElementById(this.dataset.selectGroup);box.querySelectorAll('input[type=checkbox]').forEach(function(i){i.checked=true;});updateCount();});});document.querySelectorAll('[data-clear-group]').forEach(function(btn){btn.addEventListener('click',function(){var box=document.getElementById(this.dataset.clearGroup);box.querySelectorAll('input[type=checkbox]').forEach(function(i){i.checked=false;});updateCount();});});var search=document.getElementById('permissionSearch');search.addEventListener('input',function(){var q=this.value.toLowerCase().trim();document.querySelectorAll('.ngbvd-permission-option').forEach(function(opt){var match=(opt.dataset.permissionText||'').indexOf(q)>-1;opt.classList.toggle('ngbvd-permission-hidden',q && !match);});document.querySelectorAll('.ngbvd-permission-group').forEach(function(group){var visible=group.querySelectorAll('.ngbvd-permission-option:not(.ngbvd-permission-hidden)').length;group.classList.toggle('ngbvd-permission-hidden',q && visible===0);});});document.querySelectorAll('.ngbvd-permission-module-list a').forEach(function(a){a.addEventListener('click',function(){document.querySelectorAll('.ngbvd-permission-module-list a').forEach(function(x){x.classList.remove('active');});this.classList.add('active');});});});
</script>
@endsection