@extends('layouts.appUi')

@section('title')
    สมัครสมาชิก
@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>ยืนยันหมายเลขโทรศัพท์</h1>
    <h4>Phone Number OTP Valification</h4>
</div>
<div class="section mb-5 p-2">
    <form onsubmit="formSendOtpHandler(event, this)" action="{{ route('appUi.registerOtp') }}" data-target-url="{{ route('appUi.registerOtp') }}/valification">
        <div class="card">
            <div class="card-body">
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="phonenumber">หมายเลขโทรศัพท์</label>
                        <input type="text" class="form-control" name="phonenumber" id="phonenumber" placeholder="กรุณากรอกหมายเลขโทรศัพท์" autocomplete="off" pattern="\d*" minlength="10" maxlength="10" />
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-button-group transparent">
            <button type="submit" class="btn btn-primary btn-block btn-lg">ส่งรหัส OTP</button>
        </div>
    </form>
</div>
@endsection

@section('modal')
<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>
        // @if(!is_null(session('otp')))
        //     const redirectUrl = `{{ route('appUi.register') }}`;
        //     window.location.replace(redirectUrl);
        // @endif
    </script>
@endsection