jquery-3.6.0.min.js:2  GET https://jazizbiologico.com/web/jaziz/administrador/vista_admin/vista_servicios.php 500 (Internal Server Error)
send @ jquery-3.6.0.min.js:2
ajax @ jquery-3.6.0.min.js:2
S.fn.load @ jquery-3.6.0.min.js:2
(anonymous) @ servicios.php:234
e @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
servicios.php:1 Unchecked runtime.lastError: The message port closed before a response was received.
servicios.php:1 Unchecked runtime.lastError: The message port closed before a response was received.
servicios.php:1 Unchecked runtime.lastError: The message port closed before a response was received.
injection-topics.js:1 Browsing Topics API removed from https://jazizbiologico.com/web/jaziz/administrador/servicios.php which is main frame
servicios.php:1 Unchecked runtime.lastError: The message port closed before a response was received.
servicios.php:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
injection-tss-mv3.js:1 TSS: Domain is in allow list, skipping TSS setup.
tengo estos erros areglalo y me das el codigo completo ya corregido  <?php
session_start();

// ==============================================
// CONFIGURACIÓN INICIAL Y DEBUGGING
// ==============================================

error_reporting(E_ALL);
ini_set('display_errors', 1);

// Para demo, usar valores por defecto
$nombre = $_SESSION['nombre'] ?? 'Admin';
$apellido = $_SESSION['apellido'] ?? 'Usuario';
$rol = $_SESSION['rol'] ?? 'administrador';

// Archivo JSON para persistencia - RUTA CORREGIDA
$archivo_servicios = __DIR__ . '/vista_admin/servicios.json';

// ==============================================
// FUNCIONES DE DEBUGGING
// ==============================================

function debug_log($mensaje, $tipo = 'INFO') {
    $timestamp = date('Y-m-d H:i:s');
    $log_message = "[$timestamp] [$tipo] $mensaje";
    error_log($log_message);
    
    // También enviar a consola del navegador
    echo "<script>console.log('[PHP $tipo] $mensaje');</script>";
}

function debug_success($mensaje) {
    debug_log($mensaje, 'SUCCESS');
    echo "<script>console.log('%c✅ $mensaje', 'color: green; font-weight: bold;');</script>";
}

function debug_error($mensaje) {
    debug_log($mensaje, 'ERROR');
    echo "<script>console.error('%c❌ $mensaje', 'color: red; font-weight: bold;');</script>";
}

function debug_info($mensaje) {
    debug_log($mensaje, 'INFO');
    echo "<script>console.info('%c🔵 $mensaje', 'color: blue;');</script>";
}

// ==============================================
// FUNCIONES PARA MANEJO DE SERVICIOS
// ==============================================

function cargar_servicios($archivo) {
    debug_info("Iniciando carga de servicios desde: $archivo");
    
    try {
        if (!file_exists($archivo)) {
            debug_info("Archivo no existe, creando con datos iniciales");
            
            $servicios_iniciales = [
                [
                    'id' => 'srv_' . time() . '_001',
                    'nombre' => 'Limpieza General',
                    'descripcion' => 'Servicio de limpieza completa para oficinas y hogares',
                    'precio' => 150.00,
                    'fecha_creacion' => date('Y-m-d H:i:s'),
                    'creado_por' => 'Sistema'
                ],
                [
                    'id' => 'srv_' . time() . '_002',
                    'nombre' => 'Desinfección',
                    'descripcion' => 'Servicio de desinfección profesional con productos certificados',
                    'precio' => 200.00,
                    'fecha_creacion' => date('Y-m-d H:i:s'),
                    'creado_por' => 'Sistema'
                ]
            ];
            
            if (guardar_servicios($archivo, $servicios_iniciales)) {
                debug_success("Archivo creado con datos iniciales");
                return $servicios_iniciales;
            } else {
                debug_error("No se pudo crear el archivo inicial");
                return [];
            }
        }
        
        $contenido = file_get_contents($archivo);
        if ($contenido === false) {
            debug_error("No se pudo leer el archivo");
            return [];
        }
        
        debug_info("Contenido del archivo leído: " . strlen($contenido) . " caracteres");
        
        if (empty(trim($contenido))) {
            debug_info("Archivo vacío, retornando array vacío");
            return [];
        }
        
        // Validación más estricta del JSON
        $servicios = json_decode($contenido, true);
        
        if (json_last_error() !== JSON_ERROR_NONE) {
            debug_error("Error al decodificar JSON: " . json_last_error_msg());
            debug_error("Contenido problemático: " . substr($contenido, 0, 200));
            return [];
        }
        
        if (!is_array($servicios)) {
            debug_error("Los datos no son un array válido");
            return [];
        }
        
        debug_success("Servicios cargados correctamente: " . count($servicios) . " servicios");
        echo "<script>console.table(" . json_encode($servicios) . ");</script>";
        
        return $servicios;
        
    } catch (Exception $e) {
        debug_error("Excepción al cargar servicios: " . $e->getMessage());
        return [];
    }
}

function guardar_servicios($archivo, $servicios) {
    debug_info("Iniciando guardado de servicios en: $archivo");
    debug_info("Cantidad de servicios a guardar: " . count($servicios));
    
    try {
        // Verificar que el directorio existe
        $directorio = dirname($archivo);
        if (!is_dir($directorio)) {
            debug_info("Creando directorio: $directorio");
            if (!mkdir($directorio, 0755, true)) {
                debug_error("No se pudo crear el directorio");
                return false;
            }
        }
        
        // Verificar permisos de escritura más exhaustivamente
        if (!is_writable($directorio)) {
            debug_error("El directorio no tiene permisos de escritura: " . $directorio);
            debug_error("Permisos actuales: " . decoct(fileperms($directorio) & 0777);
            return false;
        }
        
        if (file_exists($archivo) && !is_writable($archivo)) {
            debug_error("El archivo no tiene permisos de escritura: " . $archivo);
            debug_error("Permisos actuales: " . decoct(fileperms($archivo) & 0777);
            return false;
        }
        
        // Convertir a JSON con manejo de errores
        $json_data = json_encode($servicios, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
        if ($json_data === false) {
            debug_error("Error al convertir a JSON: " . json_last_error_msg());
            debug_error("Datos que causaron el error: " . print_r($servicios, true));
            return false;
        }
        
        debug_info("JSON generado: " . strlen($json_data) . " caracteres");
        
        // Guardar archivo con verificación
        $bytes_escritos = file_put_contents($archivo, $json_data, LOCK_EX);
        if ($bytes_escritos === false) {
            debug_error("Error al escribir el archivo");
            debug_error("Último error PHP: " . print_r(error_get_last(), true));
            return false;
        }
        
        debug_success("Archivo guardado exitosamente: $bytes_escritos bytes escritos");
        
        // Verificación exhaustiva del guardado
        if (!file_exists($archivo)) {
            debug_error("Verificación falló: el archivo no existe después de guardarlo");
            return false;
        }
        
        $tamaño_archivo = filesize($archivo);
        if ($tamaño_archivo !== $bytes_escritos) {
            debug_error("Inconsistencia en tamaño: esperado $bytes_escritos, obtenido $tamaño_archivo");
            return false;
        }
        
        debug_success("Verificación exitosa: archivo existe con tamaño $tamaño_archivo bytes");
        return true;
        
    } catch (Exception $e) {
        debug_error("Excepción al guardar servicios: " . $e->getMessage());
        return false;
    }
}

// ==============================================
// CARGAR SERVICIOS AL INICIO
// ==============================================

debug_info("=== INICIO DEL SISTEMA DE SERVICIOS ===");
debug_info("Usuario: $nombre $apellido");
debug_info("Rol: $rol");

// Verificar permisos antes de continuar
if (!is_writable(dirname($archivo_servicios))) {
    debug_error("El directorio no tiene permisos de escritura: " . dirname($archivo_servicios));
    $error = "El sistema no tiene permisos para guardar cambios. Contacte al administrador.";
} elseif (file_exists($archivo_servicios) && !is_writable($archivo_servicios)) {
    debug_error("El archivo no tiene permisos de escritura: " . $archivo_servicios);
    $error = "El archivo de servicios no se puede modificar. Contacte al administrador.";
}

$servicios = cargar_servicios($archivo_servicios);

// También guardar en sesión como respaldo
$_SESSION['servicios'] = $servicios;

$mensaje = '';
$error = $error ?? ''; // Preservar errores de permisos

// ==============================================
// PROCESAMIENTO DE FORMULARIOS
// ==============================================

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    debug_info("=== PROCESANDO FORMULARIO POST ===");
    
    try {
        $accion = $_POST['accion'] ?? '';
        debug_info("Acción recibida: '$accion'");
        
        // Mostrar todos los datos POST
        echo "<script>console.group('📥 Datos POST recibidos:');</script>";
        foreach ($_POST as $key => $value) {
            echo "<script>console.log('$key: " . addslashes($value) . "');</script>";
        }
        echo "<script>console.groupEnd();</script>";

        if (empty($accion)) {
            throw new Exception("Acción no especificada");
        }

        switch ($accion) {
            case 'agregar':
                debug_info("--- PROCESANDO AGREGAR SERVICIO ---");
                
                // Validar y limpiar datos
                $nombre_servicio = trim($_POST['nombre'] ?? '');
                $descripcion = trim($_POST['descripcion'] ?? '');
                $precio = floatval($_POST['precio'] ?? 0);
                
                debug_info("Datos recibidos - Nombre: '$nombre_servicio', Descripción: '$descripcion', Precio: $precio");
                
                // Validaciones
                if (empty($nombre_servicio)) {
                    throw new Exception("El nombre del servicio es obligatorio");
                }
                if (empty($descripcion)) {
                    throw new Exception("La descripción es obligatoria");
                }
                if ($precio <= 0) {
                    throw new Exception("El precio debe ser mayor a 0");
                }
                
                debug_success("Validaciones pasadas correctamente");
                
                // Crear nuevo servicio
                $nuevo_id = 'srv_' . time() . '_' . rand(100, 999);
                $nuevoServicio = [
                    'id' => $nuevo_id,
                    'nombre' => $nombre_servicio,
                    'descripcion' => $descripcion,
                    'precio' => $precio,
                    'fecha_creacion' => date('Y-m-d H:i:s'),
                    'creado_por' => $nombre . ' ' . $apellido
                ];
                
                debug_info("Nuevo servicio creado con ID: $nuevo_id");
                echo "<script>console.log('🆕 Nuevo servicio:', " . json_encode($nuevoServicio) . ");</script>";
                
                // Agregar al array
                $servicios[] = $nuevoServicio;
                debug_info("Servicio agregado al array. Total servicios: " . count($servicios));
                
                // Guardar en archivo con verificación adicional
                if (guardar_servicios($archivo_servicios, $servicios)) {
                    $_SESSION['servicios'] = $servicios; // Actualizar sesión
                    
                    // Verificar que realmente se guardó
                    $servicios_guardados = cargar_servicios($archivo_servicios);
                    $encontrado = false;
                    foreach ($servicios_guardados as $serv) {
                        if ($serv['id'] === $nuevo_id) {
                            $encontrado = true;
                            break;
                        }
                    }
                    
                    if ($encontrado) {
                        $mensaje = "✅ Servicio agregado correctamente";
                        debug_success("Servicio agregado y guardado exitosamente");
                    } else {
                        throw new Exception("El servicio no se encontró después de guardar");
                    }
                } else {
                    throw new Exception("Error al guardar el servicio en archivo");
                }
                break;
                
            case 'editar':
                debug_info("--- PROCESANDO EDITAR SERVICIO ---");
                
                if ($rol !== 'administrador') {
                    throw new Exception("No tiene permisos para editar");
                }
                
                $id = $_POST['id'] ?? '';
                $nombre_servicio = trim($_POST['nombre'] ?? '');
                $descripcion = trim($_POST['descripcion'] ?? '');
                $precio = floatval($_POST['precio'] ?? 0);
                
                debug_info("Editando servicio ID: '$id'");
                debug_info("Nuevos datos - Nombre: '$nombre_servicio', Descripción: '$descripcion', Precio: $precio");
                
                // Validaciones
                if (empty($nombre_servicio) || empty($descripcion) || $precio <= 0) {
                    throw new Exception("Todos los campos son obligatorios y el precio debe ser mayor a 0");
                }
                
                // Buscar y actualizar servicio
                $encontrado = false;
                foreach ($servicios as &$servicio) {
                    if ($servicio['id'] === $id) {
                        debug_info("Servicio encontrado, actualizando...");
                        $servicio['nombre'] = $nombre_servicio;
                        $servicio['descripcion'] = $descripcion;
                        $servicio['precio'] = $precio;
                        $servicio['fecha_modificacion'] = date('Y-m-d H:i:s');
                        $servicio['modificado_por'] = $nombre . ' ' . $apellido;
                        $encontrado = true;
                        break;
                    }
                }
                
                if (!$encontrado) {
                    throw new Exception("Servicio no encontrado");
                }
                
                debug_success("Servicio actualizado en memoria");
                
                // Guardar en archivo con verificación
                if (guardar_servicios($archivo_servicios, $servicios)) {
                    $_SESSION['servicios'] = $servicios;
                    
                    // Verificar que realmente se guardó
                    $servicio_guardado = null;
                    $servicios_guardados = cargar_servicios($archivo_servicios);
                    foreach ($servicios_guardados as $serv) {
                        if ($serv['id'] === $id) {
                            $servicio_guardado = $serv;
                            break;
                        }
                    }
                    
                    if ($servicio_guardado && $servicio_guardado['nombre'] === $nombre_servicio) {
                        $mensaje = "✅ Servicio actualizado correctamente";
                        debug_success("Servicio editado y guardado exitosamente");
                    } else {
                        throw new Exception("Los cambios no se reflejaron en el archivo");
                    }
                } else {
                    throw new Exception("Error al guardar los cambios en archivo");
                }
                break;
                
            case 'eliminar':
                debug_info("--- PROCESANDO ELIMINAR SERVICIO ---");
                
                if ($rol !== 'administrador') {
                    throw new Exception("No tiene permisos para eliminar");
                }
                
                $id = $_POST['id'] ?? '';
                debug_info("Eliminando servicio ID: '$id'");
                
                $servicios_antes = count($servicios);
                
                // Eliminar servicio
                $servicios = array_filter($servicios, function($servicio) use ($id) {
                    return $servicio['id'] !== $id;
                });
                
                // Reindexar array
                $servicios = array_values($servicios);
                
                $servicios_despues = count($servicios);
                debug_info("Servicios antes: $servicios_antes, después: $servicios_despues");
                
                if ($servicios_antes === $servicios_despues) {
                    throw new Exception("Servicio no encontrado para eliminar");
                }
                
                debug_success("Servicio eliminado de memoria");
                
                // Guardar en archivo con verificación
                if (guardar_servicios($archivo_servicios, $servicios)) {
                    $_SESSION['servicios'] = $servicios;
                    
                    // Verificar que realmente se eliminó
                    $servicios_guardados = cargar_servicios($archivo_servicios);
                    $encontrado = false;
                    foreach ($servicios_guardados as $serv) {
                        if ($serv['id'] === $id) {
                            $encontrado = true;
                            break;
                        }
                    }
                    
                    if (!$encontrado) {
                        $mensaje = "✅ Servicio eliminado correctamente";
                        debug_success("Servicio eliminado y guardado exitosamente");
                    } else {
                        throw new Exception("El servicio no se eliminó del archivo");
                    }
                } else {
                    throw new Exception("Error al guardar los cambios en archivo");
                }
                break;

            default:
                throw new Exception("Acción no reconocida: " . htmlspecialchars($accion));
        }

    } catch (Exception $e) {
        debug_error("Error durante procesamiento: " . $e->getMessage());
        $error = "⚠️ Error: " . $e->getMessage();
    }
    
    debug_info("=== FIN DEL PROCESAMIENTO ===");
    
    // Redireccionar para evitar reenvío de formulario
    $_SESSION['mensaje'] = $mensaje;
    $_SESSION['error'] = $error;
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

// ==============================================
// PREPARACIÓN PARA LA VISTA
// ==============================================

// Preparar mensajes para la vista
$mensaje = $_SESSION['mensaje'] ?? '';
$error = $_SESSION['error'] ?? '';
unset($_SESSION['mensaje'], $_SESSION['error']);

debug_info("=== PREPARANDO VISTA ===");
debug_info("Total servicios a mostrar: " . count($servicios));
if ($mensaje) debug_info("Mensaje: $mensaje");
if ($error) debug_info("Error: $error");
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administrar Servicios - Jaziz Biológico</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"/>
    <style>
        :root {
            --primary-color: #1e40af;
            --primary-dark: #1e3a8a;
            --success-color: #059669;
            --danger-color: #dc2626;
            --warning-color: #d97706;
            --info-color: #0284c7;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--gray-100);
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        .main-container {
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Styles */
        .sidebar {
            width: 280px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .sidebar-logo {
            padding: 2rem 1.5rem;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sidebar-nav {
            padding: 1rem 0;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            padding: 0.875rem 1.5rem;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .sidebar-nav a:hover,
        .sidebar-nav a.active {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            border-left-color: white;
        }

        .sidebar-nav a i {
            margin-right: 0.75rem;
            font-size: 1.1rem;
            width: 20px;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 0;
            transition: margin-left 0.3s ease;
            width: 100%;
        }

        /* Header */
        .header {
            background: white;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        /* Alerts */
        .alert {
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            border-left: 4px solid;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alert-success {
            background-color: #ecfdf5;
            border-left-color: var(--success-color);
            color: #065f46;
        }

        .alert-danger {
            background-color: #fef2f2;
            border-left-color: var(--danger-color);
            color: #991b1b;
        }

        /* Cards */
        .card {
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            overflow: hidden;
        }

        .card-header {
            background: var(--primary-color);
            color: white;
            padding: 1.25rem 1.5rem;
            font-weight: 600;
            font-size: 1.125rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        /* Service Cards */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        .service-card {
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .service-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-800);
            margin: 0;
        }

        .price-badge {
            background-color: var(--success-color);
            color: white;
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .service-description {
            color: var(--gray-600);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .service-meta {
            font-size: 0.75rem;
            color: var(--gray-500);
            border-top: 1px solid var(--gray-200);
            padding-top: 1rem;
            margin-bottom: 1rem;
        }

        .service-actions {
            display: flex;
            gap: 0.75rem;
        }

        .edit-form {
            background-color: var(--gray-50);
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin-top: 1rem;
            display: none;
        }

        .edit-form.show {
            display: block;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem 2rem;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .empty-state-icon {
            width: 64px;
            height: 64px;
            background-color: var(--info-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: white;
            font-size: 2rem;
        }
        
         /* Agregar esto para el preloader */
        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }
        .preloader.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive */
        @media (min-width: 1024px) {
            .sidebar {
                position: fixed;
                transform: translateX(0);
            }

            .main-content {
                margin-left: 280px;
            }

            .menu-toggle {
                display: none;
            }
        }

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

        /* Navbar styles */
        #sidebar-container {
            background-color: #0b1c58 !important;
        }

        .navbar-toggler {
            border: none;
            background-color: #3498db;
            padding: 0.5rem 0.7rem;
            border-radius: 5px;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
            background-size: cover;
            width: 24px;
            height: 24px;
        }

        #navbar-nav-icons {
            background: #3498db;
            border-color: #2980b9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-top: 5px;
            padding: 5px 0;
        }

        #navbar-nav-icons .nav-item a {
            color: white !important;
            font-weight: 500;
            transition: background-color 0.3s ease, color 0.3s ease;
            padding: 0.75rem 1.5rem;
        }

        #navbar-nav-icons .nav-item a:hover {
            background-color: #ecf0f1;
            color: #1a1a1a !important;
        }

        .avatar {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
        }

        @media (max-width: 991.98px) {
            #sidebar-container {
                display: none;
            }
        }

        @media (min-width: 992px) {
            .navbar-toggler {
                display: none;
            }
            
            .navbar-collapse {
                display: none !important;
            }
        }
    </style>
</head>

<body>
    
     <!-- Preloader -->
    <div class="preloader">
        <div class="spinner"></div>
    </div>
    
    <div class="d-flex">
        <!-- Sidebar -->
        <div id="sidebar-container" class="bg-primary">
            <div class="logo text-center p-3">
                <div class="text-white font-bold text-lg">Jaziz Biológico</div>
            </div>
            <div class="menu">
               <a href="reporte.php" class="d-block text-light p-3"><i class="bi bi-file-earmark-text-fill me-2 lead"></i>Reportes</a>

                <a href="calendario.php" class="d-block text-light p-3"><i class="bi bi-calendar me-2 lead"></i>Calendario</a>
                
                <a href="usuarios.php" class="d-block text-light p-3"><i class="bi bi-people-fill me-2 lead"></i>Usuarios y empresa</a>
                
                <a href="mecanismo.php" class="d-block text-light p-3"><i class="bi bi-gear-fill me-2 lead"></i>Mecanismos</a>
                
                <a href="sustancias.php" class="d-block text-light p-3"><i class="bi bi-droplet-half me-2 lead"></i>Sustancias</a>
                
                <a href="crear_qr.php" class="d-block text-light p-3"><i class="bi bi-qr-code me-2 lead"></i>generador de QR</a>
                
                <a href="tipo_plagas.php" class="d-block text-light p-3"><i class="bi bi-bug-fill me-2 lead"></i>Tipo de plagas</a>
                
                <a href="facturas-electronica.php" class="d-block text-light p-3"><i class="bi bi-receipt me-2 lead"></i>Facturas eletronica</a>
                
                <a href="servicios.php" class="d-block text-white p-3 active"><i class="bi bi-tools me-2 lead"></i> Servicios</a>
            </div>
        </div>

        <!-- Main Content -->
        <div class="container-fluid d-block">
            <!-- Mobile Navigation -->
            <nav class="navbar navbar-expand-lg border-bottom">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navbar-nav-icons">
                            <li class="nav-item">
                                <a href="reporte.php" class="d-block text-light p-3"><i class="bi bi-file-earmark-text-fill me-2 lead"></i>Reportes</a>
                            </li>
                            <li class="nav-item">
                                <a href="calendario.php" class="d-block text-light p-3"><i class="bi bi-calendar me-2 lead"></i>Calendario</a>
                            </li>
                            <li class="nav-item">
                                <a href="usuarios.php" class="d-block text-light p-3"><i class="bi bi-people-fill me-2 lead"></i>Usuarios y empresa</a>
                            </li>
                            <li class="nav-item">
                                <a href="mecanismo.php" class="d-block text-light p-3"><i class="bi bi-gear-fill me-2 lead"></i>Mecanismos</a>
                            </li>
                            <li class="nav-item">
                                <a href="sustancias.php" class="d-block text-light p-3"><i class="bi bi-droplet-half me-2 lead"></i>Sustancias</a>
                            </li>
                            <li class="nav-item">
                                <a href="crear_qr.php" class="d-block text-light p-3"><i class="bi bi-qr-code me-2 lead"></i>generador de QR</a>
                            </li>
                            <li class="nav-item">
                                <a href="tipo_plagas.php" class="d-block text-light p-3"><i class="bi bi-bug-fill me-2 lead"></i>Tipo de plagas</a>
                            </li>
                            <li class="nav-item">
                                 <a href="facturas-electronica.php" class="d-block text-light p-3"><i class="bi bi-receipt me-2 lead"></i>Facturas eletronica</a>
                            </li>
                            <li class="nav-item">
                                <a href="servicios.php" class="d-block text-white p-3 active"><i class="bi bi-tools me-2 lead"></i> Servicios</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E" alt="Avatar" class="avatar"/>
                                    <span class="fw-bold"><?php echo htmlspecialchars($nombre . " " . $apellido); ?></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Mi perfil</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#">Cerrar sesión</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <!-- Content -->
            <main class="content">
                <!-- Alerts -->
                <?php if ($mensaje): ?>
                    <div class="alert alert-success">
                        <i class="bi bi-check-circle-fill"></i>
                        <span><?php echo htmlspecialchars($mensaje); ?></span>
                    </div>
                <?php endif; ?>

                <?php if ($error): ?>
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <span><?php echo htmlspecialchars($error); ?></span>
                    </div>
                <?php endif; ?>

                <!-- Add Service Form -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-plus-circle"></i>
                        Agregar Nuevo Servicio
                    </div>
                    <div class="card-body">
                        <form method="post" id="serviceForm">
                            <input type="hidden" name="accion" value="agregar">
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="nombre" class="form-label">Nombre del Servicio*</label>
                                        <input type="text" class="form-control" id="nombre" name="nombre" 
                                               placeholder="Ej: Limpieza profunda" maxlength="100" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="precio" class="form-label">Precio*</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" class="form-control" id="precio" name="precio" 
                                                   placeholder="0.00" step="0.01" min="0.01" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="descripcion" class="form-label">Descripción*</label>
                                <textarea class="form-control" id="descripcion" name="descripcion" rows="3" 
                                          placeholder="Describa el servicio en detalle..." required></textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-plus-circle"></i>
                                Agregar Servicio
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Services List -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-list-ul"></i>
                        Listado de Servicios Existentes
                        <span style="float: right; font-weight: normal; font-size: 0.9rem;">
                            Total: <?php echo count($servicios); ?> servicio<?php echo count($servicios) !== 1 ? 's' : ''; ?>
                        </span>
                    </div>
                    <div class="card-body">
                        <?php if (empty($servicios)): ?>
                            <div class="empty-state">
                                <div class="empty-state-icon">
                                    <i class="bi bi-file-earmark-text"></i>
                                </div>
                                <h3>No hay servicios registrados</h3>
                                <p>Comience agregando su primer servicio usando el formulario de arriba.</p>
                            </div>
                        <?php else: ?>
                            <div class="services-grid">
                                <?php foreach ($servicios as $servicio): ?>
                                    <div class="service-card">
                                        <div class="service-header">
                                            <h3 class="service-title"><?php echo htmlspecialchars($servicio['nombre']); ?></h3>
                                            <span class="price-badge">$<?php echo number_format($servicio['precio'], 2); ?></span>
                                        </div>
                                        
                                        <p class="service-description"><?php echo nl2br(htmlspecialchars($servicio['descripcion'])); ?></p>
                                        
                                        <div class="service-meta">
                                            <div>Creado: <?php echo $servicio['fecha_creacion']; ?> por <?php echo htmlspecialchars($servicio['creado_por']); ?></div>
                                            <?php if (isset($servicio['fecha_modificacion'])): ?>
                                                <div>Modificado: <?php echo $servicio['fecha_modificacion']; ?> por <?php echo htmlspecialchars($servicio['modificado_por']); ?></div>
                                            <?php endif; ?>
                                        </div>
                                        
                                        <?php if ($rol === 'administrador'): ?>
                                        <div class="service-actions">
                                            <button class="btn btn-primary btn-sm" onclick="toggleEdit('<?php echo $servicio['id']; ?>')">
                                                <i class="bi bi-pencil"></i>
                                                Editar
                                            </button>
                                            <form method="post" style="display: inline;" onsubmit="return confirm('¿Está seguro de eliminar este servicio?')">
                                                <input type="hidden" name="accion" value="eliminar">
                                                <input type="hidden" name="id" value="<?php echo $servicio['id']; ?>">
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    <i class="bi bi-trash"></i>
                                                    Eliminar
                                                </button>
                                            </form>
                                        </div>
                                        
                                        <!-- Edit Form -->
                                        <div class="edit-form" id="edit-form-<?php echo $servicio['id']; ?>">
                                            <form method="post">
                                                <input type="hidden" name="accion" value="editar">
                                                <input type="hidden" name="id" value="<?php echo $servicio['id']; ?>">
                                                
                                                <div class="mb-3">
                                                    <label class="form-label">Nombre*</label>
                                                    <input type="text" name="nombre" class="form-control" 
                                                           value="<?php echo htmlspecialchars($servicio['nombre']); ?>" required>
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <label class="form-label">Descripción*</label>
                                                    <textarea name="descripcion" class="form-control" rows="3" required><?php echo htmlspecialchars($servicio['descripcion']); ?></textarea>
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <label class="form-label">Precio*</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">$</span>
                                                        <input type="number" step="0.01" min="0.01" name="precio" class="form-control"
                                                               value="<?php echo number_format($servicio['precio'], 2, '.', ''); ?>" required>
                                                    </div>
                                                </div>
                                                
                                                <div class="d-flex gap-2">
                                                    <button type="submit" class="btn btn-success btn-sm">
                                                        <i class="bi bi-save"></i>
                                                        Guardar
                                                    </button>
                                                    <button type="button" class="btn btn-secondary btn-sm" onclick="toggleEdit('<?php echo $servicio['id']; ?>')">
                                                        <i class="bi bi-x"></i>
                                                        Cancelar
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        console.log('%c🚀 SISTEMA DE SERVICIOS INICIADO', 'color: blue; font-size: 16px; font-weight: bold;');
        console.log('📊 Estado inicial del sistema:');
        console.log('👤 Usuario: <?php echo addslashes($nombre . " " . $apellido); ?>');
        console.log('🔑 Rol: <?php echo addslashes($rol); ?>');
        console.log('📁 Archivo JSON: <?php echo addslashes($archivo_servicios); ?>');
        console.log('📋 Total servicios cargados: <?php echo count($servicios); ?>');
        
        // Función para mostrar/ocultar formulario de edición
        function toggleEdit(serviceId) {
            console.log('🔄 Toggling edit form for service:', serviceId);
            const editForm = document.getElementById('edit-form-' + serviceId);
            if (editForm) {
                editForm.classList.toggle('show');
                console.log('✅ Edit form toggled successfully');
            } else {
                console.error('❌ Edit form not found for service:', serviceId);
            }
        }

        // Interceptar envío del formulario para debugging
        document.getElementById('serviceForm').addEventListener('submit', function(e) {
            console.group('📤 ENVIANDO FORMULARIO DE NUEVO SERVICIO');
            console.log('🔍 Datos del formulario:');
            
            const formData = new FormData(this);
            for (let [key, value] of formData.entries()) {
                console.log(`  ${key}: ${value}`);
            }
            
            console.log('⏳ Enviando formulario...');
            console.groupEnd();
        });

        // Interceptar envío de formularios de edición
        document.addEventListener('submit', function(e) {
            if (e.target.closest('.edit-form')) {
                console.group('📝 ENVIANDO FORMULARIO DE EDICIÓN');
                console.log('🔍 Datos del formulario:');
                
                const formData = new FormData(e.target);
                for (let [key, value] of formData.entries()) {
                    console.log(`  ${key}: ${value}`);
                }
                
                console.log('⏳ Enviando formulario de edición...');
                console.groupEnd();
            }
        });

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                alert.style.opacity = '0';
                setTimeout(() => {
                    alert.style.display = 'none';
                }, 300);
            });
        }, 5000);

        // Close mobile menu when clicking on a link
        document.querySelectorAll('#navbarSupportedContent .nav-link').forEach(link => {
            link.addEventListener('click', function() {
                if (window.innerWidth < 992) {
                    const bsCollapse = new bootstrap.Collapse(document.getElementById('navbarSupportedContent'));
                    bsCollapse.hide();
                }
            });
        });
        
                // Ocultar preloader cuando todo esté cargado
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.querySelector('.preloader').classList.add('hidden');
            }, 500);
        });

        // Manejar errores de carga
        window.addEventListener('error', function(e) {
            console.error('Error capturado:', e.message);
            document.querySelector('.preloader').classList.add('hidden');
            alert('Ocurrió un error al cargar la página. Por favor recarga.');
        });

        // [El resto del código JavaScript anterior permanece igual]
        
        // Modificar esta parte para no hacer la llamada AJAX
        console.log('✅ JavaScript inicializado correctamente');
        
        // Mostrar contenido después de cargar
        setTimeout(function() {
            document.querySelector('.preloader').classList.add('hidden');
            document.querySelector('.main-content').style.opacity = 1;
        }, 300);

        
        console.log('✅ JavaScript inicializado correctamente');
    </script>
</body>
</html> y el nombre del archivo es vista_servicios.php