@extends('user.layout')
@push('styles')
<style>
    @import url("https://fonts.googleapis.com/css2?family=Bellefair&family=Belleza&family=Hina+Mincho&family=Libre+Baskerville:wght@700&family=Lugrasimo&family=Metal&family=Niconne&family=Quintessential&family=Sorts+Mill+Goudy&family=Source+Serif+4:opsz@8..60&display=swap");

    .title {
      font-family: "Niconne", cursive;
    }

    .text {
      font-family: "Source Serif 4", serif;
    }

    body {
      background-color: #f1f3f8;
      margin-top: 60px;
    }
  </style>
@endpush

@section('content')
    <div class="container-fluid container-lg py-5 faq-section">
        <h1 class="text-center foreground mt-4" style="font-size: 2rem;">AC Maintenance FAQ – Get Clear Answers to Common Questions</h1>
        <p class="description text-center text-black mt-2 mb-4">Our AC Maintenance FAQ – Get Clear Answers to Common Queries section addresses the most common questions about AC maintenance, from cooling issues to efficiency tips. Find expert advice to keep your system running smoothly. If your question isn’t listed, use our form to ask directly about any AC maintenance concerns. Get the answers you need and keep your AC in top shape with our detailed FAQ section.</p>
    
        <h3 class="text-center mb-4 title fs-1">Frequently Asked <span class="question">Question</span></h1>
        
        <div class="row row-cols-1 row-cols-lg-2 g-0">
            <div class="col order-1 order-lg-0">
                <div class="card mx-lg-5 mt-3">
                    <div class="card-body p-5">
                        <h5>Don't Hegitate To Ask</h5>
                        <h3 class="mb-4 title fs-1" style="color: #ffb72b">Any Other Questions <span class="fs-1">?</span></h1>
                        
                        <form action="{{ route('store-help-question') }}" method="POST" enctype="multipart/form-data">
                            @csrf
        
                            <div class="input-group mb-4 border-bottom border-danger border-opacity-100">
                                <input type="text" class="form-control border-0 ps-0" name="name" placeholder="Your Name" aria-label="Your Name" aria-describedby="name" />
                                <span class="input-group-text border-0 pe-0" id="name"><i class="bi bi-person-circle fs-4"></i></span>
                            </div>
        
                            <div class="input-group mb-4 border-bottom border-danger border-opacity-100">
                                <input type="text" class="form-control border-0 ps-0" name="email" placeholder="Your Email" aria-label="Your Email" aria-describedby="email" />
                                <span class="input-group-text border-0 pe-0" id="email"><i class="bi bi-envelope fs-4"></i></span>
                            </div>
        
                            <div class="input-group mb-4 border-bottom border-danger border-opacity-100">
                                <input type="text" class="form-control border-0 ps-0" name="question" placeholder="Your Question" aria-label="Your Question" aria-describedby="question" />
                                <span class="input-group-text border-0 pe-0" id="question"><i class="bi bi-question-circle fs-4"></i></span>
                            </div>
        
                            <input type="hidden" name="status" value="Inactive">
        
                            <button type="submit" class="btn border-0">
                                <span>Submit</span>
                                <i class="bi bi-send-fill"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        
            <div class="col order-0 order-lg-1">
                <div class="accordion p-2" id="accordionFaq" style="max-height: 480px; overflow-y: auto;">
                    @foreach ($faqs as $question => $answer)
                        <div class="accordion-item border-0 mb-2 rounded-5">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed rounded-5 py-1 ps-1 pe-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $loop->index }}" aria-expanded="false" aria-controls="collapse-{{ $loop->index }}">
                                    <i class="bi bi-question-octagon fs-4 me-2 rounded-5 py-1 px-2"></i>
                                    <span class="text-truncate">{{ $question }}</span>
                                </button>
                            </h2>
                    
                            <div id="collapse-{{ $loop->index }}" class="accordion-collapse collapse" data-bs-parent="#accordionFaq">
                                <div class="accordion-body" style="text-align: justify">{!! $answer !!}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
                @foreach ($faqs as $question => $answer)
                    {
                        "@type": "Question",
                        "name": "{{ $question }}",
                        "acceptedAnswer": {
                            "@type": "Answer",
                             "text": {!! json_encode($answer) !!}
                        }
                    }{{ !$loop->last ? ',' : '' }}
                @endforeach
            ]
        }
    </script>
@endpush