<?php
session_start();

// ==============================================
// CONFIGURACIÓN INICIAL
// ==============================================
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Para demo, usar valores por defecto
$nombre = $_SESSION['nombre'] ?? 'Diego';
$apellido = $_SESSION['apellido'] ?? 'Landázuri';
$rol = $_SESSION['rol'] ?? 'administrador';

// RUTA ABSOLUTAMENTE CORREGIDA
$archivo_servicios = '/home/jazigagz/public_html/web/jaziz/administrador/vista_admin/servicios.json';

// ==============================================
// FUNCIONES PARA MANEJO DE SERVICIOS
// ==============================================
function cargar_servicios($archivo) {
    try {
        if (!file_exists($archivo)) {
            // Crear directorio si no existe
            $directorio = dirname($archivo);
            if (!is_dir($directorio)) {
                if (!mkdir($directorio, 0755, true)) {
                    return [];
                }
            }
            $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)) {
                return $servicios_iniciales;
            } else {
                return [];
            }
        }

        $contenido = file_get_contents($archivo);
        if ($contenido === false) {
            return [];
        }

        if (empty(trim($contenido))) {
            return [];
        }

        $servicios = json_decode($contenido, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            return [];
        }

        if (!is_array($servicios)) {
            return [];
        }

        return $servicios;

    } catch (Exception $e) {
        return [];
    }
}

function guardar_servicios($archivo, $servicios) {
    try {
        $directorio = dirname($archivo);
        if (!is_dir($directorio)) {
            if (!mkdir($directorio, 0755, true)) {
                return false;
            }
        }

        $json_data = json_encode($servicios, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
        if ($json_data === false) {
            return false;
        }

        $bytes_escritos = file_put_contents($archivo, $json_data, LOCK_EX);
        if ($bytes_escritos === false) {
            return false;
        }

        return true;

    } catch (Exception $e) {
        return false;
    }
}

// ==============================================
// CARGAR SERVICIOS SIEMPRE
// ==============================================
$servicios = cargar_servicios($archivo_servicios);
$mensaje = '';
$error = '';

// ==============================================
// PROCESAMIENTO DE FORMULARIOS
// ==============================================
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        $accion = $_POST['accion'] ?? '';

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

        switch ($accion) {
            case 'agregar':
                $nombre_servicio = trim($_POST['nombre'] ?? '');
                $descripcion = trim($_POST['descripcion'] ?? '');
                $precio = floatval($_POST['precio'] ?? 0);

                if (empty($nombre_servicio) || empty($descripcion) || $precio <= 0) {
                    throw new Exception("Todos los campos son obligatorios y el precio debe ser mayor a 0");
                }

                $servicios_actuales = cargar_servicios($archivo_servicios);
                
                $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
                ];

                $servicios_actuales[] = $nuevoServicio;

                if (guardar_servicios($archivo_servicios, $servicios_actuales)) {
                    $servicios = $servicios_actuales;
                    $mensaje = "✅ Servicio agregado correctamente";
                } else {
                    throw new Exception("Error al guardar el servicio en archivo");
                }
                break;

            case 'editar':
                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);

                if (empty($nombre_servicio) || empty($descripcion) || $precio <= 0) {
                    throw new Exception("Todos los campos son obligatorios y el precio debe ser mayor a 0");
                }

                $servicios_actuales = cargar_servicios($archivo_servicios);
                $encontrado = false;
                foreach ($servicios_actuales as &$servicio) {
                    if ($servicio['id'] === $id) {
                        $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;
                    }
                }
                unset($servicio);

                if (!$encontrado) {
                    throw new Exception("Servicio no encontrado");
                }

                if (guardar_servicios($archivo_servicios, $servicios_actuales)) {
                    $servicios = $servicios_actuales;
                    $mensaje = "✅ Servicio actualizado correctamente";
                } else {
                    throw new Exception("Error al guardar los cambios en archivo");
                }
                break;

            case 'eliminar':
                if ($rol !== 'administrador') {
                    throw new Exception("No tiene permisos para eliminar");
                }

                $id = $_POST['id'] ?? '';
                $servicios_actuales = cargar_servicios($archivo_servicios);
                $servicios_antes = count($servicios_actuales);

                $servicios_actuales = array_filter($servicios_actuales, function($servicio) use ($id) {
                    return $servicio['id'] !== $id;
                });

                $servicios_actuales = array_values($servicios_actuales);
                $servicios_despues = count($servicios_actuales);

                if ($servicios_antes === $servicios_despues) {
                    throw new Exception("Servicio no encontrado para eliminar");
                }

                if (guardar_servicios($archivo_servicios, $servicios_actuales)) {
                    $servicios = $servicios_actuales;
                    $mensaje = "✅ Servicio eliminado correctamente";
                } 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) {
        $error = "⚠️ Error: " . $e->getMessage();
    }
}
?>
<!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;
        }

        /* 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;
        }

        /* 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;
        }

        /* 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;
        }

        /* SIDEBAR - ESTRUCTURA FIJA */
        #sidebar-container {
            background-color: #0b1c58 !important;
            min-height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            width: 250px;
            z-index: 1000;
        }

        .logo {
            padding: 1rem;
            text-align: center;
        }

        #logo {
            max-width: 100%;
            height: auto;
            max-height: 60px;
        }

        /* ENLACES DEL SIDEBAR */
        .sidebar-link {
            color: white !important;
            text-decoration: none !important;
            display: block;
            padding: 0.75rem 1.5rem;
            transition: background-color 0.3s ease;
        }

        .sidebar-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white !important;
        }

        .sidebar-link.active {
            background-color: rgba(255, 255, 255, 0.2);
            color: white !important;
        }

        /* CONTENIDO PRINCIPAL */
        .main-content {
            margin-left: 250px;
            min-height: 100vh;
        }

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

        /* NAVBAR MÓVIL - OCULTO EN DESKTOP */
        .mobile-navbar {
            display: none;
        }

        .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;
        }

        /* RESPONSIVE */
        @media (max-width: 991.98px) {
            #sidebar-container {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            
            #sidebar-container.show {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }

            .mobile-navbar {
                display: block;
            }
        }

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

        /* OCULTAR MENÚ HAMBURGUESA EN DESKTOP COMPLETAMENTE */
        @media (min-width: 992px) {
            .mobile-navbar {
                display: none !important;
            }
            
            .navbar-toggler {
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="d-flex">
        <!-- Sidebar - ESTRUCTURA CORREGIDA -->
        <div id="sidebar-container" class="bg-primary">
            <div class="logo">
                <img id="logo" src="../imagenes/logo-jaziz_sf.png" alt="Logo Jaziz Biológico" onerror="this.src='data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 30\"%3E%3Ctext x=\"50%\" y=\"50%\" font-family=\"Arial\" font-size=\"16\" fill=\"%230b1c58\" text-anchor=\"middle\" dominant-baseline=\"middle\"%3EJaziz Logo%3C/text%3E%3C/svg%3E'">
            </div>
            <div class="menu">
                <?php if (file_exists("menu_administrador.php")): ?>
                    <?php include("menu_administrador.php"); ?>
                <?php else: ?>
                    <!-- Menú de respaldo si no existe el archivo include -->
                    <a href="reporte.php" class="sidebar-link">
                        <i class="bi bi-file-earmark-text-fill me-2 lead"></i>Reportes
                    </a>
                    <a href="calendario.php" class="sidebar-link">
                        <i class="bi bi-calendar me-2 lead"></i>Calendario
                    </a>
                    <a href="usuarios.php" class="sidebar-link">
                        <i class="bi bi-people-fill me-2 lead"></i>Usuarios y empresa
                    </a>
                    <a href="mecanismo.php" class="sidebar-link">
                        <i class="bi bi-gear-fill me-2 lead"></i>Mecanismos
                    </a>
                    <a href="sustancias.php" class="sidebar-link">
                        <i class="bi bi-droplet-half me-2 lead"></i>Sustancias
                    </a>
                    <a href="crear_qr.php" class="sidebar-link">
                        <i class="bi bi-qr-code me-2 lead"></i>Generador de QR
                    </a>
                    <a href="tipo_plagas.php" class="sidebar-link">
                        <i class="bi bi-bug-fill me-2 lead"></i>Tipo de plagas
                    </a>
                    <a href="facturas-electronica.php" class="sidebar-link">
                        <i class="bi bi-receipt me-2 lead"></i>Facturas electrónica
                    </a>
                    <a href="servicios.php" class="sidebar-link active">
                        <i class="bi bi-tools me-2 lead"></i>Servicios
                    </a>
                <?php endif; ?>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Mobile Navigation - SOLO VISIBLE EN MÓVIL -->
            <nav class="navbar navbar-expand-lg border-bottom mobile-navbar">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" onclick="toggleMobileMenu()">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="navbar-nav-icons">
                            <?php if (file_exists("menu_movil.php")): ?>
                                <?php include("menu_movil.php"); ?>
                            <?php else: ?>
                                <!-- Menú móvil de respaldo -->
                                <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="servicios.php" class="d-block text-white p-3 active">
                                        <i class="bi bi-tools me-2 lead"></i>Servicios
                                    </a>
                                </li>
                            <?php endif; ?>
                        </ul>
                        
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex align-items-center">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center" href="modelo/salir.php" role="button">
                                    <img src="../imagenes/avatar.png" alt="imagen de usuario" class="avatar rounded-circle me-2" onerror="this.src='data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"%3E%3Ccircle cx=\"16\" cy=\"16\" r=\"16\" fill=\"%23ccc\"/%3E%3Ctext x=\"16\" y=\"20\" font-family=\"Arial\" font-size=\"12\" fill=\"%23666\" text-anchor=\"middle\" dominant-baseline=\"middle\"%3E<?php echo htmlspecialchars(substr($nombre, 0, 1) . substr($apellido, 0, 1)); ?>%3C/text%3E%3C/svg%3E'" />
                                    <span class="nombreUsuario text-truncate" style="max-width: 130px;">
                                        <?php echo htmlspecialchars($nombre . " " . $apellido); ?>
                                    </span>
                                    <span class="btn-cerrarsesion">(Cerrar Sesión)</span>
                                </a>
                            </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 htmlspecialchars($servicio['fecha_creacion']); ?> por <?php echo htmlspecialchars($servicio['creado_por']); ?></div>
                                            <?php if (isset($servicio['fecha_modificacion'])): ?>
                                                <div>Modificado: <?php echo htmlspecialchars($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 htmlspecialchars($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 htmlspecialchars($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 htmlspecialchars($servicio['id']); ?>">
                                            <form method="post">
                                                <input type="hidden" name="accion" value="editar">
                                                <input type="hidden" name="id" value="<?php echo htmlspecialchars($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 htmlspecialchars($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>
        console.log('🚀 SISTEMA DE SERVICIOS INICIADO');
        console.log('👤 Usuario:', '<?php echo str_replace(array("'", '"', "\n", "\r"), array("\\'", '\\"', "\\n", "\\r"), $nombre . " " . $apellido); ?>');
        console.log('🔑 Rol:', '<?php echo str_replace(array("'", '"', "\n", "\r"), array("\\'", '\\"', "\\n", "\\r"), $rol); ?>');
        console.log('📁 Archivo JSON:', '<?php echo addslashes($archivo_servicios); ?>');
        console.log('📋 Total servicios:', <?php echo count($servicios); ?>);

        // Función para menú móvil CON DEBUGGING
        function toggleMobileMenu() {
            console.log('🔄 Toggle menu called');
            console.log('📱 Window width:', window.innerWidth);
            console.log('🖥️ Is mobile?', window.innerWidth <= 991);
            
            const sidebar = document.getElementById('sidebar-container');
            const mobileMenu = document.getElementById('navbarSupportedContent');
            
            console.log('🔍 Sidebar found:', sidebar ? 'YES' : 'NO');
            console.log('🔍 Mobile menu found:', mobileMenu ? 'YES' : 'NO');
            
            if (window.innerWidth <= 991) {
                // En móvil, mostrar sidebar
                if (sidebar) {
                    const wasVisible = sidebar.classList.contains('show');
                    sidebar.classList.toggle('show');
                    console.log('📱 Sidebar toggled:', wasVisible ? 'HIDDEN' : 'SHOWN');
                }
            } else {
                console.log('🖥️ Desktop mode - menu should not appear');
            }
        }

        // Debugging para navegación
        function debugNavigation() {
            console.log('=== NAVIGATION DEBUG ===');
            
            const allLinks = document.querySelectorAll('a[href]');
            console.log('🔗 Total links found:', allLinks.length);
            
            allLinks.forEach((link, index) => {
                const href = link.getAttribute('href');
                console.log(`Link ${index + 1}:`, href, '|', link.textContent.trim());
                
                // Agregar event listener para debugging
                link.addEventListener('click', function(e) {
                    console.log('🖱️ Link clicked:', href);
                    console.log('🎯 Target:', e.target);
                    console.log('🔄 Will navigate to:', this.href);
                });
            });
            
            console.log('=== END NAVIGATION DEBUG ===');
        }

        // Ejecutar debugging al cargar
        document.addEventListener('DOMContentLoaded', function() {
            debugNavigation();
        });

        // Función para editar servicios
        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);
            }
        }

        // Auto-hide alerts
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            if (alerts.length > 0) {
                console.log('🔔', alerts.length, 'alertas configuradas');
                alerts.forEach(alert => {
                    alert.style.opacity = '0';
                    setTimeout(() => alert.style.display = 'none', 300);
                });
            }
        }, 5000);

        console.log('✅ SISTEMA COMPLETAMENTE INICIALIZADO');
    </script>
</body>
</html>
 analiza el codigo me presenta el error 404 en consola y no  medeja navergar profundisa el error  esto me muestra en consola  TSS: Domain is in allow list, skipping TSS setup.
 Browsing Topics API removed from https://jazizbiologico.com/web/jaziz/administrador/vista_admin/vista_servicios.php which is main frame
 🚀 SISTEMA DE SERVICIOS INICIADO
 👤 Usuario: Diego Landázuri
 🔑 Rol: administrador
 📁 Archivo JSON: /home/jazigagz/public_html/web/jaziz/administrador/vista_admin/servicios.json
 📋 Total servicios: 2
 ✅ SISTEMA COMPLETAMENTE INICIALIZADO
 === NAVIGATION DEBUG ===
 🔗 Total links found: 21
 Link 1: reporte.php | Reportes
 Link 2: calendario.php | Calendario
 Link 3: usuarios.php | Usuarios y empresa
 Link 4: mecanismo.php | Mecanismos
 Link 5: sustancias.php | Sustancias
 Link 6: crear_qr.php | generador de QR
 Link 7: GeneradorDeTareas.php | Cronograma
vista_servicios.php:639 Link 8: tipo_plagas.php | Tipo de plagas
vista_servicios.php:639 Link 9: facturas-electronica.php | Facturas eletronica
vista_servicios.php:639 Link 10: servicios.php | Servicios
vista_servicios.php:639 Link 11: reporte.php | Reportes
vista_servicios.php:639 Link 12: calendario.php | Calendario
vista_servicios.php:639 Link 13: usuarios.php | Usuarios y empresa
vista_servicios.php:639 Link 14: mecanismo.php | Mecanismos
vista_servicios.php:639 Link 15: sustancias.php | Sustancias
vista_servicios.php:639 Link 16: crear_qr.php | generador de QR
vista_servicios.php:639 Link 17: GeneradorDeTareas.php | Cronograma
vista_servicios.php:639 Link 18: tipo_plagas.php | Tipo de plagas
vista_servicios.php:639 Link 19: facturas-electronica.php | Facturas eletronica
vista_servicios.php:639 Link 20: servicios.php | Servicios
vista_servicios.php:639 Link 21: modelo/salir.php | Diego Landázuri                                    
                                    (Cerrar Sesión)
vista_servicios.php:649 === END NAVIGATION DEBUG ===
avatar.png:1  Failed to load resource: the server responded with a status of 404 ()
vista_servicios.php:385 Uncaught SyntaxError: Invalid or unexpected token
logo-jaziz_sf.png:1  Failed to load resource: the server responded with a status of 404 ()
vista_servicios.php:327 Uncaught SyntaxError: Invalid or unexpected token
vista_servicios.php:673 🔔 1 alertas configuradas