@extends('front.layouts.front')

@section('css')
<style>
    .item {
        position: relative;
        text-align: center;
        border: 0;
        padding: 10px;
        background: #444;
    }
    .item.selected {
        background: #333;
        font-weight: bold;
    }
    .item.selected:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        top: 50%;
        border-radius: 50%;
        background: #4caf50;
        left: 10px;
        -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    .item:hover {
        background: #333;
        cursor: pointer;
    }
</style>

<link href="{{ asset('assets/videojs/dist/video-js.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <!-- Begin:: banner & logo -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">{{ $professionalreel->professional_name }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End:: Banner & logo -->

    <!-- section -->
    <section class="section pt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="small text-muted mb-0">Name</label>
                    <h4 class="text-white">{{ $professionalreel->professional_name }}</h4>
                </div>

                <div class="col-md-4 mb-3">
                    <label class="small text-muted mb-0">Title</label>
                    <h4 class="text-white">{{ $professionalreel->reel_title }}</h4>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="small text-muted mb-0">Category</label>
                    <h4 class="text-white">{{ __(App\Models\FilmFestival::$category[$professionalreel->category]) }}</h4>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="small text-muted mb-0">Adult content</label>
                    <h4 class="text-white">{{ $professionalreel->adult == 1 ? 'YES' : 'No' }}</h4>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="small text-muted mb-0">Trigger Warning</label>
                    <h4 class="text-white">{{ $professionalreel->trigger_warning == 1 ? 'YES' : 'No' }}</h4>
                </div>
                @if($professionalreel->video)
                    <div class="col-md-12 mb-3">
                        <label class="small text-muted mb-0">Video</label>
                        <video id="hidden-video" width="100%" height="100%" playsinline="true" autoplay class="video-js"
                            poster="{{ $professionalreel->thumbnail1 }}" data-src="{{ str_replace('https://omgdeveloper.s3-accelerate.amazonaws.com', 'https://omgdeveloper.s3.amazonaws.com', $professionalreel->video) }}" data-title="asdad">
                            <source id="video-src">
                        </video>
                    </div>
                @endif

                <div class="col-md-12 mb-3">
                    <label class="small text-muted mb-0">Thumbnails</label>
                    <div class="row thumbnail-container">
                        @if ($professionalreel->thumbnail1)
                            <div class="item mr-3">
                                <a href="{{ $professionalreel->thumbnail1 }}" class="glightbox">
                                    <img src="{{ $professionalreel->thumbnail1 }}" alt="image" />
                                </a>
                            </div>
                        @endif
                        @if ($professionalreel->thumbnail2)
                            <div class="item mr-3">
                                <a href="{{ $professionalreel->thumbnail1 }}" class="glightbox">
                                    <img src="{{ $professionalreel->thumbnail1 }}" alt="image" />
                                </a>
                            </div>
                        @endif
                        @if ($professionalreel->thumbnail3)
                            <div class="item mr-3">
                                <a href="{{ $professionalreel->thumbnail1 }}" class="glightbox">
                                    <img src="{{ $professionalreel->thumbnail1 }}" alt="image" />
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end section -->
@endsection

@section('script')

<script src="{{ url('assets/js/jquery-3.5.1.min.js') }}"></script>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
    <script>
        var src = $('#hidden-video').data('src');
        var playerOptions = {
            title: 'My Video Title',
            preload: 'auto',
            autoplay: true,
            controls: true,
            qualitySelector: true,
            sources: [{
                src: src,
                type: "video/mp4",
                withCredentials: false
            }],
        }
        var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
        if (isSafari) {
            playerOptions.muted = true;
        }
        player = videojs('hidden-video', playerOptions);

        $(document).on('click', '.rulesshow1', function(e) {
            $('.rulesshow').toggleClass('hiden500');
            $('.rulesshow1').toggleClass('hiden500');
        });

        function getScrollBarWidth() {
            var $outer = $('<div>').css({
                    visibility: 'hidden',
                    width: 100,
                    overflow: 'scroll'
                }).appendTo('body'),
                widthWithScroll = $('<div>').css({
                    width: '100%'
                }).appendTo($outer).outerWidth();
            $outer.remove();
            return 100 - widthWithScroll;
        };
        $('.festivalProjectDetail').magnificPopup({
            type: 'inline',
            fixContentPos: true,
            closeBtnInside: true,
            closeOnBgClick: false,
            preloader: false,
            removalDelay: 300,
            mainClass: 'mfp-fade',
            callbacks: {
                open: function() {
                    if ($(window).width() > 1200) {
                        $('.header').css('margin-left', "-" + (getScrollBarWidth() / 2) + "px");
                    }
                },
                close: function() {
                    if ($(window).width() > 1200) {
                        $('.header').css('margin-left', 0);
                    }
                }
            }
        });


    </script>
@endsection