<body >  
    <section class="container">
      <nav class="navbar">
        <div class="nav-logo">
          <a href="/">
            <img src="https://i.imgur.com/jz3km4Q.png" alt="Logo" class="logo">
          </a>
        </div>
    
        <ul class="nav-links">
          <li class="nav-item"><a href="/">Home</a></li>
          <!-- <li class="nav-item"><a href="#">Românești</a></li>
          <li class="nav-item"><a href="#">Globale</a></li> -->
          <li class="nav-item"><a href="/store">Magazin</a></li>
          <li class="nav-item"><a class="premium" href="/premium">Premium</a></li>
          <li class="nav-item"><a href="/about me">Despre Noi</a></li>
        </ul>

        <div class="user-actions">
          <% if (user) { %>
            <div class="dropdown">
              <button class="btn btn-user" onclick="toggleUserDropdown()">
                <%= user.username %> 
                <img src="<%= user.avatarURL %>" alt="Avatar" class="user-avatar">
                <i class="ri-arrow-down-s-line"></i>
              </button>
              <div id="user-dropdown-content" class="dropdown-content">
                <div class="Desktop-Hide">
                <a href="#">Românești</a>
                <a href="#">Globale</a>
                <a href="/premium">Premium</a>
              </div>
              <% if (user && user.isAdmin) { %>
                <a href="/admin">Admin</a>
              <% } %>
                <a href="/logout">Logout</a>
              </div>
            </div>
          <% } else { %>
            <a href="/auth/discord" class="btn btn-discord">
              Login cu Discord
              </a>
          <% } %>
        </div>

    <script>
      self.addEventListener('install', (event) => {
  console.log('Service Worker instalat');
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return new Response('Conexiunea este offline.');
    })
  );
});

      if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker înregistrat'))
    .catch((error) => console.error('Eroare la înregistrarea Service Worker-ului:', error));
}

      let deferredPrompt;

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  deferredPrompt = event;
  const installButton = document.getElementById('installButton');
  installButton.style.display = 'block';

  installButton.addEventListener('click', () => {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted A2HS');
      } else {
        console.log('User dismissed A2HS');
      }
      deferredPrompt = null;
    });
  });
});

    </script>
      </nav>
    
      <script>
        function toggleMenu() {
          const menu = document.querySelector('.nav-links');
          menu.classList.toggle('active');
        }
    
        function toggleUserDropdown() {
          const dropdown = document.getElementById('user-dropdown-content');
          dropdown.classList.toggle('active');
        }
    
        document.addEventListener('click', function(event) {
          const dropdown = document.getElementById('user-dropdown-content');
          if (dropdown && !event.target.closest('.dropdown')) {
            dropdown.classList.remove('active');
          }
        });
      </script>
    </section>
</br> <!-- </br></br></br></br> -->
<span class="blur"></span>

<!-- PROMO DIS -->
    <div class="content">
      <section class="discord-promotion">
        <div class="discord-blur-bg"></div>
        <div class="discord-content">
          <img src="https://i.imgur.com/jz3km4Q.png" style="border-radius: 15px;" alt="Discord Logo" class="discord-logo">
          <h2>Bine ai venit pe serverul nostru Discord!</h2>
          <p>Descoperă comunitatea noastră 18+ cu peste 40.000 de membri activi.</p>
          <a href="https://discord.gg/Black-Money" target="_blank" class="discord-join-btn">
            Alătură-te serverului nostru
          </a>
        </div>
      </section>
      <!-- END PROMO DIS -->
  
      <% if (user) { %> 
        <!-- UPLOAD / PREVIEW VIDEO BEFOR UPLOAD / LOADING SCREEN -->
        <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data" onsubmit="return handleUpload(event)">
              <input type="text" name="title" placeholder="Titlu" required>
              <input type="text" name="description" placeholder="Descriere" required>
              <label for="category">Categorie</label>
              <select name="category" id="category" multiple required>
                <option value="Romanesti">Romanesti</option>
                <option value="Globale">Globale</option>
                <option value="Vedete">Vedete</option>
            </select>
            <input type="file" name="video" id="videoInput" accept="video/*" required>
            <div id="videoPreviewContainer" style="display: none; position: relative; margin-top: 10px;">
                <button id="cancelPreview" type="button" style="padding: 0; position: absolute; top: -10px; right: -45px; background: red; color: white; border: none; border-radius: 323%; width: 100px; height: 20px; cursor: pointer;">Anuleaza</button>
                <video id="videoPreview" controls style="width: 100%; max-height: 200px; border: 2px solid #ccc; border-radius: 8px; background: #000;">
                  Your browser does not support the video tag.
                </video>
              </div>
              <button type="submit">Adaugă Videoclip</button>
          </form> 
         
          <div id="loadingScreen" class="hidden">
            <p id="loadingMessage">Se încarcă...</p>
          </div>
        
      <% } else { %>
        <h1 class="video-title main-title" style="text-align: center;">Trebuie să fii autentificat pentru a încărca un videoclip.</h1>
<!-- END UPLOAD / PREVIEW VIDEO BEFOR UPLOAD / LOADING SCREEN / TREBUIE SA FI LOGAT INAINTE DE A POSTA VIDEO PLM..-->
      <% } %>

      <div id="avertizare" class="avertizare">
        <div class="avertizare-container">
          <img src="https://i.imgur.com/jz3km4Q.png" alt="Logo" class="avertizare-logo">
          <h1>Avertizare</h1>
          <p>Acest site conține conținut care poate fi nepotrivit pentru anumite persoane. Continuați doar dacă aveți 18 ani sau mai mult.</p>
          <div class="footer-bottom">
            <p style="font-size: 13px;">&copy; 2024 - 2025 ( Black Money | Hubyp ) Website. Toate drepturile rezervate.</p>
            <p><a href="/privacy-policy">Politica de Confidențialitate</a> | <a href="/terms">Termeni și Condiții</a> | <a href="https://www.law.cornell.edu/wex/digital_millennium_copyright_act">DMCA</a> | <a href="https://www.rtalabel.org/index.php?content=parents">RTA</a></p>
          </div>
          <div class="avertizare-butoane">
            <button id="continua" class="btn-continua">Continuați</button>
            <button id="inchide" class="btn-inchide">Părăsiți</button>
          </div>
        </div>
      </div>
      <div id="background-blur" class="background-blur"></div> <!-- Fundal cu blur -->
     
<!-- VIDEOCLIP-URI POSTARE / GIRD VIDEO -->
<div class="content">
  <% const renderedIds = []; %>
  <% const categories = ['Romanesti', 'Globale', 'Vedete']; %>
  <% categories.forEach(category => { %>
      <section class="category-section">
          <h2 class="section-title">
              Videoclipuri din categoria <%= category %>
          </h2>
          <span class="blur"></span>

          <div class="video-grid">
              <% const categoryVideos = videos.filter(video => video.category.includes(category)); %>
              <% categoryVideos.forEach(video => { %>
                
                  <div class="video-card" id="video-container" data-video-id="<%= video._id %>">
                      <a href="/video/<%= video._id %>" class="thumbnail-container"> 
                          <div class="video-thumbnail" style="background-image: url('<%= video.thumbnail %>');">
                              <img class="gif" src="<%= video.gif %>" alt="GIF" />
                              <div class="video-duration"><%= video.duration %></div>
                          </div>
                      </a>
                      <style>
                
                      </style>
                      <div class="video-info">
                          <h2 class="video-title"><%= video.title %></h2>
                          <% if (video.uploader) { %>
                              <p class="uploader-info">
                                Nume: 
                                <% if (video.uploader.avatarURL) { %>
                                  <img src="<%= video.uploader.avatarURL %>" alt="Avatar for <%= video.uploader.username %>" class="uploader-avatar">
                              <% } %>
                                  
                                  <span class="verified-icon"><%= video.uploader.verified ? '✔' : '' %></span>
                              </p>
                          <% } else { %>
                              <p>Uploader necunoscut</p>
                          <% } %>
                          <div class="video-stats">
                              <span class="views"><%= video.views.toLocaleString() %> vizionări</span>
                              <span class="likes"><%= video.likesPercentage %>% apreciere</span>
                          </div>
                      </div>
                  </div>
                  <% renderedIds.push(video._id.toString()); %>
              <% }); %>
          </div>
      </section>
  <% }); %>
</div>

<!-- END GRID VIDEO / VIDEOCLIP-URI POSTATE -->

<!-- FOTER -->
    <footer class="footer">
      <div class="footer-container">
        <div class="footer-logo">
          <a href="/">
            <img src="https://i.imgur.com/jz3km4Q.png" alt="Logo" class="footer-logo-img">
          </a>
        </div>
        <ul class="footer-links">
          <li><a href="/">Home</a></li>
          <li><a href="/store">Magazin</a></li>
          <li><a href="/premium">Premium</a></li>
          <li><a href="/about me">Despre Noi</a></li>
        </ul>
        <ul class="social-links">
          <!-- <li><a href="https://facebook.com" target="_blank">Facebook</a></li>
          <li><a href="https://twitter.com" target="_blank">Twitter</a></li> -->
          <!-- <button id="installButton" style="display: none;">Instalează Aplicația</button> -->
          <li><a id="installButton" style="display: none;" target="_blank">Instaleaza Aplicatia</a></li>
          <li><a href="https://discord.gg/Black-Money" target="_blank">Discord</a></li>
        </ul>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 - 2025 ( Black Money | Hubyp ) Website. Toate drepturile rezervate.</p>
        <p><a href="/privacy-policy">Politica de Confidențialitate</a> | <a href="/terms">Termeni și Condiții</a> | <a href="/terms">DMCA</a> | <a href="https://www.rtalabel.org/index.php?content=parents">RTA</a></p>
      </div>
    </footer>
    <!-- END FOOTER  -->

   <script>
    const categorySelect = document.getElementById('category');
  
    categorySelect.addEventListener('change', () => {
      const selectedCategories = Array.from(categorySelect.selectedOptions).map(option => option.value);
  
      if (selectedCategories.includes('Romanesti')) {
        const globalOption = categorySelect.querySelector('option[value="Globale"]');
        globalOption.disabled = true;
      } else {
        const globalOption = categorySelect.querySelector('option[value="Globale"]');
        globalOption.disabled = false;
      }
  
      if (selectedCategories.includes('Globale')) {
        const romanianOption = categorySelect.querySelector('option[value="Romanesti"]');
        romanianOption.disabled = true;
      } else {
        const romanianOption = categorySelect.querySelector('option[value="Romanesti"]');
        romanianOption.disabled = false;
      }
    });

            function handleUpload(event) {
              event.preventDefault();
              
              const loadingScreen = document.getElementById('loadingScreen');
              const loadingMessage = document.getElementById('loadingMessage');
              const form = document.getElementById('uploadForm');
          
              loadingScreen.classList.remove('hidden'); 
              loadingMessage.textContent = "Se procesează thumbnail-ul...";
          
              let step = 0;
              const messages = [
                "Thumbnail creat și salvat cu succes.",
                "Videoclip încărcat cu succes.",
                "Totul a funcționat cu succes.",
                "Un Moment..."
              ];
          
              function showNextMessage() {
                if (step < messages.length) {
                  loadingMessage.textContent = messages[step];
                  step++;
                  setTimeout(showNextMessage, 6000); 
                } else {
                  form.submit(); 
                }
              }
          
              showNextMessage(); 
          
              form.addEventListener('error', () => {
                loadingScreen.classList.add('hidden');
                alert("A apărut o eroare în timpul încărcării. Încercați din nou.");
              });
          
              return false; 
            }

                const videoInput = document.getElementById('videoInput');
                const videoPreviewContainer = document.getElementById('videoPreviewContainer');
                const videoPreview = document.getElementById('videoPreview');
                const cancelPreview = document.getElementById('cancelPreview');
              
                videoInput.addEventListener('change', (event) => {
                  const file = event.target.files[0];
              
                  if (file) {
                    const fileURL = URL.createObjectURL(file);
                    videoPreview.src = fileURL; 
                    videoPreviewContainer.style.display = 'block'; 
                  }
                });
              
                cancelPreview.addEventListener('click', () => {
                  videoPreview.src = ''; 
                  videoPreviewContainer.style.display = 'none'; 
                  videoInput.value = ''; 
                });
                
              </script>
<script>
// Obținem elementele
const avertizare = document.getElementById('avertizare');
const continuaBtn = document.getElementById('continua');
const inchideBtn = document.getElementById('inchide');
const backgroundBlur = document.getElementById('background-blur');

// Verifică dacă au trecut 12 ore de la ultima vizualizare a avertizării
function checkAvertizare() {
  const ultimaVizualizare = localStorage.getItem('ultimaVizualizare');
  const acum = new Date().getTime(); // Obține timpul curent

  // Dacă nu există timestamp-ul în localStorage sau au trecut mai mult de 12 ore
  if (!ultimaVizualizare || (acum - ultimaVizualizare) > 12 * 60 * 60 * 1000) {
    avertizare.style.display = 'flex'; // Arată avertizarea
    backgroundBlur.style.display = 'block'; // Arată fundalul blurat
  } else {
    avertizare.style.display = 'none'; // Ascunde avertizarea
    backgroundBlur.style.display = 'none'; // Ascunde fundalul blurat
  }
}

// Funcție pentru a salva timestamp-ul ultimei vizualizări
function salvaVizualizare() {
  const acum = new Date().getTime();
  localStorage.setItem('ultimaVizualizare', acum);
}

// Funcție pentru a elimina avertizarea și a îndepărta blurul
function eliminaAvertizarea() {
  avertizare.style.display = 'none';
  backgroundBlur.style.display = 'none'; // Îndepărtează fundalul blurat
  salvaVizualizare(); // Salvează timpul ultimei vizualizări
}

// Când se apasă pe "Continuați"
continuaBtn.addEventListener('click', eliminaAvertizarea);

// Când se apasă pe "Părăsiți"
inchideBtn.addEventListener('click', () => {
  window.location.href = 'https://www.google.com'; // Sau o altă destinație
});

// Verifică la încărcarea paginii dacă trebuie să afișezi avertizarea
checkAvertizare();

</script>

       <script src="https://cors-anywhere.herokuapp.com/https://static.cloudflareinsights.com/beacon.min.js"></script>
       <script async src="https://static.cloudflareinsights.com/beacon.min.js"></script>
       <script src="https://static.cloudflareinsights.com/beacon.min.js"></script>

</body>