<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Laundri</title>
    <!-- Updated links for CSS and SB Admin -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-primary {
    background-color: #4e73df;
    border: none;
    border-radius: 50px; /* Membuat tombol lebih membulat */
    height: 50px;        /* Menambah tinggi tombol agar lebih besar */
    font-size: 18px;     /* Ukuran font lebih besar untuk kemudahan akses */
    width: 100%;         /* Membuat tombol selebar layar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Memberi bayangan agar lebih menarik */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: #3a5fbd; /* Mengubah warna saat dihover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Menambah efek saat tombol dihover */
}

.btn-primary:active {
    background-color: #2f4aad; /* Warna saat tombol ditekan */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Efek bayangan lebih ringan saat ditekan */
}

    </style>
</head>
<body class="bg-gradient-primary">

<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">
                        <div class="col-lg-6 d-none d-lg-block bg-login-image" style="background-image: url('img/laundri1.png');"></div>
                        <div class="col-lg-6">
                            <div class="p-5">
                                <div class="text-center">
                                    <img src="img/laundri1.png" width="50%">
                                    <h1 class="h4 text-gray-900 mb-4">Silakan Login Mau Order</h1>
                                </div>
                                <!-- PHP Alert Section -->
                                <?php 
                                if(isset($_GET['alert'])){
                                    if($_GET['alert'] == "terdaftar"){
                                        echo "<div class='alert alert-success text-center'>Akun Anda berhasil disimpan, silakan login.</div>";
                                    }elseif($_GET['alert'] == "gagal"){
                                        echo "<div class='alert alert-danger text-center'>Username atau Password salah, coba lagi.</div>";
                                    }elseif($_GET['alert'] == "login-dulu"){
                                        echo "<div class='alert alert-warning text-center'>Silakan login terlebih dahulu untuk membuat pesanan.</div>";
                                    }
                                }
                                ?>
                                <form action="periksa_login.php" method="POST">
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control form-control-user"
                                               id="username" name="username"
                                               placeholder="Masukkan Username Anda" required>
                                    </div>
                                    <div class="form-group mb-6">
                                        <input type="password" class="form-control form-control-user"
                                               id="password" name="password"
                                               placeholder="Masukkan Password" required>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Login</button>
                                </form>
                                <hr>
                                <div class="text-center">
                                    <a class="small" href="daftar.php">Buat Akun Baru</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<!-- Updated JS links -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
