<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineLazy</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script> -->

</head>



<body>



  <style>
    body {
      background-color: black;
    }
    #busqueda {
      flex: 1;
      height: 100%;
    }
    .sosp {
      padding: 14px;
      background-color: black;
      overflow: hidden;
      width: calc(100vw / 1.77); /* Aproximadamente 56.25% de la pantalla */
      min-width: 300px;
      height: 36vw;
      min-height: 200px;
    }
    
    #busqueda::placeholder {
      color: rgb(255, 0, 0); /* Cambia 'red' por el color que desees */
    }
    .imgjump {
      aspect-ratio: auto; /* Mantener cuadrado */
      overflow: visible;
      transition: transform 0.3s ease;
      max-width: 210px;
    }
    .imgjump:hover {
      transform: scale(1.05);
    }
    @media (max-width: 340px) {
      #hideLetras {
        display: none;
      }
    }
    
    hr {
      margin: 0.35rem 0;
      opacity: 0.8;
    }
    .scroll-container {
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px 0;
      scroll-behavior: smooth;
    }
    .scroll-container::-webkit-scrollbar {
      display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
    }
    .btn {
      display: inline-block;
      margin-right: 2px;
    }
    .btn:last-child {
      margin-right: 0;
    }
    .offcanvas.offcanvas-start {
      width: 197px;
    }
    .modal-backdrop {--bs-backdrop-zindex:1044;}
    
    </style>
    


  <nav class="navbar bg-dark">
  <div class="container-fluid">
    <div class="navbar-brand text-light">
      
       
        
        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="37" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
        </svg>

      <div class="offcanvas offcanvas-start" data-bs-theme="dark" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <a class="navbar-brand text-light"  >
            <img src="https://i.ibb.co/brFghvf/Cine-Lazy-logo.png" alt="https://i.postimg.cc/bJ3sZ0gc/Cine-Lazy.png" width="42" height="36" class="d-inline-block align-text-top">
            <b>Opciones</b>
          </a>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          
        </div>
        <hr>
        
        <div class="offcanvas-body">
          <div class="d-grid gap-2 col-15 mx-auto">
            
            <button style="background-color:#000000; border-color:#a10000; --bs-btn-active-color:rgb(6, 190, 6);" id="btnPeliculas" type="button1" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="false">Películas</button>
            <button style="background-color:#000000; border-color:#a10000; --bs-btn-active-color:rgb(6, 190, 6);" id="btnSeries" type="button2" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">Series</button>
            <button style="background-color:#000000; border-color:#a10000; --bs-btn-active-color:rgb(6, 190, 6);" id="btnFavoritos" type="button2" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">Favoritos</button>
            <hr>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#report" style="background-color:#000000; border-color:#a10000; --bs-btn-active-color:rgb(6, 190, 6);">
              Reportar
            </button>
            <div class="modal" id="report" tabindex="-1" aria-labelledby="report" aria-hidden="false">
              <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                  
                    <iframe src="https://nilusername.github.io/report/" style="height:inherit;"></iframe>
                  
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atras</button>
                    
                  </div>
                </div>
              </div>
            </div>

            
          </div>

        </div>
      </div>

      <b id="hideLetras">Películas</b>
    </div>
    <input type="text" id="busqueda" class="form-control border-3 border-danger" placeholder="Buscar...">
  </div>
</nav>




<div class="container">
  <div class="scroll-container" id="scrollContainer">
      <button class="btn btn-dark" data-genero="Todo" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Todo</button>
      <button class="btn btn-dark" data-genero="Acción" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Acción</button>
      <button class="btn btn-dark" data-genero="Terror" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Terror</button>
      <button class="btn btn-dark" data-genero="Aventura" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Aventura</button>
      <button class="btn btn-dark" data-genero="Suspenso" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Suspenso</button>
      <button class="btn btn-dark" data-genero="Ciencia Ficción" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Ciencia Ficción</button>
      <button class="btn btn-dark" data-genero="Animación" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Animación</button>
      <button class="btn btn-dark" data-genero="Anime" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Anime</button>
      <button class="btn btn-dark" data-genero="Catástrofes" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Catástrofes</button>
      <button class="btn btn-dark" data-genero="Apocalipsis" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Apocalipsis</button>
      <button class="btn btn-dark" data-genero="Comedia" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Comedia</button>
      <button class="btn btn-dark" data-genero="Familia" style="--bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;">Familia</button>
  </div>
</div>










<div class="container">
  <div class="peliscarg row row-cols-3 row-cols-md-6 g-2" >
    <!-- Aquí se generarán las tarjetas de las películas -->
  </div>
</div>



<script>

const peliculas = [
  {
    id: 1,
    titulo: "Godzilla y Kong: El nuevo imperio",
    fecha_estreno: "2025",
    genero: ["Acción", "Catastrofes"],
    categoria: "pelicula",
    descripcion: "Una aventura cinematográfica completamente nueva, que enfrentará al todopoderoso Kong y al temible Godzilla contra una colosal amenaza desconocida escondida dentro de nuestro mundo.",
    duracion: 115,
    uActu: "xd",
    imagen: "https://www.laspiedrasshopping.com.uy/imgupload/380779Godzilla%20y%20Kong%20El%20Nuevo%20Imperio%20af2.jpg",
    alt: "Imagen 1",
    iframeOptions: [
      { text: "Opción 1 (Filelions)", value: "https://drive.google.com/file/d/1t89rAXlc985IFJk4VXuXL7__r3L4ed5R/preview" },
      { text: "Opción 2 (Streamwish)", value: "https://abysscdn.com/?v=bT3Ng-jrz" }
    ]
  },
  {
    id: 2,
    titulo: "sa",
    fecha_estreno: "2025",
    genero: ["Acción", "Catastrofes"],
    categoria: "pelicula",
    descripcion: "Una aventura cinematográfica completamente nueva, que enfrentará al todopoderoso Kong y al temible Godzilla contra una colosal amenaza desconocida escondida dentro de nuestro mundo.",
    duracion: 115,
    uActu: "xd",
    imagen: "https://www.laspiedrasshopping.com.uy/imgupload/380779Godzilla%20y%20Kong%20El%20Nuevo%20Imperio%20af2.jpg",
    alt: "Imagen 1",
    iframeOptions: [
      { text: "Opción 1 (Filelions)", value: "https://drive.google.com/file/d/1t89rAXlc985IFJk4VXuXL7__r3L4ed5R/preview" },
      { text: "Opción 2 (Streamwish)", value: "https://streamwish.to/e/t3hjk9er1j4d" }
    ]
  },
  {
    id: 4,
    titulo: "Tunometecabrasaranbanpiche",
    fecha_estreno: "2023",
    genero: ["Acción", "Ficción"],
    categoria: "serie",
    descripcion: "Una serie emocionante con múltiples temporadas y capítulos.",
    duracion: 115,
    uActu: "xd22",
    imagen: "https://roseimgs.com/ncoc2qsrhgyt_xt.jpg",
    alt: "Imagen 1",
    temporadas: [
      {
        numero: 1,
        capitulos: [
          {
            numero: 1,
            titulo: "Capítulo 1",
            iframeOptions: [
              { text: "Opción 1 (Filelions)", value: "https://darkkgomas1.blogspot.com/2024/05/mi-querida-oni.html" },
              { text: "Opción 2 (Streamwish)", value: "https://streamwish.to/e/t3hjk9er1j4d" }
            ]
          }
          
          // Añadir más capítulos aquí si es necesario
        ]
      },
      {
        numero: 2,
        capitulos: [
          {
            numero: 2768,
            titulo: "Capítulo 1",
            iframeOptions: [
              { text: "Opción 1 (Filelions)", value: "https://darkkgomas1.blogspot.com/2024/05/mi-querida-oni.html" },
              { text: "Opción 2 (Streamwish)", value: "https://streamwish.to/e/t3hjk9er1j4d" }
            ]
          }
          
          // Añadir más capítulos aquí si es necesario
        ]
      }
      
      // Añadir más temporadas aquí si es necesario
    ],
    
  }
];

// Función para actualizar el texto del elemento
function actualizarTextoCategoria(categoria) {
  document.getElementById('hideLetras').textContent = categoria;
}

// Event listeners para los botones
document.getElementById('btnPeliculas').addEventListener('click', function() {
  categoriaActual = "pelicula";
  document.getElementById('btnPeliculas').classList.add('active');
  document.getElementById('btnFavoritos').classList.remove('active');
  document.getElementById('btnSeries').classList.remove('active');
  actualizarTextoCategoria("Películas");
  filtrarPorCategoria();
});

document.getElementById('btnSeries').addEventListener('click', function() {
  categoriaActual = "serie";
  document.getElementById('btnPeliculas').classList.remove('active');
  document.getElementById('btnFavoritos').classList.remove('active');
  document.getElementById('btnSeries').classList.add('active');
  actualizarTextoCategoria("Series");
  filtrarPorCategoria();
});

document.getElementById('btnFavoritos').addEventListener('click', function() {
  categoriaActual = "favoritos";
  document.getElementById('btnPeliculas').classList.remove('active');
  document.getElementById('btnSeries').classList.remove('active');
  document.getElementById('btnFavoritos').classList.add('active');
  actualizarTextoCategoria("Favoritos");
  filtrarPorCategoria();
});



function loadDisqus(identifier, url) {
  // Elimina el contenedor `disqus_thread` si ya existe
  const disqusThreadContainer = document.getElementById("disqus_thread");
  if (disqusThreadContainer) {
    disqusThreadContainer.remove();
  }

  // Crea un nuevo contenedor `disqus_thread` para cada película
  const newDisqusThreadContainer = document.createElement("div");
  newDisqusThreadContainer.id = "disqus_thread";
  document.getElementById(`comments-container-${identifier}`).appendChild(newDisqusThreadContainer);

  // Si DISQUS ya está definido, utiliza el método reset para cambiar de página dinámicamente
  if (typeof DISQUS !== 'undefined') {
    DISQUS.reset({
      reload: true,
      config: function () {
        this.page.identifier = identifier; // Identificador único para cada película
        this.page.url = url; // URL única para cada película
      }
    });
  } else {
    // Si DISQUS no está definido, carga el script de Disqus por primera vez
    pageIdentifier = identifier;
    pageURL = url;

    const d = document, s = d.createElement('script');
    s.src = 'https://https-cinelazy-github-io.disqus.com/embed.js';  // URL correcta del subdominio de Disqus
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  }
}





let categoriaActual = "pelicula";

function crearTarjetaPelicula(pelicula) {
  let opcionesIframe = '';
  let contenidoTemporadas = '';

  if (pelicula.categoria === "serie") {
    pelicula.temporadas.forEach((temporada) => {
      let opcionesCapitulos = '';

      temporada.capitulos.forEach((capitulo) => {
        opcionesCapitulos += `<option value="${capitulo.numero}">${capitulo.titulo}</option>`;
      });

      contenidoTemporadas += `
        <button style="--bs-btn-hover-bg: #000000; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;" class="mb-3 btn btn-dark border-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTemporada${temporada.numero}" aria-expanded="false" aria-controls="collapseTemporada${temporada.numero}">
          Temporada ${temporada.numero}
        </button>
        <div class="collapse" id="collapseTemporada${temporada.numero}">
          <div class="card-body">
            <select id="selectCapitulo${pelicula.id}_${temporada.numero}" class="form-select bg-dark text-light border-2 border-danger mb-3" onchange="cargarServidores(this, ${pelicula.id}, ${temporada.numero})">
              <option value="">Selecciona un capítulo</option>
              ${opcionesCapitulos}
            </select>
            <select id="selectServidor${pelicula.id}_${temporada.numero}" class="form-select bg-dark text-light border-2 border-danger mb-3" onchange="cargarIframe(this)" style="display:none;">
              <option value="">Selecciona un servidor</option>
            </select>
          </div>
        </div>
      `;
    });
  } else {
    pelicula.iframeOptions.forEach((opcion) => {
      opcionesIframe += `<option value="${opcion.value}">${opcion.text}</option>`;
    });
  }

  return `
    <div class="col" data-categoria="${pelicula.categoria}">
      <div class="modal fade" id="modal${pelicula.id}" tabindex="-1" aria-labelledby="modalLabel${pelicula.id}" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-dialog-centered modal-fullscreen">
          <div class="modal-content">
            <div class="modal-header border-5 border-danger">
              <h1 class="modal-title fs-5 Ptitulo" id="modalLabel${pelicula.id}">${pelicula.titulo}</h1>
              
            </div>
            
            <div class="modal-body bg-dark text-light">
              <button style="--bs-btn-hover-bg: #000000; --bs-btn-hover-color: #6ff1ff; --bs-btn-border-color: #a10000;" class="mb-3 btn btn-dark border-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Ver información
              </button>
              <div class="collapse" id="collapseExample">
                <div class="card-body">
                  <div class="border-danger border-2 card mb-3" style="max-width: 940px;">
                    <div class="row g-0">
                      <div class="col-md-4 bg-dark">
                        <img src="${pelicula.imagen}" class="img-fluid rounded-start" alt="${pelicula.alt}">
                      </div>
                      <div class="col-md-8 bg-dark text-light">
                        <div class="card-body bg-dark text-light">
                          <h5 class="card-title Pinfo overflow-auto" style="max-width: 99%; max-height: 150px;">${pelicula.descripcion}</h5>
                          <p class="card-text">
                            <div class="Pinfo">Año: ${pelicula.fecha_estreno}<br>Apta: para mayores de 12 años<br>Duración: ${pelicula.duracion} minutos (${Math.floor(pelicula.duracion / 60)}h ${pelicula.duracion % 60}m)<br>Generos: ${pelicula.genero.join(', ')}<br>Id: ${pelicula.id.toString().padStart(6, '0')}</div>
                          </p>
                          <p class="card-text"><small class="bg-dark text-light">Última actualización: ${pelicula.uActu}</small></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              ${contenidoTemporadas || `
                <select id="select${pelicula.id}" class="form-select bg-dark text-light border-2 border-danger mb-3" onchange="cargarIframe(this)">
                  <option value="">Selecciona una opción</option>
                  ${opcionesIframe}
                </select>
              `}
              <div id="${pelicula.id}" class="sosp border border-2 border-danger rounded">
                <iframe id="iframe${pelicula.id}" src="" sandbox="allow-scripts allow-same-origin" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" allowfullscreen></iframe>
              </div>
              <div id="comments-container-${pelicula.id}">
                <button onclick="loadDisqus('${pelicula.id}', 'https://cinelazy.github.io/${pelicula.id}')">Cargar comentarios (haz clic aquí). Si no carga, haz clic de nuevo.</button>
                <div id="disqus_thread"></div> 
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary btn-dark" style="margin-right:auto;--bs-btn-bg:#380304;--bs-btn-hover-bg:#380304;">Favorito</button>
              <button type="button" class="btn btn-primary btn-dark" data-bs-dismiss="modal">Atras</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card imgjump" style="--bs-card-border-color:rgb(249 3 3); --bs-card-border-radius:0px ;">
        <img data-bs-toggle="modal" data-bs-target="#modal${pelicula.id}" src="${pelicula.imagen}" alt="${pelicula.alt}">
      </div>
    </div>
  `;
}



function cargarPeliculas() {
  const contenedorPeliculas = document.querySelector('.peliscarg');
  contenedorPeliculas.innerHTML = '';
  peliculas.forEach((pelicula) => {
    contenedorPeliculas.innerHTML += crearTarjetaPelicula(pelicula);
  });
  filtrarPorCategoria();
}

document.addEventListener('DOMContentLoaded', cargarPeliculas);

document.querySelectorAll('.scroll-container .btn').forEach(function(button) {
  button.addEventListener('click', function() {
    var genero = this.getAttribute('data-genero');
    if (genero === "Todo") {
      document.getElementById('busqueda').value = '';
    } else {
      document.getElementById('busqueda').value = genero;
    }
    document.getElementById('busqueda').dispatchEvent(new Event('input'));
  });
});




document.getElementById('busqueda').addEventListener('input', function() {
  var busqueda = normalizarTexto(this.value);
  var elementos = document.querySelectorAll('.col');

  elementos.forEach(function(elemento) {
    var texto = normalizarTexto(elemento.textContent);
    var esFavorito = elemento.querySelector('.modal-footer button').textContent === "No favorito";
    
    var esVisible = false;
    if (categoriaActual === "favoritos") {
      esVisible = texto.includes(busqueda) && esFavorito;
    } else {
      esVisible = texto.includes(busqueda) && elemento.getAttribute('data-categoria') === categoriaActual;
    }

    elemento.style.display = esVisible ? 'block' : 'none';
  });
});





function filtrarPorCategoria() {
  var elementos = document.querySelectorAll('.col');
  elementos.forEach(function(elemento) {
    var categoria = elemento.getAttribute('data-categoria');
    var esFavorito = elemento.querySelector('.modal-footer button').textContent !== "Favorito";
    
    if (categoriaActual === "favoritos") {
      elemento.style.display = esFavorito ? 'block' : 'none';
    } else {
      elemento.style.display = categoria === categoriaActual ? 'block' : 'none';
    }
  });
}


function cargarIframe(selector) {
  var modal = selector.closest('.modal');
  var iframe = modal.querySelector('iframe');
  var opciones = selector.options;
  for (var i = 0; i < opciones.length; i++) {
    if (opciones[i].value === selector.value) {
    iframe.src = selector.value;
    break;
    }
  }
}




function cargarServidores(selector, peliculaId, temporadaNumero) {
  var capituloNumero = selector.value;
  var temporada = peliculas.find(p => p.id === peliculaId).temporadas.find(t => t.numero === temporadaNumero);
  var capitulo = temporada.capitulos.find(c => c.numero == capituloNumero);
  
  var selectServidor = document.getElementById(`selectServidor${peliculaId}_${temporadaNumero}`);
  var iframe = document.getElementById(`iframe${peliculaId}`);

  if (capitulo && capitulo.iframeOptions.length > 0) {
    let opcionesIframeCapitulo = '';
    capitulo.iframeOptions.forEach((opcion) => {
      opcionesIframeCapitulo += `<option value="${opcion.value}">${opcion.text}</option>`;
    });
    selectServidor.innerHTML = `
      <option value="">Selecciona un servidor</option>
      ${opcionesIframeCapitulo}
    `;
    selectServidor.style.display = 'block';
    iframe.src = ""; // Limpiar iframe cuando cambian los capítulos
  } else {
    selectServidor.style.display = 'none';
    iframe.src = ""; // Limpiar iframe si no hay capítulos disponibles
  }
}







  function normalizarTexto(texto) {
    return texto.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
  }

  // Añadido para el scroll horizontal con la rueda del ratón
  document.getElementById('scrollContainer').addEventListener('wheel', function(e) {
    if (e.deltaY !== 0) {
      this.scrollLeft += e.deltaY;
      e.preventDefault();
    }
  });







</script>




<script>
  // Función para obtener el valor de una cookie
  function getCookie(name) {
    let cookieArr = document.cookie.split(";");
    for (let i = 0; i < cookieArr.length; i++) {
      let cookiePair = cookieArr[i].split("=");
      if (name === cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }
  
  // Función para establecer una cookie
  function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      let date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }
  
  // Función para añadir un favorito a la cookie
  function addFavorito(id) {
    let favoritos = getCookie("favoritos");
    favoritos = favoritos ? favoritos.split(",") : [];
    if (!favoritos.includes(id.toString())) {
      favoritos.push(id);
      setCookie("favoritos", favoritos.join(","), 30);
    }
  }
  
  // Función para eliminar un favorito de la cookie
  function removeFavorito(id) {
    let favoritos = getCookie("favoritos");
    favoritos = favoritos ? favoritos.split(",") : [];
    favoritos = favoritos.filter(fav => fav !== id.toString());
    setCookie("favoritos", favoritos.join(","), 30);
  }
  
  // Función para manejar el clic en el botón de "Favorito"
  function toggleFavorito(button, id) {
    let favoritos = getCookie("favoritos");
    favoritos = favoritos ? favoritos.split(",") : [];
    if (favoritos.includes(id.toString())) {
      removeFavorito(id);
      button.textContent = "Favorito";
    } else {
      addFavorito(id);
      button.textContent = "No favorito";
    }
  }
  
  // Función para inicializar el estado de los botones de "Favorito"
  function initFavoritos() {
    let favoritos = getCookie("favoritos");
    favoritos = favoritos ? favoritos.split(",") : [];
    peliculas.forEach(pelicula => {
      let button = document.querySelector(`#modal${pelicula.id} .btn-primary`);
      if (favoritos.includes(pelicula.id.toString())) {
        button.textContent = "No favorito";
      } else {
        button.textContent = "Favorito";
      }
      button.addEventListener('click', function() {
        toggleFavorito(button, pelicula.id);
      });
    });
  }
  
  // Llamar a la función al cargar la página
  document.addEventListener('DOMContentLoaded', function() {
  
    initFavoritos();
  });
  </script>
  


</body>
</html>
