@extends('layouts.front.main')
@section('title', __('frontWords.faqs'))
@section('content')
<div class="events-area hero-area-postcard1 mt-5">
    <div class="container">

       <div class="row postcard_1">
                    
						

 
						
							   <div class="col-lg-12 col-md-12 col-xl-12 " data-cues="fadeIn" data-group="images" data-duration="1000" data-disabled="true">
                       	<div class="postcard_img1">
						<h1 class="m-3">FREQUENTLY ASKED QUESTIONS</h1>
						<p>All your questions answered.</p>
                            <img src="assets/images/icon.svg" alt="" class="img-fluid">  
                            </div>
							</div>
					  </div>
    </div>

</div>




       
	   <div class="ms_top_artist  bg_4" >
                <div class="container-fluid ">
                    <div class="row area-5" >
                         <div class="col-lg-12 col-md-12 col-xl-12 Program1" data-cues="fadeIn" data-group="images" data-duration="1000" data-disabled="true">
						
               
               <div class="accordion pb-4" id="accordionExample">
        @if($faqs->count() > 0)
        @foreach($faqs as $faq)
        <div class="card">
            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapse{{ $faq->id }}" aria-expanded="false">     
                <span class="title1">{{ $faq->question }}   </span>
                <span class="accicon"><i class="fa fa-angle-down rotate-icon"></i></span>
            </div>
            <div id="collapse{{ $faq->id }}" class="collapse" data-parent="#accordionExample">
                <div class="card-body">
                   {{ $faq->answer }}
                </div>
            </div>
        </div>
        @endforeach
        @endif
        <!-- <div class="card">
            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">     
                <span class="title1"> dolor sit amet consectetur adipisicing el ?  </span>
                <span class="accicon"><i class="fa fa-angle-down rotate-icon"></i></span>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
                <div class="card-body">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
                <span class="title1"> corporis dolores esse iusto natus. ?</span>
                <span class="accicon"><i class="fa fa-angle-down rotate-icon"></i></span>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordionExample">
                <div class="card-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.
                </div>
            </div>
        </div>
		<div class="card">
            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapsefour" aria-expanded="false">
                <span class="title1"> modi delectus corporis dolores  ?</span>
                <span class="accicon"><i class="fa fa-angle-down rotate-icon"></i></span>
            </div>
            <div id="collapsefour" class="collapse" data-parent="#accordionExample">
                <div class="card-body">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.
                </div>
            </div>
        </div>
		<div class="card">
            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapsefive" aria-expanded="false">
                <span class="title1">  magnam fugit, aut recusandae  provident ?</span>
                <span class="accicon"><i class="fa fa-angle-down rotate-icon"></i></span>
            </div>
            <div id="collapsefive" class="collapse" data-parent="#accordionExample">
                <div class="card-body">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, at dignissimos ex magnam fugit, aut recusandae tempore illum provident praesentium ratione cumque, reprehenderit modi delectus corporis dolores esse iusto natus.
                </div>
            </div>
        </div> -->
    </div>

            </div>


			  </div>
			  
			  
			   </div>

		
       
            </div>
  
</div>
@endsection

@section('script')
     <script>
        $(document).ready(function(){
            $('#accordionExample .card-header').first().removeClass('collapsed');
            $('#accordionExample .collapse').first().addClass('show');
        });
     </script>
@endsection