@extends('layouts.front')

@section('styles')

<style>
    
    .faq-list {
        list-style: none;
        padding: 0;
    }
    
    .faq-list li {
        margin: 30px 0;
        border: 1px solid rgb(205, 205, 205);
        padding: 27px 30px;
        margin: 0px auto 30px;
        text-align: left;
    }
    
    
    .faq-list .faq-heading::before {
        content: '+';
       font-size: 40px;
        display: block;
        position: absolute;
        right:0;
        top: -8px;
        color:#c2c2c2;
    }
    
    .faq-list .the-active .faq-heading::before {
        content: '-';
      
    }
    
    .faq-heading {
        position: relative;
        cursor: pointer;
        font-size: 18px;
        font-weight: 400;
        margin:0;
        color: #e96b56;
    }
    
    .faq-heading:hover {
        color: var(--theme-color);
    }
    
    .faq-text {
        display: none;
    }

    .art-box svg {
        width:100%;
    }

    .read {
        color: rgb(100, 100, 100);
        font-size: 16px;
        line-height: 1.5;
        margin-top: 25px;
    }
</style>

@endsection

@section('content')

<main id="main" class="scrolled-offset">

    <!-- ======= Breadcrumbs ======= -->
    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">

            <!--<ol>-->
            <!--    <li><a href="{{ route('front') }}">Home</a></li>-->
            <!--    <li>{{ __('Faqs') }}</li>-->
            <!--</ol>-->
            <h2>{{ __('Faqs') }}</h2>

        </div>
    </section><!-- End Breadcrumbs -->
    
   <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    @foreach($data as $cat)
                        <h4 class="pb-2">{{ $cat->category }}</h4>
                        <ul class="faq-list">
                            @foreach($cat->faqs as $faq)
                                <li>
                                    <h4 class="faq-heading"> {{ $faq->question }} </h4>
                                    <p class="read faq-text">
                                        {{ $faq->answer }}
                                    </p>
                                </li>
                            @endforeach
                        </ul>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

</main>

@section('scripts')

<script>
    $('.faq-heading').click(function () {
  
        $(this).parent('li').toggleClass('the-active').find('.faq-text').slideToggle();
    });
</script>

@endsection

@endsection