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

@section('content')
    <div class="row h-100">
        <div class="col-7 d-none d-md-block" style="background: #7c4bff; overflow:hidden">
            <img class="w-100" src="{{ asset('/svg/login-background-mask.svg') }}" alt=""
                style="position: absolute; bottom:0; right:0;">
            <img src="{{ asset('/img/1cube-logo.png') }}" alt="" style="height: 40pt; margin: 20px 0px 0px 20px">
            <p style="margin: -10px 0px 0px 75px; font-size: 10pt; color: white">{{ config('ids-login.project_name') }}
            </p>

            <div class="text-white position-absolute" style="top:50%; left: 70px; transform: translateY(-50%)">
                <h1 class="font-weight-bold mb-3">Setup New Account</h1>
                <h1 class="font-weight-bold mb-3">With Our Single Sign-On</h1>
                <h1 class="font-weight-bold">Identity Server</h1>
            </div>
            <p style="margin-left: 25px; position: absolute; bottom: 0; color: white; font-size: 10pt">
                Powered by 1Cube
                Identity
                Server (IDS)
            </p>
        </div>
        <div class="col-12 col-md-5">
            <div class="row mt-5">
                <div class="offset-1 col-10 text-center pt-5">
                    @if (session()->has('message'))
                        <div class="alert alert-danger" role="alert" style="font-size: 12px">
                            {{ session('message') }}
                        </div>
                    @endif
                    <img id="logo" src="{{ getSchoolLogo() }}" />
                    <h5><strong>{{ optional(\App\Models\SchoolProfileM::first())->school_name }}</strong></h5>
                    <form class="row mt-5">
                        <div class="col-12 mb-4">
                            <h5 class="text-blue font-weight-bold">Register</h5>
                        </div>
                        

                        <div class="offset-1 col-10 col-md-10 mb-4">
                            <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-4">
                            <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-4">
                            <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-4">
                            <span class="input-icon">
                                <i class="fa fa-key"></i>
                            </span>

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

                        
                    </form>
                    <div class="row mt-5">
                        <div class="offset-2 col-8 mb-4">
                            <button id="request-otp-btn" class="form-control" onclick="register()">Register</button>
                        </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() }}'
            });

            data.push({
                name: 'password_confirmation',
                value: $('input[name=password]').val()
            });

            data.push({
                name: 'display_name',
                value: $('input[name=name]').val()
            });

            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') }}"
                                //     }
                                // })


                                // Swal.fire({
                                //     title: 'Please enter your OTP',
                                //     text: message,
                                //     input: 'text',
                                //     showCancelButton: false,
                                //     confirmButtonText: "Go to Login",
                                //     allowOutsideClick: false,
                                //     allowEscapeKey: false,
                                //     allowEnterKey: false,
                                // })

                                verifyOtp(data, message);
                            }
                        }).fail(function(data) {
                            let response = data.responseJSON;
                            if (response.message) {
                                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
                                })
                            }
                        });
                }
            });
        }

        let verifyOtp = (data, message) => {
            let postData = data;

            Swal.fire({
                title: 'Please enter your OTP',
                text: message,
                input: 'text',
                showCancelButton: false,
                // confirmButtonText: "",
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                inputValidator: (value) => {
                    if (!/^\d+$/.test(value) || value.length != 6) {
                        return 'OTP should only contain 6 numeric digits.'
                    }
                }
            }).then(result => {
                let r = "{{ route('register.verify_otp') }}";

                postData.push({
                    name: 'otp',
                    value: result.value
                });

                Swal.fire({
                    title: 'Verifying OTP...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    didOpen: () => {
                        Swal.showLoading();

                        $.ajax({
                                url: r,
                                method: "POST",
                                data: postData,
                                dataType: 'json'
                            })
                            .done(function(response) {
                                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') }}"
                                    }
                                });
                            }).fail(function(failData) {
                                let message = failData.responseJSON.message;
                                verifyOtp(data, message);
                            })
                    }
                });
            })
        }
    </script>
@endpush