@extends('front.layouts.app')
@section('content')

@php
$registration_source = "content_view";
$registration_source_elexio_group_id = config('constants.REGISTRATION_SOURCE.content_view');
@endphp

@if($content->password && !in_array($content->id,session("password_allow_contents")))

@php
$password_heading = $content->name;
$password_id = $content->id;
$password_page = "content";
@endphp
@includeIf('front.includes.password')

@else
<input type="hidden" id="user_id" value="{!! auth('web')->user()->id ?? 0 !!}">
<div class="campus-view on-demand-sec">
    <!-- START LEFT VIEW -->
    <div class="campus-view-left event-sec">
        <div class="live-event-sec" style="width:90%;margin:0 auto;">
            <h3 class="view-title">{!! $content->name !!}</h3>
            <p class="breadcrumb-text"><a href="{!! route('media') !!}">On-Demand Library</a> > <a href="{!! $ministry->page_url !!}">{!! $ministry->name !!}</a> @if(isset($series->page_url)) > <a href="{!! $series->page_url !!}">{!! $series->name !!}</a>@endif > {!! $content->name !!}</p>

            <div class="live-view">
                @if($displayStep == 1)
                <div class="text-white">{!! $page->metaArr()['auth_required_text'] ?? "<a href='".url('register')."'>Sign Up</a> to view contents of series." !!}</div>

                @elseif($displayStep == 2)
                <div class="text-white">{!! $page->metaArr()['elexio_form_required_text'] ?? "Please fill out the form to view this content." !!}</div>

                @elseif($displayStep == 3)
                <div class="text-white">{!! $page->metaArr()['password_required_text'] ?? "Please enter the password to view this content." !!}</div>

                @endif
                <div class="row">
                    @if(!in_array($displayStep,[1,2,3]) && !$content->description)
                    <div class="col-xxl-12 col-xl-12 col-md-12 mb-3">
                        @if($content->video)
                        <div class="ratio ratio-16x9">
                            <video class="video-js vjs-default-skin" playsinline id="content_video" controls preload="auto" data-setup="{}">
                                <source src="{{ $content->video_url }}" type="video/mp4">
                                <source src="{{ $content->video_url }}" type="video/ogg">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                        @elseif($content->video_embed_url)
                        <div class="ratio ratio-16x9">
                            <iframe src="{!! $content->video_embed_url !!}" title="{!! $content->name !!}" allowfullscreen></iframe>
                        </div>
                        @endif
                    </div>
                    @else

                    <div class="col-xxl-6 col-xl-12 col-md-6 mb-3">
                    @if(in_array($displayStep,[1,2,3]))
                        @if($content->preview_video)
                        <div class="ratio ratio-16x9">
                            <video class="video-js vjs-default-skin" playsinline id="content_preview" controls preload="auto" data-setup="{}">
                                <source src="{{ $content->preview_video }}" type="video/mp4">
                                <source src="{{ $content->preview_video }}" type="video/ogg">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                        @elseif($content->preview_video_url)
                        <div class="ratio ratio-16x9">
                            <iframe src="{!! $content->preview_video_url !!}" title="{!! $content->name !!}" allowfullscreen></iframe>
                        </div>
                        @else
                        <div class="ratio ratio-16x9">
                            <img src="{!! $content->image_url !!}" alt="{!! $content->image_alt !!}">
                        </div>
                        @endif
                    @else
                        @if($content->video)
                        <div class="ratio ratio-16x9">
                            <video class="video-js vjs-default-skin" playsinline id="content_video" controls preload="auto" data-setup="{}">
                                <source src="{{ $content->video_url }}" type="video/mp4">
                                <source src="{{ $content->video_url }}" type="video/ogg">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                        @elseif($content->video_embed_url)
                        <div class="ratio ratio-16x9">
                            <iframe src="{!! $content->video_embed_url !!}" title="{!! $content->name !!}" allowfullscreen></iframe>
                        </div>
                        @endif
                    @endif
                    </div>
                    <div class="col-xxl-6 col-xl-12 col-md-6">
                        <p>{!! $content->description !!}</p>
                        @if($displayStep == "1")
                        <a type="button" class="btn btn-dark-gray fw-bolder rounded-pill px-3" href="javascript:void(0)" onclick="javascript:$('#register_login_popup').modal('show');">
                            <i class="bi bi-info-circle me-3" style="position: relative;font-size: 18px;top: 3px;"></i>
                            Sign in to watch full series
                        </a>
                        @endif
                    </div>
                    @endif
                </div>

                @if($content->buttons->count() && $displayStep == "0")
                <div class="row my-3 align-items-center">
                    <div class="col">
                        @foreach($content->buttons as $buttons)
                        <a href="{!! @$buttons['link'] !!}" class="btn btn-white me-2 mb-2" @if(@$buttons['open_in_new_tab']) target="_blank" @endif >{!! @$buttons['caption'] !!}</a>
                        @endforeach
                    </div>
                </div>
                @endif

                <hr class="bg-light my-lg-6"/>

                @if($otherContents->count())
                <div class="row mt-3 series-videos-row">
                    <div class="col-12 mb-4">
                        <h3 class="view-title"><i class="bi bi-play-btn me-3"></i>Videos ({!! $otherContents->count() !!})</h3>
                    </div>
                    @foreach($otherContents as $otherContent)
                    <div class="col-xxl-3 col-xl-6 col-md-4 col-6 mb-2 mb-sm-3">
                        <div class="series-video-card">
                        @if($otherContent->is_locked)
                            <a href="javascript:void(0)" class="img-view" onclick="javascript:$('#register_login_popup').modal('show');">
                                <img src="{!! $otherContent->image_url !!}" class="img-fluid" alt="{!! $otherContent->image_url !!}" />
                                <div class="overlay_lock"><i class="lock-icon"></i></div>
                            </a>
                            <a href="javascript:void(0)" onclick="javascript:$('#register_login_popup').modal('show');" class="d-block mt-2 text-white">{!! $otherContent->name !!}</a>
                        @else
                            <a href="{!! $otherContent->page_url !!}" class="img-view">
                                <img src="{!! $otherContent->image_url !!}" class="img-fluid" alt="{!! $otherContent->image_url !!}" />
                                @if($otherContent->isWatched)
                                <div class="overlay"><i class="bi bi-check-circle"></i></div>
                                @endif
                            </a>
                            <a href="{!! $otherContent->page_url !!}" class="d-block mt-2 text-white">{!! $otherContent->name !!}</a>
                        @endif
                        </div>
                    </div>
                @endforeach
            </div>
            @endif
            </div>
        </div>
    </div>
    <!-- END LEFT VIEW -->

    <!-- START RIGHT VIEW -->
    <div class="campus-view-right">
        <ul class="nav nav-pills campus-tabs" id="pills-tab">
            @if($displayStep == 1)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="register-tab" data-bs-toggle="pill" data-bs-target="#pills-register" type="button" role="tab" aria-controls="pills-register" aria-selected="true">Register / Login</button>
            </li>
            @elseif($displayStep == 2)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="elexio-form-tab" data-bs-toggle="pill" data-bs-target="#pills-elexio-form" type="button" role="tab" aria-controls="pills-elexio-form" aria-selected="true">Form</button>
            </li>
            @elseif($displayStep == 3)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="password-tab" data-bs-toggle="pill" data-bs-target="#pills-password" type="button" role="tab" aria-controls="pills-password" aria-selected="true">Password</button>
            </li>
            @endif
            @foreach($tabs as $tab)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="{!! $tab->title !!}-tab" data-bs-toggle="pill" data-bs-target="#pills-{!! $tab->title !!}" type="button" role="tab" aria-controls="pills-{!! $tab->title !!}" aria-selected="true">{!! $tab->title !!}</button>
            </li>
            @endforeach
        </ul>
        <div class="tab-content campus-tabs-content" id="pills-tabContent">
            @if($displayStep == 1)
            @includeIf('front.includes.register_login_tab')

            @elseif($displayStep == 2)
            <div class="tab-pane fade event-details show" id="pills-elexio-form" role="tabpanel" aria-labelledby="elexio-form-tab">
                <div class="info-view">
                    <section class="register-form-sec sec-py">
                        {!! $series->elexio_form_embed_code !!}
                    </section>
                </div>
            </div>
            @elseif($displayStep == 3)
            <div class="tab-pane fade event-details show" id="pills-password" role="tabpanel" aria-labelledby="password-tab">
                <div class="info-view">
                    <div class="row mx-auto w-100 h-100 g-md-0">
                        <div class="col-xl-12 col-md-5 h-100 lgin-col-left">
                            <div class="d-md-flex justify-content-center align-items-center h-100">
                                <div class="login-container w-100">
                                    <h3>{!! $password_heading ?? "" !!}</h3>
                                    <p>Please provide the password to view the details.</p>
                                    <form class="form login-form" method="POST" action="{!! route('verifyDetailPassword') !!}" id="frmVerifyDetailPassword">
                                        @csrf
                                        <input type="hidden" name="page" value="{!! 'content_series' !!}">
                                        <input type="hidden" name="id" value="{!! $series->id !!}">
                                        <div class="row">
                                            <div class="col-md-12 input-grp mb-3">
                                                <!-- <label for="password" class="form-label">Password</label> -->
                                                <div class="pass-input">
                                                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter password here" autocomplete="new-password">
                                                    <a href="javascript:void(0)" class="pass-btn">
                                                        <i toggle="#password" class="bi bi-eye-fill toggle-password"></i>
                                                    </a>
                                                </div>
                                                @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{!! $message !!}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                            <div class="col-md-12 input-btn text-center">
                                                <button type="submit" class="btn btn-white">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="tab-pane fade event-details show" id="pills-Details" role="tabpanel" aria-labelledby="Details-tab">
                <div class="info-view">
                    <h4>{!! $content->name !!}</h4>
                    <div class="img-view">
                        <img src="{!! $content->image_url!!}" class="img-fluid" alt="{!! $content->name !!}" />
                    </div>
                    {!! $content->description !!}

                    <div class="mt-3">
                        <p><b>Follow Us on Social Media</b></p>
                        @if($siteSettings->facebook)
                        <a href="{!! $siteSettings->facebook !!}" target="_blank"><img src="{!! asset('assets/frontend/images/fb.png') !!}" class="img-fluid" alt="fb" /></a>
                        @endif

                        @if($siteSettings->twitter)
                        <a href="{!! $siteSettings->twitter !!}" target="_blank"><img src="{!! asset('assets/frontend/images/twtr.png') !!}" class="img-fluid" alt="twtr" /></a>
                        @endif

                        @if($siteSettings->youtube)
                        <a href="{!! $siteSettings->youtube !!}" target="_blank"><img src="{!! asset('assets/frontend/images/youtube.png') !!}" class="img-fluid" alt="youtube" /></a>
                        @endif

                        @if($siteSettings->instagram)
                        <a href="{!! $siteSettings->instagram !!}" target="_blank"><img src="{!! asset('assets/frontend/images/insta.png') !!}" class="img-fluid" alt="insta" /></a>
                        @endif

                        @if($siteSettings->tiktok)
                        <a href="{!! $siteSettings->tiktok !!}" target="_blank"><img src="{!! asset('assets/frontend/images/tiktok.png') !!}" class="img-fluid" alt="tiktok" /></a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="tab-pane note-pane fade" id="pills-Notes" role="tabpanel" aria-labelledby="Notes-tab">
                <div class="note-row">
                    <div class="mb-3 divUnblock notes-list">
                        <input type="hidden" id="content_id" value="{!! $content->id !!}">
                        <textarea name="notes" id="notes" class="form-control" placeholder="Add your own Note...">
                            {!! $notes !!}
                        </textarea>
                    </div>
                    <div class="mb-3 divUnblock">
                        @if(!auth()->check())
                        <!-- <a href="{!! route('login') !!}" class="btn btn-white btnLoginSaveNote">Login to save notes</a> -->
                        <a href="javascript:void(0)" class="btn btn-white btnLoginSaveNote" onclick="javascript:$('#register_login_popup').modal('show');">Login to save notes</a>
                        @else
                        <button type="button" class="btn btn-white" onclick="javascript:saveNotes('1')">Save notes</button>
                        @endif
                        <button type="button" class="btn btn-white btnDownloadNote">Download Notes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END RIGHT VIEW -->
</div>
@includeIf('front.includes.register_login_popup')
@section('js')
{!! config('constants.TINY_MCE_SCRIPT') !!}
<script src="{!! asset('assets/frontend/js/html2pdf.bundle.min.js') !!}"></script>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="{!! asset('assets/frontend/js/pages/ondemand.js') !!}"></script>
<script>
if($("#content_preview").length > 0)
{
    let videoObj = {
        type : 'content_preview',
        id : 'content_preview',
        content_type_id : {!! @$content->type_id !!},
        content_series_id : {!! @$content->series_id !!},
        content_id : {!! $content->id !!},
        // video_name : '{!! $content->preview_video !!}',
        video_url : '{!! $content->preview_video_url !!}'
    };
    initVideoForTracking(videoObj);
}
else if($("#content_video").length > 0)
{
    let videoObj = {
        type : 'content_video',
        id : 'content_video',
        content_type_id : {!! @$content->type_id !!},
        content_series_id : {!! @$content->series_id !!},
        content_id : {!! $content->id !!},
        // video_name : '{!! $content->video !!}',
        video_url : '{!! $content->video_url !!}'
    };
    initVideoForTracking(videoObj);
}
</script>
<script src="{!! asset('assets/frontend/js/pages/auth.js') !!}?v=2"></script>
<script>
$(document).ready(function (e) {
    if($(".invalid-feedback").length > 0)
    {
        $('#register_login_popup').modal('show');
    }
})
</script>
@stop

@endif

@endsection