@extends('base')

@section('title', __('How to Apply'))

@section('content')
    <div class="how-to-container" id="how-to-container">
        <div class="how-to-video relativeContainer">
            <video id="how-to-movie" autoplay loop>
                <source src="{{asset('video/application.mp4')}}" type="video/mp4">
                Error
            </video>

            <div class="how-to-header">
                <img src="{{config('locations.systemImage.asset').'uku.gif'}}">

                <a class="button relativeContainer add-to-bag-btn" href="{{route('courses_catalog')}}">
                    {{__('Get started')}} <i class="chevron right icon"></i>
                </a>
            </div>

            <div class="how-to-tabs">
                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Register-Login')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Safe register')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Quick login')}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Choose your favourite course')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Browse universities')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Choose your courses')}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Shopping bag and payment')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Add to bag')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Confirm your order')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Secure checkout')}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Get your exclusive service')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('My exclusive consultant')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('My exclusive administrator')}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Submit personal information')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Fill in personal information form')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Upload application documents')}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="how-to-tab">
                    <div class="header font-title">
                        {{__('Check your application status')}}
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Track realtime application status')}}
                            </span>
                        </div>

                        <div class="item">
                            <span class="text relativeContainer">
                                <span class="circle"></span>

                                {{__('Realtime interaction with consultant')}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // $('.how-to-container').on('click', 'video', function(){
        //     if (this.paused) {
        //         this.play();
        //     } else {
        //         this.pause();
        //     }
        // });
    </script>
@endsection