<?php
session_start();

// koneksi ke database
include './assets/func.php';
$air = new klas_air;
$koneksi = $air->koneksi();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Login | Sarah & Tiara Team</title>

    <link href="css/styles.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js"></script>

    <style>
        /* ===== ANIMASI TRANSISI MASUK ===== */
        @keyframes kartuMuncul {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== VIDEO BACKGROUND ===== */
        #bg-video {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            z-index: -2;
        }

        /* ===== OVERLAY ===== */
        .overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.55); 
            z-index: -1;
        }

        /* ===== PROFILE MENU ===== */
        .profile-menu {
            position: absolute;
            top: 25px; right: 25px;
            z-index: 1000;
        }

        .profile-img {
            width: 48px; height: 48px;
            border-radius: 50%;
            cursor: pointer;
            border: 2.5px solid white;
            object-fit: cover;
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .profile-img:hover {
            transform: scale(1.1) rotate(5deg);
        }

        .dropdown-menu-custom {
            display: none;
            position: absolute;
            right: 0; top: 60px;
            background: white;
            width: 200px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            padding: 12px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .dropdown-menu-custom a {
            display: block;
            padding: 12px;
            text-decoration: none;
            color: #444;
            font-weight: 700;
            border-radius: 10px;
            transition: 0.2s;
            font-size: 14px;
        }

        .dropdown-menu-custom a:hover {
            background: #fff0f6;
            color: #ff69b4;
            transform: translateX(3px);
        }

        /* ===== CARD LOGIN (PINK TRANSPARAN + TRANSISI) ===== */
        .card {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background: rgba(255, 182, 193, 0.55); 
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            animation: kartuMuncul 0.8s ease-out forwards;
        }

        /* ===== INPUT STYLE ===== */
        .form-control {
            border-radius: 15px;
            padding: 18px 25px; 
            border: none;
            background: rgba(255, 255, 255, 0.85);
            font-size: 16px;
            color: #333;
            font-weight: 500;
            transition: 0.3s;
        }

        .form-control:focus {
            background: #fff;
            box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
            border: none;
        }

        .form-control::placeholder {
            color: #888;
            font-weight: 500;
            opacity: 0.9;
        }

        /* ===== TOMBOL LOGIN ===== */
        .btn-primary {
            background-color: #ff69b4 !important;
            border: none;
            border-radius: 15px;
            padding: 12px 30px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
            box-shadow: 0 8px 20px rgba(255,105,180,0.5);
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .btn-primary:hover {
            background-color: #ff1493 !important;
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(255,20,147,0.6);
        }

        .d-flex.justify-content-between a {
            color: white !important;
            font-weight: 700;
            text-decoration: none;
            text-shadow: 0 2px 5px rgba(0,0,0,0.6);
            font-size: 14px;
        }

        .d-flex.justify-content-between a:hover {
            color: #ffb6c1 !important; 
        }
    </style>
</head>

<body>

<audio id="bg-music" loop>
    <source src="assets/img/perunggu.mp3" type="audio/mpeg">
</audio>

<video autoplay muted loop playsinline preload="auto" id="bg-video">
    <source src="assets/img/vd.mp4" type="video/mp4">
</video>

<div class="overlay"></div>

<div class="profile-menu">
    <img src="assets/img/bg2.jpg" class="profile-img" onclick="toggleMenu()" title=" Klik untuk menu Sarah & Tiara">

    <div class="dropdown-menu-custom" id="dropdownMenu">
        <a href="profile.php"><i class="fas fa-user-circle me-2"></i> Profile</a>
        <a href="profile.php#about-us"><i class="fas fa-heart me-2"></i> About us</a> 
    </div>
</div>

<div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5 col-md-8">
                        <div class="card shadow-lg mt-5">
                            <div class="card-header border-0 bg-transparent pt-4">
                                <h1 class="text-center my-3 text-white fw-extrabold" style="font-size: 2.8rem; text-shadow: 0 3px 6px rgba(0,0,0,0.4);">Login</h1>
                            </div>

                            <div class="card-body px-5 pb-4">
                                <?php
                                if (isset($_POST['tombol'])) {
                                    $username = mysqli_real_escape_string($koneksi, $_POST['user']);
                                    $password = $_POST['password'];

                                    $qc = mysqli_query($koneksi, "SELECT username,password FROM login WHERE username='$username'");
                                    $dc = mysqli_fetch_row($qc);

                                    if ($dc && !empty($dc[0])) {
                                        if (password_verify($password, $dc[1])) {
                                            $_SESSION['user'] = $username;
                                            $_SESSION['pass'] = $password;
                                            echo "<script>window.location.replace('./login/index.php')</script>";
                                        } else {
                                            echo "<div class='alert alert-danger py-2'>Password salah </div>";
                                        }
                                    } else {
                                        echo "<div class='alert alert-danger py-2'>Username tidak ditemukan</div>";
                                    }
                                }
                                ?>

                                <form method="post">
                                    <div class="mb-4">
                                        <input class="form-control" type="text" name="user" placeholder="Username" required/>
                                    </div>

                                    <div class="mb-4">
                                        <input class="form-control" type="password" name="password" placeholder="Password" required />
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center mt-5">
                                        <a href="#" class="small">Forgot Password?</a>
                                        <input type="submit" name="tombol" value="Login" class="btn btn-primary">
                                    </div>
                                </form>
                            </div>

                            <div class="card-footer text-center py-3 border-0 bg-transparent">
                                <div class="small opacity-90">
                                    <a href="#" style="color:white; font-weight: 600;">Need an account? Sign up!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <div id="layoutAuthentication_footer">
      <footer class="py-4 mt-auto" style="background: transparent; color: white;">
        <div class="container-fluid px-4 text-center">
            <div class="small opacity-60">
                Pemrograman Web & Database; 2026 — Sarah & Tiara Team | Polines
            </div>
        </div>
      </footer>
    </div>
</div>

<script>
function toggleMenu() {
    const menu = document.getElementById("dropdownMenu");
    menu.style.display = menu.style.display === "block" ? "none" : "block";
}

window.onclick = function(event) {
    if (!event.target.matches('.profile-img')) {
        var dropdown = document.getElementById("dropdownMenu");
        if (dropdown && dropdown.style.display === "block") {
            dropdown.style.display = "none";
        }
    }
}

// SCRIPT MUSIK PINTAR (SISTEM MEMORY)
const audio = document.getElementById("bg-music");

const playMusic = () => {
    audio.play().then(() => {
        // Simpan status bahwa musik sudah "Aktif" di browser ini
        sessionStorage.setItem("musicStatus", "playing");
    }).catch(error => {
        console.log("Menunggu klik user.");
    });
};

// Cek saat halaman dimuat: Kalau statusnya "playing", langsung putar!
window.addEventListener('load', () => {
    if (sessionStorage.getItem("musicStatus") === "playing") {
        audio.play();
    }
});

// Klik pertama kali untuk memicu ijin browser
window.addEventListener('click', playMusic, { once: true });
window.addEventListener('touchstart', playMusic, { once: true });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>