<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>AbsensiKu - Login</title>
    <link rel="stylesheet" href="{{ url('/assets/vendors/feather/feather.css') }}">
    <link rel="stylesheet" href="{{ url('/assets/vendors/ti-icons/css/themify-icons.css') }}">
    <link rel="stylesheet" href="{{ url('/assets/vendors/css/vendor.bundle.base.css') }}">
    <link rel="stylesheet" href="{{ url('/assets/css/vertical-layout-light/style.css') }}">
    <link rel="shortcut icon" href="{{ url('/assets/images/favicon.ico') }}" />
</head>

<body>
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper">
            <div class="content-wrapper d-flex align-items-center auth px-0">
                <div class="row w-100 mx-0">
                    <div class="col-lg-4 mx-auto">
                        <div class="auth-form-light text-left py-5 px-4 px-sm-5">
                            <div class="brand-logo">
                                <img src="{{ url('/assets/images/logo.jpg') }}" alt="logo"
                                    style="width: 100px !important">
                            </div>
                            <h4>Hello! let's get started</h4>
                            <h6 class="font-weight-light">Sign in to continue.</h6>

                            <div id="alertContainer">
                                @if (session('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                @if (session('error'))
                                    <div class="alert alert-danger" role="alert">
                                        {{ session('error') }}
                                    </div>
                                @endif
                            </div>

                            <form class="pt-3" id="loginForm">
                                @csrf
                                <div class="form-group">
                                    <input type="email" name="email" id="email"
                                        class="form-control form-control-lg"
                                        placeholder="Email" required autofocus>
                                    <div class="invalid-feedback" id="emailError"></div>
                                </div>

                                <div class="form-group">
                                    <input type="password" name="password" id="password"
                                        class="form-control form-control-lg"
                                        placeholder="Password" required>
                                    <div class="invalid-feedback" id="passwordError"></div>
                                </div>

                                <div class="mt-3">
                                    <button type="submit"
                                        class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn"
                                        id="loginBtn">
                                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                        <span class="btn-text">SIGN IN</span>
                                    </button>
                                </div>

                                <div class="text-center mt-4 font-weight-light">
                                    Demo Account: <br>
                                    <small class="text-muted">
                                        admin@example.com | password
                                    </small>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url('/assets/vendors/js/vendor.bundle.base.js') }}"></script>
    <script src="{{ url('/assets/js/off-canvas.js') }}"></script>
    <script src="{{ url('/assets/js/hoverable-collapse.js') }}"></script>
    <script src="{{ url('/assets/js/template.js') }}"></script>
    <script src="{{ url('/assets/js/settings.js') }}"></script>
    <script src="{{ url('/assets/js/todolist.js') }}"></script>

    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);

            $('#loginForm').on('submit', function(e) {
                e.preventDefault();

                const btn = $('#loginBtn');
                const spinner = btn.find('.spinner-border');
                const btnText = btn.find('.btn-text');

                clearErrors();

                btn.prop('disabled', true);
                spinner.removeClass('d-none');
                btnText.text('Signing In...');

                const formData = {
                    email: $('#email').val(),
                    password: $('#password').val(),
                };

                $.ajax({
                    url: '/api/login',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.data && response.data.token) {
                            showAlert('success', response.message || 'Login berhasil!');

                            setTimeout(function() {
                                window.location.href = '{{ route("dashboard.index") }}';
                            }, 1000);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;

                        if (xhr.status === 422 && response.errors) {
                            showValidationErrors(response.errors);
                        } else {
                            const message = response?.message || 'Terjadi kesalahan saat login.';
                            showAlert('danger', message);
                        }
                    },
                    complete: function() {
                        btn.prop('disabled', false);
                        spinner.addClass('d-none');
                        btnText.text('SIGN IN');
                    }
                });
            });

            function showAlert(type, message) {
                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
                $('#alertContainer').html(alertHtml);

                setTimeout(function() {
                    $('.alert').fadeOut('slow');
                }, 5000);
            }

            function showValidationErrors(errors) {
                if (errors.email) {
                    $('#email').addClass('is-invalid');
                    $('#emailError').text(errors.email[0]).show();
                }
                if (errors.password) {
                    $('#password').addClass('is-invalid');
                    $('#passwordError').text(errors.password[0]).show();
                }
            }

            function clearErrors() {
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').hide().text('');
                $('#alertContainer').empty();
            }

            $('.form-control').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').hide();
            });
        });
    </script>
</body>

</html>
