@extends('layouts.app')

@section('title', 'Roles & Permissions - NGBVD')

@section('content')
@php
    $roleCount = isset($roles) ? count($roles) : 0;
    $totalPermissions = 0;
    if (isset($permissionRegistry) && method_exists($permissionRegistry, 'totalPermissions')) {
        $totalPermissions = $permissionRegistry->totalPermissions();
    } elseif (isset($permissionRegistry) && method_exists($permissionRegistry, 'allPermissionKeys')) {
        $totalPermissions = count($permissionRegistry->allPermissionKeys());
    } elseif (function_exists('config')) {
        $configured = config('ngbvd_permissions.permissions', []);
        $totalPermissions = is_array($configured) ? count($configured) : 0;
    }
@endphp

<div class="ngbvd-page-header mb-3">
    <div>
        <h2 class="ngbvd-page-title">User Roles & Permissions</h2>
        <p class="ngbvd-page-subtitle">Manage role-based access by module, action and data responsibility.</p>
    </div>
    <a href="{{ url('/roles/index') }}" class="btn ngbvd-btn-primary"><i class="ti-plus"></i> Add Role</a>
</div>

<div class="ngbvd-roles-summary-row">
    <div class="ngbvd-role-summary-card">
        <span class="ngbvd-role-summary-icon"><i class="ti-id-badge"></i></span>
        <div><strong>{{ $roleCount }}</strong><small>Configured roles</small></div>
    </div>
    <div class="ngbvd-role-summary-card">
        <span class="ngbvd-role-summary-icon"><i class="ti-key"></i></span>
        <div><strong>{{ $totalPermissions }}</strong><small>Available permissions</small></div>
    </div>
    <div class="ngbvd-role-summary-card">
        <span class="ngbvd-role-summary-icon"><i class="ti-lock"></i></span>
        <div><strong>Scope Based</strong><small>Navigation, routes and records</small></div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 mb-3">
        <div class="card ngbvd-form-card">
            <div class="card ngbvd-modern-grid-card ngbvd-roles-workspace" style="padding: 15px;">
                <div class="ngbvd-grid-toolbar ngbvd-roles-toolbar" style="padding: 0 15px 15px;">
                    <div class="ngbvd-card-heading">
                        <h3>Role Workspace</h3>
                        <p>Select a role tile to configure permissions, or edit the role details.</p>
                    </div>
                    <div class="ngbvd-role-search-wrap">
                        <i class="ti-search"></i>
                        <input type="text" id="ngbvdRoleSearch" placeholder="Search roles..." autocomplete="off">
                    </div>
                </div>

                <div class="card ngbvd-role-tile-grid" id="ngbvdRoleTileGrid">
                    @forelse($roles as $role)
                        @php
                            $roleRef = $role->uuid ?? $role->id;
                            $assigned = [];
                            $coverage = ['assigned' => 0, 'total' => $totalPermissions, 'percentage' => 0];
                            if (isset($permissionRegistry) && method_exists($permissionRegistry, 'forRole')) {
                                $assigned = $permissionRegistry->forRole($role->id) ?: [];
                            }
                            if (isset($permissionRegistry) && method_exists($permissionRegistry, 'roleCoverage')) {
                                $coverage = $permissionRegistry->roleCoverage($role->id) ?: $coverage;
                            } else {
                                $coverage['assigned'] = is_array($assigned) ? count($assigned) : 0;
                                $coverage['percentage'] = $coverage['total'] > 0 ? round(($coverage['assigned'] / $coverage['total']) * 100) : 0;
                            }
                            $percentage = (int)($coverage['percentage'] ?? 0);
                        @endphp
                        <article class="ngbvd-role-tile" data-role-name="{{ strtolower($role->name ?? '') }}">
                            <div class="ngbvd-role-tile-top">
                                <span class="ngbvd-role-avatar"><i class="ti-user"></i></span>
                                <span class="ngbvd-role-badge">{{ $percentage }}%</span>
                            </div>
                            <h4>{{ $role->name }}</h4>
                            <p>{{ $coverage['assigned'] ?? 0 }} of {{ $coverage['total'] ?? $totalPermissions }} permission(s) assigned.</p>

                            <div class="ngbvd-role-progress">
                                <div style="width: {{ max(0, min(100, $percentage)) }}%;"></div>
                            </div>

                            <div class="ngbvd-role-actions">
                                <a href="{{ url('/roles/permissions/'.$roleRef) }}" class="ngbvd-action-btn configure"><i class="ti-settings"></i> Configure</a>
                                <a href="{{ url('/roles/index?id='.$roleRef) }}" class="ngbvd-action-btn edit"><i class="ti-pencil"></i> Edit</a>
                            </div>
                        </article>
                    @empty
                        <div class="ngbvd-empty-state">
                            <i class="ti-shield"></i>
                            <h4>No roles configured</h4>
                            <p>Create the first role to begin assigning permissions.</p>
                            <a href="{{ url('/roles/index') }}" class="btn ngbvd-btn-primary">Create Role</a>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
<style>
.ngbvd-roles-summary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 18px}.ngbvd-role-summary-card{background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 32px rgba(15,23,42,.06)}.ngbvd-role-summary-icon{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,var(--ngbvd-primary,#b8860b),#f4d06f);display:grid;place-items:center;color:#fff;font-size:20px}.ngbvd-role-summary-card strong{display:block;font-size:22px;color:#111827}.ngbvd-role-summary-card small{color:#6b7280}.ngbvd-roles-toolbar{gap:14px;align-items:center}.ngbvd-role-search-wrap{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;padding:0 14px;min-width:280px}.ngbvd-role-search-wrap input{border:0;background:transparent;height:42px;outline:0;width:100%}.ngbvd-role-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.ngbvd-role-tile{background:linear-gradient(180deg,#fff,#fffaf0);border:1px solid rgba(184,134,11,.18);border-radius:22px;padding:20px;box-shadow:0 18px 40px rgba(15,23,42,.08);transition:.2s ease}.ngbvd-role-tile:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(15,23,42,.12)}.ngbvd-role-tile-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.ngbvd-role-avatar{width:48px;height:48px;border-radius:18px;background:#111827;color:#fff;display:grid;place-items:center;font-size:20px}.ngbvd-role-badge{background:#fef3c7;color:#92400e;border-radius:999px;font-weight:700;font-size:12px;padding:6px 10px}.ngbvd-role-tile h4{margin:0 0 6px;font-size:18px;color:#111827}.ngbvd-role-tile p{margin:0;color:#6b7280;font-size:13px;min-height:38px}.ngbvd-role-progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:16px 0}.ngbvd-role-progress div{height:100%;background:linear-gradient(90deg,var(--ngbvd-primary,#b8860b),#10b981);border-radius:inherit}.ngbvd-role-actions{display:flex;gap:10px;flex-wrap:wrap}.ngbvd-action-btn.configure{background:#111827;color:#fff}.ngbvd-action-btn.edit{background:#fff;border:1px solid #e5e7eb;color:#111827}.ngbvd-empty-state{grid-column:1/-1;text-align:center;padding:44px;background:#fff;border-radius:18px;border:1px dashed #d1d5db}.ngbvd-empty-state i{font-size:42px;color:var(--ngbvd-primary,#b8860b)}@media(max-width:900px){.ngbvd-roles-summary-row{grid-template-columns:1fr}.ngbvd-role-search-wrap{margin-left:0;width:100%;min-width:0}.ngbvd-roles-toolbar{flex-direction:column;align-items:stretch}}
</style>

<script>
document.addEventListener('DOMContentLoaded',function(){var input=document.getElementById('ngbvdRoleSearch');if(!input)return;input.addEventListener('input',function(){var q=this.value.toLowerCase().trim();document.querySelectorAll('.ngbvd-role-tile').forEach(function(tile){var name=tile.getAttribute('data-role-name')||'';tile.style.display=name.indexOf(q)>-1?'':'none';});});});
</script>
@endsection