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

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

<input type="hidden" id="content_series_id" value="{!! $series->id !!}">

@if($displayStep)

<!-- series->elexio_form_embed_code -->
<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">{!! $series->name !!}</h3>
            <p class="breadcrumb-text"><a href="{!! route('media') !!}">On-Demand Library</a> > <a href="{!! $ministry->page_url !!}">{!! $ministry->name !!}</a> > {!! $series->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 contents of series." !!}</div>

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

            @endif

            @if(in_array($displayStep,[1,2,3]))

                @if($series->preview_video)
                <div class="ratio ratio-16x9">
                    <video class="video-js vjs-default-skin" playsinline id="content_series_preview" controls preload="auto" data-setup="{}">
                        <source src="{{ $series->preview_video_url }}" type="video/mp4">
                        <source src="{{ $series->preview_video_url }}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                @elseif($series->trailer)
                <div class="ratio ratio-16x9">
                    <iframe src="{!! $series->trailer !!}" title="{!! $series->name !!}" allowfullscreen class="rounded-0"></iframe>
                </div>
                @endif
            @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
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="Details-tab" data-bs-toggle="pill" data-bs-target="#pills-Details" type="button" role="tab" aria-controls="pills-Details" aria-selected="true">Details</button>
            </li>
        </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 w-100 rounded-3">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>{!! $series->name !!}</h4>
                    <div class="img-view">
                        <img src="{!! $series->avatar_url!!}" class="img-fluid" alt="{!! $series->name !!}" />
                    </div>
                    {!! $series->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="facebook" /></a>
                        @endif

                        @if($siteSettings->twitter)
                        <a href="{!! $siteSettings->twitter !!}" target="_blank"><img src="{!! asset('assets/frontend/images/twtr.png') !!}" class="img-fluid" alt="twitter" /></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="instagram" /></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>
    </div>
    <!--// END RIGHT VIEW //-->
</div>
@else
<div class="campus-view on-demand-sec">
    <!--// START LEFT VIEW //-->
    <div class="campus-view-left">
        <div class="row header-row">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title">{!! $series->name !!}</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xxl-9 col-xl-9 col-lg-6 mb-xxl-0">
                <p class="breadcrumb-text"><a href="{!! route('media') !!}">On-Demand Library</a> > <a href="{!! $ministry->page_url !!}">{!! $ministry->name !!}</a> > {!! $series->name !!}</p>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-6 col-sm-6 text-end">
                @if($categories->count())
                <form class="form events-classes-form">
                    <select class="form-select" name="category_id" onchange="javascript:$('.loader').show();this.form.submit()">
                        <option selected value="">Category</option>
                        @foreach($categories as $category)
                        <option value="{!! $category->id !!}" @if(request()->get('category_id') == $category->id) selected @endif>{!! $category->name !!}</option>
                        @endforeach
                    </select>
                </form>
                @endif
            </div>
        </div>
        <!-- End Title Row -->

        <!-- Content By Suggested -->
        @if(isset($suggestedContents) && false)
        <div class="row header-row mb-3">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title">Suggested for you</h3>
            </div>
        </div>
        <div class="row on-demand-cards-row pb-3">
            @foreach($suggestedContents as $suggestedContent)
            {!! getContentBlock($suggestedContent) !!}
            @endforeach
        </div>
        @endif

        <!-- Content By Category -->
        @if(count($contentsByCategories))
        @foreach($contentsByCategories as $contentsByCategory)
        @if(isset($contentsByCategory['contents']) && is_array($contentsByCategory['contents']) && count($contentsByCategory['contents']))
        <div class="row header-row mb-3">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title">{!! $contentsByCategory['name'] !!}</h3>
            </div>
        </div>
        <div class="row on-demand-cards-row pb-3">
            @foreach($contentsByCategory['contents'] as $content)
            {!! getContentBlock($content) !!}
            @endforeach
        </div>
        @endif
        @endforeach
        @else
        <div class="no_content_msg_section">
            {!! $series->no_content_msg !!}
        </div>
        @endif
    </div>
</div>
@includeIf('front.includes.register_login_popup')
@endif
@endsection

@section('js')
{!! config('constants.TINY_MCE_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_series_preview").length > 0)
{
    let videoObj = {
        type : 'content_series_preview',
        id : 'content_series_preview',
        content_type_id : {!! $series->content_type_id !!},
        content_series_id : {!! $series->id !!},
        // video_name : '{!! $series->preview_video !!}',
        video_url : '{!! $series->preview_video_url !!}'
    };
    // console.log(videoObj);
    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