@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')}}: {{__('N/A')}}</span>
                            <span>{{__('QS Ranking')}}: {{__('N/A')}}</span>
                        </div>

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

                        <div class="details">
                            <div class="price-service select-start-date">
                                <div class="title-main application-fee-course">
                                    <div class="title basic-title font-title">
                                        {{__('Charge')}}
                                    </div>
                                </div>

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

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

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

                            @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')}}',
                                        true
                                    );"
                                >
                                    {{ __('Add to Bag') }}
                                </a>
                            @else
                                <a class="button add-to-bag-btn font-title" onclick="cartClicked('{{$course->courseID}}')">
                                    {{ __('Add to Bag') }}
                                </a>
                            @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="courseFeesDetailsPage" data-tab="page1">
                        <div class="course-fees-container">
                            <div class="course-fees-header">
                                <div class="title relativeContainer font-title">
                                    {{__('Cost Details')}}
                                </div>
                            </div>

                            <div class="course-fees-content">
                                <div class="course-fees-text text-1">
                                    {{__('course-fees-text-1')}}
                                </div>

                                <div class="course-fees-text text-2">
                                    {{__('course-fees-text-2')}}
                                </div>

                                <div class="course-fees-text text-3 {{(config('app.locale') === 'en') ? 'text-en' : ''}}">
                                    <span class="bold">
                                        {{__('course-fees-text-3-1')}}
                                    </span>

                                    {{__('course-fees-text-3-2')}}
                                </div>
                            </div>

                            <div class="course-fees-note">
                                {{__('course-fees-note')}}
                            </div>
                        </div>
                    </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);
        });

        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 = document.referrer;
            } else {
                window.history.back();
            }
        }
    </script>

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