@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- breadcrumb area start here  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ langConverter($activity->en_name, $activity->fr_name) }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ langConverter($activity->en_name, $activity->fr_name) }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end here  -->
    <div class="content-area activities-view">
        <div class="pattren-2">
            <div class="container">
                <div class="section">
                    <div class="emzHistoryBox">
                        <div class="rscnSettingBox">
                            <img src="{{ asset($activity->image_larg) }}" class="emzHisImg updated-wxh-img">
                            <div class="emzHisDescription">
                                {!! langConverter($activity->en_description, $activity->fr_description) !!}
                            </div>
                            <ul class="mt-5">
                                @foreach ($activity->reservations as $reservation)
                                    <li class="rscnActivityBox22 updatedActivityBox-x1 mb-3">
                                        <i class="fa fa-map-marker-alt rscnActivityIcon"></i>
                                        <span class="rscnActivityTxt">{{ langConverter($reservation->en_name, $reservation->fr_name) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if (isset($activity->video_html))
        <div class="secound-section">
            <iframe id="video" src="{{ $activity->video_html }}" frameborder="0" allowfullscreen></iframe>
            <div id="play-button"></div>
             <div id="pause-button"></div>
            <div class="secound-section-info section">
                <div class="text-box">
                    {!! langConverter($activity->en_video_description, $activity->fr_video_description) !!}
                </div>
            </div>
        </div>
        @endif
        {{-- <div class="pattren-1 third-section">
            <div class="section">
                <div class="container list">
                    @foreach ($activity->activityTypes as $type)
                        <div class="row item">
                            <div class="col-12 col-lg-4">
                                <img src="{{ asset('frontend/assets/images/ranc_img.png') }}" class="emzHisImg">
                            </div>
                            <div class="col-12 col-lg-8">
                                <div class="content-box">
                                    <h3>{{ langConverter($type->en_name, $type->fr_name) }}</h3>
                                    <p>
                                        {!! langConverter($type->en_description, $type->fr_description) !!}
                                    </p>
                                    @if (isset($type->reservationActivityTypes))
                                        <ul>
                                            @foreach ($type->reservationActivityTypes as $reservation)
                                                <li>
                                                    <i class="fa fa-map-marker-alt"></i>
                                                    <span>{{ langConverter($reservation->reservations->en_name, $reservation->reservations->fr_name) }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                        @if (isset($type->en_inner_description))
                                            <a
                                                href="{{ route('activity.type.details', $type->id) }}">{{ __('Learn More') }}</a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div> --}}
    </div>
@endsection
@push('post_script')
    <script type="text/javascript">
        // https://developers.google.com/youtube/iframe_api_reference
        // global variable for the player
        var player;
        // this function gets called when API is ready to use
        function onYouTubePlayerAPIReady() {
            // create the global player from the specific iframe (#video)
            player = new YT.Player("video", {
                events: {
                    // call this function when player is ready to use
                    onReady: onPlayerReady
                }
            });
        }
        function onPlayerReady(event) {
            // bind events
            var playButton = document.getElementById("play-button");
            playButton.addEventListener("click", function() {
                player.playVideo();
                $(".secound-section-info").hide();
                document.getElementById("pause-button").style.zIndex = "1";
                playButton.style.zIndex = "-1";
            });
            var pauseButton = document.getElementById("pause-button");
            pauseButton.addEventListener("click", function() {
                $(".secound-section-info").show();
                 document.getElementById("play-button").style.zIndex = "1";
                pauseButton.style.zIndex = "-1";
                player.pauseVideo();
            });
        }
        // Inject YouTube API script
        var tag = document.createElement("script");
        tag.src = "//www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName("script")[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    </script>
@endpush