@extends('base')

@section('title', __('Course Details'))

@section('content')
    <div class="ui basic segment no-margin">
        <div class="ui grid">
            <div class="one wide column"></div>
            <div class="eleven wide column">
                <div class="ui breadcrumb">
                    <a href="{{ route('home') }}" class="section">{{__('Home')}}</a>
                    <i class="right angle icon divider"></i>
                    <a href="{{ route('courses_catalog') }}" class="section">{{ __('Course List') }}</a>
                    <i class="right angle icon divider"></i>
                    <div class="active section ellipsis">
                        {{$course->courseName}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" value="{{$course->enrollment_year_check}}" id="isCourse">
    <div class="ui grid" id="courseDetailsPage">
        <div class="row">
            <div class="sixteen wide column">
                <div class="header-container">
                    <div class="col col-left relativeContainer">
                        <a onclick="goBack()">
                            <i class="ui chevron left icon"></i>
                            <span class="font-title">{{__('Back')}}</span>
                        </a>

                        <div id="zoom">
                            <div id="zoom_div">
                                <div id="zoom_img">
                                    @if(isset($course->adImages))
                                        @foreach($course->adImages as $one)
                                            <div class="name">
                                                <img
                                                    class="{{isset($course->adImages) ? 'small_icon': ''}}"
                                                    src="{{config('locations.courseAdImage.asset').$one->filePath}}"
                                                    alt=""
                                                >
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <img
                                    class="image {{isset($course->adImages) ? '': 'large_icon'}}"
                                    src="
                                        @if($course->courseImage != '')
                                            {{config('locations.courseImage.asset').$course->courseImage}}
                                        @elseif($course->uniPictureLarge != '')
                                            {{config('locations.universityImage.asset').$course->uniPictureLarge}}
                                        @else
                                            {{config('locations.systemImage.asset').'new_home.jpg'}}
                                        @endif
                                        "
                                    alt=""
                                >
                            </div>
                        </div>
                    </div>

                    <div class="col col-right">
                        <div class="header font-title">
                            <a class="university-name" href="{{ route('uniDetails', [$course->universityID]) }}">
                                {{ $course->uniName }}
                            </a>

                            <span class="course-name">
                                {{ $course->courseName }}
                            </span>
                        </div>

                        <div class="rankings">
                            <span>{{__('Times Ranking')}}: @if($course->timesRanking!=0){{$course->timesRanking}}@else{{__('N/A')}}@endif</span>
                            <span>{{__('QS Ranking')}}: @if($course->QSRanking!=0){{$course->QSRanking}}@else{{__('N/A')}}@endif</span>
                        </div>

                        <div id="Student_Application" class="font-title">
                            {!! $course->subtitle ?? '' !!}
                        </div>

                        <div class="details">
                            @if($isCheap)
                                <div  id="entrance">
                                    {{--需要判读是否为合作院校 不为合作院校不显示此处内容--}}
                                    <div id="entrance_">
                                        {!! __('course-details-yellow-text') !!}
                                    </div>
                                </div>
                            @endif

                            <div class="price-service select-start-date">
                                <div class="title-main {{($discount) ? 'discounted' : ''}}">
                                    @if($discount)
                                        <div class="title discount-title font-title">
                                            @if($isCheap)
                                                {{__('Service Deposit NOW')}}
                                            @else
                                                {{__('Service Charge NOW')}}
                                            @endif
                                        </div>
                                    @endif

                                    <div class="title basic-title font-title">
                                        @if($isCheap)
                                            {{__('Service Deposit')}}@if($discount){{__('Was')}}@endif
                                        @else
                                            {{__('Service Charge')}}@if($discount){{__('Was')}}@endif
                                        @endif
                                    </div>
                                </div>

                                <div class="price-main {{($discount)?'discounted':''}}">
                                    @if($discount)
                                        <span class="price discount-price">
                                            {{$currencySign.number_format(($course->discountPrice), 2, ".", ",")}}
                                        </span>
                                    @endif

                                    <span class="price basic-price relativeContainer">
                                        {{$currencySign.number_format($course->serviceFees, 2, ".", ",")}}

                                        <span class="stroke"></span>
                                    </span>
                                </div>

                                @if($discount && !empty($course->countdown))
                                    @include('components.styledCountdown', ['countdown' => $course->countdown])
                                @endif
                            </div>

                            @if(!empty($course->application_fees_course_id))
                                <div class="course-application-fees">
                                    <span class="text font-title bold">
                                        {{__('related-costs')}}
                                    </span>

                                    <a class="link bold" href="{{route('showCourse', ['courseID' => $course->application_fees_course_id])}}">
                                        {{__('view-application-fees')}}
                                    </a>

                                    <img
                                        class="application-fee-img"
                                        src="{{config('locations.systemImage.asset').'information_blue.png'}}"
                                        onclick="$('#applicationFeesModal').modal('show');"
                                        alt=""
                                    >
                                </div>
                            @endif

                            @if($course->enrollment_year_check != 1)
                                <div class="BorderColorf bor-color">
                                    <div class="price-application price-time startDateYY">
                                        <span class="text font-title bold {{($language === 'en') ? 'long' : ''}}">
                                            {!! __('Start Date Year') !!}
                                        </span>

                                        <div class="inputs">
                                            @foreach($startDateData as $key => $yearData)
                                                <button class="newinput startDateYearInput" readonly="readonly"  name="startDateYY">{{$key}}</button>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="price-application price-time startDateMM ">
                                        <span class="text font-title bold {{($language === 'en')?'long':''}}">
                                            {!! __('Start Date Month') !!}
                                        </span>

                                        <div class="inputs" id="Div_startDateMM"></div>
                                    </div>
                                </div>

                                @if(empty($startDateData))
                                    <div class="price-application error-text">
                                        <span id="enrollmentYearMessage" class="text TipsColor">
                                            {{__('no_enrollment_year_notice')}}
                                        </span>
                                    </div>
                                @endif
                            @endif

                            <div class="price-application error-text">
                                <span id="startDateMessage" class="text TipsColor hidden">
                                    {{__('Please select admission date')}}
                                </span>
                            </div>
                        </div>

                        <div class="buttons">
                            <a class="button" onclick="showQrModal()">
                                {{__('Chat with Us')}}
                            </a>

                            @if($course->enrollment_year_check != 1 && empty($startDateData))
                                <a class="button font-title disabled-add-to-bag">
                                    {{ __('Add to Bag') }}
                                </a>
                            @else
                                @if (\Illuminate\Support\Facades\Auth::check())
                                    <a class="button add-to-bag-btn font-title" data-course-id="{{$course->courseID}}" onclick="addCourseToCartWithStartDate('{{$course->courseID}}','{{route('addCourseToCart')}}');">
                                        {{ __('Add to Bag') }}
                                    </a>
                                @else
                                    <a class="button add-to-bag-btn font-title" onclick="cartClicked('{{$course->courseID}}')">
                                        {{ __('Add to Bag') }}
                                    </a>
                                @endif
                            @endif
                        </div>

                        @if($course->courseLevel == 2 && $course->thirdPartyStatus)
                            <div class="ucas-price">
                                <span class="text">{{__('ucas-application')}}</span>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="content-container">
                    <div class="ui tab active" id="courseDetailsPage1" data-tab="page1">
                        <div class="description-block">
                            <div class="title relativeContainer font-title">
                                {{__('Course Information')}}
                            </div>

                            <div class="content">
                                <div class="image-container">
                                    <img src="{{config('locations.systemImage.asset').'combo-image.png'}}" alt="">
                                </div>

                                <div class="information-container">
                                    <div class="information-list">
                                        <div class="item">
                                            <span>{{__('Course Type')}}:</span>
                                            <span>
                                                {{ $course->courseLevelName}}
                                            </span>
                                        </div>

                                        <div class="item">
                                            <span>{{__('Duration')}}:</span>
                                            <span>
                                                @if(is_array(json_decode($course->duration)))
                                                    @foreach(json_decode($course->duration) as $key=>$duration)
                                                        {{$duration}} {{__('months')}}
                                                        @if($key+1<count(json_decode($course->duration)))
                                                            /
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </span>
                                        </div>

                                        <div class="item inline">
                                            <div class="block">
                                                <span>{{__('course-start')}}:</span>
                                                <span class="capitalize">
                                                    @if(is_array(json_decode($course->startDate)))
                                                        @foreach(json_decode($course->startDate) as $key=>$startDate)
                                                            {{__($startDate)}}
                                                            @if($key+1<count(json_decode($course->startDate)))
                                                                /
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                </span>
                                            </div>
                                        </div>

                                        <div class="item inline">
                                            <div class="block">
                                                <span class="relativeContainer popupTrigger">
                                                    {{__('Tuition Fee (per year)')}}:
                                                    <img src="{{config('locations.systemImage.asset').'question_mark.png'}}" alt="">

                                                    <div class="ui popup" id="course_details_tuition">
                                                        {{__('Tuition fees can be changed')}}
                                                        <span class="container">
                                                            <span class="triangle"></span>
                                                        </span>
                                                    </div>
                                                </span>

                                                <span>
                                                    £{{number_format($course->tuitionFees, 2, '.', ',')}}
                                                </span>
                                            </div>
                                        </div>

                                        @if(!empty($deadline))
                                            <div class="item inline">
                                                <div class="block">
                                                    <span>{{__('application-deadline')}}:</span>
                                                    <span>
                                                        {{$deadline}} {{__('(UK time)')}}
                                                    </span>
                                                </div>
                                            </div>
                                        @endif
                                        @if(isset($course->bank_cas) && $course->bank_cas == 1)
                                            <div class="item inline">
                                                <div class="block">
                                                    <span class="notice">＊{{__('Bank Statement is needed to request CAS')}}</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <span class="description">
                                        {!! nl2br($course->description) !!}
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if(!empty($course->entry_requirements))
                            @include('catalog.course_details_components.entry_requirements')
                        @endif

                        <div class="Top_10-block">
                            @if($language === 'en')
                                <div class="header relativeContainer font-title">
                                    {{__('10 Reasons to Choose UOFFER GLOBAL')}}
                                </div>
                                <img src="{{config('locations.systemImage.asset').'Top_10_2.jpg'}}?{{$version}}" alt="">
                            @else
                                <img src="{{config('locations.systemImage.asset').'10-reasons-zh.jpg'}}?{{$version}}" alt="">
                            @endif
                        </div>

                        @include('catalog.course_details_components.application_documents', ['language' => $language])

                        <div class="stages-block relativeContainer">
                            {{--需要判读是否为合作院校 合作院校显示此处内容--}}
                            <div class="header font-title">
                                {{__('服务项目')}}
                            </div>
                            @if($language === 'en')
                                <img src="{{config('locations.systemImage.asset').'stages-block-en.jpg'}}?{{$version}}" alt="">
                            @else
                                <img src="{{config('locations.systemImage.asset').'stages-block-zh.jpg'}}?{{$version}}" alt="">
                            @endif
                            <div class="center" id="staite">
                                <div class="header relativeContainer font-title">
                                    {{__('服务流程')}}
                                </div>
                            </div>
                        </div>

                        <div class="introduction-block relativeContainer">
                            {{--需要判读是否为合作院校 合作院校显示此处内容--}}
                            <div class="header font-title">
                                {{__('服务简介')}}
                            </div>

                            @if($language === 'en')
                                <img src="{{config('locations.systemImage.asset').'introduction-en.png?v='.$version}}" alt="">
                            @else
                                <img src="{{config('locations.systemImage.asset').'introduction-zh.png?v='.$version}}" alt="">
                            @endif

                            <div class="introduction_div">
                                <p>
                                    {{__('所有合作院校')}}
                                </p>
                                <p>
                                    {{__('所有顶级大学')}}
                                </p>
                                <p>
                                    {{__('所有合作院校')}}
                                </p>
                                <p>
                                    {{__('所有顶级大学')}}
                                </p>
                            </div>

                            <div class="introduction_div course-fees">
                                @php(
                                    $prices = explode(';', config('app.price_course_' . ($currencyString ?? '')))
                                )

                                <p>
                                    {{$prices[0] ?? ''}}
                                </p>

                                <p>
                                    {{$prices[1] ?? ''}}
                                </p>

                                <p>
                                    {{$prices[2] ?? ''}}
                                </p>

                                <p>
                                    {{$prices[3] ?? ''}}
                                </p>
                            </div>

                            <div id="fee-block">
                                <div class="header relativeContainer font-title">
                                    {{__('Fee Details')}}
                                </div>

                                <div class="fee-block-description bold center">{{__('This product uses an online one-time payment method')}}</div>

                                @if($isCheap)
                                    <div id="fee-block-text-container">
                                        <ul>
                                            <li>
                                                <span class="circle"></span>
                                                <span class="bold">{{__('UKUOFFER service deposit')}}:</span>
                                                <span class="list-text">
                                                    @lang('Service-Deposit-Description')
                                                </span>
                                            </li>
                                            <li>
                                                <span class="circle"></span>
                                                <span class="bold">{{__('University Application Fee')}}:</span>
                                                <span class="list-text">
                                                    {{__('The University Application Fee is a third-party fee charged by the university or UCAS. This payment will be forwarded directly to the university and all additional information can be found on the university’s official website.')}}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                @else
                                    <div id="fee-block-text-container">
                                        <ul>
                                            <li>
                                                <span class="circle"></span>
                                                <span class="bold">{{__('included-line-1-bold-fee')}}:</span>
                                                <span class="list-text">
                                                {{__('The service charge is an application fee for UOFFER GLOBAL that applies to all non-partnered universities. Students are not applicable to any refunds after enrolment.')}}
                                            </span>
                                            </li>
                                            <li>
                                                <span class="circle"></span>
                                                <span class="bold">{{__('University Application Fee')}}:</span>
                                                <span class="list-text">
                                                {{__('The University Application Fee is a third-party fee charged by the university or UCAS. This payment will be forwarded directly to the university and all additional information can be found on the university’s official website.')}}
                                            </span>
                                            </li>
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>

                        @include('catalog.course_details_components.recommended_courses')
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('common.modals.contents.qr_modal', [
        'header' => __('Signed up successfully_2'),
        'image' => $randomStaffContact->wechatQR ?? (config('locations.systemImage.asset') . 'QRWechat.jpg' . '?' . $version),
        'subText' => __('Contact our experts')
    ])

    @include('modals.add_to_cart_validation_modal')
    @include('catalog.course_details_components.application_fees_modal')

    <script src="{{asset('js/simpleCountdown.js').'?'.$version}}"></script>
    <script>
        var container;
        var cart_container;

        $(function () {
            var parent = $('#dropdown-menu');

            parent.append('{!! $fixedRow !!}');

            container = $('.container:not(.add-to-cart)', parent);
            cart_container = $('.container.add-to-cart', parent);

            $('.col-right .buttons').visibility({
                once: false,
                continuous: true,
                onTopPassed: function(){
                    cart_container.removeClass('hidden');
                    container.addClass('hidden');
                },
                onTopPassedReverse: function(calculations){
                    cart_container.addClass('hidden');
                    container.removeClass('hidden');
                }
            });
        });
    </script>

    <script>
        $("#zoom_img div").click(function () {
            var zoomimg = $(this).find("img").attr("src");

            $(this).addClass("zoom_border")
                .siblings(".name")
                .removeClass("zoom_border");

            $(".image", '#zoom_div').attr("src", zoomimg);
        })
    </script>
    <script>
        var route = '{{route('course_load_universities')}}';
        var startDateData = JSON.parse('{!! json_encode($startDateData) !!}');
        var months = {
            '01':'JAN',
            '02':'FEB',
            '03':'MAR',
            '04':'APR',
            '05':'MAY',
            '06':'JUN',
            '07':'JUL',
            '08':'AUG',
            '09':'SEP',
            '10':'OCT',
            '11':'NOV',
            '12':'DEC',
        };

        $(function () {
            $('.popupTrigger img').popup({
                popup: $('#course_details_tuition')
            });

            $('#student-background-id').on('change', function(){
                $('.course-requirements-table #t_'+$(this).val()).removeClass('force-hidden')
                    .siblings('tr:not(.requirements-title)')
                    .addClass('force-hidden');
            });

            styledCountdown($('.timer'));
            iniStartDate();
        });

        function goToUniversities() {
            $('html,body').animate({
                scrollTop: $('#partnered-universities').offset().top
            });
        }

        function iniStartDate() {
            showHideStartDateMessage(0);
            $('.startDateYearInput').click(function () {
                setStartYear($(this));
            });

            addNewInputEvents();
            showStartDateMonths({{$firstYear}});
            setStartDateFromCart();
        }
        let language = "{{$language}}";
        let quarterly = {
          "Spring": "春季",
          "Summer": "夏季",
          "Autumn": "秋季",
          "Winter": "冬季"
        }

        function showStartDateMonths(yy) {
            resetMonth();

            if (startDateData.length  !== 0) {
                for (var i = 0; i < startDateData[yy].length; i++) {
                    var value = startDateData[yy][i].replace(/\D/g,'');
                    value=(value <=9)?'0'+value.replace(/0/g,''):value;

                    var index = startDateData[yy][i];
                    var text = months.hasOwnProperty(index)?months[index]:index;

                    $("#Div_startDateMM").append('<button  data="'+value+'" class="newinput startDateMonthInput" readonly=""readonly  name="startDateMM ">'+text+'</button>');
                }
            }

            addNewInputEvents();
        }


        function resetMonth() {
            selectedStartDateMonth = '';
            $("#Div_startDateMM").empty();
        }

        function addNewInputEvents() {
            $('.startDateMonthInput').click(function () {
                setStartMonth($(this));
            });

        }
        function showHideStartDateMessage(status) {
            if (status == 1) {
            	$(".bor-color").addClass("BorderColorr").removeClass("BorderColorf");
                $("#startDateMessage").show();
            } else {
            	$(".bor-color").addClass("BorderColorf").removeClass("BorderColorr");
                $("#startDateMessage").hide();
            }
        }

        function setStartMonth(element) {
            if (!element) return;
            if (element.hasClass("changeinput")) {
                element.removeClass('changeinput');
                selectedStartDateMonth='';
            } else {
                element.siblings('button').removeClass('changeinput');
                element.addClass('changeinput');
                selectedStartDateMonth=element.attr("data");
            }
            showHideStartDateMessage(0);
        }

        function setStartYear(element) {
            if(!element) return;
            if(element.hasClass("changeinput")){
                element.removeClass('changeinput');
                selectedStartDateYear='';
            }else{
                element.siblings('button').removeClass('changeinput');
                element.addClass('changeinput');
                selectedStartDateYear = element.text();
                showStartDateMonths(element.text());
            }
            showHideStartDateMessage(0);
        }

        function setStartDateFromCart() {
            var cartSelectedStartYear = '{{$cartSelectedStartYear}}';
            var cartSelectedStartMonth = '{{$cartSelectedStartMonth}}';
            if (cartSelectedStartYear && cartSelectedStartMonth) {
                setStartYear($('button.startDateYearInput:contains('+cartSelectedStartYear+')'));
                setStartMonth($('button.startDateMonthInput[data="'+cartSelectedStartMonth+'"]'));
            }
        }

        function goBack() {
            if (document.referrer === '' || document.referrer.indexOf('{{url('/')}}') === -1) {
                window.location.href = '{{route('courses_catalog')}}';
            } else if (document.referrer.indexOf('courseDetails') !== -1) {
                window.location.href = '{{route('courses_catalog')}}';
            } else {
                window.history.back();
            }
        }
    </script>

    @include('catalog.course_details_components.shared_scripts', [
        'bagRoute' => route('addCourseToCart'),
        'loadMore' => true
    ])
@endsection