@extends('layouts.app')

@section('title', 'Editar 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"><a href="{{ route('permisos.show', $permiso->id) }}">{{ $permiso->nombre }}</a></li>
            <li class="breadcrumb-item active">Editar</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-key me-2"></i>Editar Permiso: {{ $permiso->nombre }}
        </h1>
        <div class="btn-group" role="group">
            <a href="{{ route('permisos.show', $permiso->id) }}" class="btn btn-outline-info">
                <i class="fas fa-eye me-2"></i>Ver Detalles
            </a>
            <a href="{{ route('permisos.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Formulario principal -->
        <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.update', $permiso) }}">
                        @csrf
                        @method('PUT')
                        
                        <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', $permiso->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', $permiso->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', $permiso->modulo) == 'usuarios' ? 'selected' : '' }}>Usuarios</option>
                                    <option value="roles" {{ old('modulo', $permiso->modulo) == 'roles' ? 'selected' : '' }}>Roles</option>
                                    <option value="permisos" {{ old('modulo', $permiso->modulo) == 'permisos' ? 'selected' : '' }}>Permisos</option>
                                    <option value="empresa" {{ old('modulo', $permiso->modulo) == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                    <option value="configuracion" {{ old('modulo', $permiso->modulo) == 'configuracion' ? 'selected' : '' }}>Configuración</option>
                                    <option value="correo" {{ old('modulo', $permiso->modulo) == 'correo' ? 'selected' : '' }}>Correo</option>
                                    <option value="seguridad" {{ old('modulo', $permiso->modulo) == 'seguridad' ? 'selected' : '' }}>Seguridad</option>
                                    <option value="base-datos" {{ old('modulo', $permiso->modulo) == 'base-datos' ? 'selected' : '' }}>Base de Datos</option>
                                    <option value="respaldos" {{ old('modulo', $permiso->modulo) == 'respaldos' ? 'selected' : '' }}>Respaldos</option>
                                    <option value="plantillas" {{ old('modulo', $permiso->modulo) == 'plantillas' ? 'selected' : '' }}>Plantillas</option>
                                    <option value="kardex" {{ old('modulo', $permiso->modulo) == 'kardex' ? 'selected' : '' }}>Kardex</option>
                                    <option value="dashboard" {{ old('modulo', $permiso->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', $permiso->accion) == 'ver' ? 'selected' : '' }}>Ver</option>
                                    <option value="crear" {{ old('accion', $permiso->accion) == 'crear' ? 'selected' : '' }}>Crear</option>
                                    <option value="editar" {{ old('accion', $permiso->accion) == 'editar' ? 'selected' : '' }}>Editar</option>
                                    <option value="eliminar" {{ old('accion', $permiso->accion) == 'eliminar' ? 'selected' : '' }}>Eliminar</option>
                                    <option value="exportar" {{ old('accion', $permiso->accion) == 'exportar' ? 'selected' : '' }}>Exportar</option>
                                    <option value="importar" {{ old('accion', $permiso->accion) == 'importar' ? 'selected' : '' }}>Importar</option>
                                    <option value="configurar" {{ old('accion', $permiso->accion) == 'configurar' ? 'selected' : '' }}>Configurar</option>
                                    <option value="imprimir" {{ old('accion', $permiso->accion) == 'imprimir' ? 'selected' : '' }}>Imprimir</option>
                                    <option value="descargar" {{ old('accion', $permiso->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', $permiso->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', $permiso->activo) ? '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.show', $permiso->id) }}" 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>Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel lateral -->
        <div class="col-lg-4">
            <!-- Información actual -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información Actual
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nombre:</label>
                        <p class="form-control-plaintext">{{ $permiso->nombre }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Slug:</label>
                        <p class="form-control-plaintext"><code>{{ $permiso->slug }}</code></p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Módulo:</label>
                        <p class="form-control-plaintext">
                            <span class="badge bg-info">{{ ucfirst($permiso->modulo) }}</span>
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Acción:</label>
                        <p class="form-control-plaintext">
                            <span class="badge bg-secondary">{{ ucfirst($permiso->accion) }}</span>
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Estado:</label>
                        <p class="form-control-plaintext">
                            @if($permiso->activo)
                                <span class="badge bg-success">Activo</span>
                            @else
                                <span class="badge bg-danger">Inactivo</span>
                            @endif
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Roles Asignados:</label>
                        <p class="form-control-plaintext">{{ $permiso->roles->count() }} roles</p>
                    </div>
                </div>
            </div>

            <!-- Acciones rápidas -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bolt me-2"></i>Acciones Rápidas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-warning" 
                                onclick="toggleStatus({{ $permiso->id }})">
                            <i class="fas fa-toggle-{{ $permiso->activo ? 'on' : 'off' }} me-2"></i>
                            {{ $permiso->activo ? 'Desactivar' : 'Activar' }}
                        </button>
                        
                        <button type="button" class="btn btn-outline-secondary" 
                                onclick="duplicatePermission({{ $permiso->id }})">
                            <i class="fas fa-copy me-2"></i>Duplicar Permiso
                        </button>
                        
                        <hr>
                        
                        <button type="button" class="btn btn-outline-danger" 
                                onclick="eliminarPermiso({{ $permiso->id }})">
                            <i class="fas fa-trash me-2"></i>Eliminar Permiso
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmación -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Acción</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="confirmForm" method="POST" style="display: inline;">
                    @csrf
                    <button type="submit" class="btn btn-primary" id="confirmButton">Confirmar</button>
                </form>
            </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;
});

function toggleStatus(permissionId) {
    const form = document.getElementById('confirmForm');
    const message = document.getElementById('confirmMessage');
    const button = document.getElementById('confirmButton');
    
    form.action = `/permisos/${permissionId}/toggle-status`;
    message.textContent = '¿Deseas cambiar el estado de este permiso?';
    button.textContent = 'Cambiar Estado';
    button.className = 'btn btn-warning';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}

function duplicatePermission(permissionId) {
    const form = document.getElementById('confirmForm');
    const message = document.getElementById('confirmMessage');
    const button = document.getElementById('confirmButton');
    
    form.action = `/permisos/${permissionId}/duplicate`;
    message.textContent = '¿Deseas duplicar este permiso? Se creará una copia con el mismo nombre pero con sufijo "- Copia".';
    button.textContent = 'Duplicar';
    button.className = 'btn btn-secondary';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}

function eliminarPermiso(permissionId) {
    const form = document.getElementById('confirmForm');
    const message = document.getElementById('confirmMessage');
    const button = document.getElementById('confirmButton');
    
    form.action = `/permisos/${permissionId}`;
    form.innerHTML = '@csrf @method("DELETE") <button type="submit" class="btn btn-danger">Eliminar</button>';
    message.textContent = '¿Estás seguro de que deseas eliminar este permiso? Esta acción no se puede deshacer.';
    button.textContent = 'Eliminar';
    button.className = 'btn btn-danger';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}
</script>
@endpush
@endsection