@extends('layout.master')

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

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

@section('content')
    <main class="page-main">
        <div class="uk-grid" data-uk-grid>
            

            <!-- Sección de Exámenes -->
            <div class="uk-width-2-3@l blog blog-section">
                <div class="widjet --filters">
                    <div class="widjet__body">
                        <div class="uk-grid uk-child-width-1-2@s uk-flex-middle uk-grid-small" data-uk-grid>
                            <h3 class="uk-text-lead" style="text-align: left">{{ $categoriaExamen->titulo }}</h3>
                            <div class="uk-text-right">{{ $examenes->count() }} exámenes</div>
                        </div>
                    </div>
                </div>

                <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s">
                    @foreach ($examenes as $examen)
                        <a href="{{ url('/pasarela-examen/' . $examen->titulo_rewrite) }}" class="fl-gp-link-wrapper">
                            <div class="fl-gp-box">
                                <div class="fl-cover-image">
                                    <img alt="{{ $examen->titulo }}"
                                        src="{{ env('URL_ARCHIVOS') . '/images/examenes/' . $examen->imagen }}">
                                </div>
                                <div class="fl-gp-footer">
                                    {{-- <div class="fl-gp-info">
                                        <i class="icon-globe"></i><span>{{ $examen->fecha_registro }}</span>
                                    </div> --}}
                                    <div class="fl-gp-cells" >
                                        <div class="fl-gp-cell-left">
                                            <strong>{{ $examen->titulo }}</strong>
                                            <p style="margin: 0; font-weight:500">{{ $examen->breve_detalle }}</p>
                                        </div>
                                    </div>
                                    <div class="fl-gp-action">
                                        <div class="fl-gp-button">
                                            S/ {{ $examen->costo_promo ?? $examen->precio }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <!-- Paginación -->
                <div class="uk-margin uk-flex uk-flex-center" uk-margin>
                    {{ $examenes->links('vendor.pagination.uikit') }}
                </div>
            </div>

            <!-- Sección de Categorías -->
            <div class="uk-width-1-3@l filters-section">
                <div class="widjet --my-list">
                    <div class="widjet__head">
                        <h3 class="uk-text-lead">Categorías de Exámenes</h3>
                    </div>
                    <div class="widjet__body">
                        <ul class="my-game-list">
                            @foreach ($categorias_ex as $categoria)
                                <a href="{{ url('/categoriaexamen/' . $categoria->titulo_rewrite) }}">
                                    <li class="my-game-item">
                                        <!-- Letra inicial de la categoría -->
                                        <div class="my-game-item__letter" style="background: #da291c;">
                                            {{ strtoupper(substr($categoria->titulo, 0, 1)) }}
                                        </div>
                                        <!-- Título de la categoría -->
                                        <div class="my-game-item__title">{{ $categoria->titulo }}</div>
                                    </li>
                                </a>
                            @endforeach
                        </ul>
                       
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection