@extends('front.layouts.app')
@section('content')
<input type="hidden" id="user_id" value="{!! auth('web')->user()->id ?? 0!!}">
<div class="campus-view online-campus-page">
    <!-- START LEFT VIEW -->
    <div class="campus-view-left event-sec" style="overflow-y:auto;">
        @if($isLive)
        <!-- Start Live Event Section -->
        <div class="live-event-sec">
            <div id="live_event_timer" data-start_date_time="{!! $liveEvent->start_date_time !!}" data-end_date_time="{!! $liveEvent->end_date_time !!}" style="display:none"></div>
            <h3 class="view-title mb-2">{!! $liveEvent->name !!}</h3>
            <!-- <div class="live-view">
                <div class="ratio ratio-16x9">
                    <iframe src="{!! $liveEvent->video_link !!}" frameborder="0" allowfullscreen allow="autoplay; fullscreen" autoplay></iframe>
                </div>
            </div> -->
            <div class="ratio ratio-16x9 live">
                <iframe src="{!! $liveEvent->video_link !!}" frameborder="0" allowfullscreen allow="autoplay; fullscreen" autoplay></iframe>
            </div>
            @if($nextEvent)
            <div class="d-md-flex mt-3 align-items-center pb-xl-5">
                <div class="flex1">
                    <div class="nxt-event-row">
                        <h5>Next Event is:</h5>
                        <div class="d-flex align-items-center">
                            <a href="{!! $nextEvent->page_url !!}" class="event-img" target="_blank">
                                <img src="{!! $nextEvent->image_url !!}" class="" alt="{!! $nextEvent->name !!}">
                            </a>
                            <div class="event-timer">
                                <a href="{!! $nextEvent->page_url !!}" class="event-title" target="_blank">{!! $nextEvent->name !!}</a>
                                <div class="countdown countdown-row" id="timer" data-start_date_time="{!! $nextEvent->start_date_time !!}">
                                    <div class="countdown-col" id="days"></div>
                                    <div class="countdown-col" id="hours"></div>
                                    <div class="countdown-col" id="minutes"></div>
                                    <div class="countdown-col" id="seconds"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ms-auto">
                    <div class="social-view">
                        <p>Follow Us on Social Media</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>
            @endif
        </div>
        <!-- End Live Event Section -->
        @else
        <!-- Start Event Slider Section -->
        <div class="event-slider-sec">
            <div class="event-slider owl-carousel owl-theme">
                @if(isset($metaArr['sliders']) && is_array($metaArr['sliders']) && @count(@$aboutPage->metaArr()['online_times']) > 0)
                @foreach($metaArr['sliders'] as $sliders)
                <div class="slider-item">
                    @if(@$sliders['img_type'] == "video")
                    <video autoplay muted controls playsinline loop>
                        <source src="{!! getCmsFileUrl(@$sliders['img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$sliders['img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <a href="@if(@$sliders['more_info']) {!! $sliders['more_info'] !!} @endif" @if(@$sliders['open_in_new_tab']) target="_blank" @endif>
                        <img src="@if(@$sliders['img']) {!! getCmsFileUrl(@$sliders['img']) !!} @else {!! asset('assets/frontend/images/no-image.png') !!} @endif" class="img-fluid">
                    </a>
                    @endif
                </div>
                @endforeach
                @endif
            </div>
        </div>
        <!-- End Event Slider Section -->
        @if($nextEvent)
        <div class="d-md-flex align-items-center nxt-event-row-view">
            <div class="flex1">
                <div class="nxt-event-row">
                    <h5>Next Event is:</h5>
                    <div class="d-flex align-items-center">
                        <a href="{!! $nextEvent->page_url !!}" class="event-img" target="_blank">
                            <img src="{!! $nextEvent->image_url !!}" class="" alt="{!! $nextEvent->name !!}">
                        </a>
                        <div class="event-timer">
                            <a href="{!! $nextEvent->page_url !!}" class="event-title" target="_blank">{!! $nextEvent->name !!}</a>
                            <div class="countdown countdown-row" id="timer" data-start_date_time="{!! $nextEvent->start_date_time !!}">
                                <div class="countdown-col" id="days"></div>
                                <div class="countdown-col" id="hours"></div>
                                <div class="countdown-col" id="minutes"></div>
                                <div class="countdown-col" id="seconds"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ms-auto">
                <div class="social-view">
                    <p>Follow Us on Social Media</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>
        @endif

        @endif
    </div>
    <!-- END LEFT VIEW -->

    <!-- START RIGHT VIEW -->
    <div class="campus-view-right">
        <ul class="nav nav-pills campus-tabs" id="pills-tab">
            @if(!auth('web')->check() && $isLive)
            <li class="nav-item" role="presentation" style="display: contents;">
                <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>
            @endif
            @if($tabs->count() > 0)
            @foreach($tabs as $tab)
            <li class="nav-item mt-2" role="presentation">
                <button class="nav-link" id="{!! $tab->title !!}-tab" data-bs-toggle="pill" data-bs-target="#pills-{!! \Str::slug($tab->title) !!}" type="button" role="tab" aria-controls="pills-{!! \Str::slug($tab->title) !!}" aria-selected="true">{!! $tab->title !!}</button>
            </li>
            @endforeach
            @endif
        </ul>
        <div class="tab-content campus-tabs-content" id="pills-tabContent">
            @if(!auth('web')->check() && $isLive)
            @includeIf('front.includes.register_login_tab')
            @endif
            <div class="tab-pane fade chat-pane show" id="pills-chat" role="tabpanel" aria-labelledby="chat-tab">
                <div class="chat-view info-view">
                    @if($isLive)
                    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" src="{!! $liveEvent->chat_embed_url !!}"></iframe>
                    @else
                    <div class="divBlock no-data-view">
                        {!! @$metaArr['content_chat_closed_text'] !!}
                    </div>
                    @endif
                </div>
            </div>
            <div class="tab-pane note-pane fade note-tab-pane" id="pills-notes" role="tabpanel" aria-labelledby="notes-tab">
                <div class="note-row info-view">
                    @if($isLive)
                    <div class="mb-3 divUnblock">
                        <input type="hidden" id="event_id" value="{!! $liveEvent->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())
                        <button type="button" class="btn btn-white" onclick="javascript:$('#register-tab').click();">Login to save notes</button>
                        @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>
                    @else
                    <div class="divBlock no-data-view">
                        {!! @$metaArr['content_note_closed_text'] !!}
                    </div>
                    @endif
                </div>
            </div>
            <div class="tab-pane fade event-details details-tab-pane" id="pills-details" role="tabpanel" aria-labelledby="details-tab">
                <div class="info-view">
                    @if($isLive)
                    <a href="{!! $liveEvent->page_url !!}" class="event-title" style="color:var(--white)" target="_blank"><h4>{!! $liveEvent->name !!} (Running)</h4></a>
                    <div class="date">
                        {!! convertUtcToLocal($liveEvent->start_date_time, 'l, F d, Y') !!}
                        {!! displayStartEndTime($liveEvent) !!}
                    </div>
                    <a href="{!! $liveEvent->page_url !!}" class="event-img" target="_blank">
                        <img src="{!! $liveEvent->image_url !!}" class="img-fluid" alt="{!! $liveEvent->name !!}">
                    </a>
                    <p class="mt-3">{!! $liveEvent->description !!}</p>
                    @elseif($nextEvent)
                    <a href="{!! $nextEvent->page_url !!}" class="event-title" style="color:var(--white)" target="_blank"><h4>{!! $nextEvent->name !!}</h4></a>
                    <div class="date">
                        {!! convertUtcToLocal($nextEvent->start_date_time, 'l, F d, Y') !!}
                        {!! displayStartEndTime($nextEvent) !!}
                    </div>
                    <a href="{!! $nextEvent->page_url !!}" class="event-img" target="_blank">
                        <img src="{!! $nextEvent->image_url !!}" class="img-fluid" alt="{!! $nextEvent->name !!}">
                    </a>
                    <p class="mt-3">{!! $nextEvent->description !!}</p>
                    @else
                    <div class="no-data-view"><p>No more online events.</p></div>
                    @endif
                </div>
            </div>
            <div class="tab-pane fade event-details prayer-tab-pane" id="pills-prayer" role="tabpanel" aria-labelledby="prayer-tab">
                <div class="info-view">
                    @if($isLive)
                    {!! $liveEvent->elexio_prayer_request_embed_code !!}
                    @else
                    <div class="no-data-view">{!! @$metaArr['content_prayer_request_closed_text'] !!}</div>
                    @endif
                </div>
            </div>
            <div class="tab-pane fade event-details new-here-tab-pane" id="pills-new-here" role="tabpanel" aria-labelledby="new-here-tab">
                <div class="info-view">
                    @if($isLive)
                    {!! $liveEvent->elexio_new_here_embed_code !!}
                    @else
                    <div class="no-data-view">{!! @$metaArr['content_new_here_closed_text'] !!}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- END RIGHT VIEW -->
</div>
@section('js')
{!! config('constants.TINY_MCE_SCRIPT') !!}
<script src="{!! asset('assets/frontend/js/html2pdf.bundle.min.js') !!}"></script>
@if(!auth('web')->check() && $isLive)
<script src="{!! asset('assets/frontend/js/pages/auth.js') !!}"></script>
@endif
<script>
var isLive = '{!! $isLive !!}';
</script>
<script src="{!! asset('assets/frontend/js/pages/onlinecampus.js') !!}?v=1"></script>
@stop
@endsection