@extends('layouts.index')

@section('content')

    <div class="container auth-pages">
        <div class="row">
            <div class="col-md-5 auth-background order-2 d-none d-md-block">
                <div class="container h-100">
                    <div class="row h-100 justify-content-center align-items-center">
                        <div class="col-md-8 text-center">
                            <div class="welcome-title">{{ __('lang.authWelcomeTitle') }}</div>
                            <div class="welcome-desc">{{ __('lang.loginWelcomeDesc') }}</div>
                            <div class="mt-5">
                                <a aria-label="go to register page" href="{{ route('register') }}" class="page-btn">{{ __('lang.register') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-7 order-1">
                <div class="container my-md-5">
                    <div class="row justify-content-center align-items-center login-form">
                        <div class="col-lg-10 col-md-10">
                            @include('includes.errors')
                            <!--Form with header-->
                            <form action="{{ route('postLogin') }}" method="post" autocomplete="off" id="formSubmit">

                                @csrf
                                <input type="hidden" name="accountId" value="{{env('accountId')}}" >
                                <input type="hidden" name="device_token" id="device_token" value="test">
                                <input type="hidden" name="accounts_country_code"  value="{{$account->accounts_country_code}}" >
                                <input type="hidden" name="coupon_code"  value="{{isset($coupon_code) ? $coupon_code : ''}}" >
                                <input type="hidden" name="page_type"  value="{{isset($page_type) ? $page_type : 'login'}}" >
                                <input type="hidden" name="auth_type"  id="auth_type" value="{{$account->accounts_auth_type}}" >

                                <div class="">

                                    <div class="px-md-3 py-3">
                                            <div class="login-title text-center text_1 py-md-5 py-3">
                                                <h2 class="fb-700 pb-2 head-title">{{ __('lang.loginTo') }} {{ isset($setting) ?  $setting->accounts_name : '' }}</h2>
                                                @if($account && $account->accounts_website_theme == 'default')
                                                {{-- <h4 class="fb-700">{{ __('lang.LetsBuildSometingGreat') }}</h4> --}}
                                                @endif
                                            </div>
                                            @if($account->accounts_auth_type == 'phone')
                                            <div class="mb-4">
                                                {{-- <label for="phone" class="form-label text_1 fb-700 font-18">{{ __('lang.phone') }}</label> --}}
                                                <div dir="ltr" class="mobile-dev mb-3" id="mobile-dev">
                                                    <input type="hidden" name="countryCode" id="countryCode" value="{{$account->accounts_multiple_countries ? '' : $account->accounts_country_code}}">
                                                    <input type="hidden" name="phone" id="full_phone">
                                                    <input type="tel" class="form-control custom-input-field" dir="ltr" id="phone" value="{{ old('phone') }}" placeholder="{{ __('lang.phone') }}" onkeypress="return ( event.charCode >= 48 && event.charCode <= 57)" required>
                                                    <span id="valid-msg" class="hidden text-success">✓ {{ __('lang.Valid') }}</span>
                                                    <span id="error-msg" class="hidden text-danger"></span>
                                                </div>
                                            </div>
                                            @elseif($account->accounts_auth_type == 'email')
                                            <div class="mb-4 position-relative">
                                                {{-- <label for="email" class="form-label text_1 fb-700 font-18">{{ __('lang.email') }}</label> --}}
                                                <input type="text" class="form-control custom-input-field" dir="ltr" id="email" name="email" value="{{ old('email') }}" placeholder="{{ __('lang.email') }}" required>
                                                <i class="polaris-max-icon-mail-outline font-20 position-absolute custom-input-icon"></i>

                                            </div>
                                            @endif
                                            <div class="mb-4 position-relative">
                                                {{-- <label for="phone" class="form-label text_1 fb-700 font-18">{{ __('lang.password') }}</label> --}}
                                                <input type="password" class="form-control custom-input-field ltrInput" id="password" name="password" placeholder="{{ __('lang.password') }}" value="{{ old('password') }}" autocomplete="new-password" >
                                                <i class="polaris-max-icon-lock-outline font-20 position-absolute custom-input-icon"></i>
                                                <i class="polaris-max-icon-eye-off-outline font-16 position-absolute toggle-password"></i>

                                            </div>

                                            <div class="my-3">
                                                <p class="m-0">
                                                    <span class="text_3 font-16"> {{ __('lang.forgetPassword') }} {{ $dir == 'ltr' ? '?' : '؟' }} </span>
                                                    <a aria-label="go to forget password page" href="{{ route('forgetPassword') }}"  class="font-15 text_7">{{ __('lang.resetPassword') }}</a>
                                                </p>
                                            </div>

                                            <div class="text-center gap-2">
                                                <button type="submit" class="btn main-btn px-5 border-radius-50 font-16"> {{__('lang.login')}}</button>
                                            </div>

                                            @if(isset($account->accounts_social_login_btns) && $account->accounts_social_login_btns == '1')
                                                @include('auth.social-login')
                                            @endif

                                            <div class="my-3 d-md-none d-block">
                                                <p class="m-0 text-center">
                                                    <span class="text_4 font-16"> {{ __('lang.hasnotUser') }} </span>
                                                    <a aria-label="go to register page" href="{{ route('register') }}"  class="font-18 text_1">{{ __('lang.CreateYourAccount') }}</a>
                                                </p>
                                            </div>


                                    </div>

                                </div>

                            </form>
                            <!--Form with header-->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@include('includes.intltel-config', ['coutryCodeField' => 'countryCode'])

@push('js')

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const pageWrapper = document.querySelector('.page-wrapper');
        pageWrapper.classList.add('background_2');
    });
    messaging.requestPermission()
        .then(function () {

            // console.log("Notification permission granted.");
            // get the token in the form of promise
            return messaging.getToken()
        })
        .then(function(token) {
            // console.log("token is : " + token);
            if(token){
                $('#device_token').val(token);
            }
        })
        .catch(function (err) {
            console.log("Unable to get permission to notify.", err);
        });

</script>
@endpush