@section('seo_section')
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQs | {{ \App\Models\InfoSection::pluck('site_title')->first() }}</title>
    <meta name="robots" content="index, follow">
    <meta name="description"
        content="Find answers to the most frequently asked questions at {{ \App\Models\InfoSection::pluck('site_title')->first() }}. We provide clear and helpful responses to common inquiries regarding our services and operations.">
    <meta name="keywords"
        content="FAQs, Frequently Asked Questions, Customer Support, {{ \App\Models\InfoSection::pluck('site_title')->first() }}, Help, Service Information, Common Inquiries">
    <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large">
    <link rel="canonical" href="{{ route('faqs') }}">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title" content="FAQs | {{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta property="og:description"
        content="Find answers to the most frequently asked questions at {{ \App\Models\InfoSection::pluck('site_title')->first() }}. We provide clear and helpful responses to common inquiries regarding our services and operations.">
    <meta property="og:url" content="{{ route('faqs') }}">
    <meta property="og:site_name" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta property="og:updated_time" content="{{ now() }}">
    <meta property="og:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:secure_url"
        content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} Logo">
    <meta property="og:image:type" content="image/jpeg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="FAQs | {{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta name="twitter:description"
        content="Find answers to the most frequently asked questions at {{ \App\Models\InfoSection::pluck('site_title')->first() }}. We provide clear and helpful responses to common inquiries regarding our services and operations.">
    <meta name="twitter:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "name": "FAQs | {{\App\Models\InfoSection::pluck('site_title')->first()}}",
    "url": "{{ route('faqs') }}",
    "mainEntity": {
        "@type": "Question",
        "name": "What services do you offer?",
        "acceptedAnswer": {
            "@type": "Answer",
            "text": "We offer customer care support, operator, and dispatcher services for cab firms across the United Kingdom."
        }
    },
    "description": "Find answers to the most frequently asked questions at {{\App\Models\InfoSection::pluck('site_title')->first()}}. We provide clear and helpful responses to common inquiries regarding our services and operations."
}
</script>
@endsection

@extends('frontend.layout.main')
@section('main-section')
    <div class="sub-banner-section-outer">

        {{-- Preloader --}}
        <x-frontend.preloader></x-frontend.preloader>

        <!-- MAIN HEADER -->
        <x-frontend.navbar></x-frontend.navbar>
        <!-- BANNER -->


        <x-frontend.bread-crumb>
            <x-slot name="image">images/br-bg-1.jpg</x-slot>
            <x-slot name="title">FAQs</x-slot>
            <li class="position-relative fs-xx-14 d-inline-block">FAQs</li>

        </x-frontend.bread-crumb>
    </div>

    <section class="about-service-section accordian-section">
        <div class="container">
            <div class="row">
                <div class="col-xl-7 col-lg-6 col-md-6 col-sm-12 d-md-flex align-items-lg-start align-items-md-center">
                    <div class="about-service-section-img-content position-relative wow bounceIn" data-wow-duration="2s">
                        <figure class="about-service-section-shape-img-2 mb-0 position-absolute">
                            <img class="img-fluid" src="assets/images/about-service-section-shape-img-2.png"
                                alt="Evren Bpo">
                        </figure>
                        <figure class="about-service-section-main-img mb-0 position-relative">
                            <img class="img-fluid" src="assets/images/accordion-section-img.png" alt="Evren Bpo">
                        </figure>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-6 col-md-6 col-sm-12">
                    <div class="about-service-section-text position-relative">
                        <figure class="about-service-section-shape-img-1 mb-0 position-absolute">
                            <img class="img-fluid" src="assets/images/about-service-section-shape-img-1.png"
                                alt="Evren Bpo">
                        </figure>
                        <h2 class="mb-lg-4 mb-md-3 mb-2 text-md-left text-center">Information Frequently Asked Question</h2>
                        <div class="accordian-inner">
                            <div id="accordion">
                                @foreach ($faqs->take(3) as $i => $faq)
                                    <div class="accordion-card">
                                        <div class="card-header" id="heading{{ $faq->id }}">
                                            <h4 class="mb-0">
                                                <button class="btn btn-link" data-toggle="collapse"
                                                    data-target="#collapse{{ $faq->id }}" aria-expanded="false"
                                                    aria-controls="collapse{{ $faq->id }}">
                                                    {{ $faq->question }}
                                                </button>
                                            </h4>
                                        </div>
                                        <div id="collapse{{ $faq->id }}" class="collapse show"
                                            aria-labelledby="heading{{ $faq->id }}" style="">
                                            <div class="card-body">
                                                <p class="text-size-16 mb-0 p-0">{{ $faq->answer }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="accordian-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="about-service-section-text accordian-section-inner-text position-relative">
                        <div class="accordian-inner">
                            <div id="accordion1">
                                @foreach ($faqs as $i => $faq)
                                    @if ($i > 3)
                                        <div class="accordion-card">
                                            <div class="card-header" id="heading{{ $faq->id }}">
                                                <h4 class="mb-0">
                                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                                        data-target="#collapse{{ $faq->id }}" aria-expanded="false"
                                                        aria-controls="collapse{{ $faq->id }}">
                                                        {{ $faq->question }}
                                                    </button>
                                                </h4>
                                            </div>
                                            <div id="collapse{{ $faq->id }}" class="collapse"
                                                aria-labelledby="heading{{ $faq->id }}" style="">
                                                <div class="card-body">
                                                    <p class="text-size-16 mb-0 p-0">{{ $faq->answer }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <x-frontend.footer></x-frontend.footer>
@endsection