@extends('layouts.admin')

@section('admin-content')
<!-- Header & Top Action -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;">
    <div>
        <h2 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem;">Control de Roles y Permisos</h2>
        <p style="color: var(--text-secondary); font-size: 0.9rem;">Configura los perfiles de acceso y permisos para el personal, clientes y administradores.</p>
    </div>
    <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm">
        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        Nuevo Rol
    </a>
</div>

<!-- Metrics Summary Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
    <div class="metric-card" style="padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card);">
        <span class="metric-title" style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Total de Roles</span>
        <div class="metric-value" style="font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin-top: 0.25rem;">{{ $totalRoles }}</div>
    </div>
    <div class="metric-card" style="padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card);">
        <span class="metric-title" style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Roles del Sistema</span>
        <div class="metric-value" style="font-size: 1.75rem; font-weight: 800; color: var(--secondary-color); margin-top: 0.25rem;">{{ $systemRoles }}</div>
    </div>
    <div class="metric-card" style="padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card);">
        <span class="metric-title" style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Roles Personalizados</span>
        <div class="metric-value" style="font-size: 1.75rem; font-weight: 800; color: var(--color-info); margin-top: 0.25rem;">{{ $customRoles }}</div>
    </div>
    <div class="metric-card" style="padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card);">
        <span class="metric-title" style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Usuarios Asignados</span>
        <div class="metric-value" style="font-size: 1.75rem; font-weight: 800; color: var(--primary-color); margin-top: 0.25rem;">{{ $totalAssignments }}</div>
    </div>
</div>

<!-- Roles Table -->
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Rol</th>
                <th>Identificador</th>
                <th>Descripción</th>
                <th>Permisos</th>
                <th>Usuarios</th>
                <th style="text-align: right;">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($roles as $role)
                <tr>
                    <td>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <strong style="color: var(--text-primary); font-size: 0.95rem;">{{ $role->display_name }}</strong>
                            @if($role->is_system)
                                <span class="badge" style="background: rgba(168, 85, 247, 0.12); color: var(--secondary-color); font-size: 0.7rem; border: 1px solid rgba(168, 85, 247, 0.25);">Sistema</span>
                            @else
                                <span class="badge badge-info" style="font-size: 0.7rem;">Personalizado</span>
                            @endif
                        </div>
                    </td>
                    <td>
                        <code style="font-size: 0.85rem; padding: 0.2rem 0.4rem; background: rgba(0,0,0,0.04); border-radius: var(--radius-sm);">{{ $role->name }}</code>
                    </td>
                    <td>
                        <span style="font-size: 0.85rem; color: var(--text-secondary); max-width: 260px; display: inline-block;">
                            {{ $role->description ?? 'Sin descripción' }}
                        </span>
                    </td>
                    <td>
                        @php
                            $permsCount = is_array($role->permissions) ? count($role->permissions) : 0;
                        @endphp
                        <span class="badge {{ $permsCount > 0 ? 'badge-success' : 'badge-warning' }}">
                            {{ $permsCount }} permiso(s)
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('admin.users.index', ['role' => $role->name]) }}" style="font-weight: 700; color: var(--primary-color); text-decoration: underline;" title="Ver usuarios con este rol">
                            {{ $role->users_count }} usuario(s)
                        </a>
                    </td>
                    <td style="text-align: right;">
                        <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                            <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-outline btn-sm" title="Editar Rol">
                                <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                Editar
                            </a>

                            @if(!$role->is_system && $role->users_count === 0)
                                <form action="{{ route('admin.roles.destroy', $role) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar el rol \'{{ $role->display_name }}\'?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Eliminar Rol">
                                        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        Eliminar
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection