<?= $this->extend('v2/layout/auth_layout') ?>

<?= $this->section('css') ?>
<style>
.confirm-panel {
    /* width: 90%; */
    max-width: 550px;
    padding-left: 40px;
    padding-right: 40px;
    button#btn-login {
        margin-top: 20px !important;
        width: 100%;
    }
}
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div class="confirm-panel mx-auto">
    <!-- <form action="/reinstall-password" method="post"> -->
    <form id="customer-confirm-form">
        <h4 class="text-center mb-4 pt-4-5">Confirm your application</h4>

        <input type="hidden" name="email" id="email" value="<?= $email ?>">
        <input type="hidden" name="registration_id" id="registration_id" value="<?= $registration_id ?>">

        <div class="mb-4">
            <label for="pin_verify_number" class="required fs-90">Enter your verification code</label>
            <input type="text" class="form-control" id="pin_verify_number" name="pin_verify_number" required>
        </div>

        <div class="mb-4">
            <button class="btn mb-0 btn-danger" style="width: 100%" id="btn-customer-confirm" type="submit">
                Confirm Registration
            </button>
        </div>
    </form>
    <div class="mb-4">
        <button class="btn mb-0 btn-danger" style="width: 100%" id="btn-resend-verification-code">
            Resend Verification Code
        </button>
    </div>
    <div class="mb-4">
        <button class="btn mb-0 btn-danger" style="width: 100%" id="btn-go-back">
            GO BACK
        </button>
    </div>

    <div style="margin-bottom: 5px">If your details have been matched you will be sent an email containing a one time passcode to confirm the registration of your application.</div>
    <div style="margin-bottom: 5px">Please enter that code on this screen.</div>
    <div style="margin-bottom: 5px">Note: The code is only valid for 10 minutes.</div>
</div>
<?= $this->endSection() ?>

<?= $this->section('javascript') ?>
<script>
    $(document).ready(function(e) {
        $(document).on('click', '#btn-go-back', function(e) {
            window.history.back();
        })

        $(document).on('click', '#btn-resend-verification-code', function(e) {
            $.ajax({
                url: '/customer/resend-verification-code',
                type: 'POST',
                data: {
                    email: $('#email').val(),
                    registration_id: $('#registration_id').val(),
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success == 1) {
                        alert_message(response.message, 'Info', 'customer-confirm-form-modal');
                    } else {
                        alert_message(response.error, 'Error', 'customer-confirm-form-modal');
                    }
                },
                error: function(xhr, status, error) {
                    var msg = 'Error occurred while resending verification code. Code 2002 \n';
                    msg += (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Failed to resend code.';
                    alert_message(msg, 'Error', 'customer-confirm-form-modal');
                }
            });
        })
        $(document).on('submit', '#customer-confirm-form', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/customer/confirm-by-code',
                type: 'POST',
                dataType: 'json',
                data: {
                    email: $('#email').val(),
                    registration_id: $('#registration_id').val(),
                    pin_verify_number: $('#pin_verify_number').val(),
                },
                success: function(response) {
                    remove_loadingSpinner_from_button($('#btn-customer-confirm'));
                    if (response.success == 1) {
                        alert_message(response.message, 'Info', 'customer-confirm-form-modal', function(e){
                            window.location.href = '/customer-register';
                        });
                    } else {
                        alert_message(response.error, 'Error', 'customer-confirm-form-modal');
                    }
                },
                error: function(xhr, status, error) {
                    remove_loadingSpinner_from_button($('#btn-customer-confirm'));
                    var msg = 'Error occurred while confirming by code. Code 2003 \n';
                    msg += (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Failed to confirm by code.';
                    alert_message(msg, 'Error', 'customer-confirm-form-modal');
                }
            });
        })
        
    })
</script>
<?= $this->endSection() ?>
