?>

<script>
    const GLOBAL_USER_ID = 0;
    // Definimos también la constante para notificaciones si no existe
    if (typeof GLOBAL_USER_ID_NOTIF === 'undefined') {
        const GLOBAL_USER_ID_NOTIF = GLOBAL_USER_ID;
    }
</script>

<audio id="global-ringtone" loop>
    <source src="https://assets.mixkit.co/active_storage/sfx/1359/1359-preview.mp3" type="audio/mp3">
</audio>

<div id="incoming-modal" class="global-modal-overlay" style="display:none;">
    <div class="incoming-card">
        <div class="avatar-wrapper">
            <img id="incoming-avatar" src="./img/default_avatar.png" class="pulsing-avatar">
        </div>
        <h3 id="incoming-title">Usuario</h3>
        <p>Te está llamando...</p>
        <div class="action-buttons">
            <button id="btn-global-reject" class="btn-circle reject"><i class="material-icons">call_end</i></button>
            <button id="btn-global-accept" class="btn-circle accept"><i class="material-icons">call</i></button>
        </div>
    </div>
</div>

<div id="active-call-modal" class="global-modal-overlay" style="display:none;">
    <div class="video-wrapper">
        <div class="video-grid">
            <video id="remote-video" autoplay playsinline></video>
            <video id="local-video" autoplay muted playsinline></video>
        </div>
        <div class="call-overlay-info">
            <h4 id="active-call-status">Conectando...</h4>
        </div>
        <div class="call-controls-bar">
            <button id="btn-toggle-mic" class="control-btn"><i class="material-icons">mic</i></button>
            <button id="btn-toggle-cam" class="control-btn"><i class="material-icons">videocam</i></button>
            <button id="btn-global-hangup" class="control-btn hangup"><i class="material-icons">call_end</i></button>
        </div>
    </div>
</div>

<style>
    .global-modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.9); z-index: 99999;
        display: flex; justify-content: center; align-items: center;
        backdrop-filter: blur(5px);
    }
    
    /* Estilos Alerta Entrante */
    .incoming-card {
        background: white; padding: 30px; border-radius: 20px;
        text-align: center; width: 90%; max-width: 320px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        animation: popIn 0.3s ease;
    }
    .avatar-wrapper { width: 100px; height: 100px; margin: 0 auto 15px; }
    .pulsing-avatar {
        width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
        border: 3px solid #4CAF50;
        animation: pulse 1.5s infinite;
    }
    .btn-circle {
        width: 60px; height: 60px; border-radius: 50%; border: none;
        color: white; font-size: 24px; cursor: pointer; margin: 0 15px;
        transition: transform 0.2s;
        display: inline-flex; justify-content: center; align-items: center;
    }
    .btn-circle:active { transform: scale(0.9); }
    .reject { background: #f44336; }
    .accept { background: #4CAF50; animation: bounce 1s infinite; }

    /* Estilos Video Activo */
    .video-wrapper {
        position: relative; width: 100%; height: 100%; max-width: 1000px; max-height: 80vh;
        background: #000; display: flex; flex-direction: column;
    }
    .video-grid { position: relative; width: 100%; height: 100%; overflow: hidden; }
    #remote-video { width: 100%; height: 100%; object-fit: cover; }
    #local-video {
        position: absolute; bottom: 20px; right: 20px;
        width: 120px; height: 160px; object-fit: cover;
        border: 2px solid white; border-radius: 8px; background: #333;
        z-index: 10;
    }
    .call-controls-bar {
        position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
        display: flex; gap: 20px; z-index: 20;
    }
    .control-btn {
        width: 50px; height: 50px; border-radius: 50%; border: none;
        background: rgba(255,255,255,0.2); color: white; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .control-btn.hangup { background: #f44336; }
    .control-btn.active { background: white; color: #333; }
    .call-overlay-info {
        position: absolute; top: 20px; left: 20px; color: white; 
        background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px; z-index: 20;
    }

    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }
    @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
</style><script src="sistema_llamadas.js"></script>


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manzanas - AgroConexión</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="detalle_producto.css">
    <link rel="stylesheet" type="text/css" href="detalle_producto_mobile.css">
</head>
<body class="grid_container">

    <div class="toggle-button">
        <i class="material-icons">menu</i>
    </div>

    <aside class="aside_left">
        <ul>
            <li>
                <a href="index.php" class="logo">
                    <img src="./img/logo.png" alt="Logo AgroConexión">
                    <span class="nav-item">AgroConexión</span>
                </a>
            </li>

                            <li><a href="login.php"><i class="material-icons">login</i><span class="nav-item">Iniciar Sesión</span></a></li>
                    </ul>
    </aside>

    
    <header class="header">
        <img id="header-img" src="./img/header.jpg" alt="Header de AgroConexión">
    </header>

    <script>
        // Array de imágenes generado por PHP
        const headerImages = [".\/img\/header.jpg",".\/img\/header1.jpg"];
        let currentIndex = 0;
        function changeHeaderImage() {
            currentIndex = (currentIndex + 1) % headerImages.length;
            document.getElementById('header-img').src = headerImages[currentIndex];
        }
        setInterval(changeHeaderImage, 30000);
    </script>

    <nav class="navbar">
        <ul class="navbar-search">
            <li>
                <div class="search-container">
                    <form id="global-search-form" action="search.php" method="GET" style="display: flex; width: 100%; gap: 10px;">
                        <input type="search" id="global-search-input" name="q" placeholder="Buscar productos...">
                        <button type="submit" id="global-search-button">Buscar</button>
                    </form>
                </div>
            </li>
        </ul>
        
        <ul class="navbar-actions">            

            <li>
                <a href="agregar_producto.php" class="upload-link">
                    <i class="material-icons">upload_file</i>
                    <span class="nav-item">Publicar producto</span>
                </a>
            </li>
            
            <li class="user-welcome" style="font-weight: bold; font-size: 0.9rem;">
                Hola, Invitado            </li>
        </ul>
    </nav>

    <aside class="aside_right">

        <div class="dolar">
            <h3>Dólar (USD) - BCV</h3>
            <div class="price">448,37 BS</div>
            <div class="date">Actualizado: 17-03-2026 10:47</div>
        </div>

        <div class="dolar" style="margin-top: 20px;">
            <h3>Yuan (CNY) - BCV</h3>
            <div class="price">65,03 BS</div>
            <div class="date">Actualizado: 17-03-2026 10:47</div>
        </div>

        <div class="denuncia">
            <h3>Denuncia la especulación</h3>
            <a href="https://linktr.ee/Sundde_ve" target="_blank" rel="noopener noreferrer">
                <img src="./img/denuncia_sundde.jpg" alt="Denuncia Sundde">
            </a>
        </div>

    </aside>

    <main class="main">
                    
            <div class="product-detail-card">
                <div class="detail-image-container">
                    
                    <img src="uploads/6966a243c1206.jpg" 
                         alt="Manzanas" 
                         class="detail-image"
                         onerror="this.src='./img/default_product.png';">
                     
                     
                </div>
                
                <div class="detail-info-container">
                    <h1 class="detail-title">Manzanas</h1>
                    <p class="detail-description">
                        Manzanas de calidad premium                                            </p>

                    <div class="detail-price-section">
                        <p class="price-header-text">
                            Referencia de Valor por caja                        </p>
                        <div class="price-row bs">
                            <span class="label">BS:</span>
                            <span class="value">26.902,12</span>
                        </div>
                        <div class="price-row usd">
                            <span class="label">USD:</span>
                            <span class="value">60,00</span>
                        </div>
                        <div class="price-row cny">
                            <span class="label">YUAN:</span>
                            <span class="value">413,70</span>
                        </div>
                    </div>

                    <div class="product-meta">
                        <div class="product-location">
                            <i class="material-icons">location_on</i>
                            <span>Trujillo, Boconó</span>
                        </div>
                        <div class="product-date">
                            <i class="material-icons">storefront</i>
                            <span>Publicado por: 
                                <br>
                                <a href="perfil.php?id=3" class="vendor-profile-link">
                                    Samuel Valenzuela 
                                </a>
                            </span>
                        </div>
                                            </div>
                    
                                    </div>
            </div>

                            <p class="login-msg"><i class="material-icons">lock</i> <a href="login.php" class="login-link-button">Inicia sesión</a> para contactar.</p>
            
            <div class="comments-section">
                <h3>Comentarios y Calificaciones</h3>
                                    <p>Debes <a href="login.php" class="login-link-button">iniciar sesión</a> para comentar.</p>
                
                <div class="comment-list">
                                            <p>Sé el primero en comentar este producto.</p>
                                    </div>
            </div>

            </main>


    <script src="./js/actualizar_badge.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            
            // 1. CONTROL DEL MENÚ LATERAL MÓVIL
            const toggleButton = document.querySelector('.toggle-button');
            const asideLeft = document.querySelector('.aside_left');
            const gridContainer = document.querySelector('.grid_container');

            if (toggleButton && asideLeft) {
                toggleButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    asideLeft.classList.toggle('mobile-visible');
                    // Efecto de empuje en contenedor principal (opcional)
                    if (gridContainer) gridContainer.classList.toggle('minimized-menu');
                });

                document.addEventListener('click', (e) => {
                    if (asideLeft.classList.contains('mobile-visible') && 
                        !asideLeft.contains(e.target) && 
                        !toggleButton.contains(e.target)) {
                        asideLeft.classList.remove('mobile-visible');
                    }
                });
            }

            // 2. CONTROL DE SUBMENÚS (ACORDEÓN)
            const submenuToggles = document.querySelectorAll('.toggle-submenu');
            submenuToggles.forEach(item => {
                item.addEventListener('click', function(e) {
                    // Evitar que el click en el enlace dispare el acordeón si no se quiere
                    if (e.target.closest('a') === this.querySelector('a')) {
                        e.preventDefault();
                        this.classList.toggle('open');
                    }
                });
            });

            // 3. LÓGICA DE REDIRECCIÓN AL CHAT
            const chatBtn = document.getElementById('iniciar-chat-producto');
            if (chatBtn) {
                chatBtn.addEventListener('click', function() {
                    const receptorId = this.getAttribute('data-receptor-id');
                    const productoId = this.getAttribute('data-producto-id');
                    
                    if (receptorId && productoId) {
                        // Enviamos a mensajes.php. Allí el script JS tomará estos parámetros
                        // y buscará si existe el chat. Si no, mostrará la interfaz vacía.
                        window.location.href = `./mensajes.php?receptor_id=${encodeURIComponent(receptorId)}&producto_id=${encodeURIComponent(productoId)}`;
                    }
                });
            }
        });

        // 4. BLOQUEO VISUAL DEL BOTÓN DE CARRITO
        function handleAddToCartCritical(form, productId) {
            const button = document.getElementById('btn-critical-' + productId);
            if (!button) return true;
            const originalHTML = button.innerHTML;

            button.innerHTML = '<i class="material-icons">lock</i> PROCESANDO...';
            button.disabled = true;
            button.style.opacity = '0.6';

            // Timeout de seguridad por si la red falla
            setTimeout(() => {
                button.innerHTML = originalHTML;
                button.disabled = false;
                button.style.opacity = '1';
            }, 4000);

            return true; // permite enviar el formulario
        }
    </script>
    <script src="./js/filtro_main.js"></script>
    <script src="./js/search_logic.js"></script>

    <style>
    /* Fondo oscuro */
    #notif-permission-modal {
        display: none; 
        position: fixed;
        z-index: 99999; 
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85); /* Un poco más oscuro */
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    /* Caja del mensaje */
    .notif-modal-content {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 90%;
        max-width: 350px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .notif-modal-icon {
        font-size: 50px;
        margin-bottom: 15px;
        display: block;
    }

    .notif-modal-title {
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 10px;
        color: #2e6b01;
    }

    .notif-modal-text {
        font-size: 0.95rem;
        color: #555;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    /* Botón Principal */
    .btn-enable-notif {
        background: #3a8901;
        color: white;
        border: none;
        padding: 14px;
        border-radius: 50px; /* Botón redondo */
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        box-shadow: 0 4px 15px rgba(58, 137, 1, 0.4);
        transition: transform 0.2s;
    }
    .btn-enable-notif:active { transform: scale(0.95); }

    /* Botón Secundario */
    .btn-dismiss-notif {
        margin-top: 15px;
        background: transparent;
        border: none;
        color: #999;
        cursor: pointer;
        font-size: 0.85rem;
        text-decoration: underline;
    }

    @keyframes popIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
</style>

<div id="notif-permission-modal">
    <div class="notif-modal-content">
        <span class="notif-modal-icon">🔔</span>
        <div class="notif-modal-title">¡Conéctate!</div>
        <div class="notif-modal-text">
            Para escuchar cuando te llamen o te escriban, necesitamos activar el sonido y las alertas en este dispositivo.
        </div>
        <button id="btn-request-permission" class="btn-enable-notif">
            ACTIVAR AHORA
        </button>
        <button id="btn-dismiss-permission" class="btn-dismiss-notif">
            Continuar sin sonido
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Evitar doble ejecución
    if (window.notifSystemLoaded) return;
    window.notifSystemLoaded = true;

    // Configuración
    const CHECK_INTERVAL = 5000; 
    const notifAudio = new Audio('./sound/iphone-notificacion.mp3');
    
    let audioUnlocked = false;
    let lastMsgCount = 0;
    let lastDeliveryCount = 0;
    let isFirstLoad = true;

    // Referencias DOM
    const modal = document.getElementById('notif-permission-modal');
    const btnRequest = document.getElementById('btn-request-permission');
    const btnDismiss = document.getElementById('btn-dismiss-permission');

    // --- 1. LÓGICA DE INICIO (MODIFICADA) ---
    function initSystem() {
        // CASO A: ¿El navegador ya tiene permiso 'granted'?
        if ("Notification" in window && Notification.permission === "granted") {
            console.log("✅ Notificaciones ya permitidas. Omitiendo modal.");
            
            // Intentamos desbloqueo silencioso inmediato
            unlockAudioSilent();

            // Truco: Como no mostramos el botón, el audio sigue bloqueado por el navegador
            // hasta que el usuario interactúe. Ponemos un listener global de un solo uso.
            document.addEventListener('click', () => {
                unlockAudioNow();
            }, { once: true }); // 'once: true' hace que se elimine solo tras el primer clic
            
            return; // SALIMOS AQUÍ, no mostramos el modal.
        }

        // CASO B: No tiene permiso o está en 'default' (preguntar)
        const sessionActive = sessionStorage.getItem('agro_notif_active');

        if (!sessionActive) {
            // Si no ha decidido en esta sesión, mostramos modal
            setTimeout(() => {
                modal.style.display = 'flex';
            }, 1000);
        } else {
            // Si ya decidió (aunque sea 'no'), intentamos audio silencioso por si acaso
            unlockAudioSilent();
        }
    }

    // --- 2. BOTÓN "ACTIVAR AHORA" ---
    btnRequest.addEventListener('click', () => {
        // A. Intentar reproducir audio (Desbloqueo)
        unlockAudioNow();

        // B. Pedir permiso de notificación
        if ("Notification" in window) {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    // Éxito total
                    sessionStorage.setItem('agro_notif_active', 'true');
                    modal.style.display = 'none';
                    // Feedback sonoro y visual
                    new Notification("AgroConexión", { body: "🔊 Sonido y Alertas Activados", icon: './img/logo.png' });
                } 
                else if (permission === 'denied') {
                    // Si está bloqueado, avisar manual
                    alert("⚠️ Has bloqueado las notificaciones anteriormente.\n\nPara activarlas, toca el candado (🔒) en la barra de dirección y selecciona 'Permisos' > 'Restablecer'.");
                    modal.style.display = 'none';
                    sessionStorage.setItem('agro_notif_active', 'true');
                } 
                else {
                    // Cerró el diálogo sin decidir
                    modal.style.display = 'none';
                }
            });
        } else {
            modal.style.display = 'none';
        }
    });

    // Botón "Continuar sin sonido"
    btnDismiss.addEventListener('click', () => {
        modal.style.display = 'none';
        sessionStorage.setItem('agro_notif_active', 'true'); 
    });

    // --- 3. FUNCIONES DE AUDIO ---
    function unlockAudioNow() {
        if(audioUnlocked) return;
        // Reproducir y pausar instantáneamente para 'calentar' el motor de audio
        notifAudio.play().then(() => {
            notifAudio.pause();
            notifAudio.currentTime = 0;
            audioUnlocked = true;
            console.log("Audio desbloqueado.");
        }).catch(e => {
            // Es normal que falle si no hay interacción del usuario aún
            // console.log("Esperando interacción para audio..."); 
        });
    }

    function unlockAudioSilent() {
        // Intento pasivo
        notifAudio.play().then(() => {
            notifAudio.pause();
            notifAudio.currentTime = 0;
            audioUnlocked = true;
        }).catch(e => {});
    }

    // --- 4. ENVIAR NOTIFICACIÓN ---
    function sendNotification(title, body, type) {
        // Vibrar (móviles)
        if (navigator.vibrate) navigator.vibrate([200, 100, 200]);

        // Sonar
        // Intentamos reproducir. Si el navegador lo bloquea, el catch lo atrapa.
        if (audioUnlocked) {
            notifAudio.currentTime = 0;
            notifAudio.play().catch(e => {});
        } else {
            // Último intento por si el usuario acaba de hacer clic
            notifAudio.play().then(() => {
                audioUnlocked = true;
            }).catch(e => {});
        }

        // Mostrar Notificación Visual
        if ("Notification" in window && Notification.permission === "granted") {
            // Solo notificar si la app está en segundo plano o es móvil
            if (document.hidden || window.innerWidth < 900) {
                try {
                    const notif = new Notification(title, {
                        body: body,
                        icon: type === 'delivery' ? './img/delivery_icon.png' : './img/logo.png',
                        tag: type 
                    });
                    notif.onclick = () => { 
                        window.focus(); 
                        window.location.href = type === 'delivery' ? 'perfild.php' : 'mensajes.php';
                        notif.close(); 
                    };
                } catch(e) {}
            }
        }
    }

    // --- 5. POLLING Y ACTUALIZACIÓN VISUAL ---
    function checkNotifications() {
        fetch('check_estado.php')
            .then(response => response.json())
            .then(data => {
                const currentMsg = parseInt(data.mensajes) || 0;
                const currentDely = parseInt(data.delivery) || 0;

                updateBadge('unread-messages-badge', currentMsg);
                updateBadge('delivery-badge', currentDely);

                if (!isFirstLoad) {
                    if (currentMsg > lastMsgCount) {
                        sendNotification('Nuevo Mensaje', `Tienes ${currentMsg} mensajes sin leer`, 'msg');
                    }
                    if (currentDely > lastDeliveryCount) {
                        sendNotification('Alerta Delivery', `Nueva solicitud de transporte`, 'delivery');
                    }
                }

                lastMsgCount = currentMsg;
                lastDeliveryCount = currentDely;
                isFirstLoad = false;
            })
            .catch(e => {});
    }

    function updateBadge(elementId, count) {
        const el = document.getElementById(elementId);
        if (el) {
            el.innerText = count > 99 ? '99+' : count;
            if (count > 0) {
                if(getComputedStyle(el).display === 'none') el.style.display = 'flex';
            } else {
                el.style.display = 'none';
            }
        }
    }

    // Iniciar
    initSystem();
    setInterval(checkNotifications, CHECK_INTERVAL);
    checkNotifications();
});
</script>    
    <footer class="footer">Correo: samueljvalenzuela@gmail.com</footer> 
</body>
</html>