@extends('layouts.main')
@section('content')

    <script src="js/script.js"></script>
    <script src="js/modal.js"></script>
    <div class="container-index">
        <div class="container px-4 py-5 cards" id="custom-cards">
            <h2 class="pb-2 border-bottom">Videos Uteis</h2>

            <div class="row row-cols-1 row-cols-lg-4 align-items-stretch g-4 py-5">
                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="./img/v1.png" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Configuraçao telefone Shoreline','01')"></button>
                        </div>
                        <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">Onu Shoreline</h1>
                        <br>
                        <p class="info-p">Configuraçao passo a passo</p>

                    </div>
                </div>



                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="./img/v2.png" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Upgrade Shoreline','02')">
                        </div>
                        <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">Upgrade Shoreline</h1>
                        <br>
                        <p class="info-p">Atualizando Shoreline</p>

                    </div>
                </div>
                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="./img/roteador-mercusys.jpg" class="img-videos" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Configuraçao Mercusys','03')">
                        </div>

                        <p class="info-p">Configurar mercusys</p>

                    </div>
                </div>
                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="./img/ipv6-tplink.png" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Ativando IPV6','04')">
                        </div>
                        <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">Ipv6 TP-LINK</h1>
                        <br>
                        <p class="info-p">Ativando ipv6</p>

                    </div>
                </div>
                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="img/onu-wh.png" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Configuraçao telefone HW Lite','05')">
                        </div>
                        <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">ONT Huawei Lite</h1>

                        <p class="info-p">Configuraçao passo a passo</p>
                        <p class="info-p">Configuraçao telefone</p>

                    </div>
                </div>

                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="./img/shoreline.png" style="width: 80%;" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop"onclick="openVideo('Configuraçao telefone Shoreline','06')">
                        </div>
                        <br><br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">Shoreline</h1>
                        <p class="info-p">Configurar Telefone</p>

                    </div>
                </div>
                <div class="col">
                    <div class="card ">

                        <div class="video">
                            <img src="img/onu-wh.png" style="width: 120%;" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop" onclick="openVideo('Configuraçao de acesso remoto','07')">
                        </div> <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-aling:center">Hauwei Lite</h1>

                        <br>
                        <p class="info-p">Configuraçao Acesso remoto este</p>

                        <br>

                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="video">
                            <img src="img/onu-wh.png" style="width: 120%;" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop" onclick="openVideo('Criaçao do telefone','08')">
                        </div>
                        <br>
                        <h1 class="h1-info" style="font-size: 1rem; text-align: center">Criação de Telefones</h1>
                        <br>
                        <p class="info-p">Criação de telefone de cliente</p>
                        <br>
                    </div>
                </div>


                <!-- Continue duplicando os blocos até ter um total de 10 cards -->
            </div>

        </div>
        <div class="uteis">
            <h2 class="pb-2 border-bottom card-uteis">Manuais uteis</h2>
            <div class="col">
                <div class="card ">

                    <div class="video">
                        <img class="imagem" src="./img/5623395.png" alt="">
                    </div>
                    <div class="opcoes">


                        <input type="button" class="btn btn-danger btn-sm"
                            onclick="AbrirManual('doc/ConfiguracaoHuawei.pdf')" value="Baixar Manual Telefone">
                    </div>
                    <div class="opcoes">

                        <a href="arquivos/shoreline/1020W-V4.0-22071236.tar"><input type="button" id="btn-cpf"
                                class="btn btn-success btn-sm" value="Atualizaçao Shoreline"></a>

                    </div>
                    <div class="opcoes">


                        <input type="button" id="btn-dns1" class="btn btn-warning btn-sm"
                            onclick="AbrirManual('doc/Config-Telefone-Huawei.pdf')" value="Configuraçao telefone">
                    </div>


                </div>
            </div>
        </div>

    </div>




    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Default Title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <video id="video-player" width="100%" controls>
                        <source src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <p style="color: #fff; text-align: center;">Amplia o video para melhor visualização</p>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Fechar Video</button>
                </div>
            </div>
        </div>

    </div>


    <script>
        function openVideo(title, videoName) {
            // Atualiza o título do modal
            const modalTitle = document.getElementById('modalTitle');
            modalTitle.textContent = title;

            // Atualiza o vídeo e o reproduz
            const videoPlayer = document.getElementById('video-player');
            videoPlayer.src = `video/${videoName}.mp4`; // Defina o caminho correto do vídeo
            videoPlayer.play();

            // Pausar o vídeo ao fechar o modal
            const modal = document.getElementById('staticBackdrop');
            modal.addEventListener('hidden.bs.modal', function() {
                videoPlayer.pause();
                videoPlayer.currentTime = 0; // Reinicia o vídeo
            });
        }

        function AbrirManual(url) {
            window.open(url, '_blank'); // Abre o PDF em uma nova aba
        }
    </script>


    </div>
@endsection