@extends('layouts.master')

@section('content')



 <style>
    .video {
        position: relative;
        overflow: hidden;
    }

    .video img {
        transition: transform 0.3s;
    }

    .video .preview-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .video:hover img {
        transform: scale(1.1);
    }

    .video:hover .preview-overlay {
        opacity: 1;
    }
</style>
<div class="row">
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/SAtTCTqPfBE/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">Dr. Leopoldino Capelozza - Análise facial do perfil padrão I</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal0">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal0" tabindex="-1" aria-labelledby="videoModalLabel0" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel0">Dr. Leopoldino Capelozza - Análise facial do perfil padrão I</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer0" src="https://www.youtube.com/embed/SAtTCTqPfBE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/_IBpRz8PvO0/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">Paciente com estalido e sem dor, devo tratar?</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal1">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal1" tabindex="-1" aria-labelledby="videoModalLabel1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel1">Paciente com estalido e sem dor, devo tratar?</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer1" src="https://www.youtube.com/embed/_IBpRz8PvO0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/IetnoIoA_6s/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">24° Curso de Laminados Cerâmicos Clínicos</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal2">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal2" tabindex="-1" aria-labelledby="videoModalLabel2" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel2">24° Curso de Laminados Cerâmicos Clínicos</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer2" src="https://www.youtube.com/embed/IetnoIoA_6s?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/bTzIZOqCU-E/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">DentalGO Academy: Ortodontia Interceptadora #shorts</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal3">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal3" tabindex="-1" aria-labelledby="videoModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel3">DentalGO Academy: Ortodontia Interceptadora #shorts</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer3" src="https://www.youtube.com/embed/bTzIZOqCU-E?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/NZ69ZoOH_ls/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">Livro Placas Oclusais #shorts</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal4">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal4" tabindex="-1" aria-labelledby="videoModalLabel4" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel4">Livro Placas Oclusais #shorts</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer4" src="https://www.youtube.com/embed/NZ69ZoOH_ls?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/p9V_5Fadpts/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">Lançamento do livro Ortodontia - Diagnóstico e orientações de tratamento #cursos #ortodontia</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal5">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal5" tabindex="-1" aria-labelledby="videoModalLabel5" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel5">Lançamento do livro Ortodontia - Diagnóstico e orientações de tratamento #cursos #ortodontia</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer5" src="https://www.youtube.com/embed/p9V_5Fadpts?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-4 mb-4">
            <div class="card">
                <img src="https://i.ytimg.com/vi/NqjPc7dL7ZM/mqdefault.jpg" class="card-img-top" alt="Thumbnail">
                <div class="card-body">
                    <h5 class="card-title">Por que não dupla certificação !</h5>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal6">
                        Assistir
                    </a>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="videoModal6" tabindex="-1" aria-labelledby="videoModalLabel6" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel6">Por que não dupla certificação !</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer6" src="https://www.youtube.com/embed/NqjPc7dL7ZM?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@foreach ($videos[0]->id->productItems as $key => $videosCat)
    <div class="container-fluid">
        <div class="row videos">
            <div class="col-sm-12"> 
                <a href="{{ route('video')}}/{{ $videos->id }}" style="color: transparent;">
                    <h3>{{ $videosCat->title }} <small style="font-size: 13px;"> {{__("messages.conteudoVideosVeja")}}  <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i></small></h3>
                </a>
            </div><hr>
            @foreach (array_slice($videos->productItems, 0, 6) as $video)
            <div class="col-6 col-md-2 card-margin">
                <a href="{{ route('video')}}/{{ $videos->id }}/{{ str_replace(' ', '-', $video->title) }}/{{ $video->id }}">
                    <img src="{{ $video->cover}}" style="width: 100%;" class="videoImagemMain">
                </a>
            </div>
            @endforeach
        </div>
    </div>
@endforeach



<script src="https://www.youtube.com/iframe_api"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modals = document.querySelectorAll('.modal');

        modals.forEach(function (modal) {
            modal.addEventListener('shown.bs.modal', function () {
                var iframe = modal.querySelector('iframe');
                iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
            });

            modal.addEventListener('hidden.bs.modal', function () {
                var iframe = modal.querySelector('iframe');
                iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
            });
        });
    });
</script>


@endsection