@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 {
      /* background-image: url("{{ asset('assets/images/Vector.png') }}");
                                                              background-repeat:no-repeat;
                                                              display:flex;
                                                              flex-direction:column;
                                                              background-size:-100px; */
      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="hero-section">
    <h1 class="text-dark main_hero_heading">TURN YOUR PHOTOS <br> INTO PRODUCTS</h1>
    <div class="blob blob1"></div>
    <div class="blob blob2"></div>
    <div class="blob blob3"></div>
    <div class="blob blob4"></div>
    <div class="blob blob5"></div>
    <div class="star star1">⭐</div>
    <div class="star star2">⭐</div>
    <div class="star star3">⭐</div>
  </section> --}}


  <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="{{ $be ? route('image', ['home_banners', $banner]) : 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>

  <div class="container-fluid mt-5 overflow_hide">


    @forelse ($data as $d)
      @if (count($d->products) > 0)
        <div class="px-md-4 mx-md-4 catrgories_container"
          style="background: white; padding: 17px; border-radius: 20px; margin: 15px;">
          {{-- <img src="{{ asset('assets/images/Vector.png') }}" class="vector_img" alt="dasd"> --}}
          <h4 class="mb-4 px-2">{{ $d->name }}</h4>
          <div class="row m-0">
            @forelse ($d->subcategory as $sub)
              @if (count($sub->products) > 0)
                <div class="col-md-3 mb-3"
                  onclick="window.location.href=`{{ route('allproducts') . '?sub_category=' . enc($sub->id) }}`">
                  <div class="category-card">
                    <h6 class="mb-4">{{ $sub->name }}</h6>
                    <div class="image_div">
                      @if (empty($sub->banner))
                        <img src="{{ asset('assets/images/defaultimage.jpg') }}" class="img-fluid" alt="Wall Decoratives">
                      @else
                        <img src="{{ url('images/subcategory_banner/' . $sub->banner) }}" class="img-fluid"
                          alt="New IN">
                      @endif
                    </div>
                  </div>
                </div>
              @endif
            @empty
              <h5>No Sub-Categories!</h5>
            @endforelse
          </div>
          {{-- <img src="{{ asset('assets/images/Vector-2.png') }}" class="vector_img2" alt="dasd"> --}}
        </div>
      @endif
    @empty
    @endforelse




  </div>
@endsection
@section('script')
  <script>
    $(".image_div").css("max-height", $(".image_div").width() + "px");
  </script>
@endsection