@extends('layouts.mainlayout')
@section('content')
  <!--page header section start-->
  <section class="page-header-section ptb-100 bg-image" image-overlay="8">
    <div class="background-image-wraper" style="background: url('assets/img/slider-bg-1.jpg'); opacity: 1;"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-9 col-lg-7">
                <div class="page-header-content text-white pt-4">
                    <h1 class="text-white mb-0">FAQs</h1>
                    <!--
                    <p class="lead">This privacy statement provides information about your personal information that “ycsols”, or “we”, “us” “it’s joint ventures”, and “other corporate entities” working with us in collaboration collect, and how Ycsols and all above-mentioned use this information. Our major products where you would be adding your information are your cloud solutions, Nsol, Your cloud campus, Trulie, and similar other products so on and so forth.</p>
                -->
                </div>
            </div>
        </div>
    </div>
</section>
<!--page header section end-->

<!--breadcrumb section start-->
<div class="breadcrumb-bar gray-light-bg border-bottom">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="custom-breadcrumb">
                    <ol class="breadcrumb pl-0 mb-0 bg-transparent">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                        {{-- <li class="breadcrumb-item"><a href="#">Pages</a></li> --}}
                        <li class="breadcrumb-item active">FAQs</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumb section end-->

<section class="position-relative feature-section ptb-100">
    <div class="container">
        
        <div class="row align-items-center justify-content-between justify-content-sm-center justify-content-md-center">

            <div class="col-md-12 col-lg-12">
                <div class="feature-contents">
                     <!-- accordion area start -->
                     <div id="accordion-container" class="{{--wrap-bg wrap-bg-dark--}}">
                        <div class="container">
                            <div class="row justify-content-center text-center">
                                <div class="col-lg-8">
                                    <div class="section-title with-p">
                                        <h2>Frequently Asked Questions</h2>
                                        <div class="bar"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1 col-lg-1">
                                </div>
                                <div class="col-md-10 col-lg-10">
                                    @if(isset($faqs)  && count($faqs)>0)
                                    <div id="accordion">
                                        @foreach($faqs as $faq)
                                        <div class="card">
                                            <div class="card-header" id="heading{{$faq->id}}">
                                                <div class="mb-0">
                                                    <div class="btn btn-link" role="button" data-toggle="collapse" data-target="#collapse{{$faq->id}}" aria-expanded="true" aria-controls="collapse{{$faq->id}}">
                                                        {{$faq->question}}
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="collapse{{$faq->id}}" class="collapse @if($loop->first) show @endif" aria-labelledby="heading{{$faq->id}}" data-parent="#accordion">
                                                <div class="card-body">
                                                    {!! $faq->answer !!}
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    @else
                                        <span class="row justify-content-center text-center col-md-12">Coming Soon...</span>
                                    @endif
                                </div>
                                <div class="col-md-1 col-lg-1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


@endsection