@extends('views.layouts.master')
<link rel="stylesheet" href="{{ csset('/themes/pro/modunawa/resources/css/user-auth.css') }}">
@section('content')

    <!--=====================================
	USER FORM PART START
=======================================-->
    <section class="user-form-part">
        <div class="container">
            <form class="row justify-content-center form-prevent-multiple-submits" action="{{ $route }}" method="POST">
                @csrf
                <div class="col-12 col-sm-10 col-md-12 col-lg-12 col-xl-6">

                    <!--
                    <div class="user-form-logo">
                        <a href="index.html"><img src="images/logo.png" alt="logo"></a>
                    </div>
                    -->
                    <div class="user-form-card agree_form">
                        <div class="user-form-title">
                            <h2>본인인증</h2>
                        </div>
                        <div class="form-check all_agree mb-4">
                            <input class="form-check-input" type="checkbox" id="phone-identity-verifiy-ck">
                            <label class="form-check-label" for="phone-identity-verifiy-ck">휴대폰 본인 확인</label>
                        </div>

                        <div class="form-group mb-2 d-flex">
                            <input type="text" class="form-control certi-txt rounded-right-0" id="mobile-no-txt" maxlength="11" placeholder="휴대폰번호">
                            <span class="btn_wrap js_btn_wrapper mt-0">
                                <button type="button" class="btn bg-black border-black btn-block text-white certi-btn" onclick="send_verify_code(this)">인증번호 발송</button>
                            </span>
                        </div>
                        <div class="form-group mb-0 d-flex">
                            <input type="text" class="form-control certi-txt rounded-right-0" name="cert_number" placeholder="인증번호" required>
                            <span class="btn_wrap js_btn_wrapper mt-0">
                            <button type="submit" class="btn bg-black border-black btn-block text-white certi-btn button-prevent-multiple-submits">
                                <i class="spinner fa fa-spinner fa-spin"></i>
                                확인
                            </button>
                        </span>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </section>
    <!--=====================================
        USER FORM PART END
    =======================================-->

@endsection

@push('js')
    <script>
        async function send_verify_code($this) {
            let all_check = true

            $('#required-div input').each(function () {
                if (! $(this).is(':checked')) {
                    all_check = false
                }
            })

            if (all_check && $('#phone-identity-verifiy-ck').is(':checked')) {
                const response = await call_local_api('{{ route("member-signup-verify.send") }}', {mobile_no: $('#mobile-no-txt').val()})
                const error_msg = response.data.original.body

                if (error_msg['message'] === 'success') {
                    $($this).prop('disabled', true)
                    iziToast.success({ title: 'Success', message: $('#action-completed').text() })
                } else {
                    iziToast.error({ title: 'Error', message: error_msg['message'] })
                }
                return
            }

            iziToast.info({ title: 'Info', message: '이용약관에 동의하셔야 합니다' });
        }

        $('#mobile-no-txt').on('keyup', function () {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });

        $('#all-ck').click(function(){
            const checked = $(this).is(':checked');

            if (checked) {
                $('#required-div input:checkbox').prop('checked', true);
            }
        });
    </script>
@endpush