@extends('layout.wrapper_login')

@section('contents')
    <form id="registration_form" enctype="multipart/form-data">
        <div class="container">
            <div class="row" style="position: relative; z-index: 5;">
                <div class="col-lg-12" style="position: relative; z-index: 5;">
                    <div class="section-heading">
                        <h1 class="text-center">Register User</h1>
                    </div>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Email :</label>
                        <input type="text" name="email" id="email"
                               placeholder="Masukan Email" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Password :</label>
                        <input type="password" name="password" id="password"
                               placeholder="Masukan Password" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Konfirmasi Password :</label>
                        <input type="password" name="confirm_password" id="confirm_password"
                               placeholder="Confirm Password" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>NPWP :</label>
                        <input type="text" name="npwp" id="npwp" placeholder="Masukan NPWP"
                               required maxlength="18">
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Bukti NPWP :</label>
                        <input type="file" name="file_npwp" id="file_npwp" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Nama Penyedia :</label>
                        <input type="text" name="company_name" id="company_name" placeholder="Masukan Nama Penyedia"
                               required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Jenis Usaha :</label>
                        <select name="jns_bdn_usaha" id="jns_bdn_usaha" style="width:100%">
                            <option value="">Pilih Jenis Usaha</option>
                            <option value="badan_usaha">Badan Usaha</option>
                            <option value="perorangan">Perorangan</option>
                        </select>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>No HP / WA :</label>
                        <input type="text" name="phone" id="phone" placeholder="Masukan No Telp / WA"
                               required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Alamat :</label>
                        <textarea name="address" id="address" placeholder="Masukan Alamat" required></textarea>
                    </fieldset>
                </div>

                <div class="col-lg-12">
                    <fieldset>
                        <button type="submit" id="btn_registration" class="main-gradient-button">
                            <!--begin::Indicator label-->
                            <span id="indicator-label">Register</span>
                            <!--end::Indicator label-->
                            <!--begin::Indicator progress-->
                            <span id="indicator-progress" class="d-none">Please wait...
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            <!--end::Indicator progress-->
                        </button>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script>
        $('#registration_form').on('submit', (event) => {
            event.preventDefault()
            btnLoader($('#btn_registration'))
            const regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            if (!regex.test($('input[name="email"]').val())) {
                btnLoader($('#btn_registration'))
                Swal.fire({
                    icon: 'error',
                    title: 'Email Tidak Sesuai Format'
                })
            } else if ($('input[name="password"]').val() !== $('input[name="confirm_password"]').val()) {
                btnLoader($('#btn_registration'))
                Swal.fire({
                    icon: 'error',
                    title: 'Password Tidak Sesuai'
                })
            } else {
                let formData = new FormData()
                formData.append('email', $('#email').val())
                formData.append('password', $('#password').val())
                formData.append('confirm_password', $('#confirm_password').val())
                formData.append('npwp', $('#npwp').val())
                formData.append('file_npwp', document.querySelector('#file_npwp').files[0])
                formData.append('company_name', $('#company_name').val())
                formData.append('jns_bdn_usaha', $('#jns_bdn_usaha').val())
                formData.append('phone', $('#phone').val())
                formData.append('address', $('#address').val())
                axios.post('{{ route('auth-registration') }}', formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                }).then(response => {
                    if (response.data.success === true) {
                        Swal.fire({
                            icon: 'success',
                            title: response.data.message,
                            showConfirmButton: false
                        })
                        location.replace('{{ route('login') }}')
                    } else {
                        btnLoader($('#btn_registration'))
                        Swal.fire({
                            icon: 'warning',
                            title: response.data.message
                        })
                    }
                }).catch(error => {
                    btnLoader($('#btn_registration'))
                    Swal.fire({
                        icon: 'error',
                        title: 'System Error'
                    })
                })
            }
        })
    </script>
@endsection