@extends('layouts.app')

@section('content')
<!--== Start Slider Area ==-->
<div class="slider-area-wrapper">
    <div id="rev_slider_7_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="home-06"
         data-source="gallery">
        <!-- START REVOLUTION SLIDER 5.4.7 fullwidth mode -->
        <div id="rev_slider_home_6" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.7">
            <ul>
                <!-- SLIDE  -->
                <li data-index="rs-17" data-transition="random-premium" data-slotamount="default" data-hideafterloop="0"
                    data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default"
                    data-thumb="assets/img/rev-slider/home6/100x50_m6-s1.jpg" data-rotate="0" data-saveperformance="off"
                    data-title="Slide">
                    <!-- MAIN IMAGE -->
                    <img src="assets/img/summer.jpg" alt="" data-bgposition="center center"
                         data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg"
                         data-no-retina>


                    <!-- LAYER NR. 9 -->
                    <div class="tp-caption     rev_group" id="slide-18-layer-5" data-x="right" data-hoffset=""
                         data-y="center" data-voffset="" data-width="['700']" data-height="['244']" data-type="group"
                         data-responsive_offset="on"
                         data-frames='[{"delay":750,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                         data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                         data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                         data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"
                         style="z-index: 8; min-width: 700px; max-width: 700px; max-width: 244px; max-width: 244px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
                        <!-- LAYER NR. 10 -->
                        <div class="tp-caption   tp-resizeme" id="slide-18-layer-6" data-x="center" data-hoffset=""
                             data-y="" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+290","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 9; white-space: nowrap; font-size: 12px; line-height: 20px; font-weight: 700; color: #8d8d8d; letter-spacing: 2px;font-family:Poppins;">
                {{-- NEW NOW--}}
                        </div>

                        <!-- LAYER NR. 11 -->
                        <div class="tp-caption   tp-resizeme" id="slide-18-layer-7" data-x="center" data-hoffset=""
                             data-y="18" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+590","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 10; white-space: nowrap; font-size: 48px; line-height: 64px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Playfair Display;">
                            Premium Froshen Chicken
                        </div>

                        <!-- LAYER NR. 12 -->
                        <div class="tp-caption   tp-resizeme" id="slide-18-layer-8" data-x="center" data-hoffset=""
                             data-y="113" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+890","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 11; white-space: nowrap; font-size: 24px; line-height: 30px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Poppins;">
                            Your Menu's Mate
                        </div>

                        <!-- LAYER NR. 13 -->
                        <div class="tp-caption LA-BTN-OUTLINE-Black rev-btn " id="slide-18-layer-9" data-x="center" onclick="window.location.href='{{route('products.userIndex')}}'"
                             data-hoffset="-3" data-y="178" data-width="['auto']" data-height="['auto']"
                             data-type="button" data-responsive_offset="on" data-responsive="off"
                             data-frames='[{"delay":"+1190","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"300","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(38,38,38);bw:2 2 2 2;"}]'
                             data-margintop="[,,,]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[15,15,15,15]" data-paddingright="[45,45,45,45]"
                             data-paddingbottom="[15,15,15,15]" data-paddingleft="[45,45,45,45]"
                             style="z-index: 12; white-space: nowrap;border-color:rgb(38,38,38);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                            Shop Now
                        </div>
                    </div>
                </li>

                <!-- SLIDE  -->
                <li data-index="rs-19" data-transition="random-premium" data-slotamount="default" data-hideafterloop="0"
                    data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default"
                    data-thumb="assets/img/rev-slider/home6/100x50_m6-s3.jpg" data-rotate="0" data-saveperformance="off"
                    data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5=""
                    data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                    <!-- MAIN IMAGE -->
                    <img src="assets/img/legs.jpg" alt="" data-bgposition="center center"
                         data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg"
                         data-no-retina>
                    <!-- LAYERS -->

                    <!-- LAYER NR. 17 -->
                    <div class="tp-caption     rev_group" id="slide-19-layer-5" data-x="right" data-hoffset=""
                         data-y="center" data-voffset="" data-width="['700']" data-height="['244']" data-type="group"
                         data-responsive_offset="on"
                         data-frames='[{"delay":750,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                         data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                         data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                         data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"
                         style="z-index: 7; min-width: 700px; max-width: 700px; max-width: 244px; max-width: 244px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
                        <!-- LAYER NR. 18 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-6" data-x="center" data-hoffset=""
                             data-y="" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+290","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 8; white-space: nowrap; font-size: 12px; line-height: 20px; font-weight: 700; color: #8d8d8d; letter-spacing: 2px;font-family:Poppins;">
                    {{--NEW NOW--}}
                        </div>

                        <!-- LAYER NR. 19 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-7" data-x="center" data-hoffset=""
                             data-y="18" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+590","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 9; white-space: nowrap; font-size: 48px; line-height: 64px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Playfair Display;">
                            Chicken Like No Other!
                        </div>

                        <!-- LAYER NR. 20 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-8" data-x="center" data-hoffset=""
                             data-y="113" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+890","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 10; white-space: nowrap; font-size: 24px; line-height: 30px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Poppins;">
                            Beyond the boundaries of taste.
                        </div>

                        <!-- LAYER NR. 21 -->
                        <div class="tp-caption LA-BTN-OUTLINE-Black rev-btn " id="slide-19-layer-9" data-x="center" onclick="window.location.href='{{route('products.userIndex')}}'"
                             data-hoffset="-3" data-y="178" data-width="['auto']" data-height="['auto']"
                             data-type="button" data-responsive_offset="on" data-responsive="off"
                             data-frames='[{"delay":"+1190","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"300","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(38,38,38);bw:2 2 2 2;"}]'
                             data-margintop="[,,,]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[15,15,15,15]" data-paddingright="[45,45,45,45]"
                             data-paddingbottom="[15,15,15,15]" data-paddingleft="[45,45,45,45]"
                             style="z-index: 11; white-space: nowrap;border-color:rgb(38,38,38);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                            Shop Now
                        </div>
                    </div>
                </li>

                <!-- SLIDE  -->
                <li data-index="rs-18" data-transition="random-premium" data-slotamount="default" data-hideafterloop="0"
                    data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default"
                    data-thumb="assets/img/rev-slider/home6/100x50_m6-s3.jpg" data-rotate="0" data-saveperformance="off"
                    data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5=""
                    data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                    <!-- MAIN IMAGE -->
                    <img src="assets/img/wings.jpg" alt="" data-bgposition="center center"
                         data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg"
                         data-no-retina>
                    <!-- LAYERS -->

                    <!-- LAYER NR. 17 -->
                    <div class="tp-caption     rev_group" id="slide-19-layer-5" data-x="right" data-hoffset=""
                         data-y="center" data-voffset="" data-width="['700']" data-height="['244']" data-type="group"
                         data-responsive_offset="on"
                         data-frames='[{"delay":750,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                         data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                         data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                         data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"
                         style="z-index: 7; min-width: 700px; max-width: 700px; max-width: 244px; max-width: 244px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
                        <!-- LAYER NR. 18 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-6" data-x="center" data-hoffset=""
                             data-y="" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+290","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 8; white-space: nowrap; font-size: 12px; line-height: 20px; font-weight: 700; color: #8d8d8d; letter-spacing: 2px;font-family:Poppins;">
                {{-- NEW NOW--}}
                        </div>

                        <!-- LAYER NR. 19 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-7" data-x="center" data-hoffset=""
                             data-y="18" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+590","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 9; white-space: nowrap; font-size: 48px; line-height: 64px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Playfair Display;">
                            Paradise on your plate!
                        </div>

                        <!-- LAYER NR. 20 -->
                        <div class="tp-caption   tp-resizeme" id="slide-19-layer-8" data-x="center" data-hoffset=""
                             data-y="113" data-width="['auto']" data-height="['auto']" data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":"+890","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 10; white-space: nowrap; font-size: 24px; line-height: 30px; font-weight: 400; color: #262626; letter-spacing: 0px;font-family:Poppins;">
                            We bet you won’t find better.
                        </div>

                        <!-- LAYER NR. 21 -->
                        <div class="tp-caption LA-BTN-OUTLINE-Black rev-btn " id="slide-19-layer-9" data-x="center" onclick="window.location.href='{{route('products.userIndex')}}'"
                             data-hoffset="-3" data-y="178" data-width="['auto']" data-height="['auto']"
                             data-type="button" data-responsive_offset="on" data-responsive="off"
                             data-frames='[{"delay":"+1190","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"300","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(38,38,38);bw:2 2 2 2;"}]'
                             data-margintop="[,,,]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[15,15,15,15]" data-paddingright="[45,45,45,45]"
                             data-paddingbottom="[15,15,15,15]" data-paddingleft="[45,45,45,45]"
                             style="z-index: 11; white-space: nowrap;border-color:rgb(38,38,38);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                            Shop Now
                        </div>
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
        </div>
    </div>
</div>
<!--== End Slider Area ==-->

<!--== Start Special Categories Banner ==-->
<div class="special-category-banner pt-88 pt-md-58 pt-sm-48">
    <div class="container-fluid">
        <div class="special-category-banner-content">
            <div class="row">
                @foreach($categories as $category)
                    <!-- Single Banner Start -->
                    <div class="col-sm-6 col-lg-4">
                        <div class="single-special-banner">
                            <figure class="banner-thumbnail">
                                <a href="{{route('products.userIndex', 'category=' . $category->slug)}}">
                                <img src="{{asset($category->displayimage)}}" class="banner-thumb"
                                                         alt="Category Banner"/>
                                </a>
                                <figcaption class="banner-cate-name text-center">
                                    <h2 class="banner-title" style="color:black;">{{$category->name}}</h2>
            {{--        <img class="banner-sale" src="assets/img/category/home1/off-25.png" alt="25 % Sale"/>--}}
                                    <a href="{{route('products.userIndex', 'category=' . $category->slug)}}" class="btn btn-black">Shop Now</a>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <!-- Single Banner End -->
                @endforeach
            </div>
        </div>
    </div>
</div>
<!--== End Special Categories Banner ==-->

<!-- Start Froshen Chicken Banner -->
<div class="we-love-fashion pt-90 pt-md-60 pt-sm-50">
    <div class="container">
        <div class="row">
            <div class="col-md-5 text-center text-md-left">
                <figure class="love-fashion-thumbnail">
                    <img src="{{asset('images/470461.jpg')}}" alt="Froshen Chicken"/>
                </figure>
            </div>

            <div class="col-md-7 m-auto text-center mt-sm-30">
                <div class="love-fashion-text">
                    <h2>Froshly Delivered Chicken</h2>
                    <p>
                        Get your Premium Frozen Chicken at affordable prices, browse through our catalogue and place your order now as we offer same day deliveries.
                    </p>
                    <a href="{{route('products.userIndex')}}" class="btn btn-black">Discover More</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Froshen Chicken Banner -->

<!-- Start New Arrival Products Area -->
    <section id="newArrival-products-area" class="pt-90 pt-md-60 pt-sm-50">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <!-- Start Section title -->
                <div class="col-lg-8 m-auto text-center">
                    <div class="section-title-wrap style-three">
                        <h2>Latest Stocks</h2>
                    </div>
                </div>
                <!-- End Section title -->
            </div>

            <div class="row no-gutters">
                <div class="col-lg-12">
                    <div class="products-wrapper">
                        <div class="product-centerCarousel-wrap">
                            <div class="product-centerCarousel-active">
                                @foreach($products as $product)
                                    <!-- Start Single Product -->
                                    <div class="single-product-wrap">
                                        <!-- Product Thumbnail -->
                                        <figure class="product-thumbnail">
                                            <a href="{{route('products.showUser', $product->slug)}}" class="d-block">
                                                <img class="primary-thumb" src="{{asset($product->displayimage)}}"
                                                    alt="Product"/>
                                                <img class="secondary-thumb" src="{{asset($product->altdisplayimage)}}"
                                                    alt="Product"/>
                                            </a>
                                            <figcaption class="product-hvr-content">
                                                @if($product->inStock())
                                                    <a href="#" class="btn btn-black btn-addToCart productHome" data-product_id="{{$product->id}}">Add to Cart</a>
                                                @else
                                                    <a class="btn btn-black btn-addToCart">Out of Stock</a>
                                                @endif

                                                @if($product->hasDiscount())
                                                    <span class="product-badge sale">{{$product->discountPercentage()}}</span>
                                                @elseif($product->isHot())
                                                    <span class="product-badge hot">Hot</span>
                                                @elseif($product->isNew())
                                                    <span class="product-badge">New</span>
                                                @endif

                                            </figcaption>
                                        </figure>

                                        <!-- Product Details -->
                                        <div class="product-details">
                                            <h2 class="product-name">
                                                <a href="{{route('products.showUser', $product->slug)}}">{{$product->name}}</a>
                                            </h2>
                                            <div class="product-prices">
                                                @if($product->hasDiscount())
                                                    <del class="oldPrice">{{$product->displayprice}}</del>
                                                    <span class="price">{{$product->discountedPrice()}}</span>
                                                @else
                                                    <span class="price">{{$product->displayprice}}</span>
                                                @endif
                                                    <br><small class="price">{{$product->kg}} Kilogram</small>

                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Single Product -->
                                    @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- End New Arrival Products Area -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel">Subscribe to our Newsletter.</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('newsletters.store')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="email" style="font-size: 13px;">Email:</label>
                        <input type="text" id="email" class="form-control" name="email" required style="height:30px;">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="padding: 11px 25px;" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" style="padding: 11px 25px;">Subscribe</button>
                </div>
            </form>

        </div>
    </div>
</div>
@include('includes.footer')

@include('includes.modalsearchbox')

@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous"></script>
    @if(request()->has('newsletter'))
        <script>
            jQuery( document ).ready(function( $ ) {
                $('#exampleModal').modal()
            });

        </script>
    @endif

    @foreach($errors->all() as $error)
        <script>
            toastr.error(" {{$error}} ");
        </script>
    @endforeach

    @if (session('message'))
        <script>
            toastr.success(" {{session('message')}} ")
        </script>
    @endif
@endpush

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" />
@endpush