@extends('layouts.appUi')

@section('title')
    ยืนยันรหัส OTP
@endsection

@section('header')
<div class="appHeader no-border transparent position-absolute">
    <div class="left">
        <a href="javascript:;" onclick="goBack(" class="headerButton goBack">
            <ion-icon name="chevron-back-outline" role="img" class="md hydrated" aria-label="chevron back outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle"></div>
</div>
@endsection

@section('content')
<div class="section mt-2 text-center">
    <h1>กรุณากรอกรหัส OTP</h1>
    <h4>กรุณากรอกรหัสยืนยันตัวตนที่ท่านได้รับ (Ref: {{ session('otp')['refCode'] ?? '-' }})</h4>
</div>
<div class="section mb-5 p-2">
    <form onsubmit="otpValificationProcessHandler(event, this)" action="{{ route('appUi.registerOtp') }}/valification" data-target-url="{{ route('appUi.register') }}">
        <div class="form-group basic">
            <input type="text" class="form-control verification-input" id="smscode" placeholder="••••"
                maxlength="4" pattern="\d*" name="otp">
        </div>
        <div class="text-center">
            <a href="javascript:;" data-countdown data-format="ขอรับรหัส OTP ใหม่ได้ใน: %-M นาที %-S วินาที" data-datetime="{{ session('otp')['expireOtpDateTime'] ?? date('Y-m-d H:i:s', strtotime(date('Y-m-d H:i:s').' +1 minutes')) }}" data-phone="{{ session('otp')['phone'] ?? null }}" onclick="resendOtp(this)"></a>
        </div>

        <div class="form-button-group transparent">
            <button type="submit" class="btn btn-primary btn-block btn-lg">ยืนยันตัวตน</button>
        </div>

    </form>
</div>
@endsection

@section('modal')
<div class="modal fade dialogbox" id="smsValidSuccessModal" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="alertDialog-icon" class="modal-icon text-success">
                <ion-icon name="checkmark-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">ยืนยันตัวตนเรียบร้อย</h5>
            </div>
            <div class="modal-body">
                ระบบกำลังพาท่านไปยังหน้าสมัครสมาชิก
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade dialogbox" id="smsValidFailModal" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="alertDialog-icon" class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">รหัส OTP ไม่ถูกต้อง</h5>
            </div>
            <div class="modal-body">
                กรุณากรอกใหม่อีกครั้ง
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade dialogbox" id="smsSendModal" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="alertDialog-icon" class="modal-icon text-success">
                <ion-icon name="paper-plane"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">ส่ง OTP เรียบร้อย</h5>
            </div>
            <div class="modal-body">
                กรุณานำรหัสที่ท่านได้รับมายืนยันตัวตน<br/>
                (ท่านจะได้รับ SMS ภายใน 1-2 นาที)
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade dialogbox" id="failModal" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="alertDialog-icon" class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">ขออภัย</h5>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn" data-bs-dismiss="modal">ปิด</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
@endsection
@section('bottomNav')
@endsection

@section('script')
    <script>

        $(function(){
            $('[data-countdown]').each((i, el) => {
                let instance = $(el);
                let seveAttrOnclick = instance.attr('onclick');
                instance.attr('onclick', '');
                instance.countdown(instance.data('datetime'), function(event) {
                    instance.html(event.strftime('ขอรับ OTP ใหม่ได้ใน %-M นาที %-S วินาที'));
                }).on('finish.countdown', function(event){
                    instance.html('ขอรหัสรหัส OTP ใหม่');
                    instance.attr('onclick', seveAttrOnclick);
                });
            });
        });

        function resendOtp(el)
        {
            const self = $(el);
            const formData = {phonenumber: self.data('phone')};
            const url = `{{ route('appUi.registerOtp') }}`;
            const modal = $('#smsSendModal');
            const failModal = $('#failModal');
            $.post(url, formData, res => {
                if(res.success){
                    modal.modal('show');
                    if(res.success) modal.on('hide.bs.modal', () => { window.location.reload() });
                }else{
                    failModal.find('.modal-body').text(res.text);
                    failModal.modal('show');
                }
            }, 'json');
        }

    </script>
@endsection