@extends('layouts.category_app')
@section('contents')
    <style> @media all and (max-width:575px) {

            .cate_content{

                margin-top:100px ;
            }
            .title_box h2{
                width: 346px;
            }
        }</style>
    <section class="products_container">
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-8 col-lg-9 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="bg-white px-4 py-2 mb-3">
                                <h1>{{ $category->name }}</h1>
                            </div>
                            <img class="products-page-offer-img opi-products-page-offer-img" src="{{ asset('assets') }}/images/custom-final-gif.gif" alt="" width="100%">
                        </div>
                    </div>
                   <div class="products-list my-4">
                        <div class="card-deck row mx-0">
                            @foreach($products as $k=>$product)
                                <div class="col-sm-6 col-lg-4 col-12 d-sm-flex px-1">
                                    <div class="card-box card shadow-lg mb-4 mx-1 bg-white rounded">
                                        @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' )

                                        <a href="{{ url($product->product_slug.'.html')}}" class="change-hover d-sm-flex justify-content-center flex-wrap" aria-label="" target="_blank" rel="noopener">
                                            @else
                                                <a href="{{ url('products/'.$product->product_slug.'.html')}}" class="change-hover d-sm-flex justify-content-center flex-wrap" aria-label="" target="_blank" rel="noopener">
                                            @endif
                                            @if($k>3)

                                            <img height="356" width="356" style="width: 100%;height: auto" alt="{{ $product->product_alt }}"
                                                 title="{{  $product->product_front_title }}"
                                                 class="product_image"
                                                 loading="lazy"
                                                 data-src="{{ asset("assets/images/products/".$product->product_image) }}">
                                            @else
                                                <img height="356" width="356" style="width: 100%;height: auto" alt="{{ $product->product_alt }}"
                                                     title="{{  $product->product_front_title }}"
                                                     loading="lazy"
                                                     class="product_image"
                                                     src="{{ asset("assets/images/products/".$product->product_image) }}">
                                            @endif
                                            @if($k>3)
                                                <img height="356" width="356" loading="lazy" style="width: 100%;height: auto" alt="{{ $product->product_back_alt }}"
                                                     title="{{  $product->product_back_title }}" class="product_image"
                                                     loading="lazy"
                                                     data-src="{{ asset("assets/images/products/".$product->product_back_image) }}">

                                            @else
                                                <img height="356" width="356" style="width: 100%;height: auto" alt="{{ $product->product_back_alt }}"
                                                     title="{{  $product->product_back_title }}" class="product_image"
                                                     loading="lazy"
                                                     src="{{ asset("assets/images/products/".$product->product_back_image) }}">

                                            @endif
                                        </a>
                                        <div class="card-body title_box d-flex flex-wrap justify-content-center">
                                            <div class=""><h2>{{ $product->product_name_cat }}</h2></div>
                                            <div class="px-auto">
     @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.html' || $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-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' )
                                                    <a href="{{ url($product->product_slug.'.html')}}" class="btn mt-1 rounded-pill btn-warning text-uppercase get_started">Get Started</a>
                                                @else
                                                    <a href="{{ url('products/'.$product->product_slug.'.html')}}" class="btn mt-1 rounded-pill btn-warning text-uppercase get_started">Get Started</a>
                                                @endif


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-12 position-sticky sticky_element" id="sticky_element">
                    <a href="{{ route('beat-my-quote') }}" class="beat-quote">Beat My Quote</a>
                    @include('layouts.common.get_quote_list_page')
                </div>
            </div>
            <div class="row offer-sec">
                <h2  class="text-center">{{ $category->title }}</h2>
                <p class="text-center">We facilitate your business by bringing you innovative printed boxes with extraordinary design printing.</p>
                <div class="row offer-slider">
                    <div class="owl-carousel">
                        @foreach($featured_products as $f_product)
                            <div class="shadow-view">
                                <a href="{{ url('products/'.$f_product->product_slug.'.html')}}">
                                    <img title="{{ $f_product->product_front_title }}"
                                         height="356" width="356"
                                         style="width: 100%;height: auto"
                                         loading="lazy"
                                         src="{{ asset('assets/images/placeholder-generic_0.webp') }}"
                                         data-src="{{ asset("assets/images/products/".$f_product->product_image) }}" alt="{{ $f_product->product_alt }}">
                                </a>
                            </div>
                       @endforeach
                    </div>
                </div>
            </div>
        </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>
            </div>
        </div>
    </section>
@endsection