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

<!-- START INNER BANNER SECTION -->
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>
<!-- END INNER BANNER SECTION -->

<!-- START ABOUT US SECTION -->
<section class="au-page-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 order-lg-2">
                <div class="au-learn-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['about_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['about_title'] !!}</h2>
                    </div>
                    {!! @$metaArr['about_description'] !!}
                </div>
            </div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-sm-6">
                        @if(@$metaArr['about_img1_type'] == "video")
                        <div class="au-learn-img one mb-sm-4" style="height:auto;">
                            <x-video-js-player :src="@$metaArr['about_img1']" id="about_img1" />
                        </div>
                        @else
                        <div class="au-learn-img one mb-sm-5">
                            <img src="{!! getCmsFileUrl(@$metaArr['about_img1']) !!}" class="img-fluid">
                        </div>
                            @endif
                        @if(@$metaArr['about_img2_type'] == "video")
                        <div class="au-learn-img two" style="height:auto;">
                            <x-video-js-player :src="@$metaArr['about_img2']" id="about_img2" />
                        </div>
                        @else
                        <div class="au-learn-img two">
                            <img src="{!! getCmsFileUrl(@$metaArr['about_img2']) !!}" class="img-fluid">
                        </div>
                        @endif
                    </div>
                    <div class="col-sm-6 mt-sm-5">
                        @if(@$metaArr['about_img3_type'] == "video")
                        <div class="au-learn-img three mb-sm-4" style="height:auto;">
                            <x-video-js-player :src="@$metaArr['about_img3']" id="about_img3" />
                        </div>
                        @else
                        <div class="au-learn-img three mb-sm-5">
                            <img src="{!! getCmsFileUrl(@$metaArr['about_img3']) !!}" class="img-fluid">
                        </div>
                        @endif
                        @if(@$metaArr['about_img4_type'] == "video")
                        <div class="au-learn-img four" style="height:auto;">
                            <x-video-js-player :src="@$metaArr['about_img4']" id="about_img4" />
                        </div>
                        @else
                        <div class="au-learn-img four">
                            <img src="{!! getCmsFileUrl(@$metaArr['about_img4']) !!}" class="img-fluid">
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT US SECTION -->

<!-- START VIDEO SECTION -->
<section class="au-video-sec" @if(@$metaArr['video_bg_img_type'] == "image") style="background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url({!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}) no-repeat; background-size: cover; background-position: center center;" @endif>
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-md-6 text-center">
                @if(@$metaArr['video_link'])
                <div class="video-wraper" id="videoWraper" style="display:none;">
                    <x-video-js-player :src="@$metaArr['video_link']" id="videoPlayer" />
                    <a href="javascript:void(0)" class="video-close-btn">
                        <i class="fas fa-x"></i>
                    </a>
                </div>
                <a href="javascript:void(0)" class="au-video-icon">
                    <img src="{!! asset('assets/frontend/images/play-icon-blue.png') !!}" class="img-fluid" alt="play-icon-blue">
                </a>
                @endif
            </div>
            <div class="col-md-6">
                <div class="sec-title line-left">
                    <strong>Video</strong>
                    <h2>{!! @$metaArr['video_title'] !!}</h2>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['video_bg_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>
<!-- END VIDEO SECTION -->


<!-- START AU-CAMPUS SECTION -->
<section class="au-campus-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 my-auto au-campus-img">
                @if(@$metaArr['online_img_type'] == "video")
                <x-video-js-player :src="@$metaArr['online_img']" id="online_img" />
                @else
                <img src="{!! getCmsFileUrl(@$metaArr['online_img']) !!}" class="img-fluid">
                @endif
            </div>
            <div class="col-lg-8">
                <div class="au-campus-content">
                    <div class="sec-title line-left">
                        <strong>Join us</strong>
                        <h2>{!! @$metaArr['online_title'] !!}</h2>
                    </div>
                    <div class="au-time-zone-row">
                        <div class="au-time-zon-title">Online</div>
                        <div class="time-btn-row">
                            @php
                            $currentLocalDate = currentTimeZone('Y-m-d');
                            $startDate = $currentLocalDate;
                            $endDate = date('Y-m-d', strtotime('+7 day', strtotime($currentLocalDate)));
                            if(isset($metaArr['online_times']) && is_array($metaArr['online_times']) && count($metaArr['online_times']) > 0) {
                                foreach($metaArr['online_times'] as $online_times) {
                                    if(isset($online_times['dates']) && is_array($online_times['dates']) && count($online_times['dates']) > 0) {
                                        foreach($online_times['dates'] as $dates) {
                                            $dt = convertUtcToLocal($dates, 'Y-m-d');
                                            if($dt >= $startDate && $dt < $endDate) {
                                                echo '<div class="time-btn">';
                                                    echo '<span>'.convertUtcToLocal($dates, 'l').'</span>';
                                                    echo '<span>'.convertUtcToLocal($dates, config('constants.DISPLAY_TIME_ZONE_FORMAT')).'</span>';
                                                echo '</div>';
                                            }
                                        }
                                    }
                                }
                            }
                            @endphp
                        </div>
                    </div>
                    <div class="au-time-zone-row">
                        <div class="au-time-zon-title">In Person</div>
                        <div class="time-btn-row">
                            @php
                            if(isset($metaArr['in_person_times']) && is_array($metaArr['in_person_times']) && count($metaArr['in_person_times']) > 0) {
                                foreach($metaArr['in_person_times'] as $in_person_times) {
                                    if(isset($in_person_times['dates']) && is_array($in_person_times['dates']) && count($in_person_times['dates']) > 0) {
                                        foreach($in_person_times['dates'] as $dates) {
                                            $dt = convertUtcToLocal($dates, 'Y-m-d');
                                            if($dt >= $startDate && $dt < $endDate) {
                                                echo '<div class="time-btn">';
                                                    echo '<span>'.convertUtcToLocal($dates, 'l').'</span>';
                                                    echo '<span>'.convertUtcToLocal($dates, config('constants.DISPLAY_TIME_ZONE_FORMAT')).'</span>';
                                                echo '</div>';
                                            }
                                        }
                                    }
                                }
                            }
                            @endphp
                        </div>
                    </div>
                    <div class="form campus-form">
                        <div class="input-group">
                            <input type="text" class="form-control" value="{!! route('onlinecampus') !!}" readonly>
                            <button class="btn" type="button" id="watchLinkForm" onclick="window.location.href='{!! route('onlinecampus') !!}'">Watch Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END AU-CAMPUS SECTION -->


@if(isset($metaArr['journeys']) && is_array($metaArr['journeys']) && count($metaArr['journeys']) > 0)
<!-- START AU-HISTORY SECTION -->
<section class="au-campus-sec">
    <div class="container">
        <div class="sec-title text-center">
            <strong>{!! @$metaArr['journey_subtitle'] !!}</strong>
            <h2>{!! @$metaArr['journey_title'] !!}</h2>
        </div>
        <!-- History For Web -->
        <div class="au-hitory-row d-none d-lg-flex">
            <div class="au-hitory-col" style="padding-right: 15px;">
                @foreach($metaArr['journeys'] as $key => $journeyl)
                @if($key%2 == 0)
                <div class="au-hitory-detail left">
                    <h4>{!! $journeyl['title'] !!}</h4>
                    <p>{!! $journeyl['description'] !!} @if(strlen($journeyl['description']) > 300)<a href="javascript:void(0)" class="read-more btnReadMore" data-year="{!! $journeyl['date'] !!}" data-img_type="{!! @$journeyl['img_type'] !!}" data-img="{!! getCmsFileUrl(@$journeyl['img']) !!}"><span>...</span> Read more</a>@endif</p>
                </div>
                @else
                <div class="au-hitory-date left">
                    <h5>{!! $journeyl['date'] !!}</h5>
                    @if(@$journeyl['img_type'] == "video")
                    <video loop autoplay muted playsinline>
                        <source src="{!! getCmsFileUrl(@$journeyl['img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$journeyl['img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <img src="{!! getCmsFileUrl(@$journeyl['img']) !!}" class="img-fluid">
                    @endif
                </div>
                @endif
                @endforeach
            </div>
            <div class="au-hitory-hr"></div>
            <div class="au-hitory-col" style="padding-left: 15px;">
                @foreach($metaArr['journeys'] as $key => $journeyr)
                @if($key%2 == 0)
                <div class="au-hitory-date right">
                    <h5>{!! $journeyr['date'] !!}</h5>
                    @if(@$journeyr['img_type'] == "video")
                    <video loop autoplay muted playsinline>
                        <source src="{!! getCmsFileUrl(@$journeyr['img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$journeyr['img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <img src="{!! getCmsFileUrl(@$journeyr['img']) !!}" class="img-fluid">
                    @endif
                </div>
                @else
                <div class="au-hitory-detail right">
                    <h4>{!! $journeyr['title'] !!}</h4>
                    <p>{!! $journeyr['description'] !!} @if(strlen($journeyr['description']) > 300)<a href="javascript:void(0)" class="read-more btnReadMore" data-year="{!! $journeyr['date'] !!}" data-img_type="{!! @$journeyr['img_type'] !!}" data-img="{!! getCmsFileUrl(@$journeyr['img']) !!}"><span>...</span> Read more</a>@endif</p>
                </div>
                @endif
                @endforeach
            </div>
        </div>
        <!-- /History For Web -->
        <!-- HISTORY READ-MORE MODAL -->
        <div class="modal fade historyParaModal" id="historyModal" tabindex="-1" aria-labelledby="historyModal" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="historyParaModalInfo">
                            <div class="year">
                                <h5 id="historyYear"></h5>
                            </div>
                            <div class="img-view">

                            </div>
                        </div>
                        <div id="historyModalBody"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /HISTORY READ-MORE MODAL -->
        <!-- History For Mobile -->
        <div class="au-hitory-row d-lg-none">
            <div class="au-hitory-col" style="padding-right: 15px;">
                @foreach($metaArr['journeys'] as $key => $journeyl)
                <div class="au-hitory-date left">
                    <h5>{!! $journeyl['date'] !!}</h5>
                    @if(@$journeyl['img_type'] == "video")
                    <video loop autoplay muted playsinline>
                        <source src="{!! getCmsFileUrl(@$journeyl['img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$journeyl['img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <img src="{!! getCmsFileUrl(@$journeyl['img']) !!}" class="img-fluid">
                    @endif
                </div>
                <div class="au-hitory-detail left">
                    <h4>{!! $journeyl['title'] !!}</h4>
                    <p>{!! $journeyl['description'] !!} @if(strlen($journeyl['description']) > 300)<a href="javascript:void(0)" class="read-more btnReadMore" data-year="{!! $journeyl['date'] !!}" data-img_type="{!! @$journeyl['img_type'] !!}" data-img="{!! getCmsFileUrl(@$journeyl['img']) !!}"><span>...</span> Read more</a>@endif</p>
                </div>
                @endforeach
            </div>
            <div class="au-hitory-hr"></div>
        </div>
        <!-- /History For Mobile -->
    </div>
</section>
<!-- END AU-HISTORY SECTION -->
@endif

<!-- START AU-LOCATION SECTION -->
<section class="au-location-sec">
    <div class="container">
        <div class="au-location-row">
            <div class="au-location-box">
                <img src="{!! asset('assets/frontend/images/mappin-icon-blue.png') !!}" class="img-fluid" alt="{!! removeTagsFromAltText($siteSettings->location) ?? config('constants.CONTACT_LOCATION') !!}">
                <h5>Location</h5>
                <p>{!! $siteSettings->location ?? config('constants.CONTACT_LOCATION') !!}</p>
            </div>
            <div class="au-location-box">
                <img src="{!! asset('assets/frontend/images/calender-icon-blue.png') !!}" class="img-fluid">
                <h5>Service Time</h5>
                @php
                $common_timeArr = [];
                if(isset($metaArr['common_times']) && is_array($metaArr['common_times']) && count($metaArr['common_times']) > 0) {
                    foreach($metaArr['common_times'] as $common_times) {
                        if(isset($common_times['dates']) && is_array($common_times['dates']) && count($common_times['dates']) > 0) {
                            foreach($common_times['dates'] as $dates) {
                                $dt = convertUtcToLocal($dates, 'Y-m-d');
                                if($dt >= $startDate && $dt < $endDate) {
                                    $common_timeArr[convertUtcToLocal($dates, 'l')][] = convertUtcToLocal($dates, config('constants.DISPLAY_TIME_ZONE_FORMAT'));
                                }
                            }
                        }
                    }
                }
                if(count($common_timeArr) > 0) {
                    foreach($common_timeArr as $key=>$val) {
                        echo '<p>'.$key." - ".implode(" | ",$val).'</p>';
                    }
                }
                @endphp
            </div>
        </div>
        <div class="map-wrapp">
            <iframe src="{!! $siteSettings->location_map_link ?? config('constants.LOCATION_MAP_LINK') !!}" width="100%" style="border:0;height:480px" allowfullscreen loading="lazy"></iframe>
        </div>
        <!-- <a href="javascript:void(0)" class="btn btn-theme-blue">Visit us</a> -->
    </div>
</section>
<!-- END AU-LOCATION SECTION -->

<!-- START AU-SERVICE SECTION -->
<section class="au-service-sec sec-py pt-0">
    <div class="container">
        <div class="row g-lg-5">
            @for($i=1;$i<=3;$i++)
            <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0 mx-auto">
                <div class="au-service-card">
                    @if(@$metaArr['quick_link_box'.$i.'_img_type'] == "video")
                    <video autoplay loop muted playsinline>
                        <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" class="img-fluid au-service-img">
                    @endif
                    <h6>{!! @$metaArr['quick_link_box'.$i.'_category'] !!}</h6>
                    <h5>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h5>
                    <a href="{!! @$metaArr['quick_link_box'.$i.'_more_info'] !!}" class="au-service-btn" @if(@$metaArr['quick_link_box'.$i.'_more_info_open_in_new_tab']) target="_blank" @endif>
                        <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" class="img-fluid" alt="arrow-right-blue">
                    </a>
                </div>
            </div>
            @endfor
        </div>
    </div>
</section>
<!-- END AU-SERVICE SECTION -->

@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')

@section('js')
<script>
$(document).on('click',".btnReadMore", function () {
    var body = $(this).closest('.au-hitory-detail').find("p").first().html();
    var body = removeElements(body, "a");
    $('#historyModal .modal-title').html($(this).closest('.au-hitory-detail').find("h4").first().text());
    $('#historyYear').html($(this).data('year'));
    $('#historyModalBody').html("<p>"+body+"</p>");
    if($(this).data('img_type') == "video") {
        $('#historyModal .img-view').html('<video loop autoplay muted playsinline><source src="'+$(this).data('img')+'" type="video/mp4"><source src="'+$(this).data('img')+'" type="video/ogg">Your browser does not support the video tag.</video>');
    } else {
        $('#historyModal .img-view').html('<img src="'+$(this).data('img')+'" class="img-fluid">');
    }
    $('#historyModal').modal('show');
});
</script>
@stop
@endsection