@extends('layouts.category_app')
@section('contents')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />


    <style>
        #more {display: none;}
        .owl-carousel .owl-item img {
            display: block !important;
            width: 100%;
        }
        h2 {
            font-size: 24px !important;
        }
        h3 {
            font-size: 18px !important;
        }
        .content-inner {
            max-height: 535px;
            overflow: hidden;
            transition: max-height 0.25s ease;
        }

        .read-more {
            display: inline-block;
            margin-top: 10px;
            font-weight: bold;
            cursor: pointer;
            padding: 0px !important;
        }
        @media (max-width: 575px) {

            .slider{
                width: 100%;
                height: 142px !important;
            }
            .hero {

                background-position: center;
                background-size: cover;
                margin-top: -3px;
                height: 128px;
            }
            .hero-content {
                position: absolute;
                top: -64px;
                bottom: 0;
                left: 37px!important;
                text-align: initial;
            }
            .hero-content p {
                margin-bottom: 4px;
            }
            .hero-content h2, .hero-content p {
                font-size: 17px;
                color: #2e2e2e;
            }

            .mt-5{
                margin-top: 0px !important;
            }
            .displaynoned {
                display: none!important;
            }

            .col-md-6s {
                width: 50% !important;
            }
            h2 {
                font-size: 14px !important;
            }
            .slider{
                display: none;
            }
            .product-block img {
                width: 100%;
                height: 215px !important;
            }
        }


    </style>
            <style> @media all and (max-width:575px) {

            .cate_content{

                margin-top:100px ;
            }
            .title_box h2{
                width: 346px;
            }
        }</style>
    <div id="slider" class="slider">
        <div class="hero-wrapper">
            <header class="hero">
                <div class="hero-sizing"></div>
                <div class="hero-content">
                    <h1>Custom <br>
                        Packaging your</h1>
                    <p>customers will love</p>
                    <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#getQuote"> <button type="button" class=" btn-red px-3 py-2 rounded">Get Quote</button></a>
                </div>
            </header>
        </div>


    </div>
    <section class="products_container">
        <div class="container mt-3">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="bg-white px-4 py-2 mb-2 text-center">
                                <h1>{{ $category->name }}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="d-flex">
                            <div class="row">
                                @foreach($products as $product)
                                    <div class="col-sm-6 col-xs-12 col-lg-3 col-sm-6s">
                                        <div class="product-block text-center padding-none shadow-view">

                                            @if($product->product_slug=='die-cut-kraft-boxes' || $product->product_slug=='kraft-paper-pillow-boxes' || $product->product_slug=='kraft-cake-boxes'
                                          || $product->product_slug=='kraft-cookie-boxes' || $product->product_slug=='kraft-handle-boxes' ||
                                          $product->product_slug=='custom-foldable-kraft-gift-boxes' || $product->product_slug=='sandwich-boxes'
                                          || $product->product_slug=='kraft-mailing-boxes'|| $product->product_slug=='tuck-top-boxes' ||
                                          $product->product_slug=='kraft-tea-boxes' || $product->product_slug=='kraft-lipstick-boxes' || $product->product_slug=='kraft-gift-boxes'|| $product->product_slug=='kraft-paper-gift-pillow-boxes'|| $product->product_slug=='kraft-retail-boxes'||
                                          $product->product_slug=='kraft-window-boxes'|| $product->product_slug=='kraft-window-bags'||  $product->product_slug=='white-kraft-boxes'|| $product->product_slug=='kraft-gable-boxes'|| $product->product_slug=='kraft-apparel-boxes' || $product->product_slug=='kraft-display-boxes'|| $product->product_slug=='kraft-soap-boxes'


                                        ||$product->product_slug=='cbd-lollipop-boxes'|| $product->product_slug=='medical-cannabis-packaging'
                                        ||$product->product_slug=='thc-packaging-boxes'
                                        || $product->product_slug=='custom-printed-cbd-oil-boxes'||

                                        $product->product_slug=='custom-cbd-gummies-boxes'||
                                        $product->product_slug=='custom-cbd-pills-boxes'||
                                        $product->product_slug=='cbd-topicals-boxes'||
                                        $product->product_slug=='cbd-pain-cream-boxes'||
                                        $product->product_slug=='cbd-vape-oil-cartridge-boxes'||
                                        $product->product_slug=='cbd-pod-boxes'||
                                        $product->product_slug=='cbd-isolate-boxes'||
                                        $product->product_slug=='marijuana-accessories-packaging'||
                                        $product->product_slug=='marijuana-edibles-packaging'||
                                        $product->product_slug=='cannabis-counter-display-boxes'||
                                        $product->product_slug=='cannabis-flower-packaging'||
                                        $product->product_slug=='marijuana-packaging'||
                                        $product->product_slug=='cannabis-tinctures-boxes'||
                                        $product->product_slug=='tincture-boxes'||
                                        $product->product_slug=='cannabis-boxes'||
                                        $product->product_slug=='cbd-display-boxes'
                                        || $product->product_slug=='large-rigid-boxes'
                                        || $product->product_slug=='small-rigid-boxes'
                                        || $product->product_slug=='luxury-rigid-boxe'
                                        || $product->product_slug=='blue-gable-boxes'
                                        || $product->product_slug=='white-gable-boxes'
                                        || $product->product_slug=='red-gable-boxes'
                                        || $product->product_slug=='corrugated-gable-boxes'
                                        || $product->product_slug=='window-gable-boxes'
                                        || $product->product_slug=='cardboard-gable-boxes'
                                        || $product->product_slug=='christmas-gable-boxes'
                                        || $product->product_slug=='gable-cereal-boxes'
                                        || $product->product_slug=='gable-food-boxes'
                                        || $product->product_slug=='kraft-gable-boxes'



                                                           || $product->product_slug=='christmas-boxes'
                                                           || $product->product_slug=='christmas-favour-boxes'
                                                           || $product->product_slug=='christmas-gable-boxes'
                                                           || $product->product_slug=='christmas-apple-boxes'
                                                           || $product->product_slug=='christmas-cake-boxes'
                                                           || $product->product_slug=='cbd-display-boxes'
                                                           || $product->product_slug=='cardboard-display-boxes'
                                                           || $product->product_slug=='lip-balm-display-boxes'
                                                           || $product->product_slug=='candy-display-boxes'
                                                           || $product->product_slug=='small-counter-display-boxes'
                                                           || $product->product_slug=='counter-display-boxes'
                                                           || $product->product_slug=='chocolate-counter-boxes'
                                        )
                                                <a href="{{ url($product->product_slug.'.html')}}" class="change-hoverD d-sm-flex justify-content-center flex-wrap" aria-label="" target="_blank" rel="noopener">
                                                    @else
                                                        <a href="{{ url($product->product_slug.'.html')}}" class="change-hoverS d-sm-flex justify-content-center flex-wrap" aria-label="" target="_blank" rel="noopener">
                                                            @endif
                                                            <img alt="" title="" loading="lazy"
                                                                 width="356" height="356" loading="lazy"
                                                                 src="{{ asset('assets/images/placeholder-generic_0.webp') }}"
                                                                 data-src='{{ asset('assets') }}/images/products/'
                                                                 aria-label=""  >
                                                        </a>
                                                        <div class="clearfix detail-panel" >
                                                            @if($product->product_slug=='die-cut-kraft-boxes' || $product->product_slug=='kraft-paper-pillow-boxes' || $product->product_slug=='kraft-cake-boxes'
              || $product->product_slug=='kraft-cookie-boxes' || $product->product_slug=='kraft-handle-boxes' ||
              $product->product_slug=='custom-foldable-kraft-gift-boxes' || $product->product_slug=='sandwich-boxes'
              || $product->product_slug=='kraft-mailing-boxes'|| $product->product_slug=='tuck-top-boxes' ||
              $product->product_slug=='kraft-tea-boxes' || $product->product_slug=='kraft-lipstick-boxes' || $product->product_slug=='kraft-gift-boxes'|| $product->product_slug=='kraft-paper-gift-pillow-boxes'|| $product->product_slug=='kraft-retail-boxes'||
              $product->product_slug=='kraft-window-boxes'|| $product->product_slug=='kraft-window-bags'||  $product->product_slug=='white-kraft-boxes'|| $product->product_slug=='kraft-gable-boxes'|| $product->product_slug=='kraft-apparel-boxes' || $product->product_slug=='kraft-display-boxes'|| $product->product_slug=='kraft-soap-boxes'


             ||$product->product_slug=='cbd-lollipop-boxes'|| $product->product_slug=='medical-cannabis-packaging'
             ||$product->product_slug=='thc-packaging-boxes'
             || $product->product_slug=='custom-printed-cbd-oil-boxes'||

             $product->product_slug=='custom-cbd-gummies-boxes'||
             $product->product_slug=='custom-cbd-pills-boxes'||
             $product->product_slug=='cbd-topicals-boxes'||
             $product->product_slug=='cbd-pain-cream-boxes'||
             $product->product_slug=='cbd-vape-oil-cartridge-boxes'||
             $product->product_slug=='cbd-pod-boxes'||
             $product->product_slug=='cbd-isolate-boxes'||
             $product->product_slug=='marijuana-accessories-packaging'||
             $product->product_slug=='marijuana-edibles-packaging'||
             $product->product_slug=='cannabis-counter-display-boxes'||
             $product->product_slug=='cannabis-flower-packaging'||
             $product->product_slug=='marijuana-packaging'||
             $product->product_slug=='cannabis-tinctures-boxes'||
             $product->product_slug=='tincture-boxes'||
             $product->product_slug=='cannabis-boxes'||
             $product->product_slug=='cbd-display-boxes'
             || $product->product_slug=='large-rigid-boxes'
             || $product->product_slug=='small-rigid-boxes'
             || $product->product_slug=='luxury-rigid-boxe'
             || $product->product_slug=='blue-gable-boxes'
             || $product->product_slug=='white-gable-boxes'
             || $product->product_slug=='red-gable-boxes'
             || $product->product_slug=='corrugated-gable-boxes'
             || $product->product_slug=='window-gable-boxes'
             || $product->product_slug=='cardboard-gable-boxes'
             || $product->product_slug=='christmas-gable-boxes'
             || $product->product_slug=='gable-cereal-boxes'
             || $product->product_slug=='gable-food-boxes'
             || $product->product_slug=='kraft-gable-boxes'



                               || $product->product_slug=='christmas-boxes'
                               || $product->product_slug=='christmas-favour-boxes'
                               || $product->product_slug=='christmas-gable-boxes'
                               || $product->product_slug=='christmas-apple-boxes'
                               || $product->product_slug=='christmas-cake-boxes'
                               || $product->product_slug=='cbd-display-boxes'
                               || $product->product_slug=='cardboard-display-boxes'
                               || $product->product_slug=='lip-balm-display-boxes'
                               || $product->product_slug=='candy-display-boxes'
                               || $product->product_slug=='small-counter-display-boxes'
                               || $product->product_slug=='counter-display-boxes'
                               || $product->product_slug=='chocolate-counter-boxes'
             )
                                                                <a href="{{ url($product->product_slug.'.html')}}">                                <h2 class="product-title"></h2>
                                                                                                                                    </a>
                                                            @else
                                                                <a href="{{ url($product->product_slug.'.html')}}">                                <h2 class="product-title"></h2>
                                                                                                                                    </a>
                                                            @endif
                                                        </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <section class="testi">
                    <div class="container">


                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6 pt-5">
                                    <h2>CLIENT TESTIMONIAL</h2>
                                    <p class="p-text">GET TO KNOW ALL ABOUT OUR SERVICE THROUGH VARIOUS BUSINESS CLIENTS.
                                    </p>
                                    <div class="px-1 py-2">

                                        <img class="" alt="rating" title="rating" src="{{ asset('assets/images/commas.webp') }}" loading="lazy">
                                    </div>
                                    <div class="testimonials" id="testimonials" >

                                        <div class="owl-carousel owl-theme">
                                            @foreach($testimonials as $testimonial)
                                                <a href="{{$testimonial->link}}" target="_blank">
                                                    <div class="item">
                                                        <div class="row pb-4">
                                                            <div class="col-1">
                                                                @if($testimonial->image)

                                                                    <img class="user_profile" alt="user" title="user" src="{{ asset('assets/images/testimonials/'.$testimonial->image) }}">

                                                                @else
                                                                    <div style="
    background: #fab900;
  padding: 11px;
    font-size: 23px !important;
    font-family: 'Poppins Bold';
    color: white;
    padding-top: 19px;
    border-start-end-radius: 27px;
    border-end-start-radius: 27px;
    text-align: center;
    width: 65px !important;
    margin-left: 1px;
    height: 65px !important;" class="user_profile">  {{ strtoupper(mb_substr($zd[0], 0, 1))  }} @if(!empty($zd[1])){{ strtoupper(mb_substr($zd[1], 0, 1) ) }}@endif</div>
                                                                @endif   </div>
                                                            <div class="col-9 d-flex align-items-end">
                                                                <div class="d-block px-4">
                                                                    <h6>{{ $testimonial->client_name }}</h6>
                                                                    <h6 style="color: #a1a1a1">{{ $testimonial->designation }}</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="comments">
                                                            <p class="os_bold" style="font-style: italic">...                                                            </p>
                                                        </div>
                                                        <div class="row">
                                                            <img class="rating" alt="rating" title="rating" src="{{ asset('assets/images/stars-img.webp') }}" loading="lazy">
                                                        </div>
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 testi-image">
                                    <img class="img-fluid " alt="rating" title="rating" src="{{ asset('assets/images/layer-139.png') }}" loading="lazy" width="636" height="420">

                                </div>

                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <section id="testimonials" class="testimonials section-bg testimonialsa">

            <div class="container-fluid container">
                <div class="justify-content-center">


                    <div class="row ">
                        <div class="col-xl-12 pr-0" style="padding-right: 0px">

                            <div class="row py-5 px-3 pb-3 ">
                                <div class="col-md-3">
                                    <span class="testimonialsa-span">GET CUSTOM QUOTE</span>
                                </div>
                                <div class="col-md-9 mt-2  displaynoned">
                                    <i class="fas fa-truck"></i> <span class="freship">Free Shipping</span>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="row form-first">

                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-9">
                                    <form id="get_quotes" class="get_quote" action="{{ route('category_get_quote') }}" method="post">
                                        @csrf
                                        <div class="row g-3 align-items-center py-3" style="

    padding-top: 0px !important;
">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Size:</label>
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_length" id="product_length" value="" class="form-control form-control-sm required" placeholder="L  ">
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_width" id="product_width" value="" class="form-control form-control-sm required" placeholder="W">
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_depth" id="product_depth" value="" class="form-control form-control-sm required" placeholder="D">                  </div>
                                            <div class="col-md-2">

                                                <select class="form-control form-select form-select-sm required" name="measurement_units" id="units">
                                                    <option value="cm">cm</option>
                                                    <option value="mm">mm</option>
                                                    <option selected="" value="inches">inch</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row g-3 align-items-center py-2">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Qty:</label>
                                            </div>
                                            <div class="col-lg-4">

                                                <input type="text" id="quantity" name="quantity" class="form-control form-control-sm " value="" placeholder="Quantity" min="1" max="100000">


                                            </div>

                                            <div class="col-lg-3">

                                                <div class="form-group">
                                                    <select name="color" id="color" class="form-control form-select  form-select-sm">
                                                        <option value="">Select Color</option>
                                                        <option value="1 Color">1 Color</option>
                                                        <option value="2 Color">2 Color</option>
                                                        <option value="3 Color">3 Color</option>
                                                        <option value="4 Color">4 Color</option>
                                                        <option value="4/1 Color">4/1 Color</option>
                                                        <option value="4/2 Color">4/2 Color</option>
                                                        <option value="4/3 Color">4/3 Color</option>
                                                        <option value="4/4 Color">4/4 Color</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" placeholder="Product Name" name="product_name" id="name">
                                                <input type="hidden" name="qtype" value="">
                                                <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">

                                            </div>

                                        </div>
                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>

                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" placeholder="Name" name="contact_name" id="name">
                                            </div>
                                            <div class="col-lg-3 col-lg-3s">
                                                <input class="form-control form-control-sm required" required="" name="contact_phone" id="phone" placeholder="Phone No" type="text">
                                            </div>
                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" required="" name="contact_email" id="email" placeholder="Email Address">                  </div>

                                        </div>

                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-11">
                                                <textarea class="form-control form-control-sm" name="message" rows="5" id="message" placeholder="write short message" spellcheck="false"></textarea>
                                            </div>


                                        </div>
                                        <div class="row g-3 align-items-center py-2 ">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-11">
                                                <button type="submit" class="btn btn-roundeds btn-warning">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div class="col-md-3 form-first bg">
                                    <div class="text-center py-4 text-white">
                                        <h4>Shop with Confidence</h4>
                                        <h6 class="text-center py-1" style="font-size: 17px;color:#ffbd00;font-family: Poppins Medium ">Money <br>
                                            Back Guarantee</h6>
                                    </div>

                                    <div class="text-center py-2">
                                        <img loading="lazy" src="{{asset('assets/images/guarantee_image.webp')}}" class="text-center">
                                    </div>
                                    <div class="text-center py-1">
                                        <img loading="lazy" src="{{asset('assets/images/payment-img.webp')}}" class="text-center">
                                    </div>
                                </div>


                            </div>
                        </div>

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

        </section>
        <div class="container">

        </div>
    </section>
    <section class="bg-white category_detail_box">
        <div class="container">
            <div class="cate_content">
                <p>
                    {!! $category->description !!}
                </p>
                <p class="content"> {!! $category->detail !!}</p>
                <a onclick="myFunction()" id="myBtn">Read more...</a>
            </div>
        </div>
    </section>
    @if($featured_products)
        <section class="products_slider">
            <div class="">
                <div class="products mx-3 mt-5">
                    <div class="owl-carousel">
                        @foreach($featured_products as $product)
                            <div class="item" style="">

                                @if($product->product_slug=='die-cut-kraft-boxes' || $product->product_slug=='kraft-paper-pillow-boxes' || $product->product_slug=='kraft-cake-boxes'
                           || $product->product_slug=='kraft-cookie-boxes' || $product->product_slug=='kraft-handle-boxes' ||
                           $product->product_slug=='custom-foldable-kraft-gift-boxes' || $product->product_slug=='sandwich-boxes'
                           || $product->product_slug=='kraft-mailing-boxes'|| $product->product_slug=='tuck-top-boxes' ||
                           $product->product_slug=='kraft-tea-boxes' || $product->product_slug=='kraft-lipstick-boxes' || $product->product_slug=='kraft-gift-boxes'|| $product->product_slug=='kraft-paper-gift-pillow-boxes'|| $product->product_slug=='kraft-retail-boxes'||
                           $product->product_slug=='kraft-window-boxes'|| $product->product_slug=='kraft-window-bags'||  $product->product_slug=='white-kraft-boxes'|| $product->product_slug=='kraft-gable-boxes'|| $product->product_slug=='kraft-apparel-boxes' || $product->product_slug=='kraft-display-boxes'|| $product->product_slug=='kraft-soap-boxes'


                          ||$product->product_slug=='cbd-lollipop-boxes'|| $product->product_slug=='medical-cannabis-packaging'
                          ||$product->product_slug=='thc-packaging-boxes'
                          || $product->product_slug=='custom-printed-cbd-oil-boxes'||

                          $product->product_slug=='custom-cbd-gummies-boxes'||
                          $product->product_slug=='custom-cbd-pills-boxes'||
                          $product->product_slug=='cbd-topicals-boxes'||
                          $product->product_slug=='cbd-pain-cream-boxes'||
                          $product->product_slug=='cbd-vape-oil-cartridge-boxes'||
                          $product->product_slug=='cbd-pod-boxes'||
                          $product->product_slug=='cbd-isolate-boxes'||
                          $product->product_slug=='marijuana-accessories-packaging'||
                          $product->product_slug=='marijuana-edibles-packaging'||
                          $product->product_slug=='cannabis-counter-display-boxes'||
                          $product->product_slug=='cannabis-flower-packaging'||
                          $product->product_slug=='marijuana-packaging'||
                          $product->product_slug=='cannabis-tinctures-boxes'||
                          $product->product_slug=='tincture-boxes'||
                          $product->product_slug=='cannabis-boxes'||
                          $product->product_slug=='cbd-display-boxes'
                          || $product->product_slug=='large-rigid-boxes'
                          || $product->product_slug=='small-rigid-boxes'
                          || $product->product_slug=='luxury-rigid-boxe'
                          || $product->product_slug=='blue-gable-boxes'
                          || $product->product_slug=='white-gable-boxes'
                          || $product->product_slug=='red-gable-boxes'
                          || $product->product_slug=='corrugated-gable-boxes'
                          || $product->product_slug=='window-gable-boxes'
                          || $product->product_slug=='cardboard-gable-boxes'
                          || $product->product_slug=='christmas-gable-boxes'
                          || $product->product_slug=='gable-cereal-boxes'
                          || $product->product_slug=='gable-food-boxes'
                          || $product->product_slug=='kraft-gable-boxes'



                                            || $product->product_slug=='christmas-boxes'
                                            || $product->product_slug=='christmas-favour-boxes'
                                            || $product->product_slug=='christmas-gable-boxes'
                                            || $product->product_slug=='christmas-apple-boxes'
                                            || $product->product_slug=='christmas-cake-boxes'
                                            || $product->product_slug=='cbd-display-boxes'
                                            || $product->product_slug=='cardboard-display-boxes'
                                            || $product->product_slug=='lip-balm-display-boxes'
                                            || $product->product_slug=='candy-display-boxes'
                                            || $product->product_slug=='small-counter-display-boxes'
                                            || $product->product_slug=='counter-display-boxes'
                                            || $product->product_slug=='chocolate-counter-boxes'

                          )

                                    <a href="{{ url($product->product_slug.'.html')}}"  class="text-decoration-none">

                                        <img src="{{ asset('assets/images/products/'.$product->product_image) }}"  loading="lazy"  style="width: 100%;height:auto " height="330" width="246">

                                    </a>
                                @else
                                    <a href="{{ url($product->product_slug.'.html')}}"  class="text-decoration-none">

                                        <img src="{{ asset('assets/images/products/'.$product->product_image) }}"  loading="lazy"  style="width: 100%;height:auto " height="330" width="246">

                                    </a>
                                @endif

                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

    @endif
@endsection
@push('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

    <script>
        const content = document.querySelector(".content-inner");
        const contentFull = document.querySelector(".content-full");
        const more = document.querySelector(".read-more");
        let open = false;

        if (more) {
            more.addEventListener("click", (e) => {
                if (open) {
                    content.removeAttribute("style");
                    e.target.innerText = "Read more";

                    open = false;
                } else {
                    content.style.maxHeight = `${contentFull.clientHeight}px`;
                    e.target.innerText = "Read less";

                    open = true;
                }
            });
        }
        $.validator.addMethod('captchas',
            function(value) {

                $result = ( parseInt($('#num1s').val()) + parseInt($('#num2s').val()) == parseInt($('#captchas').val()) ) ;
                $('#spambots').fadeOut('fast');
                return $result;
            },
            'Incorrect value, please try again.'
        );
        $.validator.addMethod('captcha',
            function(value) {

                $result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
                $('#spambot').fadeOut('fast');
                return $result;
            },
            'Incorrect value, please try again.'
        );
        $('#get_quotes').validate({
            debug: false,
            rules: {
                captcha: {
                    required: true,

                },contact_phone: {
                    required: true,

                },product_name: {
                    required: true,

                }
            },
            chkCaptcha: {
                required: "* Required"
            },
            highlight: function(element) {
                $(element).addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'validation-error-message help-block form-helper bold',
            errorPlacement: function(error, element) {
                return true;
            }
        });
        $('#get_quote').validate({
            debug: false,
            rules: {
                captcha: {
                    required: true,

                },contact_phone: {
                    required: true,

                },product_name: {
                    required: true,

                }
            },
            chkCaptcha: {
                required: "* Required"
            },
            highlight: function(element) {
                $(element).addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'validation-error-message help-block form-helper bold',
            errorPlacement: function(error, element) {
                return true;
            }
        });
        $(".testimonials .owl-carousel").owlCarousel({

            loop:true,
            margin:10,
            nav:false,


            responsive: {
                0: {
                    items: 1,
                    nav: !0
                },
                600: {
                    items: 1,
                    nav: !0
                },
                1000: {
                    items: 1,
                    nav: true
                }
            }

        });

        $('.products_slider .owl-carousel').owlCarousel({
            loop:true,
            items:6,
            nav: false,
            margin:15,
            responsiveClass: true,
            responsive: { 0: { items: 1, nav: false }, 600: { items: 5, nav: false }, 1400: { items: 5, nav: true, loop: true } },
        });
        function myFunction() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var btnText = document.getElementById("myBtn");

            if (dots.style.display === "none") {
                dots.style.display = "inline";
                btnText.innerHTML = "Read more";
                moreText.style.display = "none";
            } else {
                dots.style.display = "none";
                btnText.innerHTML = "Read less";
                moreText.style.display = "inline";
            }
        }
    </script>
@endpush