@extends('layout.master')

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

@section('meta')

    <meta property="fb:app_id" content="852088013854416" />

    <meta property="og:title" content="{{ $blog->titulo }}" />
    <meta property="og:description" content="{{ $blog->avance }}" />
    <meta property="og:image" content="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $blog->imagen }}" />
    <meta property="og:image:secure_url" content="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $blog->imagen }}" />
    <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="{{ $blog->titulo }}" />
    <meta name="twitter:description" content="{{ $blog->avance }}" />
    <meta name="twitter:image" content="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $blog->imagen }}" />




@endsection

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

@endsection

@section('content')

    <main class="page-main times">
        <div class="uk-grid" data-uk-grid>
            <div class="uk-width-3-4@l blog blog-section">
                <!-- horizontales si -->
                <div class="widjet --filters">
                    @if (!empty($publicidad_vertical->first()->link))
                        <a href="{{ $publicidad_vertical->first()->link }}" target="_blank">
                    @endif
                    <img class="publicidad-tipo-1" alt="Publicidad Vertical"
                        src="{{ env('URL_ARCHIVOS') . '/images/media-p/' . $publicidad_vertical->first()->imagen }}">
                    @if (!empty($publicidad_vertical->first()->link))
                        </a>
                    @endif
                </div>

                <div class="widjet --filters">
                    <h3 class="uk-text-lead times">{{ $blog->titulo }}</h3>
                </div>

                <div class="widjet --filters avance times">
                    <p>{{ $blog->avance }}</p>
                </div>

                <div class="uk-grid uk-child-width-1-2@s  times">
                    <div>
                        <a href="https://www.whatsapp.com/channel/0029VaFViED8V0toD7jgT30z" target="_blank"
                            class="btn-canal">
                            <i class="fab fa-whatsapp"></i> <span>Únete a nuestro canal de whatsapp</span>
                        </a>
                    </div>

                    <div>
                        <a href="https://t.me/grupoauge" target="_blank" class="btn-canal telegram">
                            <i class="fab fa-telegram-plane"></i> <span>Únete a nuestro canal de Telegram</span>
                        </a>
                    </div>
                </div>
                <br>
                <style>
                    .compartir_redes {
                        text-align: center;
                        margin: 20px 0;
                    }

                    .compartir_redes p {
                        font-size: 1.2rem;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    .share-icon {
                        margin: 0 1px;
                        color: #555;
                    }

                    .share-icon:hover {
                        color: rgba(0, 0, 0, 0.94);
                        /* Cambia el color al pasar el mouse */
                    }

                    .share-icon {
                        padding: 0 5px !important;
                    }
                </style>

                <div class="uk-grid blog-section-principal" data-uk-grid>
                    <div class="uk-width-3-4@l blog blog-section">
                        <div class="widjet --filters">
                            @php
                                $esDominioEducauge = str_contains($blog->link, 'storage.googleapis.com') ||
                                                     str_contains($blog->link, 'bucket.educaauge.com');
                            @endphp


                            @if (!empty($blog->link))
                                @if ($esDominioEducauge)
                                    @php
                                        $secureBlogVideoUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl($blog->link);
                                    @endphp
                                    @include('partials.video-player-protected', [
                                        'videoSrc' => $secureBlogVideoUrl,
                                        'playerId' => 'blog-video-player',
                                    ])
                                @else
                                    <iframe class="uk-width-1-1" src="{{ $blog->link }}" frameborder="0"
                                        allow="autoplay; fullscreen; picture-in-picture; clipboard-write" allowfullscreen
                                        title="Video de la sesión">
                                    </iframe>
                                @endif
                            @else
                                <img alt="{{ $blog->titulo }}"
                                    src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $blog->imagen }}">
                            @endif
                        </div>
                        <div class="widjet --filters times descripcion-blog">
                            {!! $blog->descripcion !!}
                        </div>
                        <div class="compartir_redes times">
                            <p>Síguenos en redes sociales:</p>

                            <!-- Facebook -->
                            <a href="#" id="share-facebook" target="_blank" class="share-icon facebook"
                                title="Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>

                            <!-- YouTube -->
                            <a href="https://www.youtube.com/@augeeduca" target="_blank" class="share-icon youtube"
                                title="YouTube">
                                <i class="fab fa-youtube"></i>
                            </a>

                            <!-- X (antes Twitter) -->
                            <a href="https://x.com/auge_peru" id="share-twitter" target="_blank" class="share-icon twitter"
                                title="X">
                                <i class="fa-brands fa-twitter"></i>
                            </a>

                            <!-- Instagram -->
                            <a href="https://www.instagram.com/auge_peru/" target="_blank" class="share-icon instagram"
                                title="Instagram">
                                <i class="fab fa-instagram"></i>
                            </a>

                            <!-- TikTok -->
                            <a href="https://www.tiktok.com/@educaauge" target="_blank" class="share-icon tiktok"
                                title="TikTok">
                                <i class="fab fa-tiktok"></i>
                            </a>

                            <!-- Telegram -->
                            <a href="https://t.me/grupoauge" target="_blank" class="share-icon telegram" title="Telegram">
                                <i class="fab fa-telegram-plane"></i>
                            </a>
                        </div>
                        <div class="times mb-0">
                            <p><i><b>Creditos:</b> {{ $blog->credito }}</i></p>
                        </div>
                        <h3 class="titulo_relacionado">Noticias Relacionadas</h3>
                        <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 ($blogsRelacionados as $related)
                                <a href="{{ url('/detalleblog/' . $related->titulo_rewrite) }}"
                                    style="text-decoration: none; color: inherit;">
                                    <div class="fl-gp-box">
                                        <div class="fl-cover-image">
                                            <img alt="{{ $related->titulo }}"
                                                src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $related->imagen }}">
                                        </div>
                                        <div class="fl-gp-footer">
                                            <div class="fl-gp-info">
                                                <i class="icon-globe"></i><span>{{ $related->fecha_formateada }}</span>
                                            </div>
                                            <div class="fl-gp-cells">
                                                <div class="fl-gp-cell-left">
                                                    <strong>{{ $related->titulo }}</strong>
                                                </div>
                                            </div>
                                            <div class="fl-gp-action">
                                                <div class="fl-gp-button">
                                                    <i class="gg-icon gg-log-in"></i> Ver más
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>

                    </div>



                    <div class="uk-width-1-4@l filters-section lado-izquierdo">
                        <!-- vertical 2 -->
                        <div class="widjet --filters vertical2">
                            @if (!empty($publicidad_hor2->first()->link))
                                <a href="{{ $publicidad_hor2->first()->link }}" target="_blank">
                            @endif
                            <img class="publicidad-tipo-3" alt="Publicidad Horizontal 2"
                                src="{{ env('URL_ARCHIVOS') . '/images/media-p/' . $publicidad_hor2->first()->imagen }}">
                            @if (!empty($publicidad_hor2->first()->link))
                                </a>
                            @endif

                        </div>
                        <div class="uk-section ultima-noticia">
                            <h3 class="uk-heading-line vertical2"><span>ÚLTIMAS NOTICIAS</span></h3>
                            <ul class="uk-list uk-list-divider">
                                @foreach ($ultimosBlogs as $ultimo)
                                    <!-- Primera noticia -->
                                    <a href="{{ url('/detalleblog/' . $ultimo->titulo_rewrite) }}"
                                        style="text-decoration: none; color: inherit;">
                                        <li>
                                            <div class="uk-grid-small uk-flex-middle" uk-grid>
                                                <div class="uk-width-1-3">
                                                    <div class="image-container">
                                                        <img src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $ultimo->imagen }}"
                                                            alt="Noticia 1">
                                                    </div>
                                                </div>
                                                <div class="uk-width-2-3 text-ultima-noticia">
                                                    <strong>{{ $ultimo->titulo }}</strong>
                                                </div>
                                            </div>
                                        </li>
                                    </a>
                                    <br>
                                @endforeach
                                <!-- Segunda noticia -->
                                {{-- <li>
                                    <div class="uk-grid-small uk-flex-middle" uk-grid>
                                        <div class="uk-width-1-3">
                                            <div class="image-container">
                                                <img src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $related->imagen }}"
                                                    alt="Noticia 1">
                                            </div>
                                        </div>
                                        <div class="uk-width-2-3 text-ultima-noticia">
                                            <h4 class="uk-margin-remove">
                                                <a href="#" class="uk-link-reset">
                                                    La Alarmante Segregación Escolar En El Perú: Un Desafío Urgente Para La
                                                    Igualdad Educativa
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                </li> --}}
                                <!-- Tercera noticia -->
                                {{-- <li>
                                    <div class="uk-grid-small uk-flex-middle" uk-grid>
                                        <div class="uk-width-1-3">
                                            <div class="image-container">
                                                <img src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $related->imagen }}"
                                                    alt="Noticia 1">
                                            </div>
                                        </div>
                                        <div class="uk-width-2-3 text-ultima-noticia">
                                            <h4 class="uk-margin-remove">
                                                <a href="#" class="uk-link-reset">
                                                    Fortaleciendo la Educación Básica en Latinoamérica: Desafíos y
                                                    Estrategias para los Docentes
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                </li> --}}
                            </ul>
                        </div>

                        <!-- vertical 3 -->
                        <div class="widjet --filters vertical2">
                            <!-- Publicidad Horizontal 1 -->
                            @if (!empty($publicidad_hor3->first()->link))
                                <a href="{{ $publicidad_hor3->first()->link }}" target="_blank">
                            @endif
                            <img class="publicidad-tipo-4" alt="Publicidad Horizontal 3"
                                src="{{ env('URL_ARCHIVOS') . '/images/media-p/' . $publicidad_hor3->first()->imagen }}">
                            @if (!empty($publicidad_hor3->first()->link))
                                </a>
                            @endif
                        </div>
                    </div>
                </div>


            </div>

            <div class="uk-width-1-4@l filters-section imagen-izquierda">
                @if (!empty($publicidad_hor1->first()->link))
                    <a href="{{ $publicidad_hor1->first()->link }}" target="_blank">
                @endif
                <img class="publicidad-tipo-2" alt="Publicidad Horizontal 1"
                    src="{{ env('URL_ARCHIVOS') . '/images/media-p/' . $publicidad_hor1->first()->imagen }}">
                @if (!empty($publicidad_hor1->first()->link))
                    </a>
                @endif
            </div>

        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const shareUrl = "{{ url()->current() }}"; // URL de la página actual
            const pageTitle = "{{ $blog->titulo }}"; // Título del blog

            // Facebook
            document.getElementById('share-facebook').addEventListener('click', function(e) {
                e.preventDefault();
                const facebookUrl =
                    `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
                window.open(facebookUrl, '_blank');
            });

            // X (Twitter)
            document.getElementById('share-twitter').addEventListener('click', function(e) {
                e.preventDefault();
                const twitterUrl =
                    `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(pageTitle)}`;
                window.open(twitterUrl, '_blank');
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const publicidadesVertical = @json($publicidad_vertical);
            const publicidadesHorizontal1 = @json($publicidad_hor1);
            const publicidadesHorizontal2 = @json($publicidad_hor2);
            const publicidadesHorizontal3 = @json($publicidad_hor3);

            let indexVertical = 0;
            let indexHorizontal1 = 0;
            let indexHorizontal2 = 0;
            let indexHorizontal3 = 0;

            function actualizarImagenes() {
                // Actualizar Publicidad Vertical
                if (publicidadesVertical.length > 0) {
                    const verticalContainer = document.querySelector('.publicidad-tipo-1');
                    const verticalLink = publicidadesVertical[indexVertical].link;
                    const rutaVertical = "{{ env('URL_ARCHIVOS') . '/images/media-p/' }}" + publicidadesVertical[
                        indexVertical].imagen;
                    if (verticalContainer) {
                        if (verticalLink) {
                            verticalContainer.parentElement.href = verticalLink;
                            verticalContainer.parentElement.target = "_blank";
                        }
                        verticalContainer.src = rutaVertical;
                    }
                    indexVertical = (indexVertical + 1) % publicidadesVertical.length;
                }

                // Actualizar Publicidad Horizontal 1
                if (publicidadesHorizontal1.length > 0) {
                    const horizontal1Container = document.querySelector('.publicidad-tipo-2');
                    const horizontal1Link = publicidadesHorizontal1[indexHorizontal1].link;
                    const rutaHorizontal1 = "{{ env('URL_ARCHIVOS') . '/images/media-p/' }}" +
                        publicidadesHorizontal1[indexHorizontal1].imagen;
                    if (horizontal1Container) {
                        if (horizontal1Link) {
                            horizontal1Container.parentElement.href = horizontal1Link;
                            horizontal1Container.parentElement.target = "_blank";
                        }
                        horizontal1Container.src = rutaHorizontal1;
                    }
                    indexHorizontal1 = (indexHorizontal1 + 1) % publicidadesHorizontal1.length;
                }

                // Actualizar Publicidad Horizontal 2
                if (publicidadesHorizontal2.length > 0) {
                    const horizontal2Container = document.querySelector('.publicidad-tipo-3');
                    const horizontal2Link = publicidadesHorizontal2[indexHorizontal2].link;
                    const rutaHorizontal2 = "{{ env('URL_ARCHIVOS') . '/images/media-p/' }}" +
                        publicidadesHorizontal2[indexHorizontal2].imagen;
                    if (horizontal2Container) {
                        if (horizontal2Link) {
                            horizontal2Container.parentElement.href = horizontal2Link;
                            horizontal2Container.parentElement.target = "_blank";
                        }
                        horizontal2Container.src = rutaHorizontal2;
                    }
                    indexHorizontal2 = (indexHorizontal2 + 1) % publicidadesHorizontal2.length;
                }

                // Actualizar Publicidad Horizontal 3
                if (publicidadesHorizontal3.length > 0) {
                    const horizontal3Container = document.querySelector('.publicidad-tipo-4');
                    const horizontal3Link = publicidadesHorizontal3[indexHorizontal3].link;
                    const rutaHorizontal3 = "{{ env('URL_ARCHIVOS') . '/images/media-p/' }}" +
                        publicidadesHorizontal3[indexHorizontal3].imagen;
                    if (horizontal3Container) {
                        if (horizontal3Link) {
                            horizontal3Container.parentElement.href = horizontal3Link;
                            horizontal3Container.parentElement.target = "_blank";
                        }
                        horizontal3Container.src = rutaHorizontal3;
                    }
                    indexHorizontal3 = (indexHorizontal3 + 1) % publicidadesHorizontal3.length;
                }
            }

            setInterval(actualizarImagenes, 12000);
            actualizarImagenes();
        });
    </script>

@endsection