@extends('frontend.layouts.main')
@section('title', 'video')
@section('keywords',  'video')
@section('description',  'video')
@section('abstract', 'video')
<!-- @section('image',  '') -->

@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}" type="text/css" />
<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/video.css') }}?v={{ time() }}">
@endsection

@section('content')
<div class="breadcrumb">
    <div class="ctnr">
        <ul>
            <li>
                <a href="/">Trang chủ</a>
            </li>
            <li>
                Videos
            </li>
        </ul>
    </div>
</div>

<section class="video-wrap">
    <div class="ctnr">
        <div class="block-video">
            <h2 class="title-block">
                <span>Review Sản phẩm</span>
            </h2>
            <div class="row">
                @foreach($videos as $video)

                @php
                $videoUrl = $video->description;
                $videoId = extractYouTubeId($videoUrl);

                // Thumbnail
                $thumb = $videoId
                ? "https://img.youtube.com/vi/{$videoId}/hqdefault.jpg"
                : "/images/no-video.jpg";
                @endphp

                <div class="clm" style="--w-lg:3; --w-md:4; --w-xs:6">
                    <div class="item-video" onclick="openvideo('{{ $videoId }}');">
                        <div class="wrap-img img-100">
                            <img src="{{ $thumb }}" alt="video thumbnail">
                          <svg id="icon-video" height="100%" version="1.1" id="icon-video" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f03"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
                        </div>

                        <div class="name">
                            {{ $video->name ?? 'Video không có tiêu đề' }}
                        </div>
                    </div>
                </div>

                @endforeach
            </div>


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

<!-- Modal Video -->
<div id="modal-video" class="modal-video">
    <div class="modal-content">
      
    </div>
</div>
@endsection

@section('js')
<script>
    function openvideo(yid) {
        const modal = document.getElementById('modal-video');
  
var ytm = `<iframe width="100%" height="400" src="https://www.youtube.com/embed/${yid}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;
    $('#modal-video .modal-content').html(ytm);
      console.log(ytm);

        modal.style.display = "flex";
    }

    function closevideo() {
        const modal = document.getElementById('modal-video');

        $('#modal-video .modal-content').html('');
        modal.style.display = "none";
    }

    // Đóng modal khi click ra ngoài
    document.addEventListener("click", function(e) {
        const modal = document.getElementById("modal-video");
        const content = document.querySelector(".modal-content");

        if (e.target === modal) {
            closevideo();
        }
    });
</script>

@endsection