@extends($data['layout'])

@section('title', $data['videos']->title)

@php
    $url = URL::current();
@endphp
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    <style>
        .video-container {
            position: relative;
            /* width: calc(82.778vh); */
            height: calc(28vw);
            overflow: hidden;
        }

        .responsive-iframe {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border: none;
            padding-right: 28px;
            /* max-width: calc(177.778vh); height: calc(56.25vw); */
        }
    </style>
@endpush
@if(trim($data['videos']->meta_description) != null && $data['videos']->meta_description != 'NULL')
    @section('meta_description', $data['videos']->meta_description)
    {{-- @section('meta_keywords', $data['product']->meta_keywords) --}}
@endif

@section('meta_url', URL::Current())
@section('page_title', $data['videos']->title)
@section('product_description',$data['videos']->meta_description)
@section('image','https://germedusa.com/static/assets/images/logo.png')
@section('image:width', "385")
@section('image:height', "145")
@section('content')
    @if ($data['layout'] == 'frontend.layouts.app')
        @include('includes.partials.bread-crumbs')
    @endif
    <div class=" mb-3">
        <div class="row">
            <div class="col-md-6 my-3">
                <h1 class="h1-tag "
                    style=" @if ($data['layout'] == 'frontend.layouts.mobile') margin-left: 8%; margin-top: 5%; @else margin-left: 10%; @endif ">
                    Videos</h1>
            </div>
        </div>
        <div class="row " style="margin: 0 5%;"
            @if ($data['layout'] !== 'frontend.layouts.app') style="margin: 7px;margin-top: -80px; margin-bottom: 6rem;" @endif>
            @if ($data['videos'])
                @foreach ($data['videos'] as $video)
                    @php
                        $videoData = @get_headers('https://player.vimeo.com/video/' . $video->video_id);
                    @endphp

                    @if ($video->source == 'Youtube')
                        <div class="video-container col-sm-6" style="margin-bottom: 27px;"
                            @if ($data['layout'] !== 'frontend.layouts.app') style="height: 175px; margin-bottom: 40px;" @endif>
                            <iframe frameborder="0" src="{{ 'https://www.youtube.com/embed/' . $video->video_id }}"
                                allow="fullscreen; picture-in-picture" allowfullscreen  class="responsive-iframe"
                                 ></iframe>
                        </div>
                    @elseif ($video->source == 'Vimeo')
                        @if (strpos($videoData[0], '200') > 0)
                            <div class="video-container col-sm-6" style="margin-bottom: 27px;"
                                @if ($data['layout'] !== 'frontend.layouts.app') style="height: 175px; margin-bottom: 40px;" @endif>
                                <iframe frameborder="0" src="{{ 'https://player.vimeo.com/video/' . $video->video_id }}"
                                    allow="fullscreen; picture-in-picture" allowfullscreen class="responsive-iframe"
                                    ></iframe>
                            </div>
                        @endif
                    @endif
                @endforeach
            @else
                <p><strong>Sorry!</strong>, no videos found.</p>
            @endif
        </div>
    </div>
@endsection