@extends('layouts.base_login')

@section('inner_content')
    <transition-component group enter-class="animate__animated animate__fadeInRightBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig">
        <div class="row" key="1">
            <div class="col-12 col-md no-padding" v-show="!$store.getters.isShowing('registrationForm')">
                <div class="padding-50 bg-white h-100">
                    <div class="row" v-show="!$store.getters.isShowing('forgetPassword')">
                        <div class="col">
                            <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
                            <div class="row" v-show="!$store.getters.isLoading('loginSection')">
                                <div class="col">
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <div class="inline v-align-middle">
                                                <div class="font-heading fs-20 all-caps text-primary no-margin lh-28 bold">Welcome Back</div>
                                                <p class="no-margin fs-11 muted light">To get connected with us please login with your personal info</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <login-form-component section="loginSection"></login-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-show="$store.getters.isShowing('forgetPassword')">
                        <div class="col">
                            <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('forgetPasswordSection')"></loading-component>
                            <div class="row" v-show="!$store.getters.isLoading('forgetPasswordSection')">
                                <div class="col">
                                    <div class="row m-b-15" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
                                        <div class="col">
                                            <div class="inline v-align-middle">
                                                <div class="font-heading fs-20 all-caps text-primary no-margin lh-28 bold">Forget Password</div>
                                                <p class="no-margin fs-11 muted light">A reset password link will send to your email account.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <forget-password-form-component section="forgetPasswordSection"></forget-password-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md p-l-0 p-r-0 p-t-15 p-b-15">
                <div class="h-100" :class="[{'bg-master-dark': !$store.getters.isShowing('registrationForm')}, {'bg-white': $store.getters.isShowing('registrationForm')}]">
                    <div class="row align-items-center justify-content-center h-100" v-show="!$store.getters.isShowing('registrationForm')">
                        <div class="col text-white p-l-50 p-r-50 p-t-30 p-b-30 ">
                            <div class="row">
                                <div class="col">
                                    <div class="font-heading text-white fs-20 light m-b-10">New Customer</div>
                                    <p class="no-margin light fs-11">Create an account with us to join our fast growing community and start making transfers overseas at competitive exchange rates today.</p>
                                </div>
                            </div>
                            <div class="row m-t-15">
                                <div class="col">
                                    <a href="#">
                                        <button class="btn btn-sm btn-outline-success bold b-rad-none b-thick" @click="$store.dispatch('toggleSection', {name: 'registrationForm', status: true})">Create Account</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-l-0" v-show="$store.getters.isShowing('registrationForm')">
                        <div class="col">
                            <div class="row">
                                <div class="col-4 d-none d-md-inline padding-25 bg-primary">
                                    <div class="row h-100 align-items-center justify-content-center text-center">
                                        <div class="col">
                                            <div class="row m-b-10">
                                                <div class="col">
                                                    <div class="font-heading text-white fs-20 all-caps bold lh-25">We Are Glad</div>
                                                    <div class="font-heading text-white fs-12 all-caps m-b-20 lh-25">You've Decided To join Us</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <img src="{{asset('/images/2853457.png')}}" class="w-100"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-l-50 p-r-50 p-t-30 p-b-30">
                                    <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
                                    <div class="row" v-show="!$store.getters.isLoading('loginSection')">
                                        <div class="col">
                                            <registration-form-component section="loginSection"></registration-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition-component>
@endsection