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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Aplikasi Inventory</title>

    <!-- Bootstrap CSS (pastikan sudah include) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <style>
        /* Set background putih untuk seluruh halaman */
        html, body {
            height: 100%;
            margin: 0;
            background-color: white !important;
        }

        /* Hilangkan background kiri dan shadow */
        .bg-login-image {
            background: none !important;
            background-color: white !important;
        }

        .card {
            background-color: white !important;
            box-shadow: none !important;
        }

        .card-body {
            background-color: white !important;
        }

        .form-control {
            border-radius: 10px;
        }

        .btn-user {
            border-radius: 10px;
        }

        .judul h1 {
            font-weight: bold;
        }

        hr.bg-white {
            background-color: #ccc; /* diganti karena latar belakang sudah putih */
        }
    </style>
</head>

<body>

    <div class="container">

        <!-- Outer Row -->
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9">

                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="row">
                            <!-- Bagian Kiri -->
                            <div class="col-lg-6 d-none d-lg-block bg-login-image">
                                <div class="p-5">
                                    <div class="judul text-center">
                                        <img width="300px" src="assets/icon/logo4.jpeg" alt="Logo">
                                    </div>
                                    <br>
                                    <hr class="bg-white">
                                    <div class="text-center">
                                        <h1 class="h2 text-dark mb-4"><b>APLIKASI INVENTORY</b></h1>
                                        <h1 class="h3 text-dark mb-4">CV RIDHO DARMA</h1>
                                    </div>
                                    <hr class="bg-white">
                                </div>
                            </div>

                            <!-- Bagian Kanan (Form Login) -->
                            <div class="col-lg-6">
                                <div class="p-5">
                                    <div class="text-center">
                                        <h1 class="h4 text-gray-900 mb-4">Login</h1>
                                    </div>
                                    <form class="user">
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-user" id="user" name="user" placeholder="Username" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" class="form-control form-control-user" id="pwd" name="pwd" placeholder="Password">
                                        </div>
                                        <hr>
                                        <a href="#" onclick="proses_login()" id="login" class="btn btn-primary btn-user btn-block">
                                            Login
                                        </a>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Script -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="assets/js/login.js"></script>

    <!-- Optional SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Flash message -->
    <script>
        $(document).ready(function () {
            Swal.fire({
                title: 'Memuat...',
                timer: 1000,
                didOpen: () => {
                    Swal.showLoading();
                },
                willClose: () => {
                    // Do something if needed
                }
            });
        });
    </script>

</body>

</html>
