<?php
$imagenes = glob("uploads/anuncio1/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, orientation=landscape">
<title>Anuncio 1</title>
<style>
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* contenedor principal */
#slider-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* slides (fondos) */
.slide {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* TV o pantallas grandes → ocupa todo (recorta bordes si es necesario) */
@media (min-width: 800px) {
    .slide {
        background-size: cover;
    }
}

/* Celulares → muestra la imagen completa sin recortar */
@media (max-width: 799px) {
    .slide {
        background-size: contain;
        background-color: black; /* rellena bordes si sobran */
    }
}

.active {
    opacity: 1;
}
</style>
</head>
<body>

<div id="slider-container">
    <div id="slide1" class="slide active"></div>
    <div id="slide2" class="slide"></div>
</div>

<script>
let imagenes = <?= json_encode($imagenes) ?>;
let currentIndex = 0;
let currentSlide = document.getElementById('slide1');
let nextSlide = document.getElementById('slide2');

// mostrar primera imagen
if (imagenes.length > 0) {
    currentSlide.style.backgroundImage = `url('${imagenes[0]}')`;
} else {
    document.body.innerHTML = "<p style='color:white;font-size:24px;text-align:center;'>No hay imágenes disponibles</p>";
}

// cambiar cada 10 segundos
setInterval(() => {
    if (imagenes.length <= 1) return;

    currentIndex = (currentIndex + 1) % imagenes.length;
    nextSlide.style.backgroundImage = `url('${imagenes[currentIndex]}')`;

    nextSlide.classList.add('active');
    currentSlide.classList.remove('active');

    [currentSlide, nextSlide] = [nextSlide, currentSlide];
}, 10000);
</script>
</body>
</html>