@extends('layouts.app')

@section('title', 'Detalle Rol')
@section('page-title', $rol->rol_nombre)

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.roles.index') }}">Roles y Permisos</a></li>
<li class="breadcrumb-item active">{{ $rol->rol_nombre }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .rol-detail-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    .detail-header {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .detail-header-left {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .rol-icon-large {
        width: 64px;
        height: 64px;
        background: #1a3a5c;
        color: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .rol-info h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a3a5c;
        margin: 0 0 0.375rem 0;
    }

    .rol-codigo-large {
        font-family: 'SF Mono', 'Monaco', monospace;
        font-size: 0.85rem;
        color: #64748b;
        background: #f1f5f9;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    .rol-badges-large {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .badge-large {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    .badge-large.sistema {
        background: rgba(245, 158, 11, 0.15);
        color: #b45309;
    }

    .badge-large.activo {
        background: rgba(5, 150, 105, 0.1);
        color: #059669;
    }

    .badge-large.inactivo {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
    }

    .badge-large.web {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .badge-large.app {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .header-actions {
        display: flex;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 1.5rem;
    }

    @media (max-width: 992px) {
        .detail-grid {
            grid-template-columns: 1fr;
        }
    }

    .detail-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }

    .detail-card-header {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .detail-card-header .icon-box {
        width: 32px;
        height: 32px;
        background: #1a3a5c;
        color: #fff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }

    .detail-card-header h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .detail-card-body {
        padding: 1.25rem;
    }

    .permisos-modulo {
        margin-bottom: 1.5rem;
    }

    .permisos-modulo:last-child {
        margin-bottom: 0;
    }

    .modulo-title-show {
        font-size: 0.8rem;
        font-weight: 700;
        color: #1a3a5c;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #f1f5f9;
    }

    .modulo-title-show i {
        color: #64748b;
    }

    .modulo-title-show .count {
        font-size: 0.65rem;
        background: #e2e8f0;
        color: #475569;
        padding: 0.125rem 0.5rem;
        border-radius: 10px;
        font-weight: 600;
    }

    .permisos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.5rem;
    }

    .permiso-tag {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 0.8rem;
        color: #475569;
    }

    .permiso-tag i {
        color: #059669;
        font-size: 0.7rem;
    }

    .stat-card {
        padding: 1.25rem;
        border-bottom: 1px solid #f1f5f9;
    }

    .stat-card:last-child {
        border-bottom: none;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #1a3a5c;
        line-height: 1;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.8rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .usuarios-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .usuario-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .usuario-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .usuario-item:first-child {
        padding-top: 0;
    }

    .usuario-avatar {
        width: 36px;
        height: 36px;
        background: #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: #475569;
        font-weight: 600;
        flex-shrink: 0;
    }

    .usuario-info {
        flex: 1;
        min-width: 0;
    }

    .usuario-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: #1a3a5c;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .usuario-email {
        font-size: 0.75rem;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .descripcion-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1rem;
        font-size: 0.9rem;
        color: #475569;
        line-height: 1.6;
    }

    .descripcion-box.empty {
        color: #94a3b8;
        font-style: italic;
    }

    .info-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.85rem;
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-row .label {
        color: #64748b;
    }

    .info-row .value {
        color: #1a3a5c;
        font-weight: 500;
    }

    .empty-permisos {
        text-align: center;
        padding: 2rem;
        color: #94a3b8;
    }

    .empty-permisos i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
        color: #e2e8f0;
    }

    .empty-usuarios {
        text-align: center;
        padding: 1.5rem;
        color: #94a3b8;
        font-size: 0.85rem;
    }
</style>
@endpush

@section('content')
<div class="rol-detail-container">
    {{-- Header --}}
    <div class="detail-header">
        <div class="detail-header-left">
            <div class="rol-icon-large">
                <i class="fas fa-user-shield"></i>
            </div>
            <div class="rol-info">
                <h2>{{ $rol->rol_nombre }}</h2>
                <span class="rol-codigo-large">{{ $rol->rol_codigo }}</span>
                <div class="rol-badges-large">
                    @if($rol->es_sistema)
                    <span class="badge-large sistema">
                        <i class="fas fa-lock"></i> Rol de Sistema
                    </span>
                    @endif
                    @if($rol->estado)
                    <span class="badge-large activo">
                        <i class="fas fa-check-circle"></i> Activo
                    </span>
                    @else
                    <span class="badge-large inactivo">
                        <i class="fas fa-times-circle"></i> Inactivo
                    </span>
                    @endif
                    @if($rol->acceso_web)
                    <span class="badge-large web">
                        <i class="fas fa-desktop"></i> Web
                    </span>
                    @endif
                    @if($rol->acceso_app)
                    <span class="badge-large app">
                        <i class="fas fa-mobile-alt"></i> App
                    </span>
                    @endif
                </div>
            </div>
        </div>
        <div class="header-actions">
            <a href="{{ route('web.roles.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Volver
            </a>
            @if(!$rol->es_sistema)
            <a href="{{ route('web.roles.edit', $rol->rol_id) }}" class="btn btn-primary">
                <i class="fas fa-edit me-1"></i> Editar
            </a>
            <form action="{{ route('web.roles.toggle-estado', $rol->rol_id) }}" method="POST" class="d-inline">
                @csrf
                @if($rol->estado)
                <button type="submit" class="btn btn-outline-danger"
                        onclick="return confirm('¿Desactivar este rol?')">
                    <i class="fas fa-power-off me-1"></i> Desactivar
                </button>
                @else
                <button type="submit" class="btn btn-outline-success">
                    <i class="fas fa-power-off me-1"></i> Activar
                </button>
                @endif
            </form>
            @endif
        </div>
    </div>

    {{-- Grid de contenido --}}
    <div class="detail-grid">
        {{-- Columna principal - Permisos --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <div class="icon-box"><i class="fas fa-key"></i></div>
                <h5>Permisos Asignados ({{ $rol->permisos()->count() }})</h5>
            </div>
            <div class="detail-card-body">
                @if($permisosAsignados->count() > 0)
                    @foreach($permisosAsignados as $modulo => $permisos)
                    <div class="permisos-modulo">
                        <div class="modulo-title-show">
                            <i class="fas fa-folder"></i>
                            {{ $modulo }}
                            <span class="count">{{ count($permisos) }}</span>
                        </div>
                        <div class="permisos-grid">
                            @foreach($permisos as $permiso)
                            <div class="permiso-tag">
                                <i class="fas fa-check-circle"></i>
                                {{ $permiso->permiso_nombre }}
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="empty-permisos">
                        <i class="fas fa-key"></i>
                        <p>Este rol no tiene permisos asignados</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Columna lateral --}}
        <div>
            {{-- Estadísticas --}}
            <div class="detail-card mb-3">
                <div class="stat-card">
                    <div class="stat-value">{{ $rol->perfiles_count }}</div>
                    <div class="stat-label">Perfiles con este rol</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ $rol->permisos()->count() }}</div>
                    <div class="stat-label">Permisos asignados</div>
                </div>
            </div>

            {{-- Información adicional --}}
            <div class="detail-card mb-3">
                <div class="detail-card-header">
                    <div class="icon-box"><i class="fas fa-info-circle"></i></div>
                    <h5>Información</h5>
                </div>
                <div class="detail-card-body">
                    @if($rol->rol_descripcion)
                    <div class="descripcion-box mb-3">
                        {{ $rol->rol_descripcion }}
                    </div>
                    @else
                    <div class="descripcion-box empty mb-3">
                        Sin descripción
                    </div>
                    @endif

                    <div class="info-row">
                        <span class="label">Creado</span>
                        <span class="value">{{ $rol->fecha_crea ? \Carbon\Carbon::parse($rol->fecha_crea)->format('d/m/Y') : '-' }}</span>
                    </div>
                    @if($rol->fecha_modifica)
                    <div class="info-row">
                        <span class="label">Modificado</span>
                        <span class="value">{{ \Carbon\Carbon::parse($rol->fecha_modifica)->format('d/m/Y') }}</span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Usuarios con este rol --}}
            <div class="detail-card">
                <div class="detail-card-header">
                    <div class="icon-box"><i class="fas fa-users"></i></div>
                    <h5>Usuarios</h5>
                </div>
                <div class="detail-card-body">
                    @if($usuariosConRol->count() > 0)
                    <ul class="usuarios-list">
                        @foreach($usuariosConRol as $usuario)
                        <li class="usuario-item">
                            <div class="usuario-avatar">
                                {{ strtoupper(substr($usuario->usu_nombre, 0, 1) . substr($usuario->usu_apellido, 0, 1)) }}
                            </div>
                            <div class="usuario-info">
                                <div class="usuario-name">{{ $usuario->usu_nombre }} {{ $usuario->usu_apellido }}</div>
                                <div class="usuario-email">{{ $usuario->usu_email }}</div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                    @if($usuariosConRol->count() >= 20)
                    <div class="text-center mt-3">
                        <small class="text-muted">Mostrando los primeros 20 usuarios</small>
                    </div>
                    @endif
                    @else
                    <div class="empty-usuarios">
                        <i class="fas fa-users"></i>
                        <p class="mb-0">No hay usuarios con este rol</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection