@extends('layout.index')

@section('content')
    <div class="d-flex flex-column flex-root">
        <div class="d-flex flex-column flex-column-fluid bgi-position-y-bottom position-x-center bgi-no-repeat bgi-size-contain bgi-attachment-fixed"
            style="background-image: url(assets/media/illustrations/sketchy-1/14.png">
            <div class="d-flex flex-center flex-column flex-column-fluid p-10 pb-lg-20">
                <a href="../../demo1/dist/index.html" class="mb-12">
                    <img alt="Logo" src="{{ asset('assets/media/logos/logo_landscape.png') }}" class="h-" />
                </a>
                <div class="w-lg-500px bg-body rounded shadow-sm p-10 p-lg-15 mx-auto">
                    {{-- <form class="form w-100" novalidate="novalidate" method="POST" action="{{ route('login') }}"> --}}
                    <form class="form w-100" id="form">
                        <div class="text-center mb-10">
                            <h3 class="text-dark mb-3">Halo, Selamat datang kembali!</h3>
                            <small class="text-gray-400 fw-bold">Silahkan masukkan username dan kata sandi untuk masuk ke
                                aplikasi.</small>
                        </div>
                        <div class="fv-row mb-10">
                            <label class="form-label fs-6 fw-bolder text-dark">Username</label>
                            <input class="form-control form-control-lg form-control-solid" type="text" name="username"
                                autocomplete="off" id="username" />
                        </div>
                        <div class="fv-row mb-10">
                            <div class="d-flex flex-stack mb-2">
                                <label class="form-label fw-bolder text-dark fs-6 mb-0">Kata Sandi</label>
                                {{-- <a href="../../demo1/dist/authentication/flows/basic/password-reset.html" class="link-primary fs-6 fw-bolder">Forgot Password ?</a> --}}
                            </div>
                            <input class="form-control form-control-lg form-control-solid" type="password" name="password"
                                autocomplete="off" id="password" />
                        </div>
                        <div class="text-center">
                            <button type="submit" id="btnLogin" class="btn btn-lg btn-primary w-100 mb-5">
                                <span class="indicator-label">Masuk</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#btnLogin').on('click', function(e) {
                e.preventDefault();

                let username = $('#username').val();
                let password = $('#password').val();

                $.ajax({
                    url: '/login',
                    type: 'POST',
                    data: {
                        username: username,
                        password: password
                    },
                    beforeSend: function() {
                        $('#btnLogin').prop('disabled', true).text('Mohon Tunggu...');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#form')[0].reset();
                            showToast('Login berhasil', 'success');
                            setTimeout(function() {
                                window.location.href = '/dashboard-budget';
                            }, 1000);
                        }
                    },
                    error: function(xhr) {
                        showToast('Login gagal!', 'danger');
                    },
                    complete: function() {
                        $('#btnLogin').prop('disabled', false).text('Masuk');
                    }
                });
            });
        });
    </script>
@endsection