@extends('layouts.auth')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <section class="w-100">
        <div class="container d-flex" style="height: 100vh">
            <div class="row align-items-center justify-content-center">
                <div class="col-12 col-sm-10 col-md-8 col-lg-7">
                    <div class="card shadow rounded border-0">
                        <div class="card-body">
                            <h4 class="card-title text-center">Pendaftaran</h4>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Nama Lengkap</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="user" class="fea icon-sm icons"></i>
                                            <input type="text" class="form-control ps-5" placeholder="John Doe"
                                                name="name">
                                        </div>
                                        <small class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="mail" class="fea icon-sm icons"></i>
                                            <input type="text" class="form-control ps-5" placeholder="john@email.com"
                                                name="email">
                                        </div>
                                        <small class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Nomor HP</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="smartphone" class="fea icon-sm icons"></i>
                                            <input type="text" class="form-control ps-5" placeholder="081234567890"
                                                name="phone_number">
                                        </div>
                                        <small class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Kata Sandi</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="key" class="fea icon-sm icons"></i>
                                            <input type="password" class="form-control ps-5" placeholder="********"
                                                name="password">
                                        </div>
                                        <small class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Konfirmasi Kata Sandi</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="key" class="fea icon-sm icons"></i>
                                            <input type="password" class="form-control ps-5" placeholder="********"
                                                name="password_confirmation">
                                        </div>
                                        <small class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="d-grid">
                                        <button type="button"
                                            class="btn btn-primary d-flex justify-content-center align-items-center gap-1"
                                            id="register">Daftar</button>
                                    </div>
                                </div>

                                <div class="mx-auto">
                                    <p class="mb-0 mt-3 text-center">
                                        <small class="text-dark me-2">Sudah memiliki akun ?</small> <a
                                            href="{{ route('login') }}" class="text-dark fw-bold">Masuk</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        const name = document.querySelector('input[name="name"]');
        const email = document.querySelector('input[name="email"]');
        const phoneNumber = document.querySelector('input[name="phone_number"]');
        const password = document.querySelector('input[name="password"]');
        const passwordConfirmation = document.querySelector('input[name="password_confirmation"]');
        const registerButton = document.getElementById('register');

        registerButton.addEventListener('click', async () => {
            clearErrors();
            disabledElement();

            const payload = {
                name: name.value,
                email: email.value,
                phone_number: phoneNumber.value,
                password: password.value,
                password_confirmation: passwordConfirmation.value,
            }

            const response = await register(payload);

            if (response.status === 'success') {
                return window.location.href = `${window.location.origin}/login`;
            }

            enabledElement();
            showErrors(response.errors);
        });

        const register = async (payload) => {
            const options = {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload)
            };
            const response = await fetch(`${window.location.origin}/register`, options);
            const result = await response.json();
            console.log(result);
            return result;
        };

        const disabledElement = () => {
            name.setAttribute('disabled', '');
            email.setAttribute('disabled', '');
            phoneNumber.setAttribute('disabled', '');
            password.setAttribute('disabled', '');
            passwordConfirmation.setAttribute('disabled', '');
            registerButton.setAttribute('disabled', '');
            registerButton.innerHTML =
                'Loading <div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>';
        }

        const enabledElement = () => {
            name.removeAttribute('disabled');
            email.removeAttribute('disabled');
            phoneNumber.removeAttribute('disabled');
            password.removeAttribute('disabled');
            passwordConfirmation.removeAttribute('disabled');
            registerButton.removeAttribute('disabled');
            registerButton.innerHTML = 'Daftar';
        }

        const showErrors = (errors) => {
            if (errors.password_confirmation) {
                passwordConfirmation.parentElement.nextElementSibling.textContent = errors.password_confirmation[0];
                passwordConfirmation.focus();
            }

            if (errors.password) {
                password.parentElement.nextElementSibling.textContent = errors.password[0];
                password.focus();
            }

            if (errors.phone_number) {
                phoneNumber.parentElement.nextElementSibling.textContent = errors.phone_number[0];
                phoneNumber.focus();
            }

            if (errors.email) {
                email.parentElement.nextElementSibling.textContent = errors.email[0];
                email.focus();
            }

            if (errors.name) {
                name.parentElement.nextElementSibling.textContent = errors.name[0];
                name.focus();
            }
        }

        const clearErrors = () => {
            name.parentElement.nextElementSibling.textContent = '';
            email.parentElement.nextElementSibling.textContent = '';
            phoneNumber.parentElement.nextElementSibling.textContent = '';
            password.parentElement.nextElementSibling.textContent = '';
            passwordConfirmation.parentElement.nextElementSibling.textContent = '';
        }
    </script>
@endpush