@extends('site.master')
@section('main-content')

    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        @lang('language.videogallery')</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none"> @lang('language.videogallery')</a>
                            </li>
                          
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>
    <section class="d-main">
        <div class="container mb-3 pb-3">
            <div class="row">


                <div class="col-lg-9 mb-3">
                    <div class="news-head text-nowrap mb-3">


                        <div class="container">
                            <div class="row">
                            @foreach ($video as $item)
                        <div class="col-lg-4 position-relative">

                            <button class="btn p-0 js-play position-relative" type="button" data-bs-toggle="modal"
                                data-bs-target="#modalVideo" data-src="{{ $item->video_link }}"
                                data-title="{{ $item->title }}">
                                <span class="v-play"> <i class="bi bi-play-fill"></i> </span>
                                <img class="card-img-top"
                                    src="https://img.youtube.com/vi/{{ $item->video_link }}/maxresdefault.jpg"
                                    alt="{{ $item->title }}" style="height: 300px; width:100%;" />
                            </button>
                            <h3 class="bottom-0 py-2 px-2 bg-white text-dark text-hover-danger fs-7 mb-0 w-100" >
                                {{ $item->title }}</h3>
                        </div>
                    @endforeach
                               
                                   
                              
                            {!! $video->links() !!}
                        </div>
                    </div>
                    {{-- <div class="d-flex align-items-center justify-content-between mb-3 p-2 bg-light-blue">
                        <div class="d-flex h-100 align-items-center">
                            <i class="bi-info-square-fill text-primary me-2"></i>
                            <span>
                                के तपाईं आफूले हेरेको जानकारीबाट सन्तुष्ट हुनुहुन्छ?
                            </span>
                        </div>
                        <form class="checkbox align-item-center fsc-8">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                <label class="form-check-label" for="inlineCheckbox1">धेरै
                                    सन्तुष्ट</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                                <label class="form-check-label" for="inlineCheckbox2">सन्तुष्ट</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
                                <label class="form-check-label" for="inlineCheckbox3">सामान्य
                                    गुनासो</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4">
                                <label class="form-check-label" for="inlineCheckbox4">धेरै
                                    असन्तुष्ट</label>
                            </div>

                            <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
                            <label class="btn btn-primary btn-sm fs-7" for="btn-check-2">पेश
                                गर्नुहोस्</label>
                        </form>
                    </div> --}}
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalVideo">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary bg-opacity-10">
                <h5 class="modal-title text-primary fs-5 js-title-insert"></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-0 py-0">
                <div class="ratio ratio-16x9">
                    <div class="embed-responsive-item" id="youTubeIframe"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalVideo">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary bg-opacity-10">
                <h5 class="modal-title text-primary fs-5 js-title-insert"></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-0 py-0">
                <div class="ratio ratio-16x9">
                    <div class="embed-responsive-item" id="youTubeIframe"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://www.youtube.com/iframe_api"></script>

<script>
    var player;
    var lastButton = '';
    const youtube = 'youTubeIframe';
    const titleInsert = '.js-title-insert';
    const btnPlay = '.js-play';
    const btnPause = '.js-pause';
    const modalId = '#modalVideo';
    const videoQuality = 'hd720';

    function onYouTubePlayerAPIReady() {
        player = new YT.Player(youtube, {
            controls: 2,
            iv_load_policy: 3,
            rel: 0,
            events: {
                onReady: onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        'use strict';
        $(btnPlay).on('click', function() {
            var videoId = $(this).attr('data-src');

            if (lastButton == videoId) {
                $(titleInsert).text($(this).attr('data-title'));
                player.playVideo(videoId, 0, videoQuality);
            } else {
                $(titleInsert).text($(this).attr('data-title'));
                player.loadVideoById(videoId, 0, videoQuality);
                lastButton = videoId;
            }
        });

        $(btnPause).on('click', function() {
            player.pauseVideo();
        });

        $(modalId).on('click', function() {
            player.pauseVideo();
        });
    }
</script>
@endpush