/* MENSAJE EMERGENTE SWALL */

document.addEventListener("DOMContentLoaded", () => {
  if (typeof simplemaps_countrymap !== "undefined") {
    
    simplemaps_countrymap.hooks.click_state = function(stateID) {
        const estado = simplemaps_countrymap_mapdata.state_specific[stateID]?.name;

        if (!estado) {
            Swal.fire("Estado no reconocido", "No se pudo identificar el estado seleccionado.", "warning");
            return;
        }

        fetch(`../../backend/vacantes/sectores_por_estado.php?estado=${encodeURIComponent(estado)}`)
            .then(res => res.json())
            .then(data => {
            if (!data.success || !data.sectores.length) {
                Swal.fire("Sin resultados", `No hay zonas registradas para ${estado}.`, "info");
                return;
            }

            let contenido = `<div class="text-start">`;
            data.sectores.forEach(sector => {
                const totalPuestos = (sector.total_completo || 0) + (sector.total_medio || 0);
                contenido += `
                <div class="card mb-2 shadow-sm">
                    <div class="card-body p-2">
                    <h6 class="mb-1">${sector.nombre}</h6>
                    <p class="mb-1 small">Total posiciones: <strong>${totalPuestos}</strong></p>
                    <p class="mb-1 small">• Tiempo completo: ${sector.total_completo ?? 0}</p>
                    <p class="mb-1 small">• Medio tiempo: ${sector.total_medio ?? 0}</p>
                    <hr class="my-2">
                    <p class="mb-1 small text-success">Vacantes tiempo completo: ${sector.vacante_completo ?? 0}</p>
                    <p class="mb-2 small text-warning">Vacantes medio tiempo: ${sector.vacante_medio ?? 0}</p>
                    <button class="btn btn-sm btn-primary" onclick="verTiendas('${sector.nombre}')">Ver tiendas</button>
                    </div>
                </div>`;
            });
            contenido += `</div>`;

            Swal.fire({
                title: `Zonas en ${estado}`,
                html: contenido,
                width: 600,
                confirmButtonText: 'Cerrar'
            });
            })
            .catch(() => {
            Swal.fire("Error", "No se pudo obtener la información del estado.", "error");
            });
        };


    window.verTiendas = function(sector) {
        fetch(`../../backend/vacantes/pdvs_por_sector.php?sector=${encodeURIComponent(sector)}`)
            .then(res => res.json())
            .then(data => {
            if (!data.success || !data.tiendas.length) {
                Swal.fire("Sin tiendas", `No se encontraron PDVs para el sector ${sector}.`, "info");
                return;
            }

            let html = '<div class="text-start">';
            data.tiendas.forEach(pdv => {
                const totalPuestos = (pdv.total_completo || 0) + (pdv.total_medio || 0);

                html += `
                <div class="card mb-2 shadow-sm">
                    <div class="card-body p-2">
                    <h6 class="mb-1">${pdv.nombre}</h6>
                    <p class="mb-1 small">Total posiciones: <strong>${totalPuestos}</strong></p>
                    <p class="mb-1 small">• Tiempo completo: ${pdv.total_completo ?? 0}</p>
                    <p class="mb-1 small">• Medio tiempo: ${pdv.total_medio ?? 0}</p>
                    <hr class="my-2">
                    <p class="mb-1 small text-success">Vacantes tiempo completo: ${pdv.vacante_completo ?? 0}</p>
                    <p class="mb-2 small text-warning">Vacantes medio tiempo: ${pdv.vacante_medio ?? 0}</p>
                    <button class="btn btn-sm btn-outline-primary mt-2" onclick="verDetallePDV('${pdv.nombre}')">Ver posiciones</button>
                    </div>
                </div>
                `;
            });
            html += '</div>';

            Swal.fire({
                title: `Tiendas en ${sector}`,
                html: html,
                width: 650,
                confirmButtonText: 'Cerrar'
            });
            })
            .catch(() => {
            Swal.fire("Error", "No se pudieron cargar los PDVs del sector.", "error");
            });
        };


    window.verDetallePDV = function(pdv) {
        console.log("🔎 Consultando PDV:", pdv);

        fetch(`../../backend/vacantes/get_detalle_pdv.php?pdv=${encodeURIComponent(pdv)}`)
            .then(res => res.json())
            .then(data => {
            if (!data.success || !data.posiciones.length) {
                Swal.fire("Sin posiciones", `No se encontraron posiciones para ${pdv}.`, "info");
                return;
            }

            let html = '<div class="row row-cols-1 row-cols-md-2 g-3 text-start">';

            data.posiciones.forEach(pos => {
                const ocupado = pos.ocupado;
                const claseFondo = ocupado ? 'bg-success text-white' : 'bg-danger bg-opacity-25';

                html += `
                <div class="col">
                    <div class="card shadow-sm ${claseFondo}">
                    <div class="card-body">
                        <h6 class="card-title mb-1">${ocupado ? pos.nombre : 'Vacante disponible'}</h6>
                        <p class="card-text mb-1"><strong>Puesto:</strong> ${pos.puesto}</p>
                        ${ocupado ? `<p class="card-text"><strong>CURP:</strong> ${pos.curp}</p>` : ''}
                        ${ocupado ? `
                        <a href="../plantilla/detalle-empleado.php?curp=${pos.curp}" 
                            target="_blank" 
                            class="btn btn-sm btn-outline-light mt-2">
                            Ver colaborador
                        </a>` : ''}
                    </div>
                    </div>
                </div>
                `;
            });

            html += '</div>';

            Swal.fire({
                title: `Posiciones en ${pdv}`,
                html: html,
                width: '800px',
                customClass: {
                popup: 'text-start'
                },
                confirmButtonText: 'Cerrar'
            });
            })
            .catch(() => {
            Swal.fire("Error", "No se pudo obtener el detalle del PDV.", "error");
            });
        };
        
  } else {
    console.warn("simplemaps_countrymap aún no está definido.");
  }
});
