<!DOCTYPE html>
<html lang="tk" dir="ltr" class="h-full font-sans antialiased">
<head>
    <meta name="theme-color" content="#fff">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width"/>
    <meta name="locale" content="tk"/>
    <meta name="robots" content="noindex">

    <!-- Styles -->
    <link rel="stylesheet" href="/assets/css/auth-layout.css">
    <style>
        .bg-secondary-500 {
            background-color: rgb(186,230,253);
        }
        .hover:bg-secondary-400 {
            background-color: rgba(24, 182, 155, 0.5);
        }
        .underline {
            text-decoration: underline;
        }
        .d-none {
            display: none;
        }
    </style>
</head>
<body class="min-w-site text-sm font-medium min-h-full text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-900">
    <div class="py-6 px-1 md:px-2 lg:px-6">
        <div class="mx-auto py-8 max-w-sm flex justify-center">
            <span class="uppercase text-4xl">{{ __('module.base-auth::base.online_panel') }}</span>
        </div>
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-8 max-w-[25rem] mx-auto">

        <h2 class="text-2xl text-center font-normal mb-6">{{ __('module.base-auth::base.verify_phone_number') }}</h2>
        
        <div class="flex justify-center items-center mb-6">
            <h2 class="text-lg text-center font-normal mr-4">+993 {{ $phone }}</h2>
            
            <span href="#" class="underline cursor-pointer" onclick="showChangePhone()" id="change-phone-button">
                {{ __('module.base-auth::base.change_number') }}
            </span>

            <span href="#" class="underline cursor-pointer d-none" onclick="goBack()" id="go-back-button">
                {{ __('module.base-auth::base.go_back') }}
            </span>
        </div> 

        {{-- Border line --}}
        <svg class="block mx-auto mb-6" xmlns="http://www.w3.org/2000/svg" width="100" height="2" viewBox="0 0 100 2">
            <path fill="#D8E3EC" d="M0 0h100v2H0z"></path>
        </svg>

        {{-- Change phone form --}}
        <form method="POST" action="{{ route('change-phone') }}" id="change-phone-form" class="d-none" onsubmit="event.preventDefault();changePhone(event)">
            @csrf
            <div class="mb-6">
                <label class="block mb-2" for="phone">
                    {{ __('module.base-auth::base.change_phone_label') }}
                </label>
                <input class="form-control form-input form-input-bordered w-full" id="phone" type="text" name="phone" required="">

                <span id="phone-error-box" class="text-red-500 text-italic error-box"></span>
            </div>
            <button type="button" class="w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center justify-center h-9 px-3 mb-3 w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center">
                <span class=""><span>{{ __('module.base-auth::base.change_number') }}</span></span>
            </button>
        </form>


        <div class="flex justify-center items-center mb-6">
            <form id="resend-verification-form" action="{{ route('resend-verification') }}" method="POST">
                @csrf
            </form>

            <span id="resend-verification-trigger" class="text-center font-normal mr-4 underline cursor-pointer d-none" onclick="requestNewVerification()">
                {{ __('module.base-auth::base.resend') }}
            </span>
        </div>

        {{-- Verification form --}}
        <form method="POST" action="{{ route('sms-verification') }}" id="verification-form">
            @csrf
            <div class="mb-6">
                <label class="block mb-2" for="code">
                    {{ __('module.base-auth::base.verification_code') }}
                </label>
                <input class="form-control form-input form-input-bordered w-full" id="code" type="number" name="code" required="">

                @if($errors->any())
                    @foreach($errors->all() as $error)
                        <p class="mt-2 text-red-500">{{ $error }}</p>
                    @endforeach
                @endif
            </div>

            <button type="submit" class="w-full justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center h-9 px-3 mb-3 bg-primary-500 hover:bg-primary-400">
                <span class=""><span>{{ __('module.base-auth::base.submit') }}</span></span>
            </button>
        </form>
    </div>
</div>

<script src="/assets/js/inputmask.min.js"></script>
<script src="/assets/js/sweetalert2.js"></script>
<script src="/assets/js/fn.js"></script>
<script>

let phoneField = $_ID('phone')
let changePhoneform = $_ID('change-phone-form')
let verificationForm = $_ID('verification-form')
let changePhoneButton = $_ID('change-phone-button')
let goBackButton = $_ID('go-back-button')
let resendVerificationTrigger = $_ID('resend-verification-trigger')
let resendVerificationForm = $_ID('resend-verification-form')

ready(() => {
    new Inputmask("+(\\9\\93)-99-99-99-99").mask(phoneField)

    setTimeout(() => {
        show(resendVerificationTrigger)
    }, 5000)
})

async function goBack() {
    hide(changePhoneform)
    show(changePhoneButton)
    
    hide(goBackButton)
    show(verificationForm)
}

function showChangePhone() {
    show(changePhoneform)
    hide(changePhoneButton)
    
    show(goBackButton)
    hide(verificationForm)
}

async function changePhone(event) {
    const response = await postData(event.target.action, getFormData(event))

    if (response.errors) {
        loopObject(response.errors, item => addValidationClasses(item))

        return
    }

    removeValidationClasess()

    await Swal.fire({
        title: '{{ __('module.base-auth::base.successfully_changed_phone') }}',
        text: '{{ __('module.base-auth::base.please_now_verify_your_phone_number_to_continue') }}',
        icon: 'success',
        showDenyButton: false,
        showCancelButton: false,
    })

    window.location.href = response.url
}

function requestNewVerification() {
    resendVerificationForm.submit()
}
</script>
</body>
</html>
