@extends('aulavirtual.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/preguntas.css') }}" />

    <style>
        .tituloprin{
            margin-top: 30px
        }
    </style>
@endsection

@section('content')
    <main class="page-main">
        <div class="uk-container">
            <h2 class="uk-text-center tituloprin">Preguntas Frecuentes</h2>

            <div class="uk-grid-small uk-child-width-1-2@m" uk-grid="masonry: true">
                @foreach ($categoriasConPreguntas as $categoria)
                    <div>
                        <h3 class="subtituloprin" id="cat-{{ $categoria->id_cat }}">
                            <span>{{ $categoria->titulo }}</span>
                        </h3>
                        <ul uk-accordion>
                            @foreach ($categoria->preguntasFrecuentes as $pregunta)
                                <li class="tablero">
                                    <a class="uk-accordion-title" href="#">
                                        {{ $pregunta->titulo }}
                                        <span class="uk-float-right"><i class="fas fa-plus"></i></span>
                                    </a>
                                    <div class="uk-accordion-content">
                                        {!! $pregunta->descripcion !!}
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>


        </div>

    </main>
@endsection