<?php
session_start();
include_once "koneksi.php";

if (isset($_POST['no_handphone'])) {
    $no_handphone = $_POST['no_handphone'];
    $password = $_POST['password'];

    $query = mysqli_query(
        $koneksi,
        "SELECT * FROM user WHERE no_handphone='$no_handphone' AND password='$password'"
    );

    if ($query && mysqli_num_rows($query) > 0) {
        $data = mysqli_fetch_array($query);

        $_SESSION['user'] = $data;
        $_SESSION['id'] = $data['id'];
        $_SESSION['role'] = $data['role']; // <--- FIX DISINI

        $nama_user = addslashes($data['nama_asli']);


        if (!empty($_POST['remember'])) {
            $token = bin2hex(random_bytes(16));
            setcookie('remember_me', $token, time() + (86400 * 30), "/", "", true, true);
            mysqli_query(
                $koneksi,
                "UPDATE user SET remember_token='$token' WHERE no_handphone='$no_handphone'"
            );
        }

        header("Location: login.php?login=success&nama=" . urlencode($nama_user));
        exit;
    } else {
        header("Location: login.php?login=error");
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ELD NOTE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <style>
        /* ============================================================
   BACKGROUND GRADIENT PREMIUM
============================================================ */
        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(170deg, #071733 10%, #0c1f45 40%, #102a5e 70%, #1b3455 100%);
            min-height: 100vh;
            color: #fff;

            display: flex;
            flex-direction: column;
            align-items: center;

            animation: fadeIn 0.8s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* LOGO */
        .logo {
            width: 55%;
            max-width: 230px;
            margin-top: 40px;
            animation: fadeIn 1s ease;
        }

        /* ============================================================
   CARD LOGIN
============================================================ */
        .login-card {
            width: 90%;
            max-width: 350px;

            margin-top: 22px;
            padding: 0;
            /* FIX */
            border-radius: 18px;
            overflow: hidden;
            /* FIX AGAR INPUT TIDAK KELUAR */

            background: rgba(35, 58, 106, 0.88);
            border: 3px solid rgba(255, 255, 255, 0.15);

            box-shadow:
                0 10px 0 rgba(0, 0, 0, 0.35),
                inset 0 2px 4px rgba(255, 255, 255, 0.25);

            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);

            animation: fadeIn 1s ease;
        }

        /* Inner agar padding rapi */
        .card-inner {
            padding: 22px 20px 28px 20px;
        }

        /* TITLE */
        .login-title {
            font-size: 26px;
            font-weight: 700;
            color: #ffd800;
            text-align: center;
            margin-bottom: 18px;
        }

        /* ============================================================
    INPUT GROUP
============================================================ */
        /* ============================
   INPUT GROUP CENTER & CLEAN
============================ */
        .input-group {
            width: 100%;
            max-width: 300px;
            /* batasi supaya tidak kepanjangan */
            margin: 0 auto 15px auto;
            /* center */
            position: relative;
        }

        /* Ikon kiri */
        .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #ffd800;
            opacity: 0.85;
        }

        /* Input */
        .login-input {
            width: 100%;
            padding: 14px 14px 14px 46px;
            /* padding kiri FIX */
            border-radius: 12px;

            background: rgba(255, 255, 255, 0.13);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 15px;

            box-sizing: border-box;
            /* penting agar padding tidak melebarkan input */
        }

        /* Placeholder rapi dan tidak geser */
        .login-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        /* Focus effect */
        .login-input:focus {
            outline: none;
            border-color: #ffd800;
            box-shadow: 0 0 8px rgba(255, 215, 80, 0.7);
        }

        /* Tombol mata */
        .toggle-pass {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #ffd800;
            font-size: 18px;
            cursor: pointer;
            opacity: 0.9;
        }

        /* ============================================================
   BUTTON 3D GOLD
============================================================ */
        .gold-btn {
            width: 100%;
            padding: 14px;
            margin-top: 8px;

            border: none;
            border-radius: 14px;

            background: linear-gradient(#ffe680, #ffcc00);
            color: #04003a;
            font-weight: 700;
            font-size: 18px;

            box-shadow:
                0 6px 0 #d1a700,
                0 4px 10px rgba(0, 0, 0, 0.18),
                inset 0 3px 4px rgba(255, 255, 255, 0.45);

            transition: 0.23s;
        }

        .gold-btn:hover {
            transform: translateY(-3px);
            box-shadow:
                0 9px 0 #d1a700,
                0 6px 14px rgba(0, 0, 0, 0.24),
                inset 0 2px 5px rgba(255, 255, 255, 0.5);
        }

        .gold-btn:active {
            transform: translateY(2px);
            box-shadow:
                0 3px 0 #d1a700,
                0 2px 6px rgba(0, 0, 0, 0.22),
                inset 0 4px 6px rgba(0, 0, 0, 0.25);
        }

        /* Register link */
        .register-box {
            text-align: center;
            margin-top: 14px;
            font-size: 14px;
        }

        .register-box a {
            color: #ffd800;
            font-weight: 600;
        }

        /* FOOTER */
        .footer {
            text-align: center;
            margin-top: 35px;
            font-size: 14px;
            color: #ffd800;
        }

        /* SWEETALERT */
        .swal2-popup {
            background: rgba(30, 45, 80, 0.4) !important;
            backdrop-filter: blur(12px) !important;
            border: 2px solid rgba(90, 120, 180, 0.4);
            color: #fff;
        }
    </style>
</head>

<body>

    <!-- LOGO -->
    <img src="img/tior.png" class="logo">

    <form class="login-card" method="post">
        <div class="card-inner">

            <div class="login-title">LOGIN</div>

            <!-- Nomor WA -->
            <div class="input-group">
                <i class="fa fa-phone input-icon"></i>
                <input type="tel" name="no_handphone" class="login-input" placeholder="Nomor Whatsapp" required>
            </div>

            <!-- Password -->
            <div class="input-group">
                <i class="fa fa-lock input-icon"></i>
                <input type="password" id="password" name="password" class="login-input" placeholder="Password" required>
                <i class="fa fa-eye toggle-pass" onclick="togglePassword()"></i>
            </div>

            <div style="text-align:left;margin-bottom:10px;">
                <input type="checkbox" id="remember" name="remember">
                <label for="remember" style="color:#ffd800;">Tetap Login</label>
            </div>

            <button type="submit" class="gold-btn">Login</button>

            <div class="register-box">
                Belum punya akun? <a href="daftar.php">Daftar</a>
            </div>

        </div>
    </form>

    <div class="footer">© 2025 TIOR DELIVERY</div>

    <script>
        // Toggle Password
        function togglePassword() {
            const pass = document.getElementById("password");
            const icon = document.querySelector(".toggle-pass");

            if (pass.type === "password") {
                pass.type = "text";
                icon.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                pass.type = "password";
                icon.classList.replace("fa-eye-slash", "fa-eye");
            }
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const url = new URLSearchParams(location.search);

            const login = url.get('login');
            const nama = url.get('nama');
            const logout = url.get('logout');

            if (login === 'success' && nama) {
                Swal.fire({
                    title: 'Selamat Datang',
                    html: '<b>' + decodeURIComponent(nama) + '</b>',
                    imageUrl: 'img/head.png',
                    imageWidth: 150,
                    showConfirmButton: false,
                    timer: 2000
                }).then(() => {
                    window.location.href = 'index.php';
                });

                history.replaceState(null, '', location.pathname);
            }

            if (login === 'error') {
                Swal.fire({
                    icon: 'error',
                    title: 'Login Gagal',
                    text: 'Nomor handphone atau password salah!',
                    timer: 2000,
                    showConfirmButton: false
                });
                history.replaceState(null, '', location.pathname);
            }

            if (logout === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Logout Berhasil',
                    text: 'Kamu telah keluar dari akun.',
                    timer: 1800,
                    showConfirmButton: false
                });
                history.replaceState(null, '', location.pathname);
            }
        });
    </script>

</body>

</html>