@extends('layouts.appUi')

@section('title')
    สมัครสมาชิก
@endsection

@section('header')
<div class="appHeader no-border transparent position-absolute">
    <div class="pageTitle"></div>
</div>
@endsection

@section('content')
<div class="section mt-2 text-center">
    <h1>สมัครสมาชิก</h1>
    <h4>Create an account</h4>
</div>
<div class="section mb-5 p-2">
    <form onsubmit="registerSubmitHandler(event, this)">
        <div id="register-form" class="card">
            <div class="card-body">
                <input type="hidden" name="phone" value="{{ session('otp')['phone'] ?? '' }}">
                {{-- <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="name">ชื่อ - นามสกุล</label>
                        <input type="text" class="form-control" id="name" autocomplete="off" placeholder="full name" name="name" required />
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div> --}}
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="username">ชื่อผู้ใช้</label>
                        <input type="text" class="form-control" id="username" autocomplete="off" name="username" placeholder="username login" onblur="noThaiCheck(this)" required />
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="password1">รหัสผ่าน</label>
                        <input type="password" class="form-control" id="password1" name="password" autocomplete="off" placeholder="password" />
                        <i class="clear-input" required>
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>

                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="password2">ยืนยันรหัสผ่าน</label>
                        <input type="password" class="form-control" id="password2" name="confirm_password" autocomplete="off" placeholder="re-password" onblur="registerPage_passwordCheckMatch()" />
                        <i class="clear-input" required>
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>
            </div>
        </div>

        <div id="bank-acc-form" class="card" style="display: none;">
            <div class="card-body">
                <div class="form-group basic mt-1">
                    <div class="input-wrapper">
                        <label class="label" for="bank_name">ชื่อธนาคาร</label>
                        <select class="form-control custom-select" name="bank_name" id="bank_name" required>
                            <option disabled selected value="">กรุณาระบุธนาคาร</option>
                            <option value="ธนาคารกรุงเทพ">ธนาคารกรุงเทพ</option>
                            <option value="ธนาคารกรุงไทย">ธนาคารกรุงไทย</option>	
                            <option value="ธนาคารกรุงศรีอยุธยา">ธนาคารกรุงศรีอยุธยา</option>
                            <option value="ธนาคารทหารไทย">ธนาคารทหารไทย</option>
                            <option value="ธนาคารกสิกรไทย">ธนาคารกสิกรไทย</option>
                            <option value="ธนาคารไทยพาณิชย์">ธนาคารไทยพาณิชย์</option>
                            <option value="ธนาคารยูโอบี">ธนาคารยูโอบี</option>
                            <option value="ธนาคารออมสิน">ธนาคารออมสิน</option>
                            <option value="ธนาคารสแตนดาร์ดชาร์เตอร์">ธนาคารสแตนดาร์ดชาร์เตอร์</option>
                        </select>
                    </div>
                </div>

                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="bankOwnerName">ชื่อบัญชี</label>
                        <input type="text" class="form-control" id="bankOwnerName" placeholder="กรุณาระบุชื่อบัญชี"
                        value="" name="name">
                    </div>
                </div>

                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="bankNumber">เลขบัญชี</label>
                        <input type="text" class="form-control" id="bankNumber" name="bank_number" placeholder="กรุณาระบุเลขบัญชี"
                        value="" minlength="10" maxlength="12" oninput="inputNumberOnly(this)" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-button-group transparent">
            <button id="submitBtn" type="button" class="btn btn-primary btn-block btn-lg">ถัดไป</button>
        </div>
    </form>
</div>
@endsection

@section('modal')
<div class="modal fade dialogbox" id="unvalidInput" 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">
                กรอกได้เฉพาะตัวอักษรภาษาอังกฤษ<br/>และ ตัวเลขเท่านั้น (ห้ามเว้นวรรค)
            </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="passwordNotMatch" 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>
<div class="modal fade dialogbox" id="registerDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon">
                <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="confirmDialog" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-warning">
                <ion-icon name="help-outline"></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="javascript:;" class="btn btn-text-secondary dialogConfirm" data-bs-dismiss="modal" data-cf="0">ยกเลิก</a>
                    <a href="javascript:;" class="btn btn-text-primary dialogConfirm" data-bs-dismiss="modal" data-cf="1">ยืนยัน</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

@section('script')
    <script>
        $(function () {
            $('#submitBtn').on('click', function () {
                const self = $(this);
                $('#register-form').fadeOut();
                $('#bank-acc-form').fadeIn();
                self.attr('type', 'submit');
                self.text('สมัครสมาชิก');
                self.removeAttr('id');
            });
        });

        function showConfirmDialog()
        {
            const target = $('#confirmDialog');
            const username = $('input[name="username"]').val();
            target.find('.modal-body').html(`ชื่อผู้ใช้ของคุณคือ: <span class="text-danger">${username}</span>`);
            return new Promise(function(resolve, reject){
                let confirmRegister = false;
                target.modal('show');
                target.find('.dialogConfirm').on('click', function(){
                    if($(this).data('cf') == 1) confirmRegister = true;
                    resolve(confirmRegister);
                });
            });
        }

        const registerSubmitHandler = async (e, el) => {
            e.preventDefault();
            
            const sure = await showConfirmDialog();
            if (!sure) return;

            const self = $(el);
            const formData = self.serialize();
            const url = `{{ route('register.store') }}`;
            const dialog = $('#registerDialog');
            const targetLocation = `{{ route('appUi.index') }}`;
            let dialogData = {
                title: 'สมัครสมาชิกเรียบร้อย',
                text: 'ระบบกำลังพาท่านไปหน้าสมาชิก...',
                class: 'text-success',
                icon: '<ion-icon name="checkmark-circle"></ion-icon>',
            };
            $.post(url, formData, res => {
                if (res.success) {
                    dialog.find('.modal-icon').removeClass('text-danger'); dialog.find('.modal-icon').addClass(dialogData.class);
                } else {
                    dialogData.title = 'ไม่สามารถสมัครสมาชิกได้';
                    dialogData.text = res.text;
                    dialogData.class = 'text-danger';
                    dialogData.icon = '<ion-icon name="close-circle"></ion-icon>';
                    dialog.find('.modal-icon').removeClass('text-success'); dialog.find('.modal-icon').addClass(dialogData.class);
                }
                dialog.find('.modal-title').text(dialogData.title); dialog.find('.modal-body').text(dialogData.text);
                dialog.find('.modal-icon').html(dialogData.icon);
                dialog.modal('show');

                if (!res.success) return;

                dialog.on('hidden.bs.modal', () => { window.location.href = targetLocation; });
                setTimeout(() => { window.location.href = targetLocation; }, 3000);
            });
            
        }
    </script>
@endsection