@extends('layouts.master')
@section('page')
    <title>Faqs | {{setting('site.title')}}</title>
@endsection
@section('content')
    <div class="cm-page-header overlay-dark bg-cover" style="background-image: url({{asset('assets/images/tech-support/faq-banner.png')}}); ">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="block text-white text-center">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="section cm-team pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center list">
                    <h4>Below is a list of Frequently Asked Questions about computers & smartphones.</h4>
                </div>
            </div>
            <div class="row">
                @foreach ($categories as $category)
                @if($category->faqs->count() > 0)
                    <div class="col-lg-6" style="overflow-y: auto;">
                        <div class="team-item mt-40">
                            <div class="row align-items-center">
                                <div class="col-sm-12 mt-4 mt-sm-0 col-md-12">
                                    <h5 class="text-primary text-uppercase font-w-600">{{$category->title}}</h5>
                                    <hr>
                                    @foreach ($category->faqs as $item)
                                    <div class="barWrapper">
                                        <a href="#{{$item->id}}" class="dropdown-btn question" >
                                            <i class="fa fa-caret-down"></i>
                                            {{$item->question}}</a>
                                          <div class="dropdown-container answer" >
                                            <hr>
                                            <p >{!! $item->answer !!}</p>
                                          </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>
@endsection()
@push('styles')
    <style>
        .list{margin: 0 auto; color: black;}
        .question{color: black;}
        .question:hover, .question:focus {color: #d33733;text-decoration: none;}
        .answer{display: none;}
    </style>
@endpush()
@push('scripts')
    <script>
    var dropdown = document.getElementsByClassName("dropdown-btn");
        var i;
        for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
            this.classList.toggle("active");
            event.stopPropagation();
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } 
            else {
                dropdownContent.style.display = "block";
            }
            });
        } 
    </script>
@endpush()