@extends('layout.master')

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

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


@endsection

@section('content')
    <main class="page-main">
        <div class="uk-width-1-1@m blog">
            <div class="widjet --filters">
                <h3 class="uk-text-lead uk-text-center">Tutoriales de Educaauge</h3>
            </div>

            <div class="uk-container">
                <ul class="uk-grid-small uk-child-width-1-1 uk-child-width-1-3@m uk-child-width-1-2@s" data-uk-grid>
                    @foreach ($tutoriales as $tutorial)
                        <li>
                            <div class="stream-item">
                                <div class="stream-item__box">
                                    <div class="stream-item__media">
                                        <a href="#video-modal" class="open-video" data-video="{{ $tutorial->link }}">
                                            <img src="{{ env('URL_ARCHIVOS') . '/images/tutoriales/' . $tutorial->imagen }}"
                                                alt="image" />
                                            <div class="o-course-card__play">
                                                <i class="fas fa-play"></i>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="stream-item__body">
                                        <div class="stream-item__title">{{ $tutorial->titulo }}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </main>


    <!-- Modal UIkit para reproducir el video -->
    <div id="video-modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="lleva_video">
                <iframe src="" allowfullscreen></iframe>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = UIkit.modal('#video-modal');
            var iframe = document.querySelector('#video-modal iframe');

            // Abrir vídeo como ya lo tenías
            document.querySelectorAll('.open-video').forEach(function(el) {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    iframe.src = this.dataset.video + '?autoplay=1';
                    modal.show();
                });
            });

            // Escuchamos el evento 'hidden' en el elemento real del modal
            modal.$el.addEventListener('hidden', function() {
                // Al desasignar el src, detenemos el vídeo
                iframe.src = '';
            });
        });
    </script>
@endsection