@extends('frontEnd.layouts.master') @section('title', 'Home') @push('seo')
<meta name="app-url" content="" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<!-- Open Graph data -->
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="{{ asset($generalsetting->white_logo) }}" />
<meta property="og:description" content="" />
@endpush @push('css')
<link rel="stylesheet" href="{{ asset('public/frontEnd/css/owl.carousel.min.css') }}" />
<link rel="stylesheet" href="{{ asset('public/frontEnd/css/owl.theme.default.min.css') }}" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />

 <style>
    .feature-box {
      border: 1px dashed #ccc;
      padding: 30px 10px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .feature-box img {
      max-width: 50px;
      margin-bottom: 15px;
    }
    .feature-box:hover {
      background-color: #f8f9fa;
    }
    .border-dashed {
  border-style: dashed !important;
}

.custom-section-title {
  border-bottom: 2px solid #e1e1e1;
  position: relative;
}

.custom-section-title .title {
  position: relative;
  text-transform:uppercase;
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 8px;
}

.custom-section-title .title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100px;
  height: 4px;
  background-color: #614e38; /* golden-brown underline */
  z-index: 2;
}

.view-all {
  font-size: 14px;
  color: #999;
  text-decoration: none;
}

.view-all:hover {
  text-decoration: underline;
  color: #333;
}

.custom-section-title-center {
  border-bottom: 3px solid #e1e1e1;
  position: relative;
}

.custom-section-title-center .title-center {
  position: relative;
  text-transform:uppercase;
  font-weight: 700;
  font-size: 22px;
  padding-bottom: 8px;
}

.custom-section-title-center .title-center::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 130px;
  height: 4px;
  background-color: #614e38;
  z-index: 2;
}
  </style>
@endpush @section('content')
             
<section class="slider-section">
    <div class="container-fluid">
        <div class="row">
     
{{--            <div class="col-sm-3 hidetosm">--}}
{{--                  <div class="rounded-top text-center d-none d-lg-block" style="background-color:#121164;">--}}
{{--                   <h5 class="py-2 text-white">CATEGORYS</h5> --}}
{{--                </div>--}}
{{--                <div class="sidebar-menu">--}}
{{--                    <ul class="hideshow">--}}
{{--                        @foreach ($menucategories as $key => $category)--}}
{{--                            <li>--}}
{{--                                <a href="{{ route('category', $category->slug) }}">--}}
{{--                                    <img src="{{ asset($category->image) }}" alt="" />--}}
{{--                                    {{ $category->name }}--}}
{{--                                  --}}
{{--                                </a>--}}
{{--                                <ul class="sidebar-submenu">--}}
{{--                                    @foreach ($category->subcategories as $key => $subcategory)--}}
{{--                                        <li>--}}
{{--                                            <a href="{{ route('subcategory', $subcategory->slug) }}">--}}
{{--                                                {{ $subcategory->subcategoryName }} <i--}}
{{--                                                    class="fa-solid fa-chevron-right"></i> </a>--}}
{{--                                            <ul class="sidebar-childmenu">--}}
{{--                                                @foreach ($subcategory->childcategories as $key => $childcat)--}}
{{--                                                    <li>--}}
{{--                                                        <a href="{{ route('products', $childcat->slug) }}">--}}
{{--                                                            {{ $childcat->childcategoryName }}--}}
{{--                                                        </a>--}}
{{--                                                    </li>--}}
{{--                                                @endforeach--}}
{{--                                            </ul>--}}
{{--                                        </li>--}}
{{--                                    @endforeach--}}
{{--                                </ul>--}}
{{--                            </li>--}}
{{--                        @endforeach--}}
{{--                    </ul>--}}
{{--                </div>--}}
{{--            </div>--}}
   
            <div class="col-sm-12 p-0 m-0">
                <div class="home-slider-container">
                    <div class="main_slider owl-carousel">
                        @foreach ($sliders as $key => $value)
                            <div class="slider-item">
                                <img src="{{ asset($value->image) }}" alt="" />
                            </div>
                            <!-- slider item -->
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- slider end -->

@if($sliderbottomads->count()>0) 
    @foreach($sliderbottomads as $sliderbottomad)
<section class="homeproduct d-flex justify-content-center">
     <img src="{{ $sliderbottomad->image }}" class="text-center img-fluid" />
</section>
    @endforeach
@endif




<section class="homeproduct">
    <div class="container">
        <div class="row text-center">
            <div class="col-12">
              <div class="custom-section-title-center text-center position-relative mb-4">
                <h3 class="title-center m-0 d-inline-block"> Top Categories</h3>
              </div>
            </div>
            
            @php
                $menucategories1 = $menucategories->first();
                $menucategories2 = $menucategories->slice(1);
            @endphp
           
                 <div class="col-12 col-lg-3 py-2 mb-2">
                    <a href="{{ route('category', $menucategories1->slug) }}">
                      <img src="{{ asset('public/frontEnd/images/site-banner.jpg') }}" class="" style="" alt="" />
                    </a>
                  </div>

                <div class="col-12 col-lg-9 my-2 px-2">
                  <!-- Wrapper for horizontal scroll on small devices -->
                  <div class="categiry-slider owl-carousel d-flex d-lg-none overflow-auto">
                    @foreach ($menucategories2->take(6) as $key => $value)
                      <div class="loved-category text-center me-2 flex-shrink-0 item">
                        <a href="{{ route('category', $value->slug) }}">
                          <img src="{{ asset($value->image) }}" alt="" style="width: 100%; height: auto;" />
                        </a>
                      </div>
                    @endforeach
                  </div>
                
                  <!-- Grid layout for large screens -->
                  <div class="row text-center d-none d-lg-flex">
                    @foreach ($menucategories2->take(6) as $key => $value)
                      <div class="col-6 col-md-4 col-lg-4 loved-category text-center">
                        <a href="{{ route('category', $value->slug) }}">
                          <img src="{{ asset($value->image) }}" alt="" style="max-width: 99%; height: 97%;" />
                        </a>
                      </div>
                    @endforeach
                  </div>
                </div>

        </div>
    </div>
</section>


<section class="homeproduct">
    <div class="container">
        <div class="row">
            <div class="col-12">
              <div class="custom-section-title-center text-center position-relative mb-4">
                <h3 class="title-center m-0 d-inline-block">Hot Deal</h3>
              </div>
            </div>
           
            <div class="col-sm-12">
                <div class="product_slider owl-carousel">
                    @foreach ($hotdeal_top as $key => $value)
                     @php
                       $slider = App\Models\Productimage::where('product_id', $value->id)->latest()->first();
                        $slider_img = $slider ? $slider->image : '';
                     @endphp
                        <div class="product_item wist_item">
                            <div class="product_item_inner">
                               
                                <div class="pro_img">
                                    <a href="{{ route('product', $value->slug) }}">
                                      <img src="{{ asset($value->image ? $value->image->image : '') }}" alt="{{ $value->name }}" data-hover="{{ asset($slider_img) }}"class="hover-change" />
                                    </a>
                                </div>
                                <div class="pro_des">
                                    <div class="pro_name">
                                        <a href="{{ route('product', $value->slug) }}">{{ Str::limit($value->name, 200) }}</a>
                                    </div>
                                    <div class="pro_price">
                                        <p>
                                            @if ($value->old_price)
                                             <del>৳ {{ $value->old_price }}</del>
                                            @endif
                                            ৳ {{ $value->new_price }} 
                                           
                                        </p>
                                    </div>
                                </div>
                            </div>

                            @if (!$value->prosizes->isEmpty() || !$value->procolors->isEmpty())
                                <div class="pro_btn">
                                   
                                    <div class="cart_btn order_button">
                                        <a href="{{ route('product', $value->slug) }}"
                                            class="addcartbutton">Order Now </a>
                                    </div>
                                </div>
                            @else
                                <div class="pro_btn">
                                    <form action="{{ route('cart.store') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $value->id }}" />
                                        <input type="hidden" name="qty" value="1" />
                                        <button type="submit">Order Now</button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
           
        </div>
    </div>
</section>

@foreach ($homeproducts as $homecat)
    <section class="homeproduct">
        <div class="container">
            <!-- <div class="">-->
            <!--    @if(isset($homecat->banner_img))-->
            <!--        <img src="{{ asset($homecat->banner_img) }}" class="text-center img" />-->
            <!--    @endif-->
            <!--</div> -->
        
            <div class="row">
               <div class="col-12">
                  <div class="custom-section-title position-relative d-flex justify-content-between align-items-end mb-4">
                    <h3 class="title m-0">{{ $homecat->name }}</h3>
                    <a href="{{ route('category', $homecat->slug) }}" class="view-all">View All</a>
                  </div>
                </div>

               <div class="col-sm-12">
                    <div class="product_sliders">
                        @foreach ($homecat->products as $key => $value)
                        @php
                         $slider = App\Models\Productimage::where('product_id', $value->id)->latest()->first();
                        $slider_img = $slider ? $slider->image : '';
                        @endphp
                           <div class="product_item wist_item">
                            <div class="product_item_inner">
                                
                                <div class="pro_img">
                                    <a href="{{ route('product', $value->slug) }}">
                                       <img src="{{ asset($value->image ? $value->image->image : '') }}" alt="{{ $value->name }}" data-hover="{{ asset($slider_img) }}"class="hover-change" />
                                    </a>
                                </div>
                                <div class="pro_des">
                                    <div class="pro_name">
                                        <a href="{{ route('product', $value->slug) }}">{{ Str::limit($value->name, 200) }}</a>
                                    </div>
                                    <div class="pro_price">
                                        <p>
                                            @if ($value->old_price)
                                             <del>৳ {{ $value->old_price }}</del>
                                            @endif

                                            ৳ {{ $value->new_price }} 
                                           
                                        </p>
                                    </div>
                                </div>
                            </div>

                            @if (!$value->prosizes->isEmpty() || !$value->procolors->isEmpty())
                                <div class="pro_btn">
                                   
                                    <div class="cart_btn order_button">
                                        <a href="{{ route('product', $value->slug) }}"
                                            class="addcartbutton">Order Now </a>
                                    </div>
                                </div>
                            @else
                                <div class="pro_btn">
                                    
                                    <form action="{{ route('cart.store') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $value->id }}" />
                                        <input type="hidden" name="qty" value="1" />
                                        <button type="submit">Order Now</button>
                                    </form>
                                </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-sm-12">
                    
                </div>
            </div>
        </div>
    </section>
@endforeach

<div class="container my-5">
  <div class="row text-center">
    <div class="col-6 col-lg-3 col-md-3 mb-2">
      <div class="feature-box  border-secondary-subtle border-dashed rounded-3 h-100">
        <img src="{{ asset('public/frontEnd/images/delivery-car.png') }}" alt="Shipping" class="img-fluid mb-3" style="max-width: 50px;">
        <div class="fw-medium">FASTEST SHIPPING COUNTRYWIDE</div>
      </div>
    </div>

    <div class="col-6 col-lg-3 col-md-3 mb-2">
      <div class="feature-box   border-secondary-subtle border-dashed rounded-3 h-100">
        <img src="{{ asset('public/frontEnd/images/return-box.png') }}" alt="Return Policy" class="img-fluid mb-3" style="max-width: 50px;">
        <div class="fw-medium">EASY RETURN POLICY</div>
      </div>
    </div>

    <div class="col-6 col-lg-3 col-md-3 mb-2">
      <div class="feature-box   border-secondary-subtle border-dashed rounded-3 h-100">
        <img src="{{ asset('public/frontEnd/images/online-support.png') }}" alt="Support" class="img-fluid mb-3" style="max-width: 50px;">
        <div class="fw-medium">ONLINE SUPPORT 24/7</div>
      </div>
    </div>

    <div class="col-6 col-lg-3 col-md-3 mb-2">
      <div class="feature-box   border-secondary-subtle border-dashed rounded-3 h-100">
        <img src="{{ asset('public/frontEnd/images/design.png') }}" alt="New Design" class="img-fluid mb-3" style="max-width: 50px;">
        <div class="fw-medium">WEEKLY NEW DESIGN</div>
      </div>
    </div>

  </div>
</div>
             
@endsection @push('script')
<script src="{{ asset('public/frontEnd/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('public/frontEnd/js/jquery.syotimer.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $(".main_slider").owlCarousel({
            items: 1,
            loop: true,
            dots: false,
            autoplay: true,
            nav: true,
            autoplayHoverPause: false,
            margin: 0,
            mouseDrag: true,
            smartSpeed: 1500,
            autoplayTimeout: 3000, 

            navText: ["<i class='fa-solid fa-angle-left'></i>",
                "<i class='fa-solid fa-angle-right'></i>"
            ],
        });
    });
</script>
<script>
    $(document).ready(function() {
        $(".hotdeals-slider").owlCarousel({
            margin: 15,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 3,
                    nav: true,
                },
                600: {
                    items: 3,
                    nav: false,
                },
                1000: {
                    items: 6,
                    nav: true,
                    loop: false,
                },
            },
        });
    });
</script>
<script>
    $(document).ready(function() {
        $(".category-slider").owlCarousel({
            margin: 15,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 5,
                    nav: true,
                },
                600: {
                    items: 3,
                    nav: false,
                },
                1000: {
                    items: 8,
                    nav: true,
                    loop: false,
                },
            },
        });
        
         $(".categiry-slider").owlCarousel({
            margin: 7,
            items: 6,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 2,
                    nav: false,
                },
                600: {
                    items: 5,
                    nav: false,
                },
                1000: {
                    items: 6,
                    nav: false,
                },
            },
        });

        $(".product_slider").owlCarousel({
            margin: 15,
            items: 6,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 2,
                    nav: false,
                },
                600: {
                    items: 4,
                    nav: false,
                },
                1000: {
                    items: 4,
                    nav: false,
                },
            },
        });
    });
</script>

<script>
    $("#simple_timer").syotimer({
        date: new Date(2015, 0, 1),
        layout: "hms",
        doubleNumbers: false,
        effectType: "opacity",

        periodUnit: "d",
        periodic: true,
        periodInterval: 1,
    });
</script>
@endpush
