@php
    use App\Library\ComponentLibrary as ComponentLibrary;

    $themeComponentSliderImageList=ComponentLibrary::themeComponentSliderImageList($themeID,$themeComponentRelID,$limit);

 $margin=sprintf("margin:%spx  %spx %spx %spx",$detail["margin_top"],$detail["margin_right"],$detail["margin_bottom"],$detail["margin_left"]);
  $padding=sprintf("padding:%spx  %spx %spx %spx",$detail["padding_top"],$detail["padding_right"],$detail["padding_bottom"],$detail["padding_left"]);
 $bgColor=sprintf('background-color:%s',$detail["bg_color"]);

@endphp
@if(count($themeComponentSliderImageList) > 0)
    <div class="main-slider style-two default-banner videoSliderContainer" id="home">
        <div class="tp-banner-container">
            <div class="tp-banner">
                <div id="welcome_wrapper" class="rev_slider_wrapper fullscreen-container video-slider"
                     data-alias="reveal-add-on36"
                     data-source="gallery" style="background:#ffffff;padding:0px;">

                    <div id="welcome-{{ceil(rand(1,999))}}" class="rev_slider fullscreenbanner welcomeSlider"
                         style="display:none;" data-version="5.4.7.2">
                        <ul>
                            @foreach($themeComponentSliderImageList as $themeComponentSliderImageL)
                                <li data-index="rs-100" data-delay="12500" data-transition="slideoververtical"
                                    data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"
                                    data-easein="default" data-easeout="default" data-masterspeed="default"
                                    data-thumb=""
                                    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 -->

                                    @if(!empty($themeComponentSliderImageL["image_url"]))
                                        <img src="{{$themeComponentSliderImageL["image_url"]}}" alt=""
                                             data-lazyload="{{$themeComponentSliderImageL["image_url"]}}"
                                             data-bgposition="center center" data-kenburns="on" data-duration="4000"
                                             data-ease="Power3.easeInOut" data-scalestart="150" data-scaleend="100"
                                             data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0"
                                             data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="4"
                                             class="rev-slidebg"
                                             data-no-retina>
                                    @endif

                                    <!-- LAYER NR. 1 -->
                                    <!-- LAYERS -->
                                    <div class="tp-caption tp-shape tp-shapewrapper " id="slide-100-layer"
                                         data-x="['center','center','center','center']"
                                         data-hoffset="['0','0','0','0']"
                                         data-y="['middle','middle','middle','middle']"
                                         data-voffset="['0','0','0','0']"
                                         data-width="full" data-height="full"
                                         data-whitespace="nowrap"
                                         data-type="shape"
                                         data-basealign="slide"
                                         data-responsive_offset="off"
                                         data-responsive="off"
                                         data-frames='[{"from":"opacity:0;","speed":1000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power4.easeOut"}]'
                                         data-textAlign="['left','left','left','left']"
                                         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: 2;background-color:rgba(0, 0, 0, 0.1);border-color:rgba(0, 0, 0, 0);border-width:0px; background-image:url(/themes/default/assets/images/overlay/rrdiagonal-line.png)"></div>

                                    <div class="rs-background-video-layer"
                                         data-ytid="{{$themeComponentSliderImageL["video_link"]}}"
                                         data-videowidth="100%"
                                         data-videoheight="100%" data-videoloop="loop" data-aspectratio="16:9"
                                         data-autoplay="true" data-autoplayonlyfirsttime="false" data-forceCover="1"
                                         data-nextslideatend="false" data-videopreload="preload" data-volume="0"
                                         data-forcerewind="on"
                                         data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&         origin={{config('app.url')}}"></div>

                                    <div class="tp-caption tp-shape tp-shapewrapper ov-tp "
                                         id="slide-100-layer-1"
                                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                         data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                                         data-width="full"
                                         data-height="full"
                                         data-whitespace="nowrap"
                                         data-type="shape"
                                         data-basealign="slide"
                                         data-responsive_offset="off"
                                         data-responsive="off"
                                         data-frames='[{"delay":10,"speed":1000,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1500,"frame":"999","to":"opacity:0;","ease":"Power4.easeIn"}]'
                                         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: 5;">
                                    </div>
                                    <div class="tp-caption   rs-parallaxlevel-4"
                                         id="slide-3239-layer-1"
                                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                         data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                                         data-fontsize="['60','60','40','20']"
                                         data-lineheight="['75','70','50','30']"
                                         data-width="['720','640','480','300']"
                                         data-height="none"
                                         data-whitespace="normal"

                                         data-type="text"
                                         data-responsive_offset="off"
                                         data-responsive="off"
                                         data-frames='[{"from":"y:20px;sX:0.9;sY:0.9;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                                         data-textAlign="['center','center','center','center']"
                                         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: 5; min-width: 720px; max-width: 720px; white-space: normal; font-size: 60px; line-height: 70px;  color: rgba(255, 255, 255, 1.00);font-family:Poppins;border-width:0px; font-weight:600;">{{$themeComponentSliderImageL["title"]}}
                                    </div>

                                </li>
                            @endforeach
                        </ul>
                        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
                    </div>
                </div>

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

@endif