@extends("layouts.app_new")
@section("title")
    CCKH Multimedia
@endsection
@section("content")
    <section class="team-area pt-70 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-md-3 order-details">
                                <div class="courses-topbar">
                                    <div class="topbar-search">
                                        <div class="search-overlay-form filter-s">
                                             <form method="get">
                                                            <input class="input-search"  type="search" value="@if(isset($_GET['q'])){{$_GET['q']}}@endif" name="q" id="" placeholder="Search here..." />
                                                            <button type="submit" class="save_btn"><i class="bx bx-search-alt"></i></button>
                                                        </form>
                                        </div>
                                    </div>
                                </div>
                             {{--    <form method="" id="" style="clear: both;">
                                    <div class="payment-box courses-details-desc">
                                        <div class="courses-accordion">
                                            <h5 class="title-filter">Fiter</h5>
                                
                                               
                                        </div>
                                    
                                        <button class="filter_btn" type="submit">Filter</button>
                                    </div>
                                </form> --}}
                            </div>
            <div class="col-md-9">
                <div class="tab products-details-tab">
                        <div class="col-lg-12 col-md-12">
                            <ul class="tabs active">
                                <li class="current">
                                    <a href="{{url('multimedia-listing')}}">
                                        <i class="bx bx-video"></i>
                                        CCKH Multimedia
                                    </a>
                                </li>
                                <li >
                                    <a href="{{url('multimedia-search')}}">
                                        <i class="bx bx-video"></i>
                                        External Multimedia
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <div class="tabs-item">
                                <div class="row align-items-center">
                                    <div class="col-lg-4 col-md-4 courses-topbar">
                                        <div class="topbar-result-count">
                                            <br>
                                            <p>Showing ( {{$Multimedia->total()}} ) results</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    @foreach($Multimedia as $media)
                                    <div class="col-md-6">
                                        <div class="single-team-member mb-30">
                                            <a href="{{url('multimedia-view/'.$media->id)}}">
                                                <div class="member-image">
                                                    <video preload="none" width="1110" id="main-video-{{$media->id}}">
                                                        <source src="{{url($media->file)}}" type="video/mp4">
                                                    </video>
                                                    <canvas id="video-canvas-{{$media->id}}" style="display:none"></canvas>
                                                </div>
                                                <div class="member-content">
                                                    <h3>{{$media->name}}</h3>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="pagination-area text-center">
                                            {{ $Multimedia->links() }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section("script")

<script type="text/javascript">
@foreach($Multimedia as $media)

var _CANVAS = document.querySelector("#video-canvas-{{$media->id}}");
var _CTX = _CANVAS.getContext("2d");


var _VIDEO = document.querySelector("#main-video-{{$media->id}}");


    // Load the video and show it
    _VIDEO.load();

    // Load metadata of the video to get video duration and dimensions
    _VIDEO.addEventListener('loadedmetadata', function() {
        // Set canvas dimensions same as video dimensions
        _CANVAS.width = _VIDEO.videoWidth;
        _CANVAS.height = _VIDEO.videoHeight;
    });

    _VIDEO.addEventListener('canplay', function() {
        _CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight);
    });
@endforeach

</script>
@endsection