@extends('layouts.app')

@section('title', 'Roles y Permisos')
@section('page-title', 'Gestión de Roles')

@section('breadcrumb')
<li class="breadcrumb-item active">Roles y Permisos</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .roles-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .roles-stats {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .stat-mini {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 140px;
    }

    .stat-mini-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .stat-mini-icon.total { background: rgba(26, 58, 92, 0.1); color: #1a3a5c; }
    .stat-mini-icon.activos { background: rgba(5, 150, 105, 0.1); color: #059669; }
    .stat-mini-icon.web { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
    .stat-mini-icon.app { background: rgba(16, 185, 129, 0.1); color: #059669; }

    .stat-mini-info h4 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a3a5c;
        line-height: 1;
    }

    .stat-mini-info span {
        font-size: 0.7rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

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

    .rol-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        transition: box-shadow 0.2s, transform 0.2s;
    }

    .rol-card:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    .rol-card.sistema {
        border-left: 3px solid #f59e0b;
    }

    .rol-card.inactivo {
        opacity: 0.7;
        background: #fafafa;
    }

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

    .rol-card-title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .rol-name {
        font-size: 1rem;
        font-weight: 600;
        color: #1a3a5c;
        margin: 0;
    }

    .rol-badges {
        display: flex;
        gap: 0.375rem;
        flex-shrink: 0;
    }

    .rol-badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

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

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

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

    .rol-badge.inactivo {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

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

    .rol-descripcion {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 0.5rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rol-card-body {
        padding: 1rem 1.25rem;
        background: #fafbfc;
    }

    .rol-stats {
        display: flex;
        gap: 1.5rem;
    }

    .rol-stat {
        display: flex;
        flex-direction: column;
    }

    .rol-stat-value {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a3a5c;
    }

    .rol-stat-label {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .rol-card-footer {
        padding: 0.875rem 1.25rem;
        border-top: 1px solid #f1f5f9;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .btn-rol-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        text-decoration: none;
        transition: all 0.15s;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
    }

    .btn-rol-action:hover {
        background: #f8fafc;
        color: #1a3a5c;
        border-color: #cbd5e1;
    }

    .btn-rol-action.ver:hover {
        background: rgba(26, 58, 92, 0.05);
        color: #1a3a5c;
        border-color: #1a3a5c;
    }

    .btn-rol-action.editar:hover {
        background: rgba(59, 130, 246, 0.05);
        color: #2563eb;
        border-color: #3b82f6;
    }

    .btn-rol-action.duplicar:hover {
        background: rgba(139, 92, 246, 0.05);
        color: #7c3aed;
        border-color: #8b5cf6;
    }

    .empty-roles {
        text-align: center;
        padding: 4rem 2rem;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
    }

    .empty-roles i {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-roles h4 {
        color: #64748b;
        margin-bottom: 0.5rem;
    }

    .empty-roles p {
        color: #94a3b8;
        font-size: 0.9rem;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    {{-- Header con estadísticas --}}
    <div class="roles-header">
        <div class="roles-stats">
            <div class="stat-mini">
                <div class="stat-mini-icon total">
                    <i class="fas fa-user-shield"></i>
                </div>
                <div class="stat-mini-info">
                    <h4>{{ $estadisticas['total'] }}</h4>
                    <span>Total Roles</span>
                </div>
            </div>

            <div class="stat-mini">
                <div class="stat-mini-icon activos">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-mini-info">
                    <h4>{{ $estadisticas['activos'] }}</h4>
                    <span>Activos</span>
                </div>
            </div>

            <div class="stat-mini">
                <div class="stat-mini-icon web">
                    <i class="fas fa-desktop"></i>
                </div>
                <div class="stat-mini-info">
                    <h4>{{ $estadisticas['con_web'] }}</h4>
                    <span>Acceso Web</span>
                </div>
            </div>

            <div class="stat-mini">
                <div class="stat-mini-icon app">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div class="stat-mini-info">
                    <h4>{{ $estadisticas['con_app'] }}</h4>
                    <span>Acceso App</span>
                </div>
            </div>
        </div>

        <a href="{{ route('web.roles.create') }}" class="btn btn-success">
            <i class="fas fa-plus me-1"></i> Nuevo Rol
        </a>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card mb-3">
        <form action="{{ route('web.roles.index') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Buscar</label>
                <input type="text" name="buscar" class="form-control form-control-sm"
                       placeholder="Nombre, código..." value="{{ request('buscar') }}">
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="1" {{ request('estado') === '1' ? 'selected' : '' }}>Activo</option>
                    <option value="0" {{ request('estado') === '0' ? 'selected' : '' }}>Inactivo</option>
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Acceso</label>
                <select name="acceso" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="web" {{ request('acceso') === 'web' ? 'selected' : '' }}>Solo Web</option>
                    <option value="app" {{ request('acceso') === 'app' ? 'selected' : '' }}>Solo App</option>
                </select>
            </div>

            <div class="filtro-acciones">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-search me-1"></i> Filtrar
                </button>
                <a href="{{ route('web.roles.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
            </div>
        </form>
    </div>

    {{-- Grid de roles --}}
    @if($roles->count() > 0)
    <div class="roles-grid">
        @foreach($roles as $rol)
        <div class="rol-card {{ $rol->es_sistema ? 'sistema' : '' }} {{ $rol->estado == 0 ? 'inactivo' : '' }}">
            <div class="rol-card-header">
                <div class="rol-card-title">
                    <div>
                        <h5 class="rol-name">{{ $rol->rol_nombre }}</h5>
                        <span class="rol-codigo">{{ $rol->rol_codigo }}</span>
                    </div>
                    <div class="rol-badges">
                        @if($rol->es_sistema)
                        <span class="rol-badge sistema">Sistema</span>
                        @endif
                        @if($rol->estado == 0)
                        <span class="rol-badge inactivo">Inactivo</span>
                        @endif
                        @if($rol->acceso_web)
                        <span class="rol-badge web">Web</span>
                        @endif
                        @if($rol->acceso_app)
                        <span class="rol-badge app">App</span>
                        @endif
                    </div>
                </div>
                @if($rol->rol_descripcion)
                <p class="rol-descripcion">{{ $rol->rol_descripcion }}</p>
                @endif
            </div>

            <div class="rol-card-body">
                <div class="rol-stats">
                    <div class="rol-stat">
                        <span class="rol-stat-value">{{ $rol->perfiles_count }}</span>
                        <span class="rol-stat-label">Perfiles</span>
                    </div>
                    <div class="rol-stat">
                        <span class="rol-stat-value">{{ $rol->permisos()->count() }}</span>
                        <span class="rol-stat-label">Permisos</span>
                    </div>
                </div>
            </div>

            <div class="rol-card-footer">
                <a href="{{ route('web.roles.show', $rol->rol_id) }}" class="btn-rol-action ver">
                    <i class="fas fa-eye"></i> Ver
                </a>
                @if(!$rol->es_sistema)
                <a href="{{ route('web.roles.edit', $rol->rol_id) }}" class="btn-rol-action editar">
                    <i class="fas fa-edit"></i> Editar
                </a>
                @endif
                <form action="{{ route('web.roles.duplicar', $rol->rol_id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn-rol-action duplicar">
                        <i class="fas fa-copy"></i> Duplicar
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    @if($roles->hasPages())
    <div class="tabla-footer mt-4">
        {{ $roles->links() }}
    </div>
    @endif

    @else
    <div class="empty-roles">
        <i class="fas fa-user-shield"></i>
        <h4>No se encontraron roles</h4>
        <p>Crea un nuevo rol para comenzar a asignar permisos.</p>
    </div>
    @endif
</div>
@endsection