@extends('front.layout')
@section('title')
{{$sec1->MetaTitle}}
@endsection
@section('description')
{{$sec1->MetaDescription}}
@endsection

@section('content')
@if(!empty($sec1) )


<section class="pt-5">
    <div class="container pt-5">
        <div class="row justify-content-center pt-md-0 pt-4">
            <div class="col-lg-10 text-center">
                <h1 class="text-primary">{{$sec1->Title}}</h1>
                <?php echo $sec1->Content; ?>
            </div>
        </div>
    </div>
</section>
@endif


<section class="py-lg-5 py-3 faq-page-section">
    <div class="container">
        <ul class="row nav faq-navs" role="tablist">

        @foreach($faqs as $kid=> $faq)
            <li class="col-md-4 col-6 faq-tab text-center">
                <a class="faq-tab-link d-block p-3 <?php if($kid==0){echo 'active';}?>" id="{{$faq->code}}-tab" data-toggle="tab"
                   href="#{{$faq->code}}" role="tab" aria-controls="{{$faq->code}}" aria-selected="<?php if($kid==0){ echo 'true';}else{echo 'false';}?>">
                    <div class="mb-3">
                        <figure id="{{$faq->image_id}}" class="animated-icon mx-auto" style="width: 90px;"></figure>
                    </div>
                    <h4>{{$faq->title}}</h4>
                </a>
            </li>
        @endforeach
          
        </ul>
        <div class="row tab-content pt-5">
            @foreach($faqs as $keyID=>$faq)
            
            <div class="col-md-12 tab-pane fade <?php if($keyID==0){
                    echo 'show active';}?> " id="{{$faq->code}}" role="tabpanel"
                 aria-labelledby="{{$faq->code}}-tab">
                <p><button type="button"
                           class="btn btn-outline-primary faq-buttons text-uppercase showAns">Expand All</button>
                    <button type="button"
                            class="btn btn-outline-primary faq-buttons text-uppercase ml-2 hideAns">Collapse
                        All</button></p>
            
            <div id="<?php echo str_replace(' ', '', $faq->code).'-accordion';?>">
        
            @foreach($faq->qusetions as $key=>$question)

            <div class="card">
                <div class="card-header" id="heading{{$key}}">
                    <h5 class="m-0  collapsed faq-title" data-toggle="collapse" data-target="#collapse{{$key}}"
                        aria-expanded="false" aria-controls="collapse{{$key}}">
                        {{$question->title}}
                    </h5>
                </div>
                <div class="card-body collapse" id="collapse{{$key}}" aria-labelledby="heading{{$key}}"
                     data-parent="#<?php echo str_replace(' ', '', $faq->code).'-accordion'; ?>">
                         <?php echo $question->description; ?>
                </div>
            </div>

            @endforeach
            </div>
            </div>

            @endforeach
           
        </div>
        <div class="row pt-5">
            <div class="col-md-12 text-center">
                <a href="{{url('get_covered')}}" class="btn btn-lg btn-primary mx-md-1 mb-md-0 mb-3"><i
                        class="far fa-hand-point-right mr-1"></i>Get Covered</a>
                <a href="https://portal.joblogic.com/" rel="nofollow" target="_blank" title="Login to JobLogic Web" class="btn btn-lg btn-secondary mx-md-1"><i
                        class="far fa-hand-point-right mr-1"></i>Book A Repair</a>
            </div>
        </div>
    </div>
</section>


@if(!empty($sec3) )

<section class="py-lg-5 py-3 text-white bg-overlay" style="background-image: url({{asset(Config("params.media_path.large").$sec3->ImageName)}});">
    <div class="container py-lg-4 py-3">
        <div class="row justify-content-center ">
            <div class="col-md-6 text-center">
                <h3 class="h1 mb-lg-4">{{$sec3->Title}}</h3>
                <?php echo $sec3->Content; ?>
            </div>
        </div>
    </div>
</section>
@endif
@endsection