{{#section 'meta'}}
<title>Pendaftaran</title>
{{/section}}

<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6 col-xl-5">
        <div class="card overflow-hidden">
            <div class="bg-primary bg-soft">
                <div class="row">
                    <div class="col-7">
                        <div class="text-primary p-4">
                            <h5 class="text-primary">Selamat Datang !</h5>
                            <p>Pendaftaran member baru.</p>
                        </div>
                    </div>
                    <div class="col-5 align-self-end">
                        <img src="{{base_url 'assets/member_area/images/profile-img.png'}}" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
            <div class="card-body pt-0"> 
                <div class="auth-logo">
                    <a href="{{base_url '/'}}" class="auth-logo-light">
                        <div class="avatar-md profile-user-wid mb-4">
                            <span class="avatar-title rounded-circle bg-light">
                                <img src="{{base_url 'assets/member_area/images/logo-light.svg'}}" alt="" class="rounded-circle" height="34">
                            </span>
                        </div>
                    </a>

                    <a href="{{base_url '/'}}" class="auth-logo-dark">
                        <div class="avatar-md profile-user-wid mb-4">
                            <span class="avatar-title rounded-circle bg-light">
                                <img src="{{base_url 'assets/member_area/images/logo.svg'}}" alt="" class="rounded-circle" height="34">
                            </span>
                        </div>
                    </a>
                </div>
                <div class="p-2">
                    <form id="form" class="form-horizontal" action="{{base_url 'api/auth/register'}}">

                        <div class="mb-3">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
                            <span validation-for="name"></span>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="Enter email">
                            <span validation-for="email"></span>
                        </div>

                        <div class="mb-3">
                            <label for="phone" class="form-label">Telepon</label>
                            <input type="number" class="form-control" name="phone" id="phone" placeholder="Enter phone">
                            <span validation-for="phone"></span>
                        </div>

                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" name="username" id="username" placeholder="Enter username">
                            <span validation-for="username"></span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-control" name="password" placeholder="Enter password" aria-label="Password" aria-describedby="password-addon">
                            <span validation-for="password"></span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Konfirmasi Password</label>
                            <input type="password" class="form-control" name="password_confirm" placeholder="Enter password_confirm" aria-label="password_confirm" aria-describedby="password_confirm-addon">
                            <span validation-for="password_confirm"></span>
                        </div>

                        <div class="mt-3 d-grid">
                            <button class="btn btn-primary waves-effect waves-light" type="submit">Daftar</button>
                        </div>

                        <div class="mt-4 text-center">
                            <a href="{{base_url 'auth/forgot'}}" class="text-muted"><i class="mdi mdi-lock me-1"></i> Lupa Sandi Anda?</a>
                            <div>Sudah memiliki akun? <a href="{{base_url 'auth/login'}}" class="text-primary">Masuk</a></div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>

{{#section 'javascript'}}
<script type="text/javascript">
    $(document).ready(function() {

        $("#form").submit(function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            $(`span[validation-for]`).text('');
            $.LoadingOverlay("show");
            $.ajax({
                url: this.action,
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(response, textStatus, jqXHR) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    showCancelButton: false,
                    confirmButtonColor: false,
                    confirmButtonText: 'Ya',
                }).then((result) => {
                    location.replace(base_url('auth/login'));
                });
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                if(jqXHR.responseJSON ?? false) {
                    Swal.fire('Maaf!', jqXHR.responseJSON.message, 'error');
                    if(jqXHR.responseJSON.errors ?? false) {
                        $.each(jqXHR.responseJSON.errors, function(index, val) {
                            $(`span[validation-for="${index}"]`).text(val);
                        });
                    }
                }
            })
            .always(function() {
                $.LoadingOverlay("hide");
            });
        });
    });
</script>
{{/section}}