@extends('layouts.master')

@section('title')
    LT-168 :: เพิ่มผู้ใช้เมมเบอร์
@endsection

@section('sub_title')
    จัดการเมมเบอร์
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <form class="card" id="member_form">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">เพิ่มผู้ใช้เมมเบอร์</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>ชื่อผู้ใช้</label>
                                <input class="form-control" type="text" name="username" title="กรุณาระบุชื่อผู้ใช้"
                                    placeholder="กรุณากรอกชื่อผู้ใช้">
                                <input class="form-control" type="hidden" name="reference_name" value="{{ $memberUsername }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>รหัสผ่าน</label>
                                <input class="form-control" type="text" minlength="6" value=""
                                    placeholder="กรุณากรอกรหัสผ่าน" name="password" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>ชื่อ - นามสกุล</label>
                                <input class="form-control" type="text" name="fullname" value=""
                                    title="กรุณาระบุชื่อ - นามสกุล" placeholder="กรุณากรอกรหัสผ่าน" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>เบอร์โทรศัพท์</label>
                                <input type="tel" class="form-control" placeholder="เบอร์โทรศัพท์มือถือ" name="phone"
                                    id="phoneInput" required oninput="return phoneCheck(this)" maxlength="10">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="text-center">
                        <button type="submit" class="btn btn-outline-default">
                            <i class="fas fa-user-plus"></i> เพิ่มผู้ใช้เมมเบอร์
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        async function phoneCheck (el) {
            el.value = el.value.replace(/[^0-9]+/g, '');
            if (el.value.length !== 10) {
                return el.classList.add('is-invalid');
            }
            if (el.value[0] !== '0' || !['6', '8', '9'].includes(el.value[1])) {
                return el.classList.add('is-invalid');
            }
            el.classList.remove('is-invalid');

            return await checkPhoneNumberAvailable(el);
        }

        async function checkPhoneNumberAvailable (el) {
            const phoneNumber = el.value;
            if (el.value.length < 10) return console.log(phoneNumber);
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('member.checkAvailablePhoneNumber') }}/${phoneNumber}`);
                if (!result) return false;
                if (result.available) return false;
                el.classList.add('is-invalid');
                swal('เบอร์โทรศัพท์ซ้ำ', 'ขออภัย มีผู้ใช้งานเบอร์โทรศัพท์นี้แล้ว โปรดใช้เบอร์อื่น',
                    'error');
                return false;
            });
        }

        $(function(){

            $(document).on('submit', '#member_form', function(e){
                e.preventDefault();
                let formData = $(this).serialize();
                $.post(`{{ route('member.store') }}`, formData, function(res){
                    if(res.success){
                        swalSuccess('เพิ่มผู้ใช้เมมเบอร์เรียบร้อย');
                        $('#member_form')[0].reset();
                    }else{
                        swalError(res.text);
                    }
                });
            });

        });
    </script>
@endsection