@extends('frontend.layouts.main')
@section('main-container')
 <section class="product-slides-section pb-3">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="owl-carousel">
                          {{-- <div class="item">
                            <img src="{{ asset('images/category-slider/category_1.png') }}" alt="Image 1">
                          </div> --}}
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_2.png') }}" alt="Image 2">
                          </div>
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_3.png') }}" alt="Image 3">
                          </div>
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_4.png') }}" alt="Image 1">
                          </div>
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_5.png') }}" alt="Image 1">
                          </div>
                          {{-- <div class="item">
                            <img src="{{ asset('images/category-slider/category_6.png') }}" alt="Image 2">
                          </div> --}}
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_2.png') }}" alt="Image 3">
                          </div>
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_3.png') }}" alt="Image 3">
                          </div>
                          <div class="item">
                            <img src="{{ asset('images/category-slider/category_4.png') }}" alt="Image 3">
                          </div>
                          {{-- <div class="item">
                            <img src="{{ asset('images/category-slider/category_4.png') }}" alt="Image 1">
                          </div> --}}
                        </div>
                      </div>
                    
                </div>
            </div>

        </div>
        <div class="row g-0 justify-content-center">
            {{-- <div class="responsive">
                        @foreach ($cameras as $camera)
                        <div class="panel_box">
                            <div class="panel_img">
                                <img src="{{ asset($camera->avatar) }}" class="img-fluid" style="width: 180px">
                            </div>
                            <div class="panel_box_content">
                               <a href="{{ route('frontend.product-detail.index', $camera->slug) }}"><h4 class="panel_title text-over">{{ $camera->product_name }}</h4></a> 
                            </div>
                        </div>
                        @endforeach
                    </div> --}}
            {{-- <div class="row">
                        <div class="responsive_block">
                            <div class="video-camera-box">
                                <div class="video-camera-img">
                                    <img src="{{ asset('images/cason.png') }}" class="img-fluid camera-img-box">
                                    <div class="video-camera-discription text-center">
                                        <h4 class="video-discription mb-0">CASON CN50 4K 60fps HD<br>
                                            24MP Action Camera</h4>
                                    </div>
                                    <div class="video-camera-button text-center">
                                        <button type="button" class="video-camera-box-btn-1">View Details<i
                                                class="bi bi-arrow-up-right ms-2"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="video-camera-box">
                                <div class="video-camera-img">
                                    <img src="{{ asset('images/digitech-camera.png') }}" class="img-fluid camera-img-box">
                                    <div class="video-camera-discription text-center">
                                        <h4 class="video-discription mb-0">Digitek GoCAM DAC-101 5K<br> 30FPS 48MP WiFi Ultra HD
                                        </h4>
                                    </div>
                                    <div class="video-camera-button text-center">
                                        <button type="button" class="video-camera-box-btn-1">View Details<i
                                                class="bi bi-arrow-up-right ms-2"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="video-camera-box">
                                <div class="video-camera-img">
                                    <img src="{{ asset('images/video-camera.png') }}" class="img-fluid camera-img-box">
                                    <div class="video-camera-discription text-center">
                                        <h4 class="video-discription mb-0">CASON CN50 4K 60fps HD<br>
                                            24MP Action Camera</h4>
                                    </div>
                                    <div class="video-camera-button text-center">
                                        <button type="button" class="video-camera-box-btn-1">View Details<i
                                                class="bi bi-arrow-up-right ms-2"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="video-camera-box">
                                <div class="video-camera-img">
                                    <img src="{{ asset('images/single-camera.png') }}" class="img-fluid camera-img-box">
                                    <div class="video-camera-discription text-center">
                                        <h4 class="video-discription mb-0">CASON CN50 4K 60fps HD<br>
                                            24MP Action Camera</h4>
                                    </div>
                                    <div class="video-camera-button text-center">
                                        <button type="button" class="video-camera-box-btn-1">View Details<i
                                                class="bi bi-arrow-up-right ms-2"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="video-camera-box">
                                <div class="video-camera-img">
                                    <img src="{{ asset('images/cason.png') }}" class="img-fluid camera-img-box">
                                    <div class="video-camera-discription text-center">
                                        <h4 class="video-discription mb-0">CASON CN50 4K 60fps HD<br>
                                            24MP Action Camera</h4>
                                    </div>
                                    <div class="video-camera-button text-center">
                                        <button type="button" class="video-camera-box-btn-1">View Details<i
                                                class="bi bi-arrow-up-right ms-2"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                    </div> --}}
        </div>
    </section>
    <section class="product-category-section product-main">
        <div class="container bg-white">
            <div class="row">
                <div class="col-md-12">
                            
                            <h6 class="category-head-p-page text-center">Interactive Flat Panel</h6>
                            <h3 class="category-head-page pb-2 text-center"><span class="technology">India’s leading </span>interactive display for <br> education & corporatestate</h3>
                        </div>
                <div class="col-lg-12">
                    <div class="row new-category-prod">
                         @foreach ($categories as $item)
                        <div class="col-lg-2 p-0">
                            <div class="category-content-product text-center shadow-sm {{ Request::is('product/' . $item->slug) ? 'active' : '' }}">
                                <div>
                                    <img src="{{ asset($item->thumbnail) }}" class="img-fluid"
                                        alt="">
                                </div>
                                <div class="category-content-all">
                                    <a href="{{route('frontend.product.ProductByCategory',$item->slug)}}" style="text-decoration: none">
                                        <h3 class="c1-title">{{$item->title}}</h3>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="product-main">
        <div class="container">
            {{--<div class="row align-items-center pb-md-5">
                <form action="{{ route('frontend.product.index') }}" method="GET">
                    <div class="row">
                        
                        <div class="col-md-8 mb-md-0 mb-3">
                            <div class="product-left d-flex justify-content-center align-items-center">
                                <h4 class="category_title m-0"> Product list <span class="panel_title_new_count p-0">({{ $products->total() }})</span></h4>
                                <input type="text" class="form-control w-75 form_control_new" placeholder="Search by product name" name="search" value="{{ request('search') }}">
                            </div>
                        </div>
                        <div class="col-md-4 mb-md-0 mb-3">
                            <div class="product-right d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <!-- Dropdown for categories -->
                                    <select class="form-select form-control form_control_new2 me-3" aria-label="Default select example" id="category-select">
                                        <option value="">Search by Category</option>
                                        @foreach ($categories as $item)
                                            <option value="{{ $item->slug }}" {{ request('category') == $item->slug ? 'selected' : '' }}>
                                                {{ $item->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button class="btn btn-outline-secondary form_control_btn mx-2 btn-sm" type="submit">Search</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                
            </div>--}}
            <div class="row pb-md-4">
                @foreach ($products as $product)
                    <div class="col-md-3 mb-md-5 mb-3">
                        <div class="product-card-content">
                            <div class="tv_box product-card">
                                <div class="panel_img">
                                    <img src="{{ asset($product->avatar) }}" width="300px" height="300px">
                                    <!-- <div class="sale-box">
                                        <span> -10% </span>
                                    </div> -->
                                </div>
                            </div>
                            <div class="panel_box_content_new">
                                <h4 class="panel_title_new m-0 fw-bloder"> <a
                                        href="{{ route('frontend.product-detail.index', $product->slug) }}"
                                        class="text-link text-over">
                                        {{ $product->product_name }}<br>
                                    </a> </h4>
                                <a href="{{ route('frontend.product-detail.index', $product->slug) }}"
                                    class="slider_btn">View Detail</a>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="row">
                <div class="col-md-12">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            @if ($products->currentPage() > 1)
                                <li class="page-item">
                                    <a class="page-link"
                                        href="{{ url()->current() }}?page={{ $products->currentPage() - 1 }}&search={{ $search }}"
                                        rel="prev" aria-label="Previous">&laquo; Previous</a>
                                </li>
                            @endif

                            @for ($i = max(1, $products->currentPage() - 2); $i <= min($products->currentPage() + 2, $products->lastPage()); $i++)
                                <li class="page-item {{ $i == $products->currentPage() ? 'active' : '' }}">
                                    <a class="page-link"
                                        href="{{ $products->url($i) . '&search=' . $search }}">{{ $i }}</a>
                                </li>
                            @endfor

                            @if ($products->currentPage() < $products->lastPage())
                                <li class="page-item">
                                    <a class="page-link"
                                        href="{{ url()->current() }}?page={{ $products->currentPage() + 1 }}&search={{ $search }}"
                                        rel="next" aria-label="Next">Next &raquo;</a>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>

        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
     <script>
        $(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                loop: true,
                stagePadding: 100,
                margin: -10,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1490: {
                        items: 5
                    }
                }
            });
        });
    </script>
     <style>
        .owl-carousel .owl-nav .owl-prev,
        .owl-carousel .owl-nav .owl-next {
          font-size: 25px;
          color: #fff;
          background-color: #000;
          /* Background color of the icons */
          border-radius: 50%;
          /* Make the icons circular */
          width: 40px;
          /* Set width */
          height: 40px;
          /* Set height */
          line-height: 40px;
          /* Center the icons vertically */
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .owl-carousel .owl-nav span {
          font-size: 30px !important;
          color: #fff;
          line-height: 30px;
        }
        .owl-carousel .owl-item img {
        display: block;
        width: 100%;
        border-radius: 10px;
       }
    
        button.owl-prev {
          background-color: #066BB8 !important;
          border: none;
        }
    
        button.owl-next {
          background-color: #066BB8 !important;
          border: none;
        }
    
        .owl-carousel .owl-nav .owl-prev {
          left: -46px;
        }
    
        .owl-carousel .owl-nav .owl-next {
          right: -43px;
          /* Position the next icon to the right */
        }
      </style>
@endsection