@extends('layouts.app')

@section('title', 'Crear Permiso')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('permisos.index') }}">Permisos</a></li>
            <li class="breadcrumb-item active">Crear Permiso</li>
        </ol>
    </nav>

    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-plus me-2"></i>Crear Nuevo Permiso
        </h1>
        <a href="{{ route('permisos.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-key me-2"></i>Información del Permiso
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('permisos.store') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nombre" class="form-label">Nombre del Permiso <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                       id="nombre" name="nombre" value="{{ old('nombre') }}" required>
                                @error('nombre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                                       id="slug" name="slug" value="{{ old('slug') }}" required>
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Se genera automáticamente basado en el nombre</div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="modulo" class="form-label">Módulo <span class="text-danger">*</span></label>
                                <select class="form-select @error('modulo') is-invalid @enderror" 
                                        id="modulo" name="modulo" required>
                                    <option value="">Seleccionar módulo</option>
                                    <option value="usuarios" {{ old('modulo') == 'usuarios' ? 'selected' : '' }}>Usuarios</option>
                                    <option value="roles" {{ old('modulo') == 'roles' ? 'selected' : '' }}>Roles</option>
                                    <option value="permisos" {{ old('modulo') == 'permisos' ? 'selected' : '' }}>Permisos</option>
                                    <option value="empresa" {{ old('modulo') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                    <option value="configuracion" {{ old('modulo') == 'configuracion' ? 'selected' : '' }}>Configuración</option>
                                    <option value="correo" {{ old('modulo') == 'correo' ? 'selected' : '' }}>Correo</option>
                                    <option value="seguridad" {{ old('modulo') == 'seguridad' ? 'selected' : '' }}>Seguridad</option>
                                    <option value="base-datos" {{ old('modulo') == 'base-datos' ? 'selected' : '' }}>Base de Datos</option>
                                    <option value="respaldos" {{ old('modulo') == 'respaldos' ? 'selected' : '' }}>Respaldos</option>
                                    <option value="plantillas" {{ old('modulo') == 'plantillas' ? 'selected' : '' }}>Plantillas</option>
                                    <option value="kardex" {{ old('modulo') == 'kardex' ? 'selected' : '' }}>Kardex</option>
                                    <option value="dashboard" {{ old('modulo') == 'dashboard' ? 'selected' : '' }}>Dashboard</option>
                                </select>
                                @error('modulo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="accion" class="form-label">Acción <span class="text-danger">*</span></label>
                                <select class="form-select @error('accion') is-invalid @enderror" 
                                        id="accion" name="accion" required>
                                    <option value="">Seleccionar acción</option>
                                    <option value="ver" {{ old('accion') == 'ver' ? 'selected' : '' }}>Ver</option>
                                    <option value="crear" {{ old('accion') == 'crear' ? 'selected' : '' }}>Crear</option>
                                    <option value="editar" {{ old('accion') == 'editar' ? 'selected' : '' }}>Editar</option>
                                    <option value="eliminar" {{ old('accion') == 'eliminar' ? 'selected' : '' }}>Eliminar</option>
                                    <option value="exportar" {{ old('accion') == 'exportar' ? 'selected' : '' }}>Exportar</option>
                                    <option value="importar" {{ old('accion') == 'importar' ? 'selected' : '' }}>Importar</option>
                                    <option value="configurar" {{ old('accion') == 'configurar' ? 'selected' : '' }}>Configurar</option>
                                    <option value="imprimir" {{ old('accion') == 'imprimir' ? 'selected' : '' }}>Imprimir</option>
                                    <option value="descargar" {{ old('accion') == 'descargar' ? 'selected' : '' }}>Descargar</option>
                                </select>
                                @error('accion')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripción</label>
                            <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                      id="descripcion" name="descripcion" rows="3">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="activo" 
                                       name="activo" value="1" {{ old('activo', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="activo">
                                    Permiso activo
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('permisos.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Crear Permiso
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de ayuda -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información
                    </h5>
                </div>
                <div class="card-body">
                    <h6>Módulos Disponibles:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-users me-2"></i>Usuarios</li>
                        <li><i class="fas fa-user-tag me-2"></i>Roles</li>
                        <li><i class="fas fa-key me-2"></i>Permisos</li>
                        <li><i class="fas fa-building me-2"></i>Empresa</li>
                        <li><i class="fas fa-cog me-2"></i>Configuración</li>
                        <li><i class="fas fa-envelope me-2"></i>Correo</li>
                        <li><i class="fas fa-shield-alt me-2"></i>Seguridad</li>
                        <li><i class="fas fa-database me-2"></i>Base de Datos</li>
                        <li><i class="fas fa-save me-2"></i>Respaldos</li>
                        <li><i class="fas fa-file-pdf me-2"></i>Plantillas</li>
                        <li><i class="fas fa-history me-2"></i>Kardex</li>
                        <li><i class="fas fa-tachometer-alt me-2"></i>Dashboard</li>
                    </ul>
                    
                    <hr>
                    
                    <h6>Acciones Disponibles:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-eye me-2"></i>Ver - Visualizar información</li>
                        <li><i class="fas fa-plus me-2"></i>Crear - Crear nuevos registros</li>
                        <li><i class="fas fa-edit me-2"></i>Editar - Modificar información</li>
                        <li><i class="fas fa-trash me-2"></i>Eliminar - Borrar registros</li>
                        <li><i class="fas fa-download me-2"></i>Exportar - Exportar datos</li>
                        <li><i class="fas fa-upload me-2"></i>Importar - Importar datos</li>
                        <li><i class="fas fa-cog me-2"></i>Configurar - Configurar opciones</li>
                        <li><i class="fas fa-print me-2"></i>Imprimir - Generar reportes</li>
                        <li><i class="fas fa-file-download me-2"></i>Descargar - Descargar archivos</li>
                    </ul>
                    
                    <hr>
                    
                    <h6>Consejos:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Usa nombres descriptivos</li>
                        <li><i class="fas fa-check text-success me-2"></i>Selecciona el módulo correcto</li>
                        <li><i class="fas fa-check text-success me-2"></i>Define la acción específica</li>
                        <li><i class="fas fa-check text-success me-2"></i>Agrega una descripción clara</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Generar slug automáticamente
document.getElementById('nombre').addEventListener('input', function() {
    const nombre = this.value;
    const slug = nombre
        .toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim('-');
    
    document.getElementById('slug').value = slug;
});

// Generar nombre automáticamente basado en módulo y acción
document.getElementById('modulo').addEventListener('change', generatePermissionName);
document.getElementById('accion').addEventListener('change', generatePermissionName);

function generatePermissionName() {
    const modulo = document.getElementById('modulo').value;
    const accion = document.getElementById('accion').value;
    
    if (modulo && accion) {
        const nombre = `${accion} ${modulo}`;
        document.getElementById('nombre').value = nombre;
        
        // También generar el slug
        const slug = nombre
            .toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        
        document.getElementById('slug').value = slug;
        
        // Generar descripción automática
        const descripcion = `Permite ${accion.toLowerCase()} en el módulo de ${modulo}`;
        document.getElementById('descripcion').value = descripcion;
    }
}
</script>
@endpush
@endsection