@extends('layouts.front')
@section('content')
@section('css')
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: 10px;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
@endsection

@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area" style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="pagination-area">
            <h2>Preguntas Frecuentes</h2>
            <ul>
                <li><a href="{{route('home')}}">Home</a> - </li>
                <li>Preguntas Frecuentes</li>
            </ul>
        </div>
    </div>
</div>

<div class="contact-us-page-area section-space-bottom">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            @if(!empty($data))
            @foreach($data as $row)
              <h4>{{$row->name}}</h4>
              @foreach($row->faq as $f)
                <button class="accordion">{{$f->question}}</button>
                <div class="panel">
                <p>{{$f->answer}}</p>
                </div>
              @endforeach
            @endforeach
            @endif
            </div>
        </div>
    </div>
</div>
@section('js')
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
@endsection
@endsection