Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AzXKjwP5b26Z_o1fzGMwJJ5"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A6hnXBuRm0BhK_UDHyQFLsY"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"ARf-X2LmzysPIwvSZrvDHob"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AX4fBFdXZ52hwwHnIpEpOM8"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AkerIkpTosC560ZV1zMX5f2"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"Av6AwF4jdpx5-xt286KSxgs"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AygR9KQz-OK8a76VYLAIhkP"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"Ax3KM1GWZIyKQCZhY1DATgN"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A9UwXuMTAUvNQ0LekuAnhrW"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AWEbfBapJmuwp_PpZgDrRM1"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"Aizv9rMAwkJ5HNs7tIV2anr"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A0j2Eyb4PhM_IkzWxl9wlFz"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"Ah9I4YGZu_Y4mSokU-J6GHQ"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AcZ8pHh23NY3PfMIuufYF9F"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A4U_OLRzGBxV_BqX5XxoZDx"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AKQxl91_DiLX-1mmXIWGLva"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AVKfTu3sa_0ils9UJJGdRTF"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A5ZIzj8XJmD08YogkyRWvCu"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AEpnoCXhJ4-cXtVWcBwt8ns"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AptwtA83LJRlqoX4wOLICDZ"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AsvHqvPoRa6bWk9adEeH8n4"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AVe7xSga2LeU1S2tUKfoSyw"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AW-S0nvn_osuoQ5nwC9KRK3"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"ABewWZABLc86Yr2cJZ8u4pU"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"A8l4Tz548ADwmu0hiT1CN1p"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AyLHhfXKYLjshOMXlooVD0z"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"ATBESm_bFJxOamq7LY1oIM1"}}Error al sincronizar plantilla: {"error":{"message":"API access deactivated. To reactivate, go to developer.facebook.com and complete developer registration.","type":"OAuthException","code":200,"fbtrace_id":"AVakUx5F6B3MfcNPaqqNA9i"}}<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>Whatsapp</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>

<body>

    <style>
        #messages img{
            max-width: 250px;
            height: auto;
            width: 100%;
        }
		
		.hide{
			display: none !important;
		}
		
		#navbar .nav-link{
			display: inline-block !important;
		}
		
		#search-chat{
			display: none;
		}
		
		#search-chat input{
			width: 100%;
			background: #e3e3e3;
			border: none;
			padding: 10px;
		}

		.chat-list-item.active{
			background-color: #DFDFDF;
		}
		
    </style>

	<div class="container-fluid" id="main-container" style="background: hsl(0, 0%, 80%);">
		<div class="row h-100">
			<div class="col-12 col-sm-5 col-md-4 d-flex flex-column" id="chat-list-area" style="position:relative; background: #FFF;">

				<!-- Navbar -->
				<div class="row d-flex flex-row align-items-center p-2" id="navbar">
					<img alt="Profile Photo" class="img-fluid rounded-circle mr-2" style="height:50px; cursor:pointer;" onclick="showProfileSettings()" id="display-pic" src="images/asdsd12f34ASd231.png">
					<div class="text-white font-weight-bold" id="username"></div>
					<div class="nav-item dropdown ml-auto">
						<a class="nav-link" href="javascript:showModalVentaTarot()" role="button"><i class="fa fa-shopping-basket text-white"></i></a>
						<a class="nav-link" href="javascript:showSearchForm()" role="button"><i class="fas fa-search text-white"></i></a>						
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v text-white"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
							<!--<a class="dropdown-item" href="#">New Group</a>
							<a class="dropdown-item" href="#">Archived</a>
							<a class="dropdown-item" href="#">Starred</a>
							<a class="dropdown-item" href="#">Settings</a>-->
							<a class="dropdown-item" href="logout.php">Cerrar sesión</a>
						</div>
					</div>
				</div>
				
				<div class="row" id="search-chat">
				    <form onsubmit="buscarConversacion(); return false;">
				        <input type="text" placeholder="Buscar por nombre o número..." />
				    </form>
				</div>

				<script>
					// Función para búsqueda inmediata con actualización de conversaciones
					buscarConversacion = function() {
					    var busqueda = $("#search-chat input").val();
					    
					    if(chatActualizandose) {
					        console.log("Sistema ocupado, reintentando búsqueda en 200ms...");
					        setTimeout(function() {
					            buscarConversacion();
					        }, 200);
					        return false;
					    }
					    
					    console.log("Búsqueda inmediata: " + busqueda);
					    chatActualizandose = true;
					    
					    var idusuario = $("#messages").attr("data-idusuario");
					    var estado_ventana = "cerrada";
					    
					    if($("#messages").is(":visible")){
					        estado_ventana = "abierta";
					    }
					    
					    // Mostrar indicador de carga
					    $("#chat-list").html('<div class="text-center p-3"><i class="fas fa-spinner fa-spin"></i> Buscando...</div>');
					    
					    $.ajax({
					        type: 'post',
					        dataType: 'json',
					        url: 'includes/controlador.php',
					        timeout: 10000,
					        data: {
					            'accion': 'actualizarChat',
					            'idusuario': idusuario,
					            'estado_ventana': estado_ventana,
					            'busqueda': busqueda,
					            'actualizar_conversaciones': true  // Forzar actualización de conversaciones
					        },
					    }).done(function(datos) {
					        if(datos.error != true) {
					            // Actualizar lista de conversaciones
					            if(datos.conversaciones){
					                $("#chat-list").html(datos.conversaciones);
					            } else {
					                $("#chat-list").html('<div class="text-center p-3 text-muted">No se encontraron resultados</div>');
					            }
					            
					            // Actualizar mensajes si hay conversación abierta
					            if(estado_ventana == "abierta" && datos.conversacion){
					                $("#messages").html(datos.conversacion);
					                
					                if(idusuario != ""){
					                    if(datos.permite_respuesta == false){
					                        $("#input-area").addClass("hide");
					                        $("#templates-area").show();
					                    }else{
					                        $("#input-area").removeClass("hide");
					                        $("#templates-area").hide();
					                    }
					                }
					            }
					            
					            // Actualizar título si hay mensajes no leídos
					            if (datos.noleidos > 0) {
					                if(!interval){
					                    interval = setInterval(function() {
					                        if (isOriginalTitle) {
					                            if(datos.noleidos == 1){
					                                document.title = datos.noleidos + " MENSAJE NUEVO!!!";
					                            }else{
					                                document.title = datos.noleidos + " MENSAJES NUEVOS!!!";    
					                            }                                            
					                        } else {
					                            document.title = datos.noleidos;
					                        }
					                        isOriginalTitle = !isOriginalTitle;
					                    }, 1000);
					                }
					            } else {
					                if (interval) {
					                    clearInterval(interval);
					                    interval = null;
					                }
					                document.title = originalTitle;
					            }
					        } else {
					            $("#chat-list").html('<div class="text-center p-3 text-danger">Error al buscar</div>');
					        }
					    }).fail(function(xhr, status, error) {
					        console.log("Error en búsqueda: " + error);
					        $("#chat-list").html('<div class="text-center p-3 text-danger">Error de conexión</div>');
					    }).always(function() {
					        chatActualizandose = false;
					    });
					    
					    return false; // Prevenir el submit del formulario
					}

					// Opcional: También actualizar al escribir (con debounce)
					var timeoutBusqueda = null;
					$("#search-chat input").on('input', function() {
					    // Limpiar timeout anterior
					    if(timeoutBusqueda) {
					        clearTimeout(timeoutBusqueda);
					    }
					    
					    // Si el campo está vacío, actualizar inmediatamente
					    if($(this).val() === "") {
					        timeoutBusqueda = setTimeout(function() {
					            buscarConversacion();
					        }, 300);
					    }
					    // Si hay texto, esperar 800ms después de dejar de escribir
					    else {
					        timeoutBusqueda = setTimeout(function() {
					            buscarConversacion();
					        }, 800);
					    }
					});
				</script>

				<!-- Chat List -->
				<div class="row" id="chat-list" style="overflow:auto;height: calc(100vh - 66px);">
					
				</div>

				<!-- Profile Settings -->
				<div class="d-flex flex-column w-100 h-100" id="profile-settings">
					<div class="row d-flex flex-row align-items-center p-2 m-0" style="background:#009688; min-height:65px;">
						<i class="fas fa-arrow-left p-2 mx-3 my-1 text-white" style="font-size: 1.5rem; cursor: pointer;" onclick="hideProfileSettings()"></i>
						<div class="text-white font-weight-bold">Profile</div>
					</div>
					<div class="d-flex flex-column" style="overflow:auto;">
						<img alt="Profile Photo" class="img-fluid rounded-circle my-5 justify-self-center mx-auto" id="profile-pic">
						<input type="file" id="profile-pic-input" class="d-none">
						<div class="bg-white px-3 py-2">
							<div class="text-muted mb-2"><label for="input-name">Your Name</label></div>
							<input type="text" name="name" id="input-name" class="w-100 border-0 py-2 profile-input">
						</div>
						<div class="text-muted p-3 small">
							This is not your username or pin. This name will be visible to your WhatsApp contacts.
						</div>
						<div class="bg-white px-3 py-2">
							<div class="text-muted mb-2"><label for="input-about">About</label></div>
							<input type="text" name="name" id="input-about" value="" class="w-100 border-0 py-2 profile-input">
						</div>
					</div>

				</div>
			</div>

			<!-- Message Area -->
			<div class="d-none d-sm-flex flex-column col-12 col-sm-7 col-md-8 p-0 h-100" id="message-area" style="display:none !important">
				<div class="w-100 h-100 overlay d-none"></div>

				<!-- Navbar -->
				<div class="row d-flex flex-row align-items-center p-2 m-0 w-100" id="navbar">
					<div class="d-block d-sm-none">
						<i class="fas fa-arrow-left p-2 mr-2 text-white" style="font-size: 1.5rem; cursor: pointer;" onclick="showChatList()"></i>
					</div>
					<!--<a href="#"><img src="images/0923102932_aPRkoW.jpg" alt="Profile Photo" class="img-fluid rounded-circle mr-2" style="height:50px;" id="pic"></a>-->
					<div class="d-flex flex-column">
						<div class="text-white font-weight-bold" id="name"></div>
						<div class="text-white small" id="details"></div>
					</div>
					<div class="d-flex flex-row align-items-center ml-auto">
						<!--<a href="#"><i class="fas fa-search mx-3 text-white d-none d-md-block"></i></a>
						<a href="#"><i class="fas fa-paperclip mx-3 text-white d-none d-md-block"></i></a>
						<a href="#"><i class="fas fa-ellipsis-v mr-2 mx-sm-3 text-white"></i></a>-->
						<a href="javascript:bloquearUsuario()" title="Bloquear usuario"><i class="fas fa-ban mr-2 mx-sm-3 text-white"></i></a>
					</div>
				</div>

				<!-- Messages -->
				<div class="d-flex flex-column" id="messages">
					
				</div>

				<!-- Input -->
				<div class="justify-self-end align-items-center flex-row d-flex" id="input-area">
					<!--<a href="#"><i class="far fa-smile text-muted px-3" style="font-size:1.5rem;"></i></a>-->
					<a href="javascript:examinarArchivo()"><i class="fas fa-paperclip mx-3 text-muted d-none d-md-block"></i></a>
					<a href="javascript:mostrarPlantillas()"><i class="fas fa-list-ul mx-3 text-muted d-none d-md-block"></i></a>
					
					<textarea type="text" name="message" id="input" placeholder="Escribir mensaje" class="flex-grow-1 border-0 px-3 py-2 my-3 rounded shadow-sm"></textarea>
					<i class="fas fa-paper-plane text-muted px-3" style="cursor:pointer;" onclick="enviarChat()"></i>
				</div>
				
				<div class="justify-self-end align-items-center flex-row" id="templates-area" style="display:none; background: hsl(0, 0%, 95%);">
					<a href="javascript:mostrarPlantillas()"><i class="fas fa-list-ul mx-3 text-muted d-none d-md-block"></i></a>
					
					<!--<select id="plantillas" name="plantillas">
						<option value="">Selecciona plantilla para enviar</option>
						<option value="soporte_tarotista">Soporte tarotista</option>
						<option value="lectura_lista">Lectura lista</option>
					</select>
					<i class="fas fa-paper-plane text-muted px-3" style="cursor:pointer;" onclick="enviarPlantilla('')"></i>-->
					
					<!--<small>Selecciona plantilla para enviar:</small><br>
					<a href="javascript:enviarPlantilla('soporte_tarotista')">Soporte tarotista</a>-->
					<br>
				</div>
				
			</div>
		</div>
	</div>
	
	<form id="uploadForm" style="display: none;">
		<input type="hidden" name="idusuario" value="" />
		<input type="hidden" name="conversacion" value="" />
		
		<input type="file" id="fileInput" name="archivo" onchange="subirArchivo()">
	</form>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="//code.jquery.com/jquery-1.8.3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<!--<script src="datastore.js"></script>
	<script src="date-utils.js"></script>
	<script src="script.js"></script>-->




    <!-- Modal -->
    <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form onsubmit="accesoUsuario(); return false;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Acceso usuarios</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        
                        <div class="form-group">
                            <label for="inputUser">Usuario</label>
                            <input type="text" class="form-control" id="inputUser" required>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword">Contraseña</label>
                            <input type="password" class="form-control" id="inputPassword" required>
                        </div>
                       
                    </div>
                    <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Entrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

	
	<div class="modal fade" id="modalTemplates" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLongTitle">Plantillas</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">

				</div>
				
            </div>
        </div>
    </div>
	
	<style>
		.custom-modal{
			max-width: 1000px;
			max-height: 80vh;
			
		}
		
		.custom-modal .modal-body{
			height:550px;
		}
		
	</style>
	
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
	
	<div class="modal fade " id="modalVentaTarot" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog custom-modal" role="document">
            <div class="modal-content">
                
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLongTitle">Generar pedido: <span class="lblTelefono"></span></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					
					<!--<iframe src="https://tarot-payment.atssa.es/panel/index_pwhatsapp.php?s=citas&m=reservar&from=panel-whatsapp&idmedios=" width="100%" height="600"></iframe>-->

				</div>
				
            </div>
        </div>
    </div>

	<script>		

        let originalTitle = document.title; // Guardamos el título original
        let isOriginalTitle = true; // Variable para alternar entre el título original y el nuevo
        let interval;

        accesoUsuario = function ( )
        {
            var usuario     = $("#inputUser").val();
            var clave       = $("#inputPassword").val();

            $.ajax({
                type: 'post',
                dataType: 'json',
                url: 'includes/controlador.php',
                data: {
                    'accion'        : 'accesoUsuario',
                    'usuario'       : usuario,
                    'clave'         : clave,
                },
            }).done(
                function(datos)
                {
                    if(datos.error != true)
                    {

                        $("#modalLogin").modal('hide');
                        $("#username").html(usuario);
						location.reload();
                        
                    }else{
                        alert(datos.message);
                    }

                }
            );

        }


        var chatActualizandose = false;
		var proximaActualizacion = null;
		var cicloPrincipalActivo = true;
		var contadorActualizaciones = 0;
		var intentosReconexion = 0;
		var maxIntentosReconexion = 3;
		var tiempoEsperaBase = 5000;

		// Sistema de recuperación automática
		function reiniciarSistemaActualizacion() {
		    console.log("Reiniciando sistema de actualización...");
		    
		    // Limpiar cualquier timeout pendiente
		    if(proximaActualizacion) {
		        clearTimeout(proximaActualizacion);
		        proximaActualizacion = null;
		    }
		    
		    // Resetear flags
		    chatActualizandose = false;
		    cicloPrincipalActivo = true;
		    intentosReconexion = 0;
		    
		    // Reiniciar el ciclo
		    setTimeout(function() {
		        actualizarChat();
		    }, 1000);
		}

		// Función principal que mantiene el ciclo de actualización
		actualizarChat = function(scroll) {
		    // Cancelar si ya está en proceso
		    if(chatActualizandose) {
		        console.log("actualizarChat ya se está ejecutando, reprogramando...");
		        
		        // Reprogramar para más tarde si está bloqueado
		        if(!proximaActualizacion) {
		            proximaActualizacion = setTimeout(function() {
		                proximaActualizacion = null;
		                actualizarChat(scroll);
		            }, tiempoEsperaBase);
		        }
		        return;
		    }

		    console.log("actualizarChat - ciclo normal");
		    cicloPrincipalActivo = true;
		    ejecutarActualizacion(scroll, true);
		}

		// Función para actualización inmediata (sin crear nuevo ciclo)
		actualizarChatInmediato = function(scroll) {
		    // Si está ocupado, esperar un poco y reintentar
		    if(chatActualizandose) {
		        console.log("Sistema ocupado, reintentando en 500ms...");
		        setTimeout(function() {
		            actualizarChatInmediato(scroll);
		        }, 500);
		        return;
		    }

		    console.log("actualizarChat - actualización inmediata");
		    ejecutarActualizacion(scroll, false);
		}

		// Función que hace el trabajo real
		ejecutarActualizacion = function(scroll, programarSiguiente) {
		    chatActualizandose = true;
		    
		    var idusuario = $("#messages").attr("data-idusuario");
		    var estado_ventana = "cerrada";
		    var busqueda = $("#search-chat input").val();
		    
		    if($("#messages").is(":visible")){
		        estado_ventana = "abierta";
		    }

		    var actualizarConversaciones = false;
		    if(contadorActualizaciones % 2 == 0){
		        actualizarConversaciones = true;
		    }
		    
		    // Timeout dinámico basado en intentos de reconexión
		    var timeoutActual = 10000 + (intentosReconexion * 2000);
		    
		    $.ajax({
		        type: 'post',
		        dataType: 'json',
		        url: 'includes/controlador.php',
		        timeout: timeoutActual,
		        data: {
		            'accion': 'actualizarChat',
		            'idusuario': idusuario,
		            'estado_ventana': estado_ventana,
		            'busqueda': busqueda,
		            'actualizar_conversaciones': actualizarConversaciones
		        },
		    }).done(function(datos) {
		        // Resetear contador de reintentos en éxito
		        intentosReconexion = 0;
		        
		        if(datos.error != true) {
		            $("#messages").html(datos.conversacion);
		            
		            if(estado_ventana == "abierta" && idusuario != ""){
		                if(datos.permite_respuesta == false){
		                    $("#input-area").addClass("hide");
		                    $("#templates-area").show();
		                }else{
		                    $("#input-area").removeClass("hide");
		                    $("#templates-area").hide();
		                }
		            }

		            if(scroll == true){
		                var altura = $("#messages").prop("scrollHeight");
		                $("#messages").scrollTop(altura);
		                var objDiv = document.getElementById("messages");
		                if(objDiv) {
		                    objDiv.scrollTop = objDiv.scrollHeight;
		                }
		            }

		            if(datos.conversaciones){
		                $("#chat-list").html(datos.conversaciones);

		                if (datos.noleidos > 0) {
		                    if(!interval){
		                        interval = setInterval(function() {
		                            if (isOriginalTitle) {
		                                if(datos.noleidos == 1){
		                                    document.title = datos.noleidos + " MENSAJE NUEVO!!!";
		                                }else{
		                                    document.title = datos.noleidos + " MENSAJES NUEVOS!!!";    
		                                }                                            
		                            } else {
		                                document.title = datos.noleidos;
		                            }
		                            isOriginalTitle = !isOriginalTitle;
		                        }, 1000);
		                    }
		                } else {
		                    if (interval) {
		                        clearInterval(interval);
		                        interval = null;
		                    }
		                    document.title = originalTitle;
		                }
		            }
		        } else {
		            if(datos.message == "Operadora no logeada"){
		                $("#modalLogin").modal();
		                $("#messages").html("");
		                $("#chat-list").html("");
		                cicloPrincipalActivo = false; // Detener el ciclo si no hay sesión
		            }
		        }
		    }).fail(function(xhr, status, error) {
		        console.log("Error en AJAX: " + status + " - " + error);
		        intentosReconexion++;
		        
		        // Si es timeout o error de red, intentar recuperar
		        if(status === "timeout" || status === "error") {
		            console.log("Intento de reconexión " + intentosReconexion + " de " + maxIntentosReconexion);
		            
		            if(intentosReconexion >= maxIntentosReconexion) {
		                console.log("Máximo de reintentos alcanzado. Reiniciando sistema...");
		                setTimeout(reiniciarSistemaActualizacion, 3000);
		            }
		        }
		    }).always(function() {
		        chatActualizandose = false;
		        
		        // Solo programar el siguiente ciclo si se solicita Y el ciclo está activo
		        if(programarSiguiente && cicloPrincipalActivo) {
		            // Limpiar timeout anterior
		            if(proximaActualizacion) {
		                clearTimeout(proximaActualizacion);
		                proximaActualizacion = null;
		            }
		            
		            // Calcular tiempo de espera con backoff si hay errores
		            var tiempoEspera = tiempoEsperaBase;
		            if(intentosReconexion > 0) {
		                tiempoEspera = Math.min(tiempoEsperaBase * Math.pow(2, intentosReconexion), 30000);
		            }
		            
		            proximaActualizacion = setTimeout(function() {
		                proximaActualizacion = null;
		                actualizarChat();
		            }, tiempoEspera);
		        }
		    });
		    
		    contadorActualizaciones++;
		}

		// Monitoreo de salud del sistema cada 30 segundos
		setInterval(function() {
		    if(cicloPrincipalActivo && !chatActualizandose && !proximaActualizacion) {
		        console.log("Sistema de actualización detenido detectado. Reiniciando...");
		        reiniciarSistemaActualizacion();
		    }
		}, 30000);

		// Iniciar el sistema
		actualizarChat();	

        enviarChat = function ( )
		{
		    var mensaje = $("#input").val();
		    $("#input").val("");
		    var idusuario = $("#messages").attr("data-idusuario");

		    if(mensaje != ""){
		        $.ajax({
		            type: 'post',
		            dataType: 'json',
		            url: 'includes/controlador.php',
		            data: {
		                'accion': 'enviarChat',
		                'mensaje': mensaje,
		                'idusuario': idusuario
		            },
		        }).done(function(datos) {
		            if(datos.respuesta == 'ok') {
		                // ⭐ Actualización inmediata SIN crear nuevo ciclo
		                actualizarChatInmediato(true);
		            }
		        });
		    }
		}
		
		enviarPlantilla = function ( plantilla )
        {
			
			if(plantilla == ""){
				plantilla = $("select#plantillas option:selected").val();
			}

            //var mensaje = $("#input").val();
            $("#input").val("");
            var idusuario = $("#messages").attr("data-idusuario");

            /*$("#dialogChat .chat").attr("data-destinatario");

            $("#dialogChat .messages").append("<div class='me'>" + mensaje + "</div>");
            
            var altura = $("#dialogChat .messages").prop("scrollHeight")
            $("#dialogChat .messages").scrollTop(altura);

            $("#dialogChat textarea[name=mensaje]").val("");*/

            if(plantilla != ""){
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: 'includes/controlador.php',
                    data: {
                        'accion'        : 'enviarChat',
                        'plantilla'     : plantilla,
                        'idusuario'  	: idusuario
                    },
                }).done(
                    function(datos)
                    {
                        if(datos.respuesta == 'ok')
                        {
                        	
                            actualizarChatInmediato( true );
							$("#modalTemplates").modal('hide');

                            /*var parent = $("#chk_llamadas_entrantes");
                            var checkbox = parent.find('#chk_ll.boton-onoff');

                            if(accion == 1){
                                checkbox.addClass('checked');
                            }else{
                                checkbox.removeClass('checked');
                            }*/
                            
                        }
                    }
                );
            }
            
        }

        mostrarConversacion = function ( id, nombre, whatsapp, operadora_reciente )
		{

			$(".chat-list-item").removeClass("active");
			$("#id"+id).addClass("active");

		    if(operadora_reciente != "" && operadora_reciente != ""){
		        alert("Otra operadora está conversando con éste usuario");
		    }
		    
		    $("#modalTemplates .modal-body").html("");
		    $("#messages").html("<center>Cargando conversación...</center>");

		    if(id != ""){
		        $("#name").html(nombre);
		        $("#details").html(whatsapp);
		        $("input[name=conversacion]").val(whatsapp);

		        $("#messages").attr("data-idusuario", id);
		        $("input[name=idusuario]").val(id);
		        
		        // ⭐ Actualización inmediata SIN crear nuevo ciclo
		        actualizarChatInmediato(true);
		        
		        $("#message-area").show();

		        var altura = $("#dialogChat .messages").prop("scrollHeight")
		        $("#messages").scrollTop(altura);
		        
		        //cargar plantillas disponibles
		        $.ajax({
		            type: 'post',
		            dataType: 'json',
		            url: 'includes/controlador.php',
		            data: {
		                'accion': 'cargarPlantillas',
		                'idusuario': id
		            },
		        }).done(function(datos) {
		            $("#modalTemplates .modal-body").html(datos.plantillas);
		        });

		    } else {
		        $("#messages").attr("data-idusuario", "");
		    }
		}
		
		bloquearUsuario = function (  )
        {
			var idusuario = $("#messages").attr("data-idusuario");
			
			if(confirm("¿Deseas bloquear a éste usuario?")){
				
				
				$.ajax({
					type: 'post',
					dataType: 'json',
					url: 'includes/controlador.php',
					data: {
						'accion'        : 'bloquearUsuario',
						'idusuario'     : idusuario,
					},
				}).done(
					function(datos)
					{
						if(datos.error != true)
						{

							alert("Usuario bloqueado");   

						}else{
							//alert(datos.message);
						}

					}
				);

			}
		}
		
		function showSearchForm(){
			$("#search-chat").toggle();
		}
		
		function mostrarPlantillas(){
			$("#modalTemplates").modal();
		}
		
		function showModalVentaTarot(){
			
			/*$.ajax({
                type: 'post',
                dataType: 'json',
                url: 'includes/controlador-tarot.php',
                data: {
                    'accion'        : 'obtenerConsultas',
                },
            }).done(
                function(datos)
                {
                    if(datos.error != true)
                    {

                        $("#modalLogin").modal('hide');
                        $("#username").html(usuario);
                        
                    }else{
                        alert(datos.message);
                    }

                }
            );*/
			
			$("#modalVentaTarot .modal-body").html('<iframe src="https://tarot-payment.atssa.es/panel/index_pwhatsapp.php?s=citas&m=reservar&from=panel-whatsapp&idmedios=" width="100%" height="500"></iframe>');
			
			$("#modalVentaTarot").modal();
		}

    </script>
	
	<script>
        function examinarArchivo() {
            document.getElementById('fileInput').click();
        }

        // Esta función se llamará cuando el archivo sea seleccionado
        function subirArchivo() {
            var form = document.getElementById('uploadForm');
            var formData = new FormData(form);

            fetch('upload-media-whatsapp.php', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.text())
            .then(data => {
                console.log(data); // Puedes reemplazar esto con cualquier acción tras la carga
            })
            .catch(error => {
                console.error(error);
            });
        }
    </script>

</body>
</html>