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

<div class="campus-view event-classes-sec" style="height:auto;min-height:100vh;">
    <!--// START LEFT VIEW //-->
    <div class="campus-view-left">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xxl-4 col-xl-12 col-lg-4">
                    <div class="sec-title">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                        <p>{!! @$metaArr['content_description'] !!}</p>
                    </div>
                </div>
                <div class="col-xxl-8 col-xl-12 col-lg-8">
                    <div class="nh-quik-links-list">
                        @for($i=1;$i<=3;$i++)
                        <div class="new-here-quick-link">
                            <div class="img-view">
                                @if(@$metaArr['quick_link_icon'.$i])
                                <img src="{!! getCmsFileUrl(@$metaArr['quick_link_icon'.$i]) !!}" class="img-fluid" alt="{!! @$metaArr['quick_link_icon'.$i.'_alt'] !!}">
                                @endif
                            </div>
                            <div class="content">
                                <h5>{!! @$metaArr['quick_link_title'.$i] !!}</h5>
                                <p>{!! @$metaArr['quick_link_description'.$i] !!}</p>
                            </div>
                            <a href="{!! @$metaArr['quick_link_btn_link'.$i] !!}" class="btn btn-white" @if(@$metaArr['quick_link_btn_link'.$i.'_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link_btn_caption'.$i] !!}</a>
                        </div>
                        @endfor
                    </div>
                </div>
            </div>

            <!-- START FOLLOW SECTION -->
            <div class="follow-sec">
                <div class="follow-sec-inn">
                    <h4>Follow Meck on Social Media, <span>YouTube and Spotify!</span></h4>
                    @if($siteSettings->facebook)
                    <a href="{!! $siteSettings->facebook !!}" class="follow-link" target="_blank"><img src="{!! asset('assets/frontend/images/fb-square-blue.png') !!}" class="img-fluid" alt="fb-square-blue"></a>
                    @endif

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

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

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

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

                    @if($siteSettings->tiktok)
                    <a href="{!! $siteSettings->tiktok !!}" class="follow-link" target="_blank"><img src="{!! asset('assets/frontend/images/tiktok-square-blue.png') !!}" class="img-fluid" alt="tiktok-square-blue" /></a>
                    @endif
                </div>
            </div>
            <!-- END FOLLOW SECTION -->

            <!-- START APP SECTION -->
            <div class="app-section">
                <div class="row align-items-center">
                    <div class="col-md-6 order-md-2">
                        <h2>{!! @$metaArr['app_title'] !!}</h2>
                        <p>{!! @$metaArr['app_description'] !!}</p>

                        @if(@$metaArr['app_img_type'] == 'image' && @$metaArr['app_img'])
                        <img src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" class="img-fluid app-img d-md-none" alt="{!! @$metaArr['app_img_alt'] !!}">
                        @elseif(@$metaArr['app_img_type'] == 'video' && @$metaArr['app_img'])
                        <video controls class="d-md-none" playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! asset('assets/frontend/images/app-display.png') !!}" class="img-fluid app-img d-md-none" alt="app-display">
                        @endif

                        <a class="btn" href="{!! @$metaArr['app_btn_link'] !!}" @if(@$metaArr['app_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['app_btn_caption'] !!}</a>
                    </div>
                    <div class="col-md-6 text-center d-none d-md-block">
                        @if(@$metaArr['app_img_type'] == 'image' && @$metaArr['app_img'])
                        <img src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" class="img-fluid app-img" alt="{!! @$metaArr['app_img_alt'] !!}">
                        @elseif(@$metaArr['app_img_type'] == 'video' && @$metaArr['app_img'])
                        <video controls playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! asset('assets/frontend/images/app-display.png') !!}" class="img-fluid app-img" alt="app-display">
                        @endif
                    </div>
                </div>
            </div>
            <!-- END APP SECTION -->
        </div>
    </div>
    <!--// END LEFT VIEW //-->


    <!--// START RIGHT VIEW //-->
    <div class="campus-view-right" style="height: auto;min-height:100%;">
        @php $nextEvent = $data['nextEvent']; @endphp
        @includeIf('front.includes.next-event')
    </div>
    <!--// END RIGHT VIEW //-->
</div>
@endsection