{% load static %}
{% load i18n %}

<div class="p-2 bg-black header-top flex justify-end items-center sm:justify-between text-white md:px-16 lg:px-24 xl:px-32">
    <div class="hidden sm:block">
        <label class="border-l-2 pl-5">{% trans 'Kontakt' %} : <a
                href="tel:{{config.contact_phone}}">{{config.contact_phone}}</a></label>
    </div>
    <div class="flex gap-5 items-center">
        <form id="searchForm" action="{% url 'products' 'search' %}" method="GET" class="md:block hidden">
            <div class="flex items-center gap-2">
                <input
                        id="inputSearch"
                        type="text"
                        name="search"
                        class="text-black pointer-events-none w-0 opacity-0 transition-all duration-300 ease-in-out border border-gray-300 py-1 rounded focus:outline-none focus:ring-0 focus:border-transparent"
                />

                <button
                        id="inputSearchButton"
                        class="bg-gray-700 text-white px-3 py-1 rounded pointer-events-none w-0 opacity-0 overflow-hidden transition-all duration-300 ease-in-out"
                >
                    {% trans 'Pretraži' %}
                </button>
                <i id="inputSearchIcon" class="fa-solid fa-magnifying-glass cursor-pointer"></i>
            </div>
        </form>
        <div>
            <label class="border-r-2 pr-5">
                <a href="https://maps.app.goo.gl/5gRqn56Li5t57S6c8"
                   target="_blank" class="hover:underline">{% trans 'Kako do nas?' %}</a></label>

            <!-- Dugme za otvaranje -->
            <div class="inline cursor-pointer languageToggle" onclick="toggleLanguageMenu(this)">
                <p class="pl-5 mr-2 inline">{% trans 'Jezik' %}</p>
                <img src="{% static 'img/icons/raphael_arrowdown.png' %}" alt="" class="w-4 inline"/>
            </div>

            <!-- Dropdown meni -->
            <div class="languageMenu hidden origin-top-left absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                <div class="py-1">
                    <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
                            onclick="setLanguage('en')">
                        <img src="{% static 'img/icons/twemoji_flag-england.png' %}" alt="" class="w-6 inline mr-2"/>
                        English
                    </button>
                    <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
                            onclick="setLanguage('sr')">
                        <img src="{% static 'img/icons/twemoji_flag-serbia.png' %}" alt="" class="w-6 inline mr-2"/>
                        Српски
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
<header>
    <!-- Logo i mobilni meni dugme -->
    <div class="flex justify-between md:justify-center  items-center p-4 ">
        <a href="{% url 'home' %}">
            <img src="{% static 'img/logo.png' %}" alt="Logo" class="w-16 md:w-32"/>
        </a>

        <!--        <label class="md:hidden block font-bold">MIYAMIE</label>-->
        <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>
    </div>

    <!-- Desktop navigacija -->
    <nav class="font-semibold hidden md:flex justify-center bg-white shadow relative z-50">

        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex space-x-4">
                    <!--                    <a href="{% url 'admin:index' %}" class="text-gray-700 hover:text-gray-400 px-3 py-2">ADMIN</a>-->
                    <a href="{% url 'home' %}" class="text-gray-700 hover:text-gray-400 px-3 py-2">{% trans "NASLOVNA" %}</a>
                    <!--                    MIYAMIA     -->
                    <div class="relative group z-50">
                        <a href="{% url 'products' 'all' %}">
                            <button class="text-gray-700 hover:text-gray-400 px-3 py-2 flex items-center">
                                {% trans "EKSKLUZIVNE HALJINE" %}
                                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M19 9l-7 7-7-7" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                            </button>
                        </a>

                        <!-- Glavni dropdown -->
                        <div class="absolute left-0 w-[450px] bg-white shadow-lg mt-1 rounded overflow-hidden
                max-h-0 opacity-0 group-hover:max-h-[500px] group-hover:opacity-100
                transition-all duration-500 ease-in-out z-40">
                            <div class="flex gap-2 p-4 justify-between">
                                <!-- Linkovi -->
                                <div class="flex flex-col w-full space-y-1">
                                    <a href="{% url 'products' 'long' %}"
                                       class="block py-2 text-gray-700 hover:bg-gray-100 rounded px-2">{% trans "DUGE HALJINE" %}</a>
                                    <a href="{% url 'products' 'short' %}"
                                       class="block py-2 text-gray-700 hover:bg-gray-100 rounded px-2">{% trans "KRATKE HALJINE" %}
                                        </a>
                                    <a href="{% url 'products' 'bestseller' %}"
                                       class="block py-2 text-gray-700 hover:bg-gray-100 rounded px-2">{% trans "NAJPRODAVANIJE" %}</a>

                                    <!-- SALE sa podmenijem -->
                                    <div class="group/sub relative">
                                        <button class="flex justify-between relative text-gray-700 hover:text-gray-400 px-3 py-2 flex items-center w-full">
                                            SALE
                                            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor"
                                                 viewBox="0 0 24 24">
                                                <path d="M19 9l-7 7-7-7" stroke-width="2" stroke-linecap="round"
                                                      stroke-linejoin="round"/>
                                            </svg>
                                        </button>

                                        <!-- Podmeni ispod dugmeta SALE -->
                                        <div class="absolute top-full left-0 mt-1 w-full bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover/sub:opacity-100 group-hover/sub:visible transition-all duration-300 ease-in-out z-50">
                                            <a href="{% url 'products' 'for_sale' %}" class="block p-4 hover:bg-gray-100 text-gray-700">{% trans "PRODAJA" %}</a>
                                            <a href="{% url 'products' 'rent' %}" class="block p-4 hover:bg-gray-100 text-gray-700">{% trans "IZNAJMLJIVANJE" %}</a>
                                        </div>
                                    </div>

                                </div>

                                <!-- Slika desno -->
                                <div class="flex-shrink-0 w-64">
                                    <img src="{% static 'img/test1.webp' %}" alt="Haljina"
                                         class="w-full h-full rounded"/>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!--                    LE CHOIX    -->
                    <div class="relative group z-99">
                        <a href="{% url 'products' 'lechoix' %}">
                            <button class="text-gray-700 hover:text-gray-400 px-3 py-2 flex items-center">
                                LE CHOIX
                                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M19 9l-7 7-7-7" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                            </button>
                        </a>
                        <div class="absolute left-0 w-[450px] bg-white shadow-lg mt-1 rounded overflow-hidden max-h-0 opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-500 ease-in-out">
                            <div class="flex gap-2 p-4 justify-between">
                                <!-- Linkovi -->
                                <div class="flex flex-col w-full">
                                    <a href="{% url 'products' 'woman' %}"
                                       class="block py-2 text-gray-700 hover:bg-gray-100 rounded px-2">{% trans "ŽENE" %}</a>
                                    <a href="{% url 'products' 'girls' %}"
                                       class="block py-2 text-gray-700 hover:bg-gray-100 rounded px-2">{% trans "DEVOJČICE" %}</a>
                                </div>

                                <!-- Slika desno -->
                                <div class="flex-shrink-0 w-64">
                                    <img src="{% static 'img/cover.jpg' %}" alt="Haljina"
                                         class="w-full h-full rounded"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="{% url 'showroom' %}" class="text-gray-700 hover:text-gray-400 px-3 py-2">{% trans "SHOWROOM" %}</a>
                    <a href="{% url 'about' %}" class="text-gray-700 hover:text-gray-400 px-3 py-2">{% trans "O NAMA" %}</a>
                    <a href="{% url 'contact' %}" class="text-gray-700 hover:text-gray-400 px-3 py-2">{% trans "KONTAKT" %}</a>
                    <!--                    <a href="#" class="text-gray-700 hover:text-gray-400 px-3 py-2">ZAKAŽI</a>-->
                </div>
            </div>
        </div>
    </nav>

    <!-- Mobilni meni (hidden by default) -->
    <div id="mobile-menu"
         class="font-semibold fixed top-0 left-0 h-full bg-white shadow-lg transform -translate-x-full  transition-transform duration-300 z-50 md:hidden">
        <div class="p-4 border-b flex justify-between items-center">
            <span class="font-bold text-lg">MIYAMIE</span>
            <button id="close-menu" class="text-gray-700">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="searchForm2" action="{% url 'products' 'search' %}" method="GET">
            <div class="p-2">
                <input
                        id="inputSearch2"
                        type="text"
                        name="search"
                        class="text-black transition-all duration-300 ease-in-out border border-gray-300 py-1 rounded focus:outline-none focus:ring-0 focus:border-transparent"
                />
                <button
                        id="inputSearchButton2"
                        class="bg-black text-white px-3 py-1  overflow-hidden transition-all duration-300 ease-in-out"
                >
                    <i id="inputSearchIcon2" class="fa-solid fa-magnifying-glass cursor-pointer"></i> Pretraži
                </button>

            </div>
        </form>
        <nav class="pl-5 pr-5 space-y-2">
            <a href="{% url 'home' %}" class="mt-6 block text-gray-700 hover:text-gray-400 text-xl font-semibold">{% trans "NASLOVNA" %}</a>
            <!--EKSKLUZIVNE HALJINE MOBILE-->
            <div>
                <div class="flex justify-between items-center gap-5 ">
                    <a href="{% url 'products' 'all' %}"
                       class="w-full text-gray-700 hover:text-gray-400 text-xl font-semibold"
                    >
                        {% trans "EKSKLUZIVNE HALJINE" %}
                    </a>
                    <button id="servicesBtn1" class="p-2 bg-black">
                        <svg class="w-4 h-4 text-white transition-transform duration-200" fill="none"
                             stroke="currentColor"
                             stroke-width="2" viewBox="0 0 24 24">
                            <path d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                </div>
                <ul id="servicesMenu1"
                    class="overflow-hidden ml-4 flex-col transition-all duration-300 ease-in-out max-h-0"
                    style="max-height:0px">
                    <li class="">
                        <a href="{% url 'products' 'long' %}" class="block text-gray-600 hover:text-gray-400 text-xl">{% trans "DUGE HALJINE" %}</a>
                    </li>
                    <li class="">
                        <a href="{% url 'products' 'short' %}" class="block text-gray-600 hover:text-gray-400 text-xl">{% trans "KRATKE HALJINE" %}
                        </a>
                    </li>
                    <li class="">
                        <a href="{% url 'products' 'bestseller' %}"
                           class="block text-gray-600 hover:text-gray-400 text-xl">{% trans "NAJPRODAVANIJE" %}
                        </a>
                    </li>
                    <li>
                        <button onclick="toggleSubmenu()"
                                class="w-full text-left text-gray-600 hover:text-gray-400 text-xl">
                            SALE
                        </button>

                        <ul id="saleSubmenu"
                            class="ml-4 mt-2 flex-col overflow-hidden transition-all duration-300 ease-in-out" >
                            <li>
                                <a href="{% url 'products' 'for_sale' %}"
                                   class="block text-gray-600 hover:text-gray-400 text-lg">{% trans "PRODAJA" %}</a>
                            </li>
                            <li>
                                <a href="{% url 'products' 'rend' %}"
                                   class="block text-gray-600 hover:text-gray-400 text-lg">{% trans "IZNAJMLJIVANJE" %}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--EKSKLUZIVNE HALJINE MOBILE-->
            <div>
                <div class="flex justify-between items-center gap-5 ">
                    <a href="{% url 'products' 'lechoix' %}"
                       class="w-full text-gray-700 hover:text-gray-400 text-xl font-semibold"
                    >
                        LE CHOIX
                    </a>
                    <button id="servicesBtn2" class="p-2 bg-black">
                        <svg class="w-4 h-4 text-white transition-transform duration-200" fill="none"
                             stroke="currentColor"
                             stroke-width="2" viewBox="0 0 24 24">
                            <path d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                </div>
                <ul id="servicesMenu2"
                    class="overflow-hidden ml-4 flex-col transition-all duration-300 ease-in-out max-h-0"
                    style="max-height:0px">
                    <li class="">
                        <a href="{% url 'products' 'woman' %}" class="block text-gray-600 hover:text-gray-400 text-xl">{% trans "ŽENE" %}</a>
                    </li>
                    <li class="">
                        <a href="{% url 'products' 'girls' %}" class="block text-gray-600 hover:text-gray-400 text-xl">{% trans "DEVOJČICE" %}
                        </a>
                    </li>
                </ul>
            </div>
            <a href="{% url 'showroom' %}" class="mt-6 block text-gray-700 hover:text-gray-400 text-xl font-semibold">{% trans "SHOWROOM" %}</a>
            <a href="{% url 'about' %}" class="mt-6 block text-gray-700 hover:text-gray-400 text-xl font-semibold">{% trans "O NAMA" %}</a>
            <a href="{% url 'contact' %}" class="mt-6 block text-gray-700 hover:text-gray-400 text-xl font-semibold">{% trans "KONTAKT" %}</a>

            <!--            <a href="#" class="block text-gray-700 hover:text-gray-400 text-center bg-black text-white font-semibold">ZAKAŽI</a>-->
        </nav>

        <!--        <div class="flex justify-center items-center">-->
        <!--            <a href="{% url 'home' %}">-->
        <!--                <div class="p-10 mx-auto max-w-[300px]">-->
        <!--                    <a href="{% url 'home' %}">-->
        <!--                        <img src="{% static 'img/logo.png' %}" alt="Haljina" class="rounded "/>-->
        <!--                    </a>-->
        <!--                </div>-->
        <!--            </a>-->
        <!--        </div>-->
    </div>

</header>


<script>
    document.addEventListener("DOMContentLoaded", function () {
      const inputField = document.getElementById("inputSearch");
      const searchIcon = document.getElementById("inputSearchIcon");
      const searchButton = document.getElementById("inputSearchButton");

      if (searchIcon && inputField && searchButton) {
        searchIcon.addEventListener("click", function () {
          const isClosed = inputField.classList.contains("w-0");

          if (isClosed) {
            inputField.classList.remove("w-0", "opacity-0", "pointer-events-none");
            inputField.classList.add("w-40", "opacity-100");
            searchButton.classList.remove("w-0", "opacity-0", "pointer-events-none");
            searchButton.classList.add("w-20", "opacity-100");
            inputField.focus();
          } else {
            inputField.classList.add("w-0", "opacity-0", "pointer-events-none");
            inputField.classList.remove("w-40", "opacity-100");
            searchButton.classList.add("w-0", "opacity-0", "pointer-events-none");
            searchButton.classList.remove("w-20", "opacity-100");
          }
        });
      }
    });


</script>


<script>
function setLanguage(lang) {
  const csrftoken = getCookie('csrftoken'); // Funkcija za čitanje CSRF kolačića
  const nextUrl = window.location.pathname + window.location.search;

  fetch("{% url 'set_language' %}", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-CSRFToken': csrftoken,
    },
    body: new URLSearchParams({
      language: lang,
      next: nextUrl
    })
  })
  .then(response => {
    if (response.ok) {
      window.location.href = nextUrl; // ili samo window.location.reload();
    } else {
      alert('Greška pri promeni jezika.');
    }
  })
  .catch(() => alert('Greška pri promeni jezika.'));
}

// Funkcija za dohvat CSRF kolačića iz browsera
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      cookie = cookie.trim();
      if (cookie.startsWith(name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
</script>