@extends('base')

@section('title')
    {{__('Custom Course Details')}}
@endsection

@section('content')
    @php
        use App\Enumerables\Currency;
        use App\VirtualCourse;

        /**
         * @var VirtualCourse $course
         */

        $language = config('app.locale');
        $currency = $_COOKIE['currency'] ?? Currency::GBP;
        $currencySign = ($currency == Currency::GBP) ? '£ ' : '¥ ';
        $isBasic = !$course->isAdvanced;
        $isDiscountedGBP = ($course->originalPricePound > $course->pricePound);
        $isDiscountedCNY = ($course->originalPriceChinese > $course->priceChinese);
        $isDiscounted = ($currency == Currency::GBP) ? $isDiscountedGBP : $isDiscountedCNY;
        $version = config('app.version');
    @endphp

    <div class="ui basic segment no-margin">
        <div class="ui grid">
            <div class="two wide column"></div>
            <div class="ten 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">
                        @if($language === 'en')
                            {{ $course->courseName}}
                        @else
                            {{ $course->courseNameChinese }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui grid" id="courseDetailsPage">
        <div class="row">
            <div class="sixteen wide column">
                <div class="header-container">
                    <div class="col col-left col-virtual-course">
                        <a onclick="window.history.back()">
                            <i class="ui chevron left icon"></i>
                            <span class="font-title">{{__('Back')}}</span>
                        </a>

                        <img class="image" src="@if($course->images != '' ){{config('locations.virtualCourseImage.asset').$course->images}}@else{{config('locations.systemImage.asset').'new_home.jpg'}}@endif" alt="">
                    </div>

                    <div class="col col-right col-virtual-course">
                        <div class="header font-title">
                            <span class="course-name virtual-course-name">
                                @if($language === 'en')
                                    {{ $course->courseName}}
                                @else
                                    {{ $course->courseNameChinese }}
                                @endif
                            </span>

                            <span class="virtual-course-description">
                                @if($language === 'en')
                                    {{ $course->description}}
                                @else
                                    {{ $course->descriptionChinese }}
                                @endif
                            </span>
                        </div>

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

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

                                <div class="price-main {{($isDiscounted)?'discounted':''}}">
                                    <span class="price discount-price">
                                        @if($currency == \App\Enumerables\Currency::GBP)
                                            {{$currencySign.number_format($course->pricePound, 2, ".", ",")}}
                                        @else
                                            {{$currencySign.number_format($course->priceChinese, 2, ".", ",")}}
                                        @endif
                                    </span>

                                    @if($isDiscounted)
                                        <span class="price basic-price relativeContainer">
                                            @if($currency == \App\Enumerables\Currency::GBP)
                                                {{$currencySign.number_format($course->originalPricePound, 2, ".", ",")}}
                                            @else
                                                {{$currencySign.number_format($course->originalPriceChinese, 2, ".", ",")}}
                                            @endif

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

                                <div class="description">
                                    @if($isBasic)
                                        {{__('Service deposit return_1')}}

                                        <span class="goToUniversities" onclick="goToUniversities()">
                                            {{__('Service deposit return_2')}}
                                        </span>

                                        {{__('Service deposit return_3')}}
                                    @endif
                                </div>
                            </div>

                            <div class="price-application">
                                <span class="text">
                                    <span class="bold">
                                        {{__('Virtual Course Application Fee')}}
                                    </span>
                                </span>
                            </div>

                            <div class="number">
                                <span data-value="-1">
                                    <img src="{{config('locations.systemImage.asset').'minus.png'}}" alt="">
                                </span>

                                <input type="text" name="number" id="number" maxlength="2" min="1" max="99" value="1" step="1" required>

                                <span data-value="1">
                                   <img src="{{config('locations.systemImage.asset').'plus.png'}}" alt="">
                                </span>
                            </div>

                            <div class="ucas-price">
                                <span class="text">{{__('UCAS application fee')}}</span>
                            </div>
                        </div>

                        <div class="buttons">
                            @if(\Illuminate\Support\Facades\Auth::check() && isset($productID))
                                <div
                                    class="button add-to-bag-btn font-title"
                                    data-course-id="{{$productID}}"
                                    onclick="addCourseToCart('{{$course->id}}','{{route('addVirtualCourseToCart')}}', 'number');"
                                >
                                    {{__('Add to bag')}}
                                </div>
                            @else
                                {{--<div class="button disabled">--}}
                                <div class="button add-to-bag-btn font-title" data-course-id="{{$productID}}" onclick="cartClicked('{{$course->id}}')">
                                    {{__('Add to bag')}}
                                </div>
                            @endif

                            @if($randomStaffContact)
                                <a class="button" onclick="showQrModal()">
                                    {{__('Chat with Us')}}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="content-container">
                    <div class="ui tabular menu font-title">
                        <div class="item active" data-tab="page1">{{__('Service Introduction')}}</div>
                        <div class="item" data-tab="page2">{{__('Service Process')}}</div>
                    </div>

                    <div class="ui tab active" id="courseDetailsPage1" data-tab="page1">
                        <div class="custom-course-description">
                            <div class="service-introduction-block relativeContainer">
                                <div class="header relativeContainer font-title">
                                    {{__('Service Introduction')}}
                                </div>

                                <div class="service-description">
                                    {{__('Virtual Course service description')}}
                                </div>

                                <img src="{{config('locations.systemImage.asset') . 'virtual-course-service-introduction-' . ($language == 'en' ? 'en' : 'zh') . '.png?' . $version}}" alt="">

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

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

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

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

                            @if(!empty($universities[0]))
                                @include('catalog.course_details_components.partner_universities', ['isPartner'=>$isBasic])
                            @endif
                        </div>

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

                        <div class="virtual-stages-block service-features">
                            <div class="header relativeContainer font-title">
                                {{__('Service Features')}}
                            </div>

                            @if($language == 'en')
                                <img src="{{config('locations.systemImage.asset').'virtual-course-service-features-en.png'.'?'.$version}}" alt="">
                            @else
                                <img src="{{config('locations.systemImage.asset').'virtual-course-service-features-zh.png'.'?'.$version}}" alt="">
                            @endif
                        </div>

                        @include('catalog.course_details_components.expense_description', ['lowPrice'=>$isBasic])

                        <div class="recommended-block">
                            <div class="background">
                                <div class="content">
                                    <div class="header-container">
                                        <div class="header relativeContainer popular-universities font-title">
                                            {{__('Popular University')}}
                                        </div>

                                        <a class="button" href="{{route('universities_catalog')}}">
                                            <span class="text">
                                                {{__('Go to University Page')}}
                                            </span>

                                            <i class="chevron right icon"></i>
                                        </a>
                                    </div>

                                    <div class="table-container">
                                        <div class="table-row header-row">
                                            <div class="col col-wide">
                                                <div class="line">
                                                    {{__('Universities and Courses')}}
                                                </div>
                                            </div>

                                            <div class="col">
                                                {{__('Tuition Fee')}}
                                            </div>

                                            <div class="col">
                                                {{__('Price')}}
                                            </div>
                                        </div>

                                        <div class="divider"></div>

                                        @foreach($courseRecommendations as $value)
                                            @php($discount = isset($value->discountPrice))

                                            <a class="table-row" href="{{route('showCourse',['courseID'=>$value->id])}}">
                                                <div class="col col-wide">
                                                    <div class="line bold font-title">
                                                        {{$value->uniName}}
                                                        -
                                                        {{ $value->courseName}}
                                                    </div>

                                                    <div class="line">
                                                        <span>
                                                            {{__('Type')}}:
                                                            {{$value->courseLevelName}}
                                                        </span>

                                                        <span>
                                                        {{__('Duration')}}:
                                                            @if(is_array(json_decode($value->duration)))
                                                                @foreach(json_decode($value->duration) as $key=>$duration)
                                                                    {{$duration}} {{__('Months')}}
                                                                    @if($key+1<count(json_decode($value->duration)))
                                                                        /
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </span>

                                                        <span>
                                                        {{__('Start date')}}:
                                                            @if(is_array(json_decode($value->startDate)))
                                                                @foreach(json_decode($value->startDate) as $key=>$startDate)
                                                                    {{__($startDate)}}
                                                                    @if($key+1<count(json_decode($value->startDate)))
                                                                        /
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="col">
                                                    <div class="line">
                                                        £{{$value->tuitionFees}}
                                                    </div>
                                                </div>

                                                <div class="col ">
                                                    <div class="line bold">
                                                        @if($discount)
                                                            <span class="price new">
                                                                @if($currency == Currency::GBP)
                                                                    {{"£ "}}{{number_format(($value->discountPrice), 2, ".", ",")}}
                                                                @else
                                                                    {{"¥ "}}{{number_format(($value->discountPrice), 2, ".", ",")}}
                                                                @endif
                                                            </span>
                                                        @endif

                                                        <span class=" price @if($discount){{' crossed'}}@endif">
                                                            @if($currency == Currency::GBP)
                                                                {{"£ "}}{{number_format(($value->serviceFees), 2, ".", ",")}}
                                                            @else
                                                                {{"¥ "}}{{number_format(($value->serviceFeesChinese), 2, ".", ",")}}
                                                            @endif

                                                            <span></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>

                                            <div class="divider"></div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui tab" id="courseDetailsPage2" data-tab="page2">
                        <div class="steps-block virtual-course">
                            <div class="header relativeContainer font-title">
                                {{__('Service Process')}}
                            </div>

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

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

    @if($randomStaffContact)
        {{--Consulte Us QR code modal--}}
        @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')
        ])
        {{--Sales QR code modal--}}
    @endif

    @include('modals.add_to_cart_validation_modal')

    <script src="{{ asset('js/cardNumberValidation.js' ) }}"></script>
    <script>
        //GET
        var numberInput = $('#number');
        var route = '{{route('virtual_course_load_universities')}}';

        $(function () {
            $('.number > span').on('click', function () {
                var value = (numberInput.val() * 1) + ($(this).attr('data-value') * 1);

                if (value > 0 && value <= 100){
                    $('#number').val(value);
                }
            });

            numberInput.on('keypress', function(e) {
                return checkIfNumber(e);
            });
        });

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

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