@extends('layout.master')

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

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/portada.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/docente.css') }}" />
    <style>
        @media (max-width: 767px) {
            .uk-modal-dialog {
                max-width: 100% !important;
                width: auto !important;
            }
        }
    </style>
@endsection

@section('content')

    <main class="page-main">
        <div class="uk-grid" data-uk-grid>
            <div class="uk-width-3-3@l">


                <div class="uk-page-heading ">
                    <h1 class="uk-page-heading-h">Nuestros Docentes</h1>
                </div>

                <div class="uk-grid uk-grid-small uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s">

                    @foreach ($profesores as $profesor)
                        <div class="fl-gp-box">
                            <!-- Enlace con uk-toggle para abrir el modal -->
                            <a href="#modal-{{ $profesor->id_profesor }}" uk-toggle style="text-decoration: none;">
                                <div class="fl-cover-image">
                                    <img class="avatar" width="100" height="100" alt="{{ $profesor->titulo ?? '' }}"
                                        src="{{ env('URL_ARCHIVOS') . '/images/profesores/' . $profesor->imagen }}">
                                    <div class="fl-gp-info-wrap">
                                        <div class="fl-gp-info">
                                            <div class="fl-gp-title">
                                                <span class="bp-gp-home-link season-of-the-witch-home-link">{{ $profesor->titulo }}</span>
                                            </div>
                                            <div class="fl-gp-meta">
                                                    <span>{{ $profesor->cargo }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <!-- Modal de UIkit -->
                        <div id="modal-{{ $profesor->id_profesor }}" uk-modal>
                            <div class="uk-modal-dialog uk-modal-body"
                                style="border-radius: 10px; background-color: #f9f9f9; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);">
                                <!-- Icono de cerrar en la parte superior derecha -->
                                <button class="uk-modal-close-default" type="button" uk-close
                                    style="color: #000;"></button>

                                <div class="modal-content" style="text-align: center;">
                                    <h2 class="uk-modal-title" style="font-size: 24px; margin-bottom: 20px; color: #333;">
                                        {{ $profesor->titulo }}</h2>
                                    <p style="font-size: 16px; color: #555; line-height: 1.5;">{!! $profesor->descripcion !!}</p>
                                </div>


                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </main>

@endsection