@extends('layout.master')

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

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

@section('content')
    <main class="page-main">
        <div class="uk-container ">
            <h2 class="titulo-principal"> Testimonios de <span style="color: #7946FF">Nuestros Docentes</span></h2>
            <div class="uk-incluye video-horizontal">
                <div class="uk-container uk-light">
                    <div class="uk-grid-small uk-child-width-1-3@s uk-flex-center" uk-grid>
                        @foreach ($testimoniosVideoHorizontal as $testimonio)
                            @php
                                $esTestHorGstorage = str_contains($testimonio->link ?? '', 'storage.googleapis.com/bucket-auge-oficial') ||
                                                     str_contains($testimonio->link ?? '', 'bucket.educaauge.com');
                            @endphp
                            <div>
                                <div class="video-card">
                                    @if ($esTestHorGstorage)
                                        @php
                                            $secureTestHorUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl($testimonio->link);
                                        @endphp
                                        @include('partials.video-player-protected', [
                                            'videoSrc' => $secureTestHorUrl,
                                            'playerId' => 'testimonio-horizontal-' . $loop->index,
                                        ])
                                    @else
                                        <iframe src="{{ $testimonio->link }}" title="Video horizontal {{ $loop->iteration }}"
                                            frameborder="0" allowfullscreen>
                                        </iframe>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="uk-section uk-text-center stats-section">
                <div class="uk-grid-collapse uk-child-width-1-4@s uk-flex-middle" uk-grid>

                    <div class="stat-item">
                        <h3 class="stat-number counter" data-count="127000">+0</h3>
                        <p class="stat-text">docentes eligieron<br> capacitarse con nosotros</p>
                    </div>

                    <div class="stat-item">
                        <h3 class="stat-number counter" data-count="62000">+0</h3>
                        <p class="stat-text">lograron su objetivo<br> profesional</p>
                    </div>

                    <div class="stat-item">
                        <h3 class="stat-number counter" data-count="950">+0</h3>
                        <p class="stat-text">cursos</p>
                    </div>

                    <div class="stat-item">
                        <h3 class="stat-number counter" data-count="400000">+0</h3>
                        <p class="stat-text">seguidores en<br> redes sociales</p>
                    </div>

                </div>
            </div>




            <div class="uk-incluye video-vertical">
                <div class="uk-position-relative uk-visible-toggle uk-light destacado-carousel" tabindex="-1"
                    uk-slider="finite: false;">
                    <ul class="uk-slider-items uk-child-width-1-4@s
uk-grid-small">
                        @foreach ($testimoniosVideo as $testimonio)
                            @php
                                $esTestVertGstorage = str_contains($testimonio->link ?? '', 'storage.googleapis.com/bucket-auge-oficial') ||
                                                      str_contains($testimonio->link ?? '', 'bucket.educaauge.com');
                            @endphp
                            <li>
                                <div class="video-card">
                                    @if ($esTestVertGstorage)
                                        @php
                                            $secureTestVertUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl($testimonio->link);
                                        @endphp
                                        @include('partials.video-player-protected', [
                                            'videoSrc' => $secureTestVertUrl,
                                            'playerId' => 'testimonio-vertical-' . $loop->index,
                                        ])
                                    @else
                                        <iframe src="{{ $testimonio->link }}" title="Testimonio 1" frameborder="0"
                                            allowfullscreen>
                                        </iframe>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>

                    <a class="uk-position-center-left uk-position-small flecha" href="#" uk-slidenav-previous
                        uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small flecha" href="#" uk-slidenav-next
                        uk-slider-item="next"></a>
                </div>
            </div>
            <br><br>
        </div>
    </main>
    <script>
        // Detecta si el elemento está visible en pantalla
        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
            );
        }

        // Animación de contador
        function animateCounter($el, endValue) {
            const duration = 2000; // 2 segundos
            const startValue = 0;
            const frameRate = 30;
            const totalFrames = Math.round(duration / frameRate);
            let frame = 0;

            const counter = setInterval(() => {
                frame++;
                const progress = frame / totalFrames;
                const currentValue = Math.round(startValue + (endValue - startValue) * progress);
                $el.text('+' + currentValue.toLocaleString('es-ES'));
                if (frame === totalFrames) clearInterval(counter);
            }, frameRate);
        }

        // Verifica los contadores visibles y los activa una sola vez
        function checkCounters() {
            $('.counter').each(function() {
                const $this = $(this);
                if (isElementInViewport(this) && !$this.hasClass('counted')) {
                    $this.addClass('counted');
                    const endValue = parseInt($this.attr('data-count'));
                    animateCounter($this, endValue);
                }
            });
        }

        // Eventos
        $(window).on('scroll resize', checkCounters);
        $(document).ready(checkCounters);
    </script>
@endsection