Document<\/title>\n <\/head>\n\n <body>\n <style>\n \/* Estilos existentes para la barra lateral *\/\n \/* Estilos existentes para la barra lateral *\/\n.sidebar {\n width: 320px;\n background-color: #f7f7f7;\n padding: 20px;\n height: 50%;\n}\n\n.sidebar input,\n.sidebar select {\n width: 100%;\n margin-bottom: 15px;\n padding: 5px;\n border: 1px solid #ccc;\n}\n\n\/* Estilos para las pesta\u00f1as *\/\n.tabs {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n.tablink.active {\n background-color: #ddd; \/* Color de fondo para la pesta\u00f1a activa *\/\n font-weight: bold; \/* Texto en negrita para la pesta\u00f1a activa *\/\n}\n\n.tablink {\n flex: 1;\n padding: 10px;\n background-color: #eee;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.tablink:hover {\n background-color: #ddd;\n}\n\n.tab-content {\n display: none;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n}\n\n.card {\n border: 1px solid #e0e0e0;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.card h2 {\n font-size: 18px;\n margin-top: 0;\n}\n\n.content-wrapper {\n display: flex;\n}\n\n.main-content {\n flex: 1;\n padding-left: 20px; \/* Espaciado entre el sidebar y el contenido principal *\/\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla menor a 768px (tabletas y m\u00f3viles) *\/\n@media (max-width: 767px) {\n .content-wrapper {\n flex-direction: column; \/* Cambia la direcci\u00f3n para que los elementos se coloquen uno encima del otro *\/\n }\n\n .sidebar {\n width: 100%;\n margin-bottom: 20px; \/* Espacio entre el sidebar y el contenido principal *\/\n }\n\n .grid-container {\n grid-template-columns: 1fr; \/* Una \u00fanica columna para las tarjetas *\/\n }\n\n .main-content {\n padding-left: 0; \/* Remueve el espaciado entre el sidebar y el contenido principal *\/\n }\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla entre 768px y 1023px *\/\n@media (min-width: 768px) and (max-width: 1023px) {\n .grid-container {\n grid-template-columns: repeat(2, 1fr); \/* Dos columnas para las tarjetas *\/\n }\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla mayor a 1024px (escritorio) *\/\n@media (min-width: 1024px) {\n \/* Estilos originales para dispositivos m\u00e1s grandes ya est\u00e1n definidos arriba *\/\n}\n\n\/* Estilos para el spinner de carga *\/\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.spinner-circle {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #73AD2F;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin-bottom: 15px;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.spinner-text {\n color: #666;\n font-size: 16px;\n}\n\n <\/style>\n <div class=\"content-wrapper\">\n <div class=\"sidebar\">\n <div class=\"tabs\">\n <button class=\"tablink active\" onclick=\"manejarClickTab('Medicos')\">\n M\u00e9dicos\n <\/button>\n <button class=\"tablink\" onclick=\"manejarClickTab('Centros')\">\n Centros\n <\/button>\n <\/div>\n\n <div id=\"Medicos\" class=\"tab-content\" style=\"display: block\">\n <input type=\"text\" id=\"medicosSearch\" placeholder=\"Buscar...\" \/>\n \n <select id=\"selectEspecialidades\">\n <option value=\"\">Seleccionar Especialidad...<\/option>\n <\/select>\n \n <select id=\"selectProvinciasMedicos\">\n <option value=\"\">Seleccionar Provincia...<\/option>\n <\/select>\n \n <select id=\"selectPlanesMedicos\">\n <option value=\"\">Seleccionar Plan...<\/option>\n <\/select>\n \n <button onclick=\"aplicarFiltrosMedicos()\">Aplicar Filtros<\/button>\n <p id=\"contadorResultados\"><\/p>\n <\/div>\n\n <div id=\"Centros\" class=\"tab-content\" style=\"display: none\">\n \n <input type=\"text\" id=\"centrosSearch\" placeholder=\"Buscar...\" \/>\n\n <select id=\"selectProvinciasCentros\">\n <option value=\"\">Seleccionar Provincia...<\/option>\n \n <\/select>\n\n <select id=\"selectPlanes\">\n <option value=\"\">Seleccionar Plan...<\/option>\n \n <\/select>\n\n <select id=\"selectTiposProvider\">\n <option value=\"\">Seleccionar Tipo...<\/option>\n \n <\/select>\n\n \n <button onclick=\"aplicarFiltrosCentros()\">Aplicar Filtros<\/button>\n <div id=\"contadorResultadosCentros\"><\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <div style=\"padding: 20px\">\n <div id=\"loading\" style=\"display: none\">Cargando...<\/div>\n <div id=\"mensajeDerecho\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n var datosMedicos = [];\n var datosCentros = [];\n var centrosSalud = [];\n var provinciasCentros = [];\n var planesCentros = [];\n var tiposProvider = [];\n var especialidades = [];\n var paginaActual = 1;\n var elementosPorPagina = 20;\n\n function mostrarSpinner(mensaje = \"Cargando...\") {\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `\n <div class=\"spinner\">\n <div class=\"spinner-circle\"><\/div>\n <div class=\"spinner-text\">${mensaje}<\/div>\n <\/div>\n `;\n }\n\n function ocultarSpinner() {\n \/\/ El spinner se oculta autom\u00e1ticamente cuando se llama a mostrarDatos()\n }\n\n window.onload = function () {\n cargarCentros();\n cargarProvinciasCentros();\n cargarPlanesCentros();\n cargarTiposProvider();\n cargarEspecialidades();\n cargarDatos(\"Medicos\");\n cambiarTab(\"Medicos\");\n \n \/\/ Agregar event listener para b\u00fasqueda en tiempo real en centros\n var centrosSearch = document.getElementById(\"centrosSearch\");\n if (centrosSearch) {\n centrosSearch.addEventListener('input', function() {\n \/\/ Aplicar filtros con un peque\u00f1o delay para evitar demasiadas llamadas\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n aplicarFiltrosCentros();\n }, 300);\n });\n }\n \n \/\/ Agregar event listener para b\u00fasqueda en tiempo real en m\u00e9dicos\n var medicosSearch = document.getElementById(\"medicosSearch\");\n if (medicosSearch) {\n medicosSearch.addEventListener('input', function() {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n aplicarFiltrosMedicos();\n }, 300);\n });\n }\n };\n\n function cargarCentros() {\n fetch(\"https:\/\/api.arssimag.com.do\/api\/centers\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n centrosSalud = data;\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n });\n }\n\n function cargarProvinciasCentros() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/ProviderCities\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n provinciasCentros = data;\n llenarSelectProvincias();\n llenarSelectProvinciasMedicos();\n })\n .catch((error) => {\n console.error(\"Error fetching provinces:\", error);\n });\n }\n\n function cargarPlanesCentros() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/PlanTypes\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n planesCentros = data;\n llenarSelectPlanes();\n llenarSelectPlanesMedicos();\n })\n .catch((error) => {\n console.error(\"Error fetching plans:\", error);\n });\n }\n\n function cargarTiposProvider() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/providerTypes\/get\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n tiposProvider = data;\n llenarSelectTiposProvider();\n })\n .catch((error) => {\n console.error(\"Error fetching provider types:\", error);\n });\n }\n\n function cargarEspecialidades() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Specialties\/get\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n especialidades = data;\n llenarSelectEspecialidades();\n })\n .catch((error) => {\n console.error(\"Error fetching specialties:\", error);\n });\n }\n\n function cargarDatos(tabName) {\n var url;\n var method = \"POST\";\n if (tabName === \"Medicos\") {\n \/\/ Para m\u00e9dicos, aplicar filtros que cargar\u00e1 con provider type 99\n aplicarFiltrosMedicos();\n } else if (tabName === \"Centros\") {\n \/\/ Para centros, aplicar filtros que cargar\u00e1 todos los tipos\n aplicarFiltrosCentros();\n }\n }\n\n function cargarCentrosPorPlan(planId, providerType = 1) {\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n var ciudadId = selectProvincias ? (selectProvincias.value || \"0\") : \"0\";\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${providerType}&specialty=0&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n datosCentros = data;\n mostrarDatos(\"Centros\", data);\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n });\n }\n\n function cambiarTab(tabName) {\n var i;\n var contenido = document.getElementsByClassName(\"tab-content\");\n for (i = 0; i < contenido.length; i++) {\n contenido[i].style.display = \"none\";\n }\n document.getElementById(tabName).style.display = \"block\";\n\n if (tabName === \"Medicos\" && datosMedicos.length > 0) {\n mostrarDatos(tabName, datosMedicos);\n } else if (tabName === \"Centros\" && datosCentros.length > 0) {\n mostrarDatos(tabName, datosCentros);\n } else {\n mostrarSpinner(`Cargando ${tabName.toLowerCase()}...`);\n cargarDatos(tabName);\n }\n }\n\n function manejarClickTab(tabName) {\n var tabs = document.getElementsByClassName(\"tablink\");\n for (var i = 0; i < tabs.length; i++) {\n tabs[i].classList.remove(\"active\");\n }\n event.currentTarget.classList.add(\"active\");\n cambiarTab(tabName);\n }\n\n function mostrarDatos(tabName, datos) {\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = \"\";\n\n var grid = document.createElement(\"div\");\n grid.className = \"grid-container\";\n contenedor.appendChild(grid);\n\n var inicio = (paginaActual - 1) * elementosPorPagina;\n var fin = inicio + elementosPorPagina;\n var datosPagina = datos.slice(inicio, fin);\n\n datosPagina.forEach((dato) => {\n var card = document.createElement(\"div\");\n card.className = \"card\";\n\n if (tabName === \"Medicos\") {\n \/\/ Mostrar especialidades\n var especialidadesTexto = \"No especificada\";\n if (dato.specialty && dato.specialty.length > 0) {\n especialidadesTexto = dato.specialty.map(esp => esp.name).join(\", \");\n }\n\n \/\/ Mostrar los planes\n var nombresPlanes = \"No especificados\";\n if (dato.planType && dato.planType.length > 0) {\n nombresPlanes = dato.planType.map(plan => plan.name).join(\", \");\n }\n\n \/\/ Mostrar tel\u00e9fonos de forma m\u00e1s limpia\n var telefonoHTML = \"\";\n if (dato.phoneNumbers && dato.phoneNumbers.length > 0) {\n dato.phoneNumbers.forEach(phone => {\n var etiqueta = phone.label === \"RESIDENCIA\" ? \"Tel. Fijo:\" : \n phone.label === \"TRABAJO\" ? \"Tel. Oficina:\" :\n phone.label === \"CELULAR\" ? \"Celular:\" :\n phone.label + \":\";\n telefonoHTML += `<p>${etiqueta}<\/p><p style=\"color: #73AD2F\" class=\"telefono\">${phone.value.trim()}<\/p>`;\n });\n }\n\n card.innerHTML = `\n <h2>${dato.name}<\/h2>\n <p style=\"color: #73AD2F\" class=\"especialidad\">${especialidadesTexto}<\/p>\n <hr>\n <p>Planes:<\/p>\n <p style=\"color: #73AD2F\" class=\"planes\">${nombresPlanes}<\/p>\n <p>Direcci\u00f3n:<\/p>\n <p style=\"color: #73AD2F\" class=\"direccion\">${dato.address || 'No especificada'}<\/p>\n ${telefonoHTML}\n `;\n } else if (tabName === \"Centros\") {\n \/\/ Mostrar el tipo de provider\n var tipoProvider = dato.type ? dato.type.name : \"No especificado\";\n \n \/\/ Mostrar los planes\n var nombresPlanes = \"No especificados\";\n if (dato.planType && dato.planType.length > 0) {\n nombresPlanes = dato.planType.map(plan => plan.name).join(\", \");\n }\n\n \/\/ Mostrar tel\u00e9fonos de forma m\u00e1s limpia\n var telefonoHTML = \"\";\n if (dato.phoneNumbers && dato.phoneNumbers.length > 0) {\n dato.phoneNumbers.forEach(phone => {\n var etiqueta = phone.label === \"RESIDENCIA\" ? \"Tel. Fijo:\" : \n phone.label === \"TRABAJO\" ? \"Tel. Oficina:\" :\n phone.label === \"CELULAR\" ? \"Celular:\" :\n phone.label + \":\";\n telefonoHTML += `<p>${etiqueta}<\/p><p style=\"color: #73AD2F\" class=\"telefono\">${phone.value.trim()}<\/p>`;\n });\n }\n\n card.innerHTML = `\n <h2>${dato.name || 'Sin nombre'}<\/h2>\n <p style=\"color: #73AD2F\" class=\"tipo\">${tipoProvider}<\/p>\n <hr>\n <p>Ciudad:<\/p>\n <p style=\"color: #73AD2F\" class=\"ciudad\">${dato.city || 'No especificada'}<\/p>\n <p>Sector:<\/p>\n <p style=\"color: #73AD2F\" class=\"sector\">${dato.sector || 'No especificado'}<\/p>\n <p>Planes:<\/p>\n <p style=\"color: #73AD2F\" class=\"planes\">${nombresPlanes}<\/p>\n <p>Direcci\u00f3n:<\/p>\n <p style=\"color: #73AD2F\" class=\"direccion\">${dato.address || 'No especificada'}<\/p>\n ${telefonoHTML}\n `;\n }\n grid.appendChild(card);\n });\n\n var contador;\n if (tabName === \"Medicos\") {\n contador = document.getElementById(\"contadorResultados\");\n } else if (tabName === \"Centros\") {\n contador = document.getElementById(\"contadorResultadosCentros\"); \/\/ Asume que este es el ID de tu contador para Centros\n }\n \n if (contador) {\n contador.textContent = `Se han encontrado ${datos.length} elementos.`;\n }\n\n\n var paginacion = document.createElement(\"div\");\n paginacion.className = \"paginacion\";\n contenedor.appendChild(paginacion);\n\n if (paginaActual > 1) {\n var btnAnterior = document.createElement(\"button\");\n btnAnterior.textContent = \"Anterior\";\n btnAnterior.onclick = function () {\n paginaActual--;\n mostrarDatos(tabName, datos);\n };\n paginacion.appendChild(btnAnterior);\n }\n\n if (fin < datos.length) {\n var btnSiguiente = document.createElement(\"button\");\n btnSiguiente.textContent = \"Siguiente\";\n btnSiguiente.onclick = function () {\n paginaActual++;\n mostrarDatos(tabName, datos);\n };\n paginacion.appendChild(btnSiguiente);\n }\n }\n\n\n function llenarSelectProvincias() {\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n if (selectProvincias && provinciasCentros.length > 0) {\n selectProvincias.innerHTML =\n `<option value=\"\">Todas las provincias<\/option>` +\n provinciasCentros.map((provincia) => \n `<option value=\"${provincia.id}\">${provincia.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar la provincia\n selectProvincias.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectPlanes() {\n var selectPlanes = document.getElementById(\"selectPlanes\");\n if (selectPlanes && planesCentros.length > 0) {\n selectPlanes.innerHTML =\n `<option value=\"\">Todos los planes<\/option>` +\n planesCentros.map((plan) => \n `<option value=\"${plan.id}\">${plan.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar el plan\n selectPlanes.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectTiposProvider() {\n var selectTiposProvider = document.getElementById(\"selectTiposProvider\");\n if (selectTiposProvider && tiposProvider.length > 0) {\n \/\/ Filtrar para excluir MEDICO (id: 99) ya que va en la pesta\u00f1a de m\u00e9dicos\n var tiposFiltrados = tiposProvider.filter(tipo => tipo.id !== 99);\n \n selectTiposProvider.innerHTML =\n `<option value=\"\">Seleccionar Tipo...<\/option>` +\n tiposFiltrados.map((tipo) => \n `<option value=\"${tipo.id}\">${tipo.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar el tipo\n selectTiposProvider.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectEspecialidades() {\n var selectEspecialidades = document.getElementById(\"selectEspecialidades\");\n if (selectEspecialidades && especialidades.length > 0) {\n selectEspecialidades.innerHTML =\n `<option value=\"\">Seleccionar Especialidad...<\/option>` +\n especialidades.map((esp) => \n `<option value=\"${esp.id}\">${esp.name}<\/option>`\n ).join(\"\");\n \n selectEspecialidades.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarSelectProvinciasMedicos() {\n var selectProvincias = document.getElementById(\"selectProvinciasMedicos\");\n if (selectProvincias && provinciasCentros.length > 0) {\n selectProvincias.innerHTML =\n `<option value=\"\">Todas las provincias<\/option>` +\n provinciasCentros.map((provincia) => \n `<option value=\"${provincia.id}\" ${provincia.id === 1 ? 'selected' : ''}>${provincia.name}<\/option>`\n ).join(\"\");\n \n selectProvincias.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarSelectPlanesMedicos() {\n var selectPlanes = document.getElementById(\"selectPlanesMedicos\");\n if (selectPlanes && planesCentros.length > 0) {\n selectPlanes.innerHTML =\n `<option value=\"\">Todos los planes<\/option>` +\n planesCentros.map((plan) => \n `<option value=\"${plan.id}\">${plan.name}<\/option>`\n ).join(\"\");\n \n selectPlanes.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarFiltrosCentros(datos) {\n \/\/ Esta funci\u00f3n ya no es necesaria ya que los filtros se llenan\n \/\/ desde las APIs espec\u00edficas en llenarSelectProvincias() y llenarSelectPlanes()\n }\n\n function aplicarFiltrosMedicos() {\n var inputSearch = document.getElementById(\"medicosSearch\");\n var selectEspecialidades = document.getElementById(\"selectEspecialidades\");\n var selectProvincias = document.getElementById(\"selectProvinciasMedicos\");\n var selectPlanes = document.getElementById(\"selectPlanesMedicos\");\n\n \/\/ Mostrar spinner\n mostrarSpinner(\"Buscando m\u00e9dicos...\");\n\n \/\/ Obtener par\u00e1metros\n var planId = selectPlanes.value || \"0\";\n var especialidadId = selectEspecialidades.value || \"0\";\n var ciudadId = selectProvincias.value || \"1\"; \/\/ Por defecto Distrito Nacional (id: 1)\n \n \/\/ Hacer llamada al API para m\u00e9dicos (provider type 99)\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=99&specialty=${especialidadId}&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var resultados = data.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosMedicos = data;\n paginaActual = 1;\n mostrarDatos(\"Medicos\", resultados);\n })\n .catch((error) => {\n console.error(\"Error fetching medicos:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los m\u00e9dicos. Por favor, intenta de nuevo.<\/div>`;\n });\n }\n\n function aplicarFiltrosCentros() {\n var inputSearch = document.getElementById(\"centrosSearch\");\n var selectPlanes = document.getElementById(\"selectPlanes\");\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n var selectTiposProvider = document.getElementById(\"selectTiposProvider\");\n\n \/\/ Mostrar spinner\n mostrarSpinner(\"Buscando centros...\");\n\n \/\/ Obtener par\u00e1metros\n var planId = selectPlanes.value || \"0\";\n var ciudadId = selectProvincias.value || \"0\"; \/\/ Por defecto todas las provincias (id: 0)\n \n if (selectTiposProvider.value === \"\" || selectTiposProvider.value === \"todos\") {\n \/\/ Si no hay tipo seleccionado o es \"todos\", hacer m\u00faltiples llamadas para todos los tipos excepto MEDICO\n var tiposABuscar = tiposProvider.filter(tipo => tipo.id !== 99);\n var promesas = tiposABuscar.map(tipo => {\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${tipo.id}&specialty=0&cityId=${ciudadId}`;\n return fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n }).then(response => response.json());\n });\n \n Promise.all(promesas)\n .then((resultados) => {\n \/\/ Combinar todos los resultados\n var todosLosDatos = resultados.flat();\n \n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var datosFiltrados = todosLosDatos.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosCentros = todosLosDatos;\n paginaActual = 1;\n mostrarDatos(\"Centros\", datosFiltrados);\n })\n .catch((error) => {\n console.error(\"Error fetching all provider types:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los centros. Por favor, intenta de nuevo.<\/div>`;\n });\n } else {\n \/\/ Si hay un tipo espec\u00edfico seleccionado, hacer la llamada normal\n var providerType = selectTiposProvider.value;\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${providerType}&specialty=0&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var resultados = data.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosCentros = data;\n paginaActual = 1;\n mostrarDatos(\"Centros\", resultados);\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los centros. Por favor, intenta de nuevo.<\/div>`;\n });\n }\n }\n <\/script>\n <\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document M\u00e9dicos Centros Seleccionar Especialidad… Seleccionar Provincia… Seleccionar Plan… Aplicar Filtros Seleccionar Provincia… Seleccionar Plan… Seleccionar Tipo… Aplicar Filtros Cargando…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2318","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/comments?post=2318"}],"version-history":[{"count":65,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318\/revisions"}],"predecessor-version":[{"id":2899,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318\/revisions\/2899"}],"wp:attachment":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/media?parent=2318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n \n \n \n Document<\/title>\n <\/head>\n\n <body>\n <style>\n \/* Estilos existentes para la barra lateral *\/\n \/* Estilos existentes para la barra lateral *\/\n.sidebar {\n width: 320px;\n background-color: #f7f7f7;\n padding: 20px;\n height: 50%;\n}\n\n.sidebar input,\n.sidebar select {\n width: 100%;\n margin-bottom: 15px;\n padding: 5px;\n border: 1px solid #ccc;\n}\n\n\/* Estilos para las pesta\u00f1as *\/\n.tabs {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n.tablink.active {\n background-color: #ddd; \/* Color de fondo para la pesta\u00f1a activa *\/\n font-weight: bold; \/* Texto en negrita para la pesta\u00f1a activa *\/\n}\n\n.tablink {\n flex: 1;\n padding: 10px;\n background-color: #eee;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.tablink:hover {\n background-color: #ddd;\n}\n\n.tab-content {\n display: none;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n}\n\n.card {\n border: 1px solid #e0e0e0;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.card h2 {\n font-size: 18px;\n margin-top: 0;\n}\n\n.content-wrapper {\n display: flex;\n}\n\n.main-content {\n flex: 1;\n padding-left: 20px; \/* Espaciado entre el sidebar y el contenido principal *\/\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla menor a 768px (tabletas y m\u00f3viles) *\/\n@media (max-width: 767px) {\n .content-wrapper {\n flex-direction: column; \/* Cambia la direcci\u00f3n para que los elementos se coloquen uno encima del otro *\/\n }\n\n .sidebar {\n width: 100%;\n margin-bottom: 20px; \/* Espacio entre el sidebar y el contenido principal *\/\n }\n\n .grid-container {\n grid-template-columns: 1fr; \/* Una \u00fanica columna para las tarjetas *\/\n }\n\n .main-content {\n padding-left: 0; \/* Remueve el espaciado entre el sidebar y el contenido principal *\/\n }\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla entre 768px y 1023px *\/\n@media (min-width: 768px) and (max-width: 1023px) {\n .grid-container {\n grid-template-columns: repeat(2, 1fr); \/* Dos columnas para las tarjetas *\/\n }\n}\n\n\/* Estilos para dispositivos con un ancho de pantalla mayor a 1024px (escritorio) *\/\n@media (min-width: 1024px) {\n \/* Estilos originales para dispositivos m\u00e1s grandes ya est\u00e1n definidos arriba *\/\n}\n\n\/* Estilos para el spinner de carga *\/\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.spinner-circle {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #73AD2F;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin-bottom: 15px;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.spinner-text {\n color: #666;\n font-size: 16px;\n}\n\n <\/style>\n <div class=\"content-wrapper\">\n <div class=\"sidebar\">\n <div class=\"tabs\">\n <button class=\"tablink active\" onclick=\"manejarClickTab('Medicos')\">\n M\u00e9dicos\n <\/button>\n <button class=\"tablink\" onclick=\"manejarClickTab('Centros')\">\n Centros\n <\/button>\n <\/div>\n\n <div id=\"Medicos\" class=\"tab-content\" style=\"display: block\">\n <input type=\"text\" id=\"medicosSearch\" placeholder=\"Buscar...\" \/>\n \n <select id=\"selectEspecialidades\">\n <option value=\"\">Seleccionar Especialidad...<\/option>\n <\/select>\n \n <select id=\"selectProvinciasMedicos\">\n <option value=\"\">Seleccionar Provincia...<\/option>\n <\/select>\n \n <select id=\"selectPlanesMedicos\">\n <option value=\"\">Seleccionar Plan...<\/option>\n <\/select>\n \n <button onclick=\"aplicarFiltrosMedicos()\">Aplicar Filtros<\/button>\n <p id=\"contadorResultados\"><\/p>\n <\/div>\n\n <div id=\"Centros\" class=\"tab-content\" style=\"display: none\">\n \n <input type=\"text\" id=\"centrosSearch\" placeholder=\"Buscar...\" \/>\n\n <select id=\"selectProvinciasCentros\">\n <option value=\"\">Seleccionar Provincia...<\/option>\n \n <\/select>\n\n <select id=\"selectPlanes\">\n <option value=\"\">Seleccionar Plan...<\/option>\n \n <\/select>\n\n <select id=\"selectTiposProvider\">\n <option value=\"\">Seleccionar Tipo...<\/option>\n \n <\/select>\n\n \n <button onclick=\"aplicarFiltrosCentros()\">Aplicar Filtros<\/button>\n <div id=\"contadorResultadosCentros\"><\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <div style=\"padding: 20px\">\n <div id=\"loading\" style=\"display: none\">Cargando...<\/div>\n <div id=\"mensajeDerecho\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n var datosMedicos = [];\n var datosCentros = [];\n var centrosSalud = [];\n var provinciasCentros = [];\n var planesCentros = [];\n var tiposProvider = [];\n var especialidades = [];\n var paginaActual = 1;\n var elementosPorPagina = 20;\n\n function mostrarSpinner(mensaje = \"Cargando...\") {\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `\n <div class=\"spinner\">\n <div class=\"spinner-circle\"><\/div>\n <div class=\"spinner-text\">${mensaje}<\/div>\n <\/div>\n `;\n }\n\n function ocultarSpinner() {\n \/\/ El spinner se oculta autom\u00e1ticamente cuando se llama a mostrarDatos()\n }\n\n window.onload = function () {\n cargarCentros();\n cargarProvinciasCentros();\n cargarPlanesCentros();\n cargarTiposProvider();\n cargarEspecialidades();\n cargarDatos(\"Medicos\");\n cambiarTab(\"Medicos\");\n \n \/\/ Agregar event listener para b\u00fasqueda en tiempo real en centros\n var centrosSearch = document.getElementById(\"centrosSearch\");\n if (centrosSearch) {\n centrosSearch.addEventListener('input', function() {\n \/\/ Aplicar filtros con un peque\u00f1o delay para evitar demasiadas llamadas\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n aplicarFiltrosCentros();\n }, 300);\n });\n }\n \n \/\/ Agregar event listener para b\u00fasqueda en tiempo real en m\u00e9dicos\n var medicosSearch = document.getElementById(\"medicosSearch\");\n if (medicosSearch) {\n medicosSearch.addEventListener('input', function() {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n aplicarFiltrosMedicos();\n }, 300);\n });\n }\n };\n\n function cargarCentros() {\n fetch(\"https:\/\/api.arssimag.com.do\/api\/centers\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n centrosSalud = data;\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n });\n }\n\n function cargarProvinciasCentros() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/ProviderCities\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n provinciasCentros = data;\n llenarSelectProvincias();\n llenarSelectProvinciasMedicos();\n })\n .catch((error) => {\n console.error(\"Error fetching provinces:\", error);\n });\n }\n\n function cargarPlanesCentros() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/PlanTypes\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n planesCentros = data;\n llenarSelectPlanes();\n llenarSelectPlanesMedicos();\n })\n .catch((error) => {\n console.error(\"Error fetching plans:\", error);\n });\n }\n\n function cargarTiposProvider() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/providerTypes\/get\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n tiposProvider = data;\n llenarSelectTiposProvider();\n })\n .catch((error) => {\n console.error(\"Error fetching provider types:\", error);\n });\n }\n\n function cargarEspecialidades() {\n fetch(\"https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Specialties\/get\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n especialidades = data;\n llenarSelectEspecialidades();\n })\n .catch((error) => {\n console.error(\"Error fetching specialties:\", error);\n });\n }\n\n function cargarDatos(tabName) {\n var url;\n var method = \"POST\";\n if (tabName === \"Medicos\") {\n \/\/ Para m\u00e9dicos, aplicar filtros que cargar\u00e1 con provider type 99\n aplicarFiltrosMedicos();\n } else if (tabName === \"Centros\") {\n \/\/ Para centros, aplicar filtros que cargar\u00e1 todos los tipos\n aplicarFiltrosCentros();\n }\n }\n\n function cargarCentrosPorPlan(planId, providerType = 1) {\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n var ciudadId = selectProvincias ? (selectProvincias.value || \"0\") : \"0\";\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${providerType}&specialty=0&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n datosCentros = data;\n mostrarDatos(\"Centros\", data);\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n });\n }\n\n function cambiarTab(tabName) {\n var i;\n var contenido = document.getElementsByClassName(\"tab-content\");\n for (i = 0; i < contenido.length; i++) {\n contenido[i].style.display = \"none\";\n }\n document.getElementById(tabName).style.display = \"block\";\n\n if (tabName === \"Medicos\" && datosMedicos.length > 0) {\n mostrarDatos(tabName, datosMedicos);\n } else if (tabName === \"Centros\" && datosCentros.length > 0) {\n mostrarDatos(tabName, datosCentros);\n } else {\n mostrarSpinner(`Cargando ${tabName.toLowerCase()}...`);\n cargarDatos(tabName);\n }\n }\n\n function manejarClickTab(tabName) {\n var tabs = document.getElementsByClassName(\"tablink\");\n for (var i = 0; i < tabs.length; i++) {\n tabs[i].classList.remove(\"active\");\n }\n event.currentTarget.classList.add(\"active\");\n cambiarTab(tabName);\n }\n\n function mostrarDatos(tabName, datos) {\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = \"\";\n\n var grid = document.createElement(\"div\");\n grid.className = \"grid-container\";\n contenedor.appendChild(grid);\n\n var inicio = (paginaActual - 1) * elementosPorPagina;\n var fin = inicio + elementosPorPagina;\n var datosPagina = datos.slice(inicio, fin);\n\n datosPagina.forEach((dato) => {\n var card = document.createElement(\"div\");\n card.className = \"card\";\n\n if (tabName === \"Medicos\") {\n \/\/ Mostrar especialidades\n var especialidadesTexto = \"No especificada\";\n if (dato.specialty && dato.specialty.length > 0) {\n especialidadesTexto = dato.specialty.map(esp => esp.name).join(\", \");\n }\n\n \/\/ Mostrar los planes\n var nombresPlanes = \"No especificados\";\n if (dato.planType && dato.planType.length > 0) {\n nombresPlanes = dato.planType.map(plan => plan.name).join(\", \");\n }\n\n \/\/ Mostrar tel\u00e9fonos de forma m\u00e1s limpia\n var telefonoHTML = \"\";\n if (dato.phoneNumbers && dato.phoneNumbers.length > 0) {\n dato.phoneNumbers.forEach(phone => {\n var etiqueta = phone.label === \"RESIDENCIA\" ? \"Tel. Fijo:\" : \n phone.label === \"TRABAJO\" ? \"Tel. Oficina:\" :\n phone.label === \"CELULAR\" ? \"Celular:\" :\n phone.label + \":\";\n telefonoHTML += `<p>${etiqueta}<\/p><p style=\"color: #73AD2F\" class=\"telefono\">${phone.value.trim()}<\/p>`;\n });\n }\n\n card.innerHTML = `\n <h2>${dato.name}<\/h2>\n <p style=\"color: #73AD2F\" class=\"especialidad\">${especialidadesTexto}<\/p>\n <hr>\n <p>Planes:<\/p>\n <p style=\"color: #73AD2F\" class=\"planes\">${nombresPlanes}<\/p>\n <p>Direcci\u00f3n:<\/p>\n <p style=\"color: #73AD2F\" class=\"direccion\">${dato.address || 'No especificada'}<\/p>\n ${telefonoHTML}\n `;\n } else if (tabName === \"Centros\") {\n \/\/ Mostrar el tipo de provider\n var tipoProvider = dato.type ? dato.type.name : \"No especificado\";\n \n \/\/ Mostrar los planes\n var nombresPlanes = \"No especificados\";\n if (dato.planType && dato.planType.length > 0) {\n nombresPlanes = dato.planType.map(plan => plan.name).join(\", \");\n }\n\n \/\/ Mostrar tel\u00e9fonos de forma m\u00e1s limpia\n var telefonoHTML = \"\";\n if (dato.phoneNumbers && dato.phoneNumbers.length > 0) {\n dato.phoneNumbers.forEach(phone => {\n var etiqueta = phone.label === \"RESIDENCIA\" ? \"Tel. Fijo:\" : \n phone.label === \"TRABAJO\" ? \"Tel. Oficina:\" :\n phone.label === \"CELULAR\" ? \"Celular:\" :\n phone.label + \":\";\n telefonoHTML += `<p>${etiqueta}<\/p><p style=\"color: #73AD2F\" class=\"telefono\">${phone.value.trim()}<\/p>`;\n });\n }\n\n card.innerHTML = `\n <h2>${dato.name || 'Sin nombre'}<\/h2>\n <p style=\"color: #73AD2F\" class=\"tipo\">${tipoProvider}<\/p>\n <hr>\n <p>Ciudad:<\/p>\n <p style=\"color: #73AD2F\" class=\"ciudad\">${dato.city || 'No especificada'}<\/p>\n <p>Sector:<\/p>\n <p style=\"color: #73AD2F\" class=\"sector\">${dato.sector || 'No especificado'}<\/p>\n <p>Planes:<\/p>\n <p style=\"color: #73AD2F\" class=\"planes\">${nombresPlanes}<\/p>\n <p>Direcci\u00f3n:<\/p>\n <p style=\"color: #73AD2F\" class=\"direccion\">${dato.address || 'No especificada'}<\/p>\n ${telefonoHTML}\n `;\n }\n grid.appendChild(card);\n });\n\n var contador;\n if (tabName === \"Medicos\") {\n contador = document.getElementById(\"contadorResultados\");\n } else if (tabName === \"Centros\") {\n contador = document.getElementById(\"contadorResultadosCentros\"); \/\/ Asume que este es el ID de tu contador para Centros\n }\n \n if (contador) {\n contador.textContent = `Se han encontrado ${datos.length} elementos.`;\n }\n\n\n var paginacion = document.createElement(\"div\");\n paginacion.className = \"paginacion\";\n contenedor.appendChild(paginacion);\n\n if (paginaActual > 1) {\n var btnAnterior = document.createElement(\"button\");\n btnAnterior.textContent = \"Anterior\";\n btnAnterior.onclick = function () {\n paginaActual--;\n mostrarDatos(tabName, datos);\n };\n paginacion.appendChild(btnAnterior);\n }\n\n if (fin < datos.length) {\n var btnSiguiente = document.createElement(\"button\");\n btnSiguiente.textContent = \"Siguiente\";\n btnSiguiente.onclick = function () {\n paginaActual++;\n mostrarDatos(tabName, datos);\n };\n paginacion.appendChild(btnSiguiente);\n }\n }\n\n\n function llenarSelectProvincias() {\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n if (selectProvincias && provinciasCentros.length > 0) {\n selectProvincias.innerHTML =\n `<option value=\"\">Todas las provincias<\/option>` +\n provinciasCentros.map((provincia) => \n `<option value=\"${provincia.id}\">${provincia.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar la provincia\n selectProvincias.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectPlanes() {\n var selectPlanes = document.getElementById(\"selectPlanes\");\n if (selectPlanes && planesCentros.length > 0) {\n selectPlanes.innerHTML =\n `<option value=\"\">Todos los planes<\/option>` +\n planesCentros.map((plan) => \n `<option value=\"${plan.id}\">${plan.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar el plan\n selectPlanes.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectTiposProvider() {\n var selectTiposProvider = document.getElementById(\"selectTiposProvider\");\n if (selectTiposProvider && tiposProvider.length > 0) {\n \/\/ Filtrar para excluir MEDICO (id: 99) ya que va en la pesta\u00f1a de m\u00e9dicos\n var tiposFiltrados = tiposProvider.filter(tipo => tipo.id !== 99);\n \n selectTiposProvider.innerHTML =\n `<option value=\"\">Seleccionar Tipo...<\/option>` +\n tiposFiltrados.map((tipo) => \n `<option value=\"${tipo.id}\">${tipo.name}<\/option>`\n ).join(\"\");\n \n \/\/ Agregar event listener para aplicar filtros autom\u00e1ticamente al cambiar el tipo\n selectTiposProvider.addEventListener('change', function() {\n aplicarFiltrosCentros();\n });\n }\n }\n\n function llenarSelectEspecialidades() {\n var selectEspecialidades = document.getElementById(\"selectEspecialidades\");\n if (selectEspecialidades && especialidades.length > 0) {\n selectEspecialidades.innerHTML =\n `<option value=\"\">Seleccionar Especialidad...<\/option>` +\n especialidades.map((esp) => \n `<option value=\"${esp.id}\">${esp.name}<\/option>`\n ).join(\"\");\n \n selectEspecialidades.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarSelectProvinciasMedicos() {\n var selectProvincias = document.getElementById(\"selectProvinciasMedicos\");\n if (selectProvincias && provinciasCentros.length > 0) {\n selectProvincias.innerHTML =\n `<option value=\"\">Todas las provincias<\/option>` +\n provinciasCentros.map((provincia) => \n `<option value=\"${provincia.id}\" ${provincia.id === 1 ? 'selected' : ''}>${provincia.name}<\/option>`\n ).join(\"\");\n \n selectProvincias.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarSelectPlanesMedicos() {\n var selectPlanes = document.getElementById(\"selectPlanesMedicos\");\n if (selectPlanes && planesCentros.length > 0) {\n selectPlanes.innerHTML =\n `<option value=\"\">Todos los planes<\/option>` +\n planesCentros.map((plan) => \n `<option value=\"${plan.id}\">${plan.name}<\/option>`\n ).join(\"\");\n \n selectPlanes.addEventListener('change', function() {\n aplicarFiltrosMedicos();\n });\n }\n }\n\n function llenarFiltrosCentros(datos) {\n \/\/ Esta funci\u00f3n ya no es necesaria ya que los filtros se llenan\n \/\/ desde las APIs espec\u00edficas en llenarSelectProvincias() y llenarSelectPlanes()\n }\n\n function aplicarFiltrosMedicos() {\n var inputSearch = document.getElementById(\"medicosSearch\");\n var selectEspecialidades = document.getElementById(\"selectEspecialidades\");\n var selectProvincias = document.getElementById(\"selectProvinciasMedicos\");\n var selectPlanes = document.getElementById(\"selectPlanesMedicos\");\n\n \/\/ Mostrar spinner\n mostrarSpinner(\"Buscando m\u00e9dicos...\");\n\n \/\/ Obtener par\u00e1metros\n var planId = selectPlanes.value || \"0\";\n var especialidadId = selectEspecialidades.value || \"0\";\n var ciudadId = selectProvincias.value || \"1\"; \/\/ Por defecto Distrito Nacional (id: 1)\n \n \/\/ Hacer llamada al API para m\u00e9dicos (provider type 99)\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=99&specialty=${especialidadId}&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var resultados = data.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosMedicos = data;\n paginaActual = 1;\n mostrarDatos(\"Medicos\", resultados);\n })\n .catch((error) => {\n console.error(\"Error fetching medicos:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los m\u00e9dicos. Por favor, intenta de nuevo.<\/div>`;\n });\n }\n\n function aplicarFiltrosCentros() {\n var inputSearch = document.getElementById(\"centrosSearch\");\n var selectPlanes = document.getElementById(\"selectPlanes\");\n var selectProvincias = document.getElementById(\"selectProvinciasCentros\");\n var selectTiposProvider = document.getElementById(\"selectTiposProvider\");\n\n \/\/ Mostrar spinner\n mostrarSpinner(\"Buscando centros...\");\n\n \/\/ Obtener par\u00e1metros\n var planId = selectPlanes.value || \"0\";\n var ciudadId = selectProvincias.value || \"0\"; \/\/ Por defecto todas las provincias (id: 0)\n \n if (selectTiposProvider.value === \"\" || selectTiposProvider.value === \"todos\") {\n \/\/ Si no hay tipo seleccionado o es \"todos\", hacer m\u00faltiples llamadas para todos los tipos excepto MEDICO\n var tiposABuscar = tiposProvider.filter(tipo => tipo.id !== 99);\n var promesas = tiposABuscar.map(tipo => {\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${tipo.id}&specialty=0&cityId=${ciudadId}`;\n return fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n }).then(response => response.json());\n });\n \n Promise.all(promesas)\n .then((resultados) => {\n \/\/ Combinar todos los resultados\n var todosLosDatos = resultados.flat();\n \n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var datosFiltrados = todosLosDatos.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosCentros = todosLosDatos;\n paginaActual = 1;\n mostrarDatos(\"Centros\", datosFiltrados);\n })\n .catch((error) => {\n console.error(\"Error fetching all provider types:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los centros. Por favor, intenta de nuevo.<\/div>`;\n });\n } else {\n \/\/ Si hay un tipo espec\u00edfico seleccionado, hacer la llamada normal\n var providerType = selectTiposProvider.value;\n var url = `https:\/\/autorizaciones.arsabelgonzalez.com\/webapiappprod\/api\/Providers\/get?planId=${planId}&providertype=${providerType}&specialty=0&cityId=${ciudadId}`;\n \n fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((response) => response.json())\n .then((data) => {\n \/\/ Filtrar los resultados solo por b\u00fasqueda de texto (la provincia ya se filtra en el API)\n var resultados = data.filter((dato) => {\n \/\/ Filtrar por b\u00fasqueda de texto en el nombre\n var cumpleBusqueda = !inputSearch.value || \n (dato.name && dato.name.toLowerCase().includes(inputSearch.value.toLowerCase()));\n\n return cumpleBusqueda;\n });\n\n \/\/ Actualizar los datos globales y mostrar resultados\n datosCentros = data;\n paginaActual = 1;\n mostrarDatos(\"Centros\", resultados);\n })\n .catch((error) => {\n console.error(\"Error fetching centers:\", error);\n var contenedor = document.getElementById(\"mensajeDerecho\");\n contenedor.innerHTML = `<div style=\"padding: 40px; text-align: center; color: #666;\">Error al cargar los centros. Por favor, intenta de nuevo.<\/div>`;\n });\n }\n }\n <\/script>\n <\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document M\u00e9dicos Centros Seleccionar Especialidad… Seleccionar Provincia… Seleccionar Plan… Aplicar Filtros Seleccionar Provincia… Seleccionar Plan… Seleccionar Tipo… Aplicar Filtros Cargando…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2318","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/comments?post=2318"}],"version-history":[{"count":65,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318\/revisions"}],"predecessor-version":[{"id":2899,"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/pages\/2318\/revisions\/2899"}],"wp:attachment":[{"href":"https:\/\/arsabelgonzalez.com\/index.php\/wp-json\/wp\/v2\/media?parent=2318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}