@extends('layouts.app')

@section('content')
    <div
                class="faq-header d-flex flex-column justify-content-center align-items-center h-px-300 position-relative">
                <img 
                  src="{{ asset('vuexy-assets/img/pages/header.png') }}"
                  class="scaleX-n1-rtl faq-banner-img z-n1 rounded"
                  alt="background image" />
                <h4 class="text-center mb-2">{{ __('fields.faq_header_title') }}</h4>  
               <p class="text-center mb-0 px-4">{{ __('fields.faq_header_subtitle') }}</p>
                <div class="input-wrapper mt-4 input-group input-group-merge">
                  <span class="input-group-text" id="basic-addon1"
                    ><i class="icon-base ti tabler-search icon-xs"></i
                  ></span>
                  <input
                    type="text"
                    class="form-control"
                    id="faq-search"
                    placeholder="{{ __('fields.search_placeholder') }}"
                    aria-label="Search"
                    aria-describedby="basic-addon1" />
                </div>
              </div>

              <div class="row mt-6">
                <!-- Navigation -->
                <div class="col-lg-3 col-md-4 col-12 mb-md-0 mb-4">
                  <div class="d-flex justify-content-between flex-column nav-align-left mb-2 mb-md-0">
                    <ul class="nav nav-pills flex-column">
                        @foreach ($faqs as $category => $items)
                            <li class="nav-item">
                            <button class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" data-bs-target="#{{ $category }}">
                                {!! $items->first()->icon ?? '<i class="icon-base ti tabler-help icon-sm faq-nav-icon me-1_5"></i>' !!}
                                <span class="align-middle">{{ __('faq_categories.' . $category) }}</span>
                            </button>
                            </li>
                        @endforeach
                    </ul>
                    <div class="d-none d-md-block">
                      <div class="mt-4">
                        <img 
                          src="{{ asset('vuexy-assets/img/illustrations/girl-sitting-with-laptop.png') }}"
                          class="img-fluid"
                          width="270"
                          alt="FAQ Image" />
                      </div>
                    </div>
                  </div>
                </div>
                <!-- /Navigation -->

                <!-- FAQ's -->
                <div class="col-lg-9 col-md-8 col-12">
                    <div class="tab-content p-0">
                        @foreach ($faqs as $category => $items)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ $category }}" role="tabpanel">
                            <div class="accordion" id="accordion-{{ $category }}">
                                @foreach ($items as $faq)
                                <div class="card accordion-item {{ $loop->first ? 'active' : '' }}">
                                    <h2 class="accordion-header">
                                    <button class="accordion-button {{ !$loop->first ? 'collapsed' : '' }}" type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#faq-{{ $faq->id }}"
                                        aria-controls="faq-{{ $faq->id }}">
                                        {{ $faq->question[$currentLocale] ?? $faq->question['en'] }}

                                    </button>
                                    </h2>
                                    <div id="faq-{{ $faq->id }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}">
                                    <div class="accordion-body">
                                        {!! nl2br(e($faq->answer[app()->getLocale()] ?? $faq->answer['en'])) !!}
                                    </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- /FAQ's -->
              </div>

              <!-- Contact -->
              <div class="row my-6">
                <div class="col-12 text-center my-6">
                    <div class="badge bg-label-primary">{{ __('fields.need_help_badge') }}</div>
                    <h4 class="my-2">{{ __('fields.need_help_title') }}</h4>
                    <p class="mb-0">
                    {{ __('fields.need_help_description') }}
                    </p>
                </div>
              </div>
                <div class="row justify-content-center gap-md-0 gap-6">
                <div class="col-md-6">
                    <div class="py-6 rounded bg-faq-section text-center">
                    <span class="badge bg-label-primary p-2">
                        <i class="icon-base ti tabler-phone icon-26px mx-50 mt-50"></i>
                    </span>
                    <h5 class="mt-4 mb-1">
                        <a class="text-heading" href="tel:+(1)25482568">+(1) 2548 2568</a>
                    </h5>
                    <p class="mb-0">{{ __('fields.phone_help_text') }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="py-6 rounded bg-faq-section text-center">
                    <span class="badge bg-label-primary p-2">
                        <i class="icon-base ti tabler-mail icon-26px mx-50 mt-50"></i>
                    </span>
                    <h5 class="mt-4 mb-1">
                        <a class="text-heading" href="mailto:help@help.com">help@help.com</a>
                    </h5>
                    <p class="mb-0">{{ __('fields.email_help_text') }}</p>
                    </div>
                </div>
                </div>
              <!-- /Contact -->

@push('scripts')

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('faq-search');
    if (!searchInput) return;

    searchInput.addEventListener('keyup', function () {
      const searchTerm = this.value.toLowerCase();
      const allFaqItems = document.querySelectorAll('.accordion-item');

      allFaqItems.forEach(item => {
        const question = item.querySelector('.accordion-button')?.textContent.toLowerCase() || '';
        const answer = item.querySelector('.accordion-body')?.textContent.toLowerCase() || '';
        const matches = question.includes(searchTerm) || answer.includes(searchTerm);
        item.style.display = matches ? 'block' : 'none';
      });
    });
  });
</script>

@endpush

                
@endsection