@extends('layouts.app')

@section('content')
<section style="background: #152a49;">
  <center><h1 class="text-white">Preguntas Frecuentes</h1></center>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="background: #f1f1f1; min-height: 500px; border-radius: 5px; box-shadow: 0 0 3px grey">

        <div style="padding: 20px;">
          <ul class="list-group">
            @foreach($preguntas as $key)
              <li class="list-group-item">
                  <div class="d-flex justify-content-between align-items-center">
                      <a class="d-flex align-items-center flex-fill" href="#" data-toggle="collapse" data-target="#accordion-panel-1_{{$key->id}}">
                          <span class="mb-0 text-primary py-1 font-weight-bold">{{$key->pregunta}}</span>
                      </a>
                      <i class="material-icons d-block text-dark">keyboard_arrow_right</i>
                  </div>
                  <div id="accordion-panel-1_{{$key->id}}" class="collapse">
                      <div class="py-1 m-3">
                          {!! $key->respuesta !!}
                      </div>
                  </div>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection