@extends('layouts.blank')

@section('page_title', 'Login')

@section('content')
    <div class="login-page bg-body-secondary">
        <div class="login-box">
            <div class="login-logo">
                {{ env('APP_NAME', 'Laravel') }}
            </div>

            <div class="card">
                <div class="card-body login-card-body rounded-1">
                    <p class="login-box-msg">Masuk untuk memulai sesi anda</p>
                    <form id="login-form" method="POST" action="{{ route('web-api-v1-login') }}">
                        <div class="input-group mb-3">
                            <div class="input-group-text"><span class="bi bi-person"></span></div>
                            <input type="text" name="username" class="form-control" placeholder="Nama Pengenal" />
                        </div>
                        <div class="input-group mb-3 spill-password-container">
                            <div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
                            <span data-toggle="password" data-target="input[name=password]" style="right: 10px;">
                                <i class="bi bi-eye-slash"></i>
                            </span>
                            <input type="password" name="password" class="form-control" placeholder="Kata Sandi" />
                        </div>

                        <p class="mb-1 text-end"><a href="javascript:void(0)">Lupa sandi?</a></p>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-box-arrow-in-right"></i> Masuk
                            </button>
                        </div>
                    </form>
                </div>
                <!-- /.login-card-body -->
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(() => {
            $('form#login-form')
                .submit(function(e) {
                    e.preventDefault();
                    $(this).trigger('form:submit');
                })
                .on('form:submit', async function() {
                    $(this).find('input, textarea, select, a').attr('disabled', true);
                    $(this).find('button[type=submit]').trigger('loading:set');

                    const username = $.trim($('form#login-form input[name=username]').val());
                    const password = $.trim($('form#login-form input[name=password]').val());

                    try {
                        const result = await $.ajax({
                            type: 'POST',
                            url: `{{ route('web-api-v1-login') }}`,
                            data: {
                                username,
                                password,
                            },
                        });

                        showToast({
                            status: result.status,
                            message: result.message,
                        });

                        sessionStorage.setItem('_token', result.data.access_token);
                        window.location.href = `{{ route('page-home') }}`;
                    } catch (err) {
                        $(this).find('input, textarea, select, a').attr('disabled', false);
                        $(this).find('button[type=submit]').trigger('loading:clear');
                        error_handler(err);
                    }
                });

            $('form#login-form button[type=submit]').click(function(e) {
                e.preventDefault();
                $('form#login-form').trigger('form:submit');
            });
        });
    </script>
@endpush