{{#section 'meta'}}
<title>Login</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>Masuk ke member area.</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/login'}}">

                        <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>
                            <div class="input-group auth-pass-inputgroup">
                                <input type="password" class="form-control" name="password" placeholder="Enter password" aria-label="Password" aria-describedby="password-addon">
                                <button class="btn btn-light " type="button" id="password-addon"><i class="mdi mdi-eye-outline"></i></button>
                            </div>
                            <span validation-for="password"></span>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="remember-check">
                            <label class="form-check-label" for="remember-check">
                                Ingat Saya
                            </label>
                        </div>

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

                        <div class="mt-4 text-center">
                            <a href="{{base_url 'auth/forgot'}}" class="text-muted d-block"><i class="mdi mdi-lock me-1"></i> Lupa Sandi Anda?</a>
                            <div>Belum memiliki akun? <a href="{{base_url 'auth/register'}}" class="text-primary">Daftar</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(response.redirect_to);
                });
            })
            .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}}