@extends('front.layout.app')
@section('title', 'About Us')
@section('content')

    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutBanner.jpg')}}" class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? 'About Us'}}</h2>
                </div>
            @endif
            @if($key == 1)
                <section class="aboutSec inner">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-6 wow fadeInLeft" data-wow-delay="1.6s">
                                <div class="title">
                                    <h2><span>{{$section->title ?? 'Know About Us'}}</span>{{$section->sub_title ?? 'Norcanna Inc.'}}</h2>
                                </div>
                                {!! $section->description ?? '' !!}
                                {!! $section->description2 ?? '' !!}

{{--                                <a href="#" class="btnStyle">{{$section->button_text ?? 'Learn More'}}</a>--}}
                            </div>
                            <div class="col-md-6 wow fadeInRight" data-wow-delay="2s">
                                @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                                    <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/img4.jpg')}}" class="w-100 shadow">
                                @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                                    <video>
                                        <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                        </div>
                    </div>
                </section>
            @endif
            @if($key == 2)
                <section class="aboutSec story" @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image') style="background: url({{asset($section->pageComponentMedia[0]->file_name)??asset('front/images/story-bg.jpg')}})" @endif>
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-6 wow fadeInLeft" data-wow-delay="2s">
                                @if(!empty($section->pageComponentMedia[1]) && $section->pageComponentMedia[1]->file_type == 'image')
                                    <img src="{{asset($section->pageComponentMedia[1]->file_name) ?? asset('front/images/img8.jpg')}}" class="w-100 shadow">
                                @elseif(!empty($section->pageComponentMedia[1]) && $section->pageComponentMedia[1]->file_type == 'video')
                                    <video>
                                        <source src="{{asset($section->pageComponentMedia[1]->file_name)}}" type="video/*">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                            <div class="col-md-6 wow fadeInRight" data-wow-delay="1.6s">
                                <div class="title">
                                    <h2>{{$section->title ?? 'Our History'}}</h2>
                                </div>
                                {!! $section->description ?? '' !!}
                            </div>
                            <div class="col-lg-12 mt-3 wow fadeInUp" data-wow-delay="2s">
                                {!! $section->description2 ?? '' !!}
                            </div>
                        </div>
                    </div>
                </section>
                @if(!empty($faqs) && $faqs != null)
                    <section class="faq" id="faq">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="0.5s">
                                    <div class="title text-center">
                                        <h2><span>Fast answers about cannabis delivery</span>Frequently Asked Questions</h2>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 wow fadeInUp" data-wow-delay="0.5s">
                                    <div id="accordion" class="accordionStyle">
                                        @foreach($faqs as $fkey => $faq)
                                        <div class="card">
                                            <div class="card-header" id="heading{{$fkey}}">
                                                <button class="btn btn-link @if($fkey>0) collapsed @endif" data-toggle="collapse" data-target="#collapse{{$fkey}}" aria-expanded="@if($fkey==0) true @else false @endif" aria-controls="collapse{{$fkey}}">{{$faq->title ?? ''}}<i class="fas fa-plus"></i></button>
                                            </div>
                                            <div id="collapse{{$fkey}}" class="collapse @if($fkey==0) show @endif" aria-labelledby="heading{{$fkey}}" data-parent="#accordion">
                                                <div class="card-body">
                                                    {!! $faq->description ?? '' !!}
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                @endif
            @endif
            @if($key == 3)
                <section class="aboutWrning">
                    <div class="container">
                        <div class="row justify-content-between align-items-center">
                            <div class="col-md-7">
                                <h3>{{$section->title ?? 'Proposition 65'}} </h3>
                                {!! $section->description ?? '' !!}
                            </div>
                            <div class="col-md-4 text-center">
                                @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                                    <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutWrning.png')}}">
                                @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                                    <video>
                                        <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @empty
            <div class="innerBanner">
                <img src="{{asset('front')}}/images/aboutBanner.jpg" alt="First slide" class="w-100">
                <h2>About Us</h2>
            </div>
        @endforelse
    @endif
@endsection