@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('meta')
    <meta property="og:title" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:description" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:image" content="https://educaauge.com/assets/XMEB40.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Educa Auge" />


    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:description" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:image" content="https://educaauge.com/assets/XMEB40.jpg" />

@endsection
@section('styles')

    <style>
        .uk-modal-dialog {
            max-width: 750px !important;
        }

        .portadaimagen {
            position: relative;
            display: flex;
            justify-content: center;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .portadaimagen .slider-item {
            width: 100%;
            display: none;
        }

        .portadaimagen .slider-item img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }

        .portadaimagen .slider-item.active {
            display: block;
            /* Mostrar la imagen activa */
        }

        .portadaimagen .slider-item iframe {
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }

        .imagen-movil {
            display: none;
            /* Ocultar la imagen de móvil por defecto */
        }

        .imagen-desktop {
            display: block;
            /* Mostrar la imagen de escritorio por defecto */
        }

        @media (max-width: 1270px) and (min-width: 768px) {
            .bodyfull {
                margin-top: 50px;
            }
        }

        /* Cuando el ancho de la pantalla sea menor a 768px (típico de móviles) */
        @media (max-width: 768px) {
            .uk-height-max-medium {
                max-height: 700px;
            }

            .imagen-movil {
                display: block;
                /* Mostrar la imagen móvil */
            }

            .imagen-desktop {
                display: none;
                /* Ocultar la imagen de escritorio */
            }

            .portadaimagen {
                padding: 0px;
            }
        }
    </style>
@endsection
@section('content')
    <main class="page-main">
        @include('partials.filtro')

        <div class="bodyfull">
            <style>
                .modal-background {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-size: cover;
                    background-position: center;
                    height: 690px;
                    border-radius: 20px;
                    overflow: hidden;
                }

                .modal-content {
                    position: relative;
                    z-index: 2;
                    text-align: center;
                    padding: 20px;
                    border-radius: 10px;
                }

                .modal-background img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    z-index: 0;
                }

                .uk-fondo {
                    background: transparent !important;
                }

                @media (max-width: 768px) {
                    .imagen-movil {
                        display: block;
                        max-width: 90%;
                        /* Ajusta el tamaño al 90% del contenedor */
                        height: auto;
                        /* Mantén la proporción de la imagen */
                        margin: 0 auto;
                        /* Centra la imagen horizontalmente */
                    }

                    .portadaimagen {
                        padding: 0px;
                        display: flex;
                        justify-content: center;
                    }
                }
            </style>

            <div id="slider" class="portadaimagen">
                {{-- Mostrar las imágenes o videos en el slider --}}
                @foreach ($sliderPortadas as $index => $slider)
                    @if (!empty($slider->link))
                        <a href="{{ $slider->link }}" target="_blank">
                    @endif
                    <div class="slider-item {{ $index === 0 ? 'active' : '' }}">
                        <img class="imagen-desktop" src="{{ env('URL_ARCHIVOS') . '/images/banners/' . $slider->imagen }}"
                            alt="{{ $slider->titulo ?? '' }}">
                        <img class="imagen-movil" src="{{ env('URL_ARCHIVOS') . '/images/banners/' . $slider->imagen2 }}"
                            alt="{{ $slider->titulo ?? '' }}">
                    </div>
                    @if (!empty($slider->link))
                        </a>
                    @endif
                @endforeach


                {{-- Solo mostrar el contenedor de los puntos indicadores si hay más de una imagen --}}
                @if ($sliderPortadas->count() > 1)
                    <div id="slider-indicators" class="slider-indicators"></div>
                @endif
            </div>


            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    // Obtener los divs que contienen las imágenes o videos del slider
                    var slides = document.querySelectorAll('#slider .slider-item');
                    var currentIndex = 0;

                    // Verificar si hay más de una imagen o video
                    if (slides.length > 1) {
                        var interval = setInterval(changeSlide, 8000); // Iniciar el slider automático
                        var indicatorsContainer = document.getElementById('slider-indicators');

                        // Crear puntos indicadores
                        slides.forEach(function(_, index) {
                            var dot = document.createElement('span');
                            dot.classList.add('dot');
                            if (index === 0) {
                                dot.classList.add('active');
                            }
                            dot.onclick =
                                function() { // Función para cambiar a la imagen o video al hacer clic en un punto
                                    currentIndex = index;
                                    updateSlide();
                                    resetInterval();
                                };
                            indicatorsContainer.appendChild(dot);
                        });

                        function changeSlide() {
                            currentIndex = (currentIndex + 1) % slides.length; // Actualiza el índice
                            updateSlide();
                        }

                        function updateSlide() {
                            // Ocultar todas las imágenes/videos y mostrar solo el activo
                            slides.forEach(function(slide, index) {
                                slide.classList.toggle('active', index === currentIndex);
                            });
                            updateIndicators();
                        }

                        function updateIndicators() {
                            var dots = document.querySelectorAll('.dot');
                            dots.forEach(function(dot, index) {
                                dot.classList.toggle('active', index === currentIndex);
                            });
                        }

                        // Reiniciar el intervalo cuando se hace clic en un punto
                        function resetInterval() {
                            clearInterval(interval);
                            interval = setInterval(changeSlide, 12000);
                        }
                    }
                });
            </script>

            <ul class="uk-grid-small uk-child-width-1-1 uk-child-width-1-5@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s"
                data-uk-grid>
                @foreach ($cursos as $curso)
                    <li>
                        {{-- <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}"> --}}
                        @if ($curso->visibilidad == 1)
                            <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}">
                            @else
                                <a href="javascript:void(0)" style="pointer-events: none; cursor: default;">
                        @endif
                        <div class="stream-item">
                            <div class="stream-item__box">
                                <div class="stream-item__media">
                                    <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen }}" alt="image"
                                        style="{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}" />
                                    <div class="stream-item__info">
                                        <div class="stream-item__status"
                                            style="background-color: {{ $curso->etiqueta_fondo }};{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}">
                                            {{ $curso->etiqueta }}
                                        </div>
                                    </div>
                                    <div class="o-course-card__play">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>

                                <div class="stream-item__body">
                                    <div class="stream-item__title">{{ $curso->titulo }}</div>
                                    <div class="stream-item__time">
                                        @if (!empty($curso->cursos_dependientes))
                                            <span class="tag"><i class="fa fa-layer-group"></i>
                                                {{ $curso->cantidad_detalles_temp }} Módulos</span>
                                        @else
                                            <span class="tag"><i class="fa fa-book"></i>
                                                {{ $curso->cantidad_detalles_temp }}
                                                Masterclass</span>
                                        @endif

                                        <!-- Calificación con estrellas -->
                                        <span class="rating">
                                            @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= floor($curso->calificacion))
                                                    <i class="fa fa-star full-star"></i> <!-- Estrella llena -->
                                                @elseif ($i - 0.5 == $curso->calificacion)
                                                    <i class="fa fa-star-half-alt half-star"></i> <!-- Media estrella -->
                                                @else
                                                    <i class="fa fa-star empty-star"></i> <!-- Estrella vacía (opcional) -->
                                                @endif
                                            @endfor

                                        </span>
                                    </div>
                                    @if ($curso->costo_promo_final != 0 || $curso->precio_final != 0)
                                        <div class="stream-item__time">
                                            <span class="precio_promo">S/. {{ $curso->costo_promo_final }}</span>
                                            <span class="precio_normal">S/. {{ $curso->precio_final }}</span>
                                        </div>
                                    @endif

                                </div>
                            </div>

                        </div>
                        </a>
                    </li>
                @endforeach
            </ul>
            <!-- mostrar si est aespcilidad en  0 si est alogeado  nomas  y  mostrar si  la especilidad el  logedo esta  igual al del flotante si  -->

            <style>
                /* Modal centrado un poco más abajo */
                #modal-aviso .uk-modal-dialog.aviso-modal-dialog {
                    margin-top: 10% !important;
                    /* ↓ BAJA el modal */
                    max-width: 450px !important;
                    /* ⬅ máx 300px ancho */
                    padding: 5px !important;
                    border-radius: 10px;
                    overflow: hidden;
                    background: #Fff !important;
                    width: 90%;
                }

                /* Imagen responsive */
                .aviso-imagen {
                    width: 100%;
                    height: auto;
                    display: block;
                    border-radius: 10px;
                }

                /* Botón cerrar */
                .aviso-close {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    width: 25px;
                    height: 25px;
                    border: none;
                    border-radius: 50%;
                    background: #da291c;
                    color: #fff;
                    cursor: pointer;
                    font-size: 14px;
                    font-weight: 900;
                    margin: 0;
                    padding: 0;
                }

                @media (max-width:560px) {
                    #modal-aviso .uk-modal-dialog.aviso-modal-dialog {
                        margin-top: 50% !important;
                    }

                    .aviso-close {
                        width: 20px;
                        height: 20px;
                        font-size: 12px;
                    }
                }
            </style>

            @if ($aviso)
                <div id="modal-aviso" class="uk-modal uk-flex-top" uk-modal>

                    <div class="uk-modal-dialog aviso-modal-dialog">

                        <button class="aviso-close uk-modal-close-default" type="button">X</button>


                        @if ($aviso->link)
                            <a href="{{ $aviso->link }}" target="_blank">
                                <img src="{{ env('URL_ARCHIVOS') . '/images/avisos/' . $aviso->imagen }}" alt="Aviso"
                                    class="aviso-imagen">
                            </a>
                        @else
                            <img src="{{ env('URL_ARCHIVOS') . '/images/avisos/' . $aviso->imagen }}" alt="Aviso"
                                class="aviso-imagen">
                        @endif

                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        UIkit.modal('#modal-aviso').show();
                    });
                </script>
            @endif




        </div>
    </main>

    <!-- POPUP: esquina inferior derecha -->
    <div id="br-popup" class="br-popup" role="dialog" aria-live="polite" aria-label="Escuela de Padres">
        <button class="br-close" id="br-popup-close" aria-label="Cerrar">✕</button>

        <div class="br-media">
            <a href="{{ url('/conferencias') }}" target="_blanck">
                <img src="{{ asset('assets/img/conferencias/padres.jpg') }}" alt="Escuela de Padres"></a>
        </div>

        <div class="br-content">
            <a class="br-cta" href="{{ url('/conferencias') }}" target="_blanck">
                SEPARAR FECHA
            </a>
        </div>
    </div>

    <style>
        .br-popup {
            position: fixed;
            right: 120px;
            bottom: 30px;
            width: min(250px, 50vw);
            color: #f9fafb;
            border-radius: 10px;
            z-index: 99;
            transform: translate(20px, 20px) scale(.98);
            transition: transform .4s ease, opacity .3s ease;
            opacity: 0;
        }

        .br-popup.br-show {
            opacity: 1;
            pointer-events: auto;
            transform: translate(0, 0) scale(1);
        }


        .br-media img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }

        .br-cta {
            margin-top: 0px;
            display: inline-block;
            background: #22c55e;
            color: #FFF;
            text-decoration: none;
            font-weight: 600;
            border-radius: 0 0 10px 10px;
            padding: 10px;
            font-size: 14px;
            width: 100%;
            text-align: center;
        }

        .br-cta:hover {
            color: #FFF;
        }

        .br-close {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            background: #ccc;
            color: #000;
            cursor: pointer;
            font-size: 12px;
            font-weight: 900;
            margin: 0;
            padding: 0;
        }

        @media (max-width:1500px) {
            .br-popup {
                right: 90px;
                bottom: 20px;
            }
        }


        @media (max-width:560px) {
            .br-popup {
                right: 10px;
                left: 10px;
                width: 200px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const popup = document.getElementById('br-popup');
            const close = document.getElementById('br-popup-close');

            // mostrar popup con leve delay
            setTimeout(() => popup.classList.add('br-show'), 800);

            // cerrar popup
            close.addEventListener('click', () => popup.classList.remove('br-show'));
        });
    </script>


@endsection