@extends('layouts.app')

@section('title', 'Nuevo Rol')
@section('page-title', 'Crear Nuevo Rol')

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

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

    .form-card {
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

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

    .form-card-header .icon-box {
        width: 36px;
        height: 36px;
        background: #1a3a5c;
        color: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

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

    .form-card-header span {
        font-size: 0.8rem;
        color: #64748b;
    }

    .form-card-body {
        padding: 1.5rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    @media (max-width: 768px) {
        .form-row {
            grid-template-columns: 1fr;
        }
    }

    .form-row .full-width {
        grid-column: 1 / -1;
    }

    .form-label-custom {
        font-size: 0.8rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 0.375rem;
        display: block;
    }

    .form-label-custom .required {
        color: #ef4444;
        margin-left: 0.25rem;
    }

    .form-control-custom {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
        transition: border-color 0.2s, box-shadow 0.2s;
        width: 100%;
    }

    .form-control-custom:focus {
        border-color: #1a3a5c;
        box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
        outline: none;
    }

    .acceso-toggles {
        display: flex;
        gap: 1.5rem;
        margin-top: 0.5rem;
    }

    .acceso-toggle {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        flex: 1;
    }

    .acceso-toggle:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    .acceso-toggle.checked {
        border-color: #1a3a5c;
        background: rgba(26, 58, 92, 0.04);
    }

    .acceso-toggle input {
        display: none;
    }

    .acceso-toggle-check {
        width: 22px;
        height: 22px;
        border: 2px solid #e2e8f0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .acceso-toggle.checked .acceso-toggle-check {
        background: #1a3a5c;
        border-color: #1a3a5c;
        color: #fff;
    }

    .acceso-toggle-info {
        flex: 1;
    }

    .acceso-toggle-info h6 {
        margin: 0;
        font-size: 0.9rem;
        color: #1a3a5c;
        font-weight: 600;
    }

    .acceso-toggle-info span {
        font-size: 0.75rem;
        color: #64748b;
    }

    .acceso-toggle-icon {
        font-size: 1.25rem;
        color: #94a3b8;
    }

    .acceso-toggle.checked .acceso-toggle-icon {
        color: #1a3a5c;
    }

    .permisos-container {
        max-height: 500px;
        overflow-y: auto;
    }

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

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

    .modulo-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: #f1f5f9;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        cursor: pointer;
    }

    .modulo-header:hover {
        background: #e2e8f0;
    }

    .modulo-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #1a3a5c;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

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

    .modulo-count {
        font-size: 0.7rem;
        background: #1a3a5c;
        color: #fff;
        padding: 0.125rem 0.5rem;
        border-radius: 10px;
    }

    .modulo-select-all {
        font-size: 0.75rem;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

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

    .permiso-item {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s;
    }

    .permiso-item:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .permiso-item.checked {
        background: rgba(26, 58, 92, 0.04);
        border-color: #1a3a5c;
    }

    .permiso-item input {
        display: none;
    }

    .permiso-check {
        width: 18px;
        height: 18px;
        border: 2px solid #e2e8f0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 0.125rem;
        transition: all 0.15s;
    }

    .permiso-item.checked .permiso-check {
        background: #1a3a5c;
        border-color: #1a3a5c;
        color: #fff;
        font-size: 0.65rem;
    }

    .permiso-info h6 {
        margin: 0;
        font-size: 0.8rem;
        color: #1a3a5c;
        font-weight: 500;
    }

    .permiso-info span {
        font-size: 0.7rem;
        color: #94a3b8;
        display: block;
        margin-top: 0.125rem;
    }

    .form-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        padding: 1.25rem 1.5rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }

    .permisos-summary {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .permisos-summary i {
        color: #d97706;
    }

    .permisos-summary span {
        font-size: 0.85rem;
        color: #92400e;
    }

    .permisos-summary strong {
        font-weight: 700;
    }
</style>
@endpush

@section('content')
<div class="rol-form-container">
    <form action="{{ route('web.roles.store') }}" method="POST" id="formRol">
        @csrf

        {{-- Información Básica --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-user-shield"></i></div>
                <div>
                    <h5>Información del Rol</h5>
                    <span>Datos básicos y configuración de acceso</span>
                </div>
            </div>
            <div class="form-card-body">
                <div class="form-row">
                    <div>
                        <label class="form-label-custom">
                            Nombre del Rol <span class="required">*</span>
                        </label>
                        <input type="text" name="rol_nombre"
                               class="form-control form-control-custom @error('rol_nombre') is-invalid @enderror"
                               value="{{ old('rol_nombre') }}" required
                               placeholder="Ej: Supervisor de Mantenimiento">
                        @error('rol_nombre')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="form-label-custom">
                            Código <span class="required">*</span>
                        </label>
                        <input type="text" name="rol_codigo"
                               class="form-control form-control-custom @error('rol_codigo') is-invalid @enderror"
                               value="{{ old('rol_codigo') }}" required
                               placeholder="Ej: SUPERVISOR_MANT" style="text-transform: uppercase;">
                        @error('rol_codigo')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Solo letras, números y guiones bajos</small>
                    </div>

                    <div class="full-width">
                        <label class="form-label-custom">Descripción</label>
                        <textarea name="rol_descripcion" rows="2"
                                  class="form-control form-control-custom @error('rol_descripcion') is-invalid @enderror"
                                  placeholder="Describe las responsabilidades de este rol...">{{ old('rol_descripcion') }}</textarea>
                        @error('rol_descripcion')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="full-width">
                        <label class="form-label-custom">Tipo de Acceso</label>
                        <div class="acceso-toggles">
                            <label class="acceso-toggle {{ old('acceso_web', true) ? 'checked' : '' }}" id="toggle-web">
                                <input type="checkbox" name="acceso_web" value="1"
                                       {{ old('acceso_web', true) ? 'checked' : '' }}
                                       onchange="toggleAcceso('web')">
                                <span class="acceso-toggle-check">
                                    <i class="fas fa-check"></i>
                                </span>
                                <div class="acceso-toggle-info">
                                    <h6>Acceso Web</h6>
                                    <span>Panel de administración</span>
                                </div>
                                <i class="fas fa-desktop acceso-toggle-icon"></i>
                            </label>

                            <label class="acceso-toggle {{ old('acceso_app') ? 'checked' : '' }}" id="toggle-app">
                                <input type="checkbox" name="acceso_app" value="1"
                                       {{ old('acceso_app') ? 'checked' : '' }}
                                       onchange="toggleAcceso('app')">
                                <span class="acceso-toggle-check">
                                    <i class="fas fa-check"></i>
                                </span>
                                <div class="acceso-toggle-info">
                                    <h6>Acceso App</h6>
                                    <span>Aplicación móvil</span>
                                </div>
                                <i class="fas fa-mobile-alt acceso-toggle-icon"></i>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Permisos --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-key"></i></div>
                <div>
                    <h5>Permisos del Rol</h5>
                    <span>Selecciona los permisos que tendrá este rol</span>
                </div>
            </div>
            <div class="form-card-body">
                <div class="permisos-summary">
                    <i class="fas fa-info-circle"></i>
                    <span>Permisos seleccionados: <strong id="contadorPermisos">0</strong></span>
                </div>

                <div class="permisos-container">
                    @foreach($permisosAgrupados as $modulo => $permisos)
                    <div class="modulo-group">
                        <div class="modulo-header" onclick="toggleModulo('{{ Str::slug($modulo) }}')">
                            <div class="modulo-title">
                                <i class="fas fa-folder"></i>
                                {{ $modulo }}
                                <span class="modulo-count">{{ count($permisos) }}</span>
                            </div>
                            <label class="modulo-select-all" onclick="event.stopPropagation()">
                                <input type="checkbox" onchange="selectAllModulo('{{ Str::slug($modulo) }}', this)">
                                Seleccionar todos
                            </label>
                        </div>
                        <div class="permisos-list" id="modulo-{{ Str::slug($modulo) }}">
                            @foreach($permisos as $permiso)
                            <label class="permiso-item" id="permiso-label-{{ $permiso->permiso_id }}">
                                <input type="checkbox" name="permisos[]" value="{{ $permiso->permiso_id }}"
                                       class="permiso-checkbox modulo-{{ Str::slug($modulo) }}"
                                       onchange="togglePermiso({{ $permiso->permiso_id }})"
                                       {{ in_array($permiso->permiso_id, old('permisos', [])) ? 'checked' : '' }}>
                                <span class="permiso-check"><i class="fas fa-check"></i></span>
                                <div class="permiso-info">
                                    <h6>{{ $permiso->permiso_nombre }}</h6>
                                    @if($permiso->permiso_descripcion)
                                    <span>{{ $permiso->permiso_descripcion }}</span>
                                    @endif
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('web.roles.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save me-1"></i> Crear Rol
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    actualizarContador();
    actualizarEstadosIniciales();
});

function toggleAcceso(tipo) {
    const toggle = document.getElementById('toggle-' + tipo);
    const checkbox = toggle.querySelector('input');
    toggle.classList.toggle('checked', checkbox.checked);
}

function togglePermiso(permisoId) {
    const label = document.getElementById('permiso-label-' + permisoId);
    const checkbox = label.querySelector('input');
    label.classList.toggle('checked', checkbox.checked);
    actualizarContador();
}

function selectAllModulo(moduloSlug, checkbox) {
    const permisos = document.querySelectorAll('.modulo-' + moduloSlug);
    permisos.forEach(function(permiso) {
        permiso.checked = checkbox.checked;
        const label = permiso.closest('.permiso-item');
        label.classList.toggle('checked', checkbox.checked);
    });
    actualizarContador();
}

function toggleModulo(moduloSlug) {
    const lista = document.getElementById('modulo-' + moduloSlug);
    lista.style.display = lista.style.display === 'none' ? 'grid' : 'none';
}

function actualizarContador() {
    const total = document.querySelectorAll('.permiso-checkbox:checked').length;
    document.getElementById('contadorPermisos').textContent = total;
}

function actualizarEstadosIniciales() {
    document.querySelectorAll('.permiso-checkbox').forEach(function(checkbox) {
        const label = checkbox.closest('.permiso-item');
        label.classList.toggle('checked', checkbox.checked);
    });
}
</script>
@endpush