@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    LipSync | Videos
@stop

@section('top_import_file')
@stop


@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Videos</h2>
    </div>

    <div class="row">
        {{-- Cards --}}

        @foreach ($data as $vid)
            <div class="col-3">
                <div class="card video-card shadow-sm" style="border-radius: 10px; overflow: hidden;">
                    <div class="card-body p-3">
                        <div class="video-div">
                            <div class="dropdown Card-menu">
                                <i class="bi bi-three-dots" type="button" id="dropdownMenuButton1"
                                    data-bs-toggle="dropdown" aria-expanded="false"></i>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li><a class="dropdown-item" href="{{ $vid->lipsynced_video_status == 'COMPLETED'?$vid->lipsynced_video : $vid->original_video }}"
                                            download="{{ basename($vid->lipsynced_video_status == 'COMPLETED'?$vid->lipsynced_video : $vid->original_video) }}"> <i
                                                class="bi bi-download"></i>
                                            Download</a></li>
                                </ul>
                            </div>

                            <video class="myVideo rounded" src="{{ $vid->lipsynced_video_status == 'COMPLETED'?$vid->lipsynced_video : $vid->original_video }}" width="100%"></video>
                            <i class="bi playPauseIcon bi-play-fill customPlayIcon">
                            </i>
                            <button data-src="{{ $vid->lipsynced_video_status == 'COMPLETED'?$vid->lipsynced_video : $vid->original_video }}" type="button"
                                class="video-btn modal-fscreen" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                <i class="lni lni-frame-expand">
                                </i>
                            </button>
                        </div>


                        <h5 class="card-title font-weight-bold">{{ $vid->vtitle }}</h5>
                        <hr>
                        <span
                            class="badge {{ $vid->lipsynced_video_status == 'PROCESSING' ? 'bg-warning' : ($vid->lipsynced_video_status == 'FAILED' ? 'bg-danger' : 'bg-success') }} p-2 mb-2 mt-2">{{ $vid->lipsynced_video_status }}</span>

                    </div>
                </div>
            </div>
        @endforeach

        {{-- Cards --}}
    </div>


    {{-- Modal --}}
    <div class="modal fade custom-modal modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-end ">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <video id="modal-vid" class="myVideo rounded mb-3" src="" width="100%"></video>
                </div>

            </div>
        </div>
    </div>
    {{-- Modal --}}
@stop

@section('bottom-scripts')
    {{-- Video Play And Modal Scripts --}}
    <script>
        $(function() {
            function togglePlayPause(vid) {
                let video = $(vid);
                let siblings = video.siblings('.playPauseIcon');

                $('video').not(vid).each(function() {
                    this.pause();
                    $(this).siblings('.playPauseIcon').removeClass('bi-pause-fill').addClass(
                        'bi-play-fill');
                });

                if (video[0].paused) {
                    video[0].play();
                    siblings.removeClass('bi-play-fill').addClass('bi-pause-fill');
                } else {
                    video[0].pause();
                    siblings.removeClass('bi-pause-fill').addClass('bi-play-fill');
                }
            }

            $(".playPauseIcon").click(function() {
                const vid = $(this).siblings('video');
                togglePlayPause(vid);
            });

            $('#exampleModal').on('show.bs.modal', function() {
                const vid = $('#modal-vid');
                vid[0].play();
            });

            $('#exampleModal').on('hide.bs.modal', function() {
                const vid = $('#modal-vid');
                vid[0].pause();
            });

            $(".modal-fscreen").click(function() {
                const newSrc = $(this).data("src");
                const modalVideo = $('#modal-vid');
                const vid = $(this).siblings('video');
                vid[0].pause();
                let siblings = vid.siblings('.playPauseIcon');
                siblings.removeClass('bi-pause-fill').addClass('bi-play-fill');

                modalVideo[0].pause();
                modalVideo.attr('src', newSrc);
                modalVideo[0].load();

                modalVideo.on('loadeddata', function() {
                    modalVideo[0].play();
                });
            });
        });
    </script>
    {{-- Video Play And Modal Scripts --}}

@stop