@extends('layouts.main')

@section('style')
  <style>
    body {
      background-color: #f8f9fa;
    }

    .hero-section {
      position: relative;
      width: 100%;
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: url("{{ asset('assets/images/banner.jpg') }}") no-repeat center center/cover;
      color: white;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(240 233 233 / 0%);
      z-index: 1;
    }

    .hero-heading {
      font-size: 2.8rem;
      font-weight: bold;
      z-index: 2;
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      max-width: 80%;
    }

    .star {
      position: absolute;
      font-size: 30px;
      color: #ffcc00;
      animation: twinkle 1.5s infinite alternate;
      z-index: 2;
    }

    .star1 {
      top: 20%;
      left: 15%;
    }

    .star2 {
      top: 50%;
      right: 20%;
    }

    .star3 {
      bottom: 30%;
      left: 45%;
    }


    .catrgories_container {
      overflow: hidden !important;
    }

    .catrgories_container .vector_img {
      position: absolute;
      z-index: -3;
      left: -6rem;
      bottom: -24rem;
    }


    .catrgories_container .vector_img2 {
      position: absolute;
      z-index: -3;
      right: 0;
      bottom: -50rem;
      overflow: hidden;
    }





    @keyframes twinkle {
      0% {
        opacity: 0.5;
        transform: scale(1);
      }

      100% {
        opacity: 1;
        transform: scale(1.2);
      }
    }

    @media (max-width: 768px) {
      .hero-section {
        /* height: 300px; */
      }

      .hero-heading {
        font-size: 2rem;
      }

      .star {
        font-size: 20px;
      }
    }

    @media (max-width: 480px) {
      .hero-section {
        /* height: 250px; */
        padding: 20px;
        /* background: none; */
        /* Remove banner image */
      }

      .hero-heading {
        font-size: 1.8rem;
        max-width: 90%;
        color: black;
        /* Ensure text is visible */
      }

      .star {
        display: none;
        /* Hide stars in mobile view */
      }

      .star1 {
        top: 10%;
        left: 10%;
      }

      .star2 {
        top: 40%;
        right: 15%;
      }

      .star3 {
        bottom: 10%;
        left: 35%;
      }
    }

    .mt-5 {
      margin-top: 3rem !important;
    }

    .category-card {
      background: #fff;
      /* border: 2px solid #ddd; */
      border-radius: 10px;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
      text-align: center;
      padding: 15px;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .category-card img {
      border-radius: 8px;
    }

    .category-card h5 {
      font-size: 1.2rem;
      font-weight: bold;
      margin-top: 10px;
      color: #333;
    }

    .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .main_hero_heading {
      font-size: clamp(1.2rem, 7vw, 5rem);
      font-weight: bold;
    }

    .image_div {
      width: 100%;
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
    }

    .image_div img {
      max-height: 100%;
      width: auto;
      position: relative;
    }

    .mobile_nav {
      animation: mobile_nav 0.5s forwards !important;
    }

    .mobile_nav a {
      font-size: 1.5rem;
    }

    .mobile_nav .mobile_nav_head {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid grey;
    }

    @keyframes mobile_nav {
      0% {
        left: -100vw;
      }

      100% {
        left: 0;
      }
    }

    @keyframes mobile_nav_hide {
      0% {
        left: 0vw;
      }

      100% {
        left: -101;
      }
    }
  </style>
@endsection


@section('content')
  <section class="py-2 bg-light">
    <div class="d-flex justify-content-center">
      <div class="d-flex align-items-center flex-nowrap position-relative px-4 py-2" id="link-container"
        style="max-width: 100%; z-index: 10;">

        <!-- Link List -->
        <ul class="d-flex list-unstyled mb-0 flex-nowrap" id="visible-links" style="gap: 1.25rem;">
          @foreach ($categories as $category)
            <li class="link-item">
              <a href="{{ route('woohoo.products', [$category['woohoo_id']]) }}"
                class="text-decoration-none text-dark fw-semibold small px-2 py-1 rounded hover-highlight">{{ $category['name'] }}</a>
            </li>
          @endforeach
        </ul>

        <!-- Dropdown for Hidden Links -->
        <div class="dropdown d-none" id="more-dropdown">
          <a href="#" class="text-decoration-none text-dark small fw-semibold px-2 py-1 rounded dropdown-toggle"
            data-bs-toggle="dropdown">
            More
          </a>
          <ul class="dropdown-menu dropdown-menu-end shadow-sm mt-2" id="hidden-links"></ul>
        </div>
      </div>
    </div>
  </section>

  @php
    $banners = ['woohooBanner.webp'];
  @endphp

  <section id="home_top">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        @foreach ($banners as $in => $banner)
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $in }}"
            class="{{ $in == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide 1"></button>
        @endforeach
      </div>
      <div class="carousel-inner">
        @foreach ($banners as $in => $banner)
          <div class="carousel-item {{ $in == 0 ? 'active' : '' }}" data-bs-interval="5000">
            <div class="position-relative">
              <img src="{{ asset('assets/images/' . $banner) }}" class="d-block w-100">
            </div>
          </div>
        @endforeach
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>
@endsection
@section('script')
  <script>
    $(".image_div").css("max-height", $(".image_div").width() + "px");

    function adjustLinks() {
      const container = document.getElementById('link-container');
      const visibleList = document.getElementById('visible-links');
      const linkItems = visibleList.querySelectorAll('.link-item');
      const dropdown = document.getElementById('more-dropdown');
      const dropdownList = document.getElementById('hidden-links');

      dropdown.classList.add('d-none');
      dropdownList.innerHTML = '';
      linkItems.forEach(li => li.classList.remove('d-none'));

      let totalWidth = 0;
      const containerWidth = container.offsetWidth - 30;
      console.log(containerWidth);
      linkItems.forEach(item => {
        totalWidth += item.offsetWidth + 10;
        if (totalWidth > containerWidth) {
          item.classList.add('d-none');
          const link = item.querySelector('a');
          const text = link.textContent.trim();
          const href = link.getAttribute('href');
          const dropdownItem = document.createElement('li');
          dropdownItem.innerHTML = `<a class="dropdown-item" href="${href}">${text}</a>`;
          dropdownList.appendChild(dropdownItem);
        }
      });

      if (dropdownList.childElementCount > 0) {
        dropdown.classList.remove('d-none');
      }
    }

    window.addEventListener('load', adjustLinks);
    window.addEventListener('resize', adjustLinks);
  </script>
@endsection