@extends('layouts.sei.theme')
@section('title', 'SEI - Treinamento Angra dos Reis')
@section('content')

<head>

    <style>
        /* Estilo da área total da barra */
        .videoslist::-webkit-scrollbar {
            width: 8px !important;
            /* largura vertical */
            height: 8px !important;
            /* altura horizontal */
        }

        /* Track (fundo) */
        .videoslist::-webkit-scrollbar-track {
            background: rgb(185, 225, 206) !important;
        }

        /* Thumb (alça que se move) */
        .videoslist::-webkit-scrollbar-thumb {
            background-color: var(--secondary) !important;
            border-radius: 4px !important;
        }

        /* Thumb on hover */
        .videoslist::-webkit-scrollbar-thumb:hover {
            background-color: var(--primary) !important;
        }

        video {
            border-radius: 1rem;
        }

        .btn:disabled,
        .btn.disabled,
        fieldset:disabled .btn {
            pointer-events: none;
            opacity: 0 !important;
        }

        #backToTop {
            display: none !important;
        }


        .lesson-item>div:hover {
            background-color: var(--gray) !important;
            transition: background-color 0.3s ease, color 0.3s ease;

        }
    </style>

</head>

<section class="animate__animated animate__fadeIn">

    <!-- Cabeçalho -->
    <header class="course-header">
        <div class="container mb-3">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="fw-bold mb-3">Videoaulas - Sistema SEI Angra dos Reis</h1>
                    <p class="lead mb-0">Treinamento completo com 14 videoaulas sobre o Sistema Eletrônico de Informações</p>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <span class="badge bg-light text-dark fs-6"><i class="bi bi-collection-play"></i> 14 aulas</span>
                    <span class="badge bg-light text-dark fs-6 ms-2"><i class="bi bi-clock"></i> 52min</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Conteúdo Principal -->
    <main class="container">
        <div class="row">
            <!-- Player de Vídeo -->
            <div class="col-lg-8 mb-4">
                <div class="video-container mb-3">
                    <video id="videoPlayer" class="w-100" controls poster="https://via.placeholder.com/800x450?text=SEI+Angra+dos+Reis">
                        <source src="" type="video/mp4">
                        Seu navegador não suporta o elemento de vídeo.
                    </video>
                </div>

                <!-- Progresso do Curso -->
                <div class="progress-container">
                    <div class="progress-bar progress-bar" role="progressbar" style="width: 25%"></div>
                </div>

                <!-- Navegação entre aulas -->
                <div class="d-flex justify-content-between nav-buttons">
                    <button id="prevLesson" class="btn btn-outline-primary" disabled>
                        <i class="bi bi-chevron-left"></i> Anterior
                    </button>
                    <button id="nextLesson" class="btn text-white bg-success">
                        Próxima <i class="bi bi-chevron-right"></i>
                    </button>
                </div>

                <!-- Descrição da Aula Atual -->
                <div class="card mt-4 border-0 shadow rounded-3">
                    <div class="card-body">
                        <h3 id="currentLessonTitle" class="card-title h5">Portal SEI Angra dos Reis</h3>
                        <p id="currentLessonDesc" class="card-text">Introdução ao sistema SEI utilizado pela prefeitura de Angra dos Reis.</p>
                         <div id="currentLessonLinks"></div>
                    </div>
                </div>
            </div>

            <!-- Lista de Aulas -->
            <div class="col-lg-4">
                <div class="card border-0 shadow rounded-3">
                    <div class="card-header text-center bg-white border-bottom border-gray shadow-sm">
                        <h2 class="h5 mb-0 fw-bold text-secondary">Conteúdo</h2>
                    </div>
                    <div style="max-height: 600px; overflow-y:auto;" class="card-body videoslist">
                        <div class="lesson-list" id="lessonList">
                            <!-- Aulas serão inseridas aqui via JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Bootstrap JS + Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Dados das aulas com os conteúdos reais fornecidos
        const lessons = [{
                id: 0,
                title: "Introdução",
                description: "Introdução às videoaulas do SEI Angra dos Reis.",
                duration: "",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula0.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb0.jpg') }}",
                completed: false
            },
            {
                id: 1,
                title: "Portal SEI Angra dos Reis",
                description: "Nesta aula introdutória, vamos conhecer os conceitos básicos do Sistema Eletrônico de Informações utilizado pela prefeitura de Angra dos Reis.",
                duration: "01:22",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula1.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb1.jpg') }}",
                completed: false
            },
            {
                id: 2,
                title: "Acessar o Sistema",
                description: "Aprenda como realizar o login e configurar seu perfil no SEI.",
                duration: "00:51",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula2.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb2.jpg') }}",
                completed: false
            },
            {
                id: 3,
                title: "Identificação dos Elementos da Tela Inicial",
                description: "Domine a interface do SEI e saiba onde encontrar as principais funcionalidades.",
                links: [{
                    text: "Legenda dos Elementos",
                    url: "https://angra.rj.gov.br/controle-de-processos-legenda-sei"
                }],
                duration: "05:07",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula3.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb3.jpg') }}",
                completed: false
            },
            {
                id: 4,
                title: "Acessando um Processo",
                description: "Passo a passo para iniciar um novo processo no sistema.",
                duration: "03:36",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula4.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb4.jpg') }}",
                completed: false
            },
            {
                id: 5,
                title: "Receber e Atribuir Processo",
                description: "Como enviar e receber documentos entre setores.",
                duration: "03:12",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula5.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb5.jpg') }}",
                completed: false
            },
            {
                id: 6,
                title: "Iniciar processo",
                description: "Passo a passo para criar um novo processo no sistema.",
                duration: "07:14",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula6.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb6.jpg') }}",
                completed: false
            },
            {
                id: 7,
                title: "Incluir Documentos",
                description: "Como adicionar documentos a um processo existente.",
                duration: "05:25",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula7.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb7.jpg') }}",
                completed: false
            },
            {
                id: 8,
                title: "Adicionar Documento Externo",
                description: "Inserção de documentos originados fora do sistema SEI.",
                duration: "07:05",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula8.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb8.jpg') }}",
                completed: false
            },
            {
                id: 9,
                title: "Editar Documento",
                description: "Modificação de documentos já existentes no sistema.",
                duration: "02:32",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula9.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb9.jpg') }}",
                completed: false
            },
            {
                id: 10,
                title: "Consultar e Alterar Dados de Documentos",
                description: "Como visualizar e modificar informações de documentos.",
                duration: "01:03",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula10.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb10.jpg') }}",
                completed: false
            },
            {
                id: 11,
                title: "Assinatura de Documento",
                description: "Utilizando certificado digital para validar documentos.",
                duration: "02:10",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula11.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb11.jpg') }}",
                completed: false
            },
            {
                id: 12,
                title: "Bloco de Assinatura",
                description: "Assinatura em bloco de múltiplos documentos.",
                duration: "05:25",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula12.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb12.jpg') }}",
                completed: false
            },
            {
                id: 13,
                title: "Enviar Processo",
                description: "Como tramitar processos para outros setores.",
                duration: "05:54",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula13.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb13.jpg') }}",
                completed: false
            },
            {
                id: 14,
                title: "Concluir Processo",
                description: "Finalização e arquivamento de processos no sistema.",
                duration: "01:31",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula14.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb14.jpg') }}",
                completed: false
            },
            {
                id: 15,
                title: "Considerações Finais",
                description: "Reflexões finais sobre o uso do sistema SEI.",
                duration: "",
                videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula15.mp4') }}",
                posterUrl: "{{ asset('sei-angra/assets/thumb15.jpg') }}",
                completed: false
            }
        ];
        // Elementos da página
        const videoPlayer = document.getElementById('videoPlayer');
        const lessonList = document.getElementById('lessonList');
        const currentLessonTitle = document.getElementById('currentLessonTitle');
        const currentLessonDesc = document.getElementById('currentLessonDesc');
        const prevButton = document.getElementById('prevLesson');
        const nextButton = document.getElementById('nextLesson');

        // Estado atual
        let currentLessonIndex = 0;

        // Carrega a lista de aulas
        function loadLessons() {
            lessonList.innerHTML = '';

            lessons.forEach((lesson, index) => {
                const lessonItem = document.createElement('div');
                lessonItem.className = `lesson-item ${index === currentLessonIndex ? 'active' : ''} ${lesson.completed ? 'text-muted' : ''}`;
                lessonItem.innerHTML = `
                    <div id="lessonEachItem" style="cursor: pointer;" class="d-flex justify-content-between align-items-center shadow-top shadow-sm rounded-3 m-2">
                        <div class="p-3">
                            <h4 class="h6 mb-1">Aula ${lesson.id}: ${lesson.title}</h4>
                            <small class="text-muted">${lesson.duration}</small>
                        </div>
                        ${lesson.completed ? '  <i class="bi p-2 bi-check-circle-fill text-success"></i>' : '<i class="bi p-2 bi-play-circle"></i>'}
                    </div>
                `;

                lessonItem.addEventListener('click', () => {
                    setCurrentLesson(index);
                });

                lessonList.appendChild(lessonItem);
            });
        }

        // Define a aula atual
        function setCurrentLesson(index) {
            currentLessonIndex = index;
            const lesson = lessons[currentLessonIndex];

            // Atualiza o player de vídeo
            videoPlayer.src = lesson.videoUrl;
            videoPlayer.poster = lesson.posterUrl;
            videoPlayer.title = `Treinamento Sei Angra - Aula ${lesson.id}`;

            // Atualiza as informações da aula
            currentLessonTitle.textContent = `Aula ${lesson.id}: ${lesson.title}`;
            currentLessonDesc.textContent = lesson.description;

            // Limpa e adiciona os links (se existirem)
            const linksContainer = document.getElementById('currentLessonLinks');
            linksContainer.innerHTML = '';

            if (lesson.links && lesson.links.length > 0) {
                const linksTitle = document.createElement('div');
                linksTitle.className = 'fw-bold mt-2 mb-1';
                linksTitle.textContent = 'Links Úteis:';
                linksContainer.appendChild(linksTitle);

                lesson.links.forEach(link => {
                    const linkElement = document.createElement('a');
                    linkElement.href = link.url;
                    linkElement.target = '_blank';
                    linkElement.className = 'd-block mb-1 text-primary text-decoration-none';
                    linkElement.innerHTML = `<i class="bi bi-box-arrow-up-right"></i> ${link.text}`;
                    linksContainer.appendChild(linkElement);
                });
            }


            // Remove e reaplica a animação
            currentLessonTitle.classList.remove('animate__animated', 'animate__headShake');
            currentLessonDesc.classList.remove('animate__animated', 'animate__headShake');
            videoPlayer.classList.remove('animate__animated', 'animate__headShake');

            // Força o reflow para reiniciar a animação
            void currentLessonTitle.offsetWidth;

            currentLessonTitle.classList.add('animate__animated', 'animate__headShake');
            currentLessonDesc.classList.add('animate__animated', 'animate__headShake');
            videoPlayer.classList.add('animate__animated', 'animate__headShake');

            // Atualiza os botões de navegação
            prevButton.disabled = currentLessonIndex === 0;
            nextButton.disabled = currentLessonIndex === lessons.length - 1;

            // Atualiza a lista de aulas
            loadLessons();


            if (window.innerWidth >= 992) {
                // Desktop → scroll para o item ativo
                const activeItem = lessonList.querySelector('.active');
                if (activeItem) {
                    activeItem.scrollIntoView({
                        behavior: 'smooth',
                        block: 'nearest'
                    });
                }
            } else {
                // Mobile/tablet → scroll até o vídeo (topo da página)
                videoPlayer.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }

            // Atualiza a barra de progresso
            updateProgress();
        }


        // Atualiza a barra de progresso
        function updateProgress() {
            const completedCount = lessons.filter(l => l.completed).length;
            const progress = (completedCount / lessons.length) * 100;
            document.querySelector('.progress-bar').style.width = `${progress}%`;
        }

        // Event listeners para navegação
        prevButton.addEventListener('click', () => {
            if (currentLessonIndex > 0) {
                setCurrentLesson(currentLessonIndex - 1);
            }
        });

        nextButton.addEventListener('click', () => {
            if (currentLessonIndex < lessons.length - 1) {
                // Marca a aula atual como concluída
                lessons[currentLessonIndex].completed = true;
                setCurrentLesson(currentLessonIndex + 1);
            }
        });

        // Quando o vídeo termina, marca como concluído e vai para o próximo
        videoPlayer.addEventListener('ended', () => {
            lessons[currentLessonIndex].completed = true;
            updateProgress();
            loadLessons();

            // Se não for a última aula, habilita o botão próximo
            if (currentLessonIndex < lessons.length - 1) {
                nextButton.disabled = false;
            }
        });

        // Inicializa a página com a primeira aula
        setCurrentLesson(0);
    </script>
</section>

<div class="container px-3 px-md-5 mb-5 pb-5">

    <div class="row px-5 text-center mb-3">
        <h3 class="text-secondary">
            Confira outros materiais e cursos
        </h3>
    </div>

    <div class="row justify-content-center gx-2 gy-3">


        <!-- Card 5 -->
        <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center">
            <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;">
                <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/SEI-USAR.jpg') }}"
                    alt="Curso Livre Sei">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">Curso Livre - SEI! USAR (ENAP)</h5>
                    <p class="card-text">Curso online gratuito, oferecido pela Escola Nacional de Administração
                        Pública (ENAP).</p>
                </div>
                <div class="card-footer">
                    <a href="https://www.escolavirtual.gov.br/curso/74" target="_blank"
                        class="btn btn-primary w-100">Fazer Curso</a>
                </div>
            </div>
        </div>

        <!-- Card 4 -->
        <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center">
            <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;">
                <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/lives.jpg') }}"
                    alt="Treinamento Sei Angra dos Reis">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">Lives de Treinamento SEI Angra dos Reis</h5>
                    <p class="card-text">Treinamento sobre o SEI Angra, que ocorreu nos dias 08 e 09 de janeiro.</p>
                </div>
                <div class="card-footer">
                    <a href="{{ route('sei.lives') }}" class="btn btn-primary w-100">Assistir</a>
                </div>
            </div>
        </div>


        <!-- Card 6 -->
        <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center">
            <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;">
                <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/wiki.jpg') }}"
                    alt="Wiki Sei RJ">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">Wiki SEI-RJ</h5>
                    <p class="card-text">Todas as informações sobre o funcionamento do sistema, como manuais, FAQs e
                        POP's.</p>
                </div>
                <div class="card-footer">
                    <a href="https://wikisei.rj.gov.br/P%C3%A1gina_principal"
                        class="btn btn-primary w-100">Acessar</a>
                </div>
            </div>
        </div>

        <!-- Card 1 -->
        <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center">
            <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;">
                <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/sei-pdf.png') }}"
                    alt="Guia Básico do SEI em PDF">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">Guia Básico do SEI em .PDF</h5>
                    <p class="card-text">Baixe o material oficial de apoio ao Curso Básico do SEI para estudo
                        offline.</p>
                </div>
                <div class="card-footer">
                    <a href="{{ asset('sei-angra/assets/docs/Curso_Basico_do_SEI.pdf') }}" target="_blank"
                        class="btn btn-primary w-100">Ver PDF</a>
                </div>
            </div>
        </div>

        <!-- Card 3 -->
        <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center">
            <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;">
                <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/manual.jpg') }}"
                    alt="Treinamento Sei Angra dos Reis">
                <div class="card-body px-2 py-3">
                    <h5 class="card-title">Manual do Usuário Externo</h5>
                    <p class="card-text">Destinado aos Munícipes e Representantes de Empresas.</p>
                </div>
                <div class="card-footer">
                    <a href="{{ route('sei.manual') }}" class="btn btn-primary w-100">Acessar</a>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection