@extends('zhenquan.auth.layouts.app')

@section('content')
<div class="row my-5">
    <div class="col-10 col-md-6 offset-1 offset-md-3">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 text-center px-2 p-4">
                        <div class="row">
                            <div class="col-12">
                                <img id="logo" src="{{ asset('img/logo.png') }}">
                            </div>
                        </div>
                        <form class="row mt-5">
                            <div class="col-12">
                                <h5 id="welcome" class="text-grey">Register</h5>
                            </div>
                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-user"></i>
                                </span>

                                <input type="text" class="form-control" placeholder="Display Name*" name="display_name"
                                    required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-user"></i>
                                </span>

                                <input type="text" class="form-control" placeholder="Full Name (as in NRIC)*"
                                    name="name" required>
                            </div>
                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-id-card"></i>
                                </span>

                                <input type="number" class="form-control" placeholder="NRIC" name="nric" required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-passport"></i>
                                </span>

                                <input type="text" class="form-control" placeholder="Passport" name="passport" required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-phone"></i>
                                </span>

                                <input type="number" class="form-control" placeholder="Phone Number" name="phone_no"
                                    required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-envelope"></i>
                                </span>

                                <input type="email" class="form-control" placeholder="Email" name="email" required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-calendar"></i>
                                </span>

                                <input type="date" class="form-control" placeholder="Date of Birth" name="date_of_birth"
                                    required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-venus-mars"></i>
                                </span>

                                <select name="gender" id="" class="form-control">
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>
                                    <option value="O">Others</option>
                                </select>

                                
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-key"></i>
                                </span>

                                <input type="password" class="form-control" placeholder="Password*" name="password"
                                    required>
                            </div>

                            <div class="offset-1 col-10 col-md-10 mb-3">
                                <span class="input-icon">
                                    <i class="fa fa-key"></i>
                                </span>

                                <input type="password" class="form-control" placeholder="Confirm Password*"
                                    name="password_confirmation" required>
                            </div>
                        </form>
                        <div class="row">
                            <div class="offset-2 offset-md-3 col-8 col-md-6 mb-3">
                                <button id="request-otp-btn" class="form-control" onclick="register()">Register</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let register = () => {
        event.preventDefault();
        let url = "{{ route('register') }}";
        let data = $("form :input")
                    .filter(function(index, element) {
                        return $(element).val() != '';
                    }).serializeArray();

        data.push({
            name: '_token',
            value: '{{ csrf_token() }}'
        });
        
        Swal.fire({
            title: 'Registering...',
            allowOutsideClick: false,
            allowEscapeKey: false,
            allowEnterKey: false,
            didOpen: () => {
                Swal.showLoading();
                $.ajax({
                    url: url,
                    method: "POST",
                    data: data,
                    dataType: 'json'
                })
                .done(function(response){ 
                    if(response.code == 200) {
                        let message = response.data.message;
                        Swal.fire({
                            text: message,
                            icon: 'success',
                            showCancelButton: false,
                            confirmButtonText: "Go to Login",
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            allowEnterKey: false
                        }).then((result) => {
                            if(result.isConfirmed) {
                                location.href = "{{ route('login') }}"
                            }
                        })
                    } else {
                        let messages = response.message.split("\n");
                        let ul = $('<ul style="text-align: left">');
                        
                        messages.forEach(function(val) {
                            $('<li style="padding-top: 10px">').text(val).appendTo(ul);
                        })
                    
                        Swal.fire({
                            html: ul,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            allowEnterKey: false
                        })
                    }
                });
            }
        });
    }
</script>
@endpush