@extends('front.layout.app')
@section('title', 'Foundations')
@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 ?? 'Foundation'}}</h2>
                </div>
            @endif

            @if($key == 1)

                <section class="found-sec">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    @if(!empty($components))
                                        @foreach($components as $sKey => $component)
                                            @if($sKey == 0)
                                                <li class="nav-item">
                                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                                       aria-controls="home" aria-selected="true">{{$component->title ?? 'Foundation'}} </a>
                                                </li>
                                            @endif

                                            @if($sKey == 1)
                                                <li class="nav-item">
                                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                                       aria-controls="profile" aria-selected="false">{{$component->title ?? 'Our Mission'}} </a>
                                                </li>
                                            @endif
                                            @if($sKey == 2)
                                                <li class="nav-item">
                                                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                                                       aria-controls="contact" aria-selected="false">{{$component->title ?? 'Our History'}} </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq"
                                                       aria-selected="false">faqs</a>
                                                </li>
                                            @endif
                                            @if($sKey == 3)
                                                <li class="nav-item">
                                                    <a class="nav-link" id="position-tab" data-toggle="tab" href="#position" role="tab"
                                                       aria-controls="position" aria-selected="false">{{$component->title ?? 'Proposition 65'}} </a>
                                                </li>
                                            @endif
                                        @endforeach
                                    @endif
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    @if(!empty($components))
                                        @foreach($components as $s_key => $component)
                                            @if($s_key == 0)
                                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-6 wow fadeInLeft" data-wow-delay="1.6s">
                                                            <div class="title">
                                                                <h2>{{$component->title ?? 'Foundation'}}</h2>
                                                            </div>
                                                            {!! $component->description ?? '' !!}
                                                        </div>
                                                        <div class="col-md-6 wow fadeInRight" data-wow-delay="2s">
                                                            @if(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'image')
                                                                <img src="{{asset($component->pageComponentMedia[0]->file_name) ?? asset('front/images/found-1.png')}}" class="w-100 shadow">
                                                            @elseif(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'video')
                                                                <video>
                                                                    <source src="{{asset($component->pageComponentMedia[0]->file_name)}}" type="video/*">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            @if($s_key == 1)
                                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-6 wow fadeInLeft" data-wow-delay="1.6s">
                                                            <div class="title">
                                                                <h2>{{$component->title ?? 'our mission'}}</h2>
                                                            </div>
                                                            {!! $component->description ?? '' !!}


                                                        </div>
                                                        <div class="col-md-6 wow fadeInRight" data-wow-delay="2s">
                                                            @if(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'image')
                                                                <img src="{{asset($component->pageComponentMedia[0]->file_name) ?? asset('front/images/found-2.png')}}" class="w-100 shadow">
                                                            @elseif(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'video')
                                                                <video>
                                                                    <source src="{{asset($component->pageComponentMedia[0]->file_name)}}" type="video/*">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            @if($s_key == 2)
                                                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-6 wow fadeInLeft" data-wow-delay="1.6s">
                                                            <div class="title">
                                                                <h2>{{$component->title ?? 'our history'}}</h2>
                                                            </div>
                                                            {!! $component->description ?? '' !!}
                                                        </div>
                                                        <div class="col-md-6 wow fadeInRight" data-wow-delay="2s">
                                                            @if(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'image')
                                                                <img src="{{asset($component->pageComponentMedia[0]->file_name) ?? asset('front/images/found-3.png')}}" class="w-100 shadow">
                                                            @elseif(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'video')
                                                                <video>
                                                                    <source src="{{asset($component->pageComponentMedia[0]->file_name)}}" type="video/*">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            @endif
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="found-par">
                                                                {!! $component->description ?? '' !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if(!empty($faqs) && $faqs != null)
                                                    <div class="tab-pane fade" id="faq" role="tabpanel" aria-labelledby="faq-tab">
                                                        <div class="row align-items-center">
                                                            <div class="col-md-12">
                                                                <div class="title">
                                                                    <h2>Frequently Asked Questions</h2>
                                                                </div>
                                                                <div id="accordion" class="accordionStyle">
                                                                    @foreach($faqs as $fkey => $faq)
                                                                        <div class="faqCard wow fadeInUp" data-wow-delay="0.5s">
                                                                            <div class="cardHeader" id="heading{{$fkey}}">
                                                                                <button class="@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">
                                                                                {!! $faq->description ?? '' !!}
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endif
                                            @if($s_key == 3)
                                                <div class="tab-pane fade" id="position" role="tabpanel" aria-labelledby="position-tab">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-6 wow fadeInLeft" data-wow-delay="1.6s">
                                                            <div class="title">
                                                                <h2>{{$component->title ?? 'proposition 65'}}</h2>
                                                            </div>
                                                            {!! $component->description ?? '' !!}

                                                        </div>
                                                        <div class="col-md-6 wow fadeInRight" data-wow-delay="2s">
                                                            @if(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'image')
                                                                <img src="{{asset($component->pageComponentMedia[0]->file_name) ?? asset('front/images/found-4.png')}}" class="w-100 shadow">
                                                            @elseif(!empty($component->pageComponentMedia[0]) && $component->pageComponentMedia[0]->file_type == 'video')
                                                                <video>
                                                                    <source src="{{asset($component->pageComponentMedia[0]->file_name)}}" type="video/*">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @empty
            <div class="innerBanner">
                <img src="{{asset('front')}}/images/aboutBanner.jpg" alt="First slide" class="w-100">
                <h2>Foundation</h2>
            </div>
        @endforelse
    @endif

@endsection