@extends('front.layout.app')
@section('title', 'Home')
@section('content')
    @if(isset($pageComponents['sliders']) && !empty($pageComponents['sliders']))
        <div class="main-slider">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    @forelse($pageComponents['sliders'] as $key => $slider)

                        <div class="carousel-item @if($key==0) active @endif">
                            @if(!empty($slider->pageComponentMedia[0]) && $slider->pageComponentMedia[0]->file_type == 'image')
                                <img class="img-fluid"
                                     src="{{asset($slider->pageComponentMedia[0]->file_name) ?? asset('front/images/ban.jpg')}}">
                            @elseif(!empty($slider->pageComponentMedia[0]) && $slider->pageComponentMedia[0]->file_type == 'video')
                                <video>
                                    <source src="{{asset($slider->pageComponentMedia[0]->file_name)}}" type="video/*">
                                    Your browser does not support the video tag.
                                </video>
                            @endif

                            <div class="carousel-caption">
                                <div class="container">
                                    <h5>{{$slider->sub_title ?? 'Welcome To Norcanna Inc.'}}</h5>
                                    {!! $slider->description ?? '' !!}
                                    {!! $slider->description2 ?? '' !!}
                                    <a href="{{url('shop')}}"
                                       class="btnStyle">{{$slider->button_text ?? 'shop Now'}}</a>
                                </div>
                            </div>
                        </div>

                    @empty

                        <div class="carousel-item active">
                            <img class="img-fluid" src="{{asset('front')}}/images/ban.jpg" alt="First slide">
                            <div class="carousel-caption">
                                <div class="container">
                                    <h5>Welcome To Norcanna Inc.</h5>
                                    <h2><span>Sacramento & Surrounding Areas</span>TOP DELIVERY SERVICE</h2>
                                    <p>Delivering to you the most effective medicine, privately, cost-effectively, and
                                        from
                                        professional, courteous, and reputable staff is what sets us apart from any
                                        other sources in
                                        Northern California.</p>
                                    <a href="#" class="btnStyle">shop Now</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="{{asset('front')}}/images/ban.jpg" alt="Second slide">
                            <div class="carousel-caption">
                                <div class="container">
                                    <h5>Welcome To Norcanna Inc.</h5>
                                    <h2><span>Sacramento & Surrounding Areas</span>TOP DELIVERY SERVICE</h2>
                                    <p>Delivering to you the most effective medicine, privately, cost-effectively, and
                                        from
                                        professional, courteous, and reputable staff is what sets us apart from any
                                        other sources in
                                        Northern California.</p>
                                    <a href="#" class="btnStyle">shop Now</a>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="{{asset('front')}}/images/ban.jpg" alt="Third slide">
                            <div class="carousel-caption">
                                <div class="container">
                                    <h5>Welcome To Norcanna Inc.</h5>
                                    <h2><span>Sacramento & Surrounding Areas</span>TOP DELIVERY SERVICE</h2>
                                    <p>Delivering to you the most effective medicine, privately, cost-effectively, and
                                        from
                                        professional, courteous, and reputable staff is what sets us apart from any
                                        other sources in
                                        Northern California.</p>
                                    <a href="#" class="btnStyle">shop Now</a>
                                </div>
                            </div>
                        </div>

                    @endforelse
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <i class="fas fa-angle-left"></i>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <i class="fas fa-angle-right"></i>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    @endif


    @if(isset($pageComponents['aboutSecs']) && !empty($pageComponents['aboutSecs']))
        <section class="aboutSec homeAboutSec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="shopThumbList">
                            @foreach($pageComponents['aboutSecs'] as $aKey => $aboutSec)
                                @if($aKey == 3) @continue @endif
                                @if($aKey !== 1)
                                    <li>
                                        <div class="shopThumb wow fadeInUp"
                                             data-wow-delay="@if($aKey == 0) 0.4s @elseif($aKey == 1) 0.8s @else 0.12s @endif">
                                            @if(!empty($aboutSec->pageComponentMedia[0]) && $aboutSec->pageComponentMedia[0]->file_type == 'image')
                                                <img src="{{asset($aboutSec->pageComponentMedia[0]->file_name) ?? asset('front/images/img1.jpg')}}">
                                            @endif
                                            <div class="overlay">
                                                <h4>{{$aboutSec->title ?? ''}}</h4>
                                                {!! $aboutSec->description ?? '' !!}
                                                @if($aKey == 0)
                                                    <a href="{{url('/shop')}}?location=Sacramento">{{$aboutSec->button_text ?? 'Shop Now' }}</a>
                                                @elseif($aKey == 1)
                                                    {{-- <a href="{{url('/shop')}}?location=Chico">{{$aboutSec->button_text ?? 'Shop Now' }}</a> --}}
                                                @else
                                                    <a href="{{route('specials')}}">{{$aboutSec->button_text ?? 'Shop Now' }}</a>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
                @if(isset($pageComponents['aboutSecs'][3]) && !empty($pageComponents['aboutSecs'][3]))
                    @php $aboutSec2 = $pageComponents['aboutSecs'][3]; @endphp
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-sm-6 wow fadeInLeft" data-wow-delay="1.6s">
                            <div class="title">
                                <h2><span>{{$aboutSec2->title ?? 'Know About Us'}}</span>
                                    {{$aboutSec2->sub_title ?? 'Norcanna Inc.'}}</h2>
                            </div>
                            {!! $aboutSec2->description ?? '' !!}
                            {!! $aboutSec2->description2 ?? '' !!}
                            <a href="{{url('about')}}" class="btnStyle">{{ $aboutSec2->button_text ?? 'Learn More'}}</a>
                        </div>
                        <div class="col-lg-6 col-sm-6  wow fadeInRight" data-wow-delay="2s">
                            @if(!empty($aboutSec2->pageComponentMedia[0]) && $aboutSec2->pageComponentMedia[0]->file_type ==
                            'image')
                                <img src="{{asset($aboutSec2->pageComponentMedia[0]->file_name) ?? asset('front/images/mission-im.jpg')}}"
                                     class="w-100 shadow">
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </section>
    @endif

    @if(isset($pageComponents['specialization']) && !empty($pageComponents['specialization']))
        @php $specialization = $pageComponents['specialization']; @endphp
        <section class="typeEffects">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="title wow fadeInUp" data-wow-delay="0.4s">
                            <h2>
                                <span>{{$specialization->title ?? 'Our Specialization'}}</span>{{$specialization->sub_title??'Strain Types & Effects'}}
                            </h2>
                            {!! $specialization->description ?? '' !!}
                        </div>
                    </div>