@extends('layouts.app')

@section('title')
    <title>{{$page->title}}</title>  
    <meta name="description" content="{{$page->meta_description}}">
    <!-- Open Graph / Facebook -->
    <meta property="og:url" content="{{Request::url()}}" />
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{$page->title}}">
    <meta property="og:description" content="{{$page->meta_description}}">
    <meta property="og:image" content="{{Voyager::image($page->banner)}}">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{$page->title}}" />
    <meta name="twitter:description" content="{{$page->meta_description}}" />
    <meta name="twitter:image" content="{{Voyager::image($page->banner)}}" />
    <link rel="canonical" href="{{Request::url()}}" />
@endsection

@section('body') 

      <section class="banner" style="background: url({{Voyager::image($page->banner)}})">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="breadcrumb-info text-center" data-lag="0.2" data-stagger="0.08" data-speed="1" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); will-change: transform;">
								<h1>{{$page->title}}</h1>
							</div>
						</div>
					</div>
				</div>
			</section>

    <section class="event_text e_tab p90">
      <ul class="nav nav-tabs" role="tablist">
        @foreach($items as $item)
        <li class="nav-item" role="presentation">
          <button @if($loop->first) class="active" @endif
            data-bs-toggle="tab"
            data-bs-target="#tab{{$loop->iteration}}"
            type="button"
          >
            {{$item->title}}
          </button>
        </li>
        @endforeach
      </ul>

      <div class="tab-content" id="myTabContent">
        @foreach($items as $item)
        <div class="tab-pane fade @if($loop->first) active show @endif" id="tab{{$loop->iteration}}" role="tabpanel">
          <div class="accordion" id="accordionTab{{$loop->iteration}}">
            @foreach(json_decode($item->faqs)->body as $key => $faq)
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading{{$key}}">
                <button
                  class="accordion-button @if(!$loop->first) collapsed @endif"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapse{{$key}}"
                  aria-expanded="{{$loop->first ? 'true' : 'false'}}"
                  aria-controls="collapse{{$key}}"
                >
                  {{$faq->question}}
                </button>
              </h2>
              <div
                id="collapse{{$key}}"
                class="accordion-collapse collapse @if($loop->first) show @endif"
                aria-labelledby="heading{{$key}}"
                data-bs-parent="#accordionTab{{ $loop->parent->iteration }}"
              >
                <div class="accordion-body">
                  {!!$faq->answer!!}
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
        @endforeach
      </div>
    </section>
@endsection