<?php
require_once __DIR__ . '/lang.php';
?>

<style>
/* ===============================
   DESKTOP (NORMAL)
================================ */
@media (min-width: 992px){
  #mainNavbar{
    position: static !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
    background: transparent !important;
    transition: none !important;
  }
}

/* ===============================
   MOBILE SLIDE LEFT (SMOOTH)
================================ */
@media (max-width: 991.98px){

  #mainNavbar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    padding: 1rem;
    background: #111;

    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);

    will-change: transform;
    z-index: 1050;
    overflow-y: auto;
  }

  #mainNavbar.show{
    transform: translateX(0);
  }

  /* OVERLAY */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    opacity:0;
    pointer-events:none;
    transition: opacity .35s ease;
    z-index:1030;
  }

  body.nav-open::before{
    opacity:1;
    pointer-events:auto;
  }

  /* LOCK SCROLL */
  body.nav-open{
    overflow:hidden;
  }
}
</style>


<nav id="mainNav"
     class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">

  <div class="container-fluid">

    <!-- LOGO -->
    <a class="navbar-brand fw-bold"
       href="/<?= $lang ?>/">
      🎬 DramCin
    </a>

    <!-- TOGGLER -->
    <button class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- MENU -->
    <div class="collapse navbar-collapse" id="mainNavbar">

      <ul class="navbar-nav me-auto mb-3 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active"
             href="/<?= $lang ?>/">
            <?= __('nav_home') ?>
          </a>
        </li>
      </ul>

      <!-- SEARCH -->
      <form class="d-flex mb-3 mb-lg-0 me-lg-3"
            action="<?= "/$lang/search" ?>"
            method="get">
        <input type="hidden" name="lang" value="<?= $lang ?>">
        <input class="form-control form-control-sm me-2"
               type="search"
               name="q"
               placeholder="<?= __('nav_search') ?>"
               required>
        <button class="btn btn-outline-light btn-sm">🔍</button>
      </form>

      <!-- LANGUAGE -->
      <div class="dropdown">
        <button class="btn btn-outline-light btn-sm dropdown-toggle"
                data-bs-toggle="dropdown">
          🌍 <?= strtoupper($lang) ?>
        </button>

        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark"
            style="max-height:300px;overflow:auto">

          <li><a class="dropdown-item" href="/in">🇮🇩 Indonesia</a></li>
          <li><a class="dropdown-item" href="/en">🇺🇸 English</a></li>
          <li><a class="dropdown-item" href="/ja">🇯🇵 日本語</a></li>
          <li><a class="dropdown-item" href="/zhHans">🇨🇳 中文 (简体)</a></li>
          <li><a class="dropdown-item" href="/zh">🇹🇼 中文 (繁體)</a></li>
          <li><a class="dropdown-item" href="/es">🇪🇸 Español</a></li>
          <li><a class="dropdown-item" href="/de">🇩🇪 Deutsch</a></li>
          <li><a class="dropdown-item" href="/fr">🇫🇷 Français</a></li>
          <li><a class="dropdown-item" href="/pt">🇵🇹 Português</a></li>
          <li><a class="dropdown-item" href="/ar">🇸🇦 العربية</a></li>
          <li><a class="dropdown-item" href="/th">🇹🇭 ไทย</a></li>
          <li><a class="dropdown-item" href="/tl">🇵🇭 Filipino</a></li>
          <li><a class="dropdown-item" href="/ko">🇰🇷 한국어</a></li>
          <li><a class="dropdown-item" href="/tr">🇹🇷 Türkçe</a></li>

        </ul>
      </div>

    </div>
  </div>
</nav>

<div style="height:70px"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const nav = document.getElementById('mainNavbar');
  const toggler = document.querySelector('.navbar-toggler');

  nav.addEventListener('shown.bs.collapse', () => {
    document.body.classList.add('nav-open');
  });

  nav.addEventListener('hidden.bs.collapse', () => {
    document.body.classList.remove('nav-open');
  });

  /* klik overlay = close */
  document.body.addEventListener('click', e => {
    if (
      document.body.classList.contains('nav-open') &&
      !e.target.closest('#mainNavbar') &&
      !e.target.closest('.navbar-toggler')
    ) {
      bootstrap.Collapse.getInstance(nav)?.hide();
    }
  });
});
</script>
<!-- JOIN TELEGRAM -->
<a href="https://t.me/s/Dramaboxenglish" target="_blank" class="telegram-float">
📢 Join Telegram
</a>

<!-- SHARE FLOAT -->
<div class="share-container">

    <button class="share-toggle" onclick="toggleShare()">🔗 Share</button>

    <div class="share-float" id="shareBox">
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://dramcin.com'); ?>" target="_blank">Facebook</a>

        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode('https://dramcin.com'); ?>" target="_blank">X</a>

        <a href="https://api.whatsapp.com/send?text=<?php echo urlencode('https://dramcin.com'); ?>" target="_blank">WhatsApp</a>

        <a href="https://t.me/share/url?url=<?php echo urlencode('https://dramcin.com'); ?>" target="_blank">Telegram</a>

        <a href="https://www.reddit.com/submit?url=<?php echo urlencode('https://dramcin.com'); ?>" target="_blank">Reddit</a>
    </div>

</div>

<style>

/* TELEGRAM BUTTON */
.telegram-float{
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #0088cc;
    color: #fff;
    padding: 12px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
}

/* SHARE CONTAINER */
.share-container{
    position: fixed;
    bottom: 70px;
    left: 20px;
    z-index:9999;
}

/* SHARE TOGGLE BUTTON */
.share-toggle{
    background:#135c91;
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:20px;
    cursor:pointer;
    font-size:13px;
}

/* SHARE MENU */
.share-float{
    display:none;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
}

.share-float a{
    background:#135c91;
    color:#fff;
    padding:6px 10px;
    font-size:12px;
    border-radius:5px;
    text-decoration:none;
    text-align:center;
}

.share-float a:hover{
    background:#555;
}

</style>

<script>
function toggleShare(){
    var box = document.getElementById("shareBox");
    if(box.style.display === "flex"){
        box.style.display = "none";
    }else{
        box.style.display = "flex";
    }
}
</script>