<?php
require_once __DIR__ . '/includes/auth.php';
require_once __DIR__ . '/includes/functions.php';

$error = '';

if (isLoggedIn()) {
    $target = isSuperAdmin() ? '/admin/index.php' : '/branch/index.php';
    $referer = $_SERVER['HTTP_REFERER'] ?? '';
    if (strpos($referer, $target) !== false) {
        logout();
    } else {
        header('Location: ' . $target);
        exit;
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (login($_POST['username'] ?? '', $_POST['password'] ?? '')) {
        $target = isSuperAdmin() ? '/admin/index.php' : '/branch/index.php';
        header('Location: ' . $target);
        exit;
    }
    $error = 'Username atau password salah';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - RockyLink</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
:root {
    --primary-blue: #0066CC;
    --light-blue: #00B4FF;
    --dark-blue: #003D7A;
    --orange: #FF9900;
    --gradient-blue: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.login-wrapper {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Logo Section */
.logo-section {
    text-align: center;
    width: 100%;
}

.logo-img {
    width: 450px;
    height: auto;
    max-width: 100%;
    margin-bottom: 5px;
    filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.2));
}

.logo-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.logo-subtitle {
    color: #666;
    font-size: 0.9rem;
}

/* Form Section */
.form-section {
    width: 100%;
}

.login-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 102, 204, 0.15);
    padding: 40px 35px;
    position: relative;
}

.card-header-custom {
    text-align: center;
    margin-bottom: 30px;
}

.card-header-custom h2 {
    color: var(--dark-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-header-custom p {
    color: #888;
    font-size: 0.9rem;
}

/* Form Elements */
.form-group-custom {
    margin-bottom: 20px;
}

.form-group-custom label {
    display: block;
    color: var(--dark-blue);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-blue);
    font-size: 1.1rem;
}

.form-control-custom {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border: 2px solid #e8f4f8;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

/* Alert */
.alert-custom {
    background: #ffe6e6;
    border: 2px solid #ffcccc;
    border-radius: 15px;
    padding: 12px 18px;
    color: #cc0000;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Button */
.btn-login {
    width: 100%;
    padding: 15px;
    background: var(--gradient-blue);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

/* Footer */
.form-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e8f4f8;
}

.form-footer a {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.form-footer a:hover {
    color: var(--orange);
}

/* Responsive */
@media (max-width: 768px) {
    .login-wrapper {
        gap: 25px;
    }
    
    .logo-img {
        width: auto;
        max-width: 75%;
        height: auto;
    }
    
    .logo-title {
        font-size: 1.5rem;
    }
    
    .login-card {
        padding: 35px 30px;
    }
    
    .card-header-custom h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .logo-img {
        width: auto;
        max-width: 85%;
    }
    
    .login-card {
        padding: 30px 25px;
    }
    
    .form-control-custom {
        padding: 12px 16px 12px 45px;
        font-size: 0.95rem;
    }
    
    .btn-login {
        padding: 13px;
        font-size: 1rem;
    }
}
</style>
</head>
<body>

<div class="login-wrapper">
    <!-- Logo Section -->
    <div class="logo-section">
        <img src="/assets/img/hamster.png" alt="RockyLink Logo" class="logo-img">
    </div>

    <!-- Form Section -->
    <div class="form-section">
        <div class="login-card">
           

            <?php if ($error): ?>
                <div class="alert-custom">
                    <i class="bi bi-exclamation-circle-fill"></i>
                    <span><?= htmlspecialchars($error) ?></span>
                </div>
            <?php endif; ?>
            
            <?php if (isset($_GET['force_logout'])): ?>
                <div class="alert-custom" style="background: #fff3cd; border-color: #ffeeba; color: #856404;">
                    <i class="bi bi-info-circle-fill"></i>
                    <span>Sesi Anda telah direset. Silakan login ulang.</span>
                </div>
            <?php endif; ?>

            <form method="POST">
                <div class="form-group-custom">
                    <label for="username">Username</label>
                    <div class="input-wrapper">
                        <input 
                            type="text" 
                            id="username"
                            name="username" 
                            class="form-control-custom" 
                            placeholder="Masukkan username"
                            required 
                            autofocus
                        >
                        <i class="bi bi-person input-icon"></i>
                    </div>
                </div>
                
                <div class="form-group-custom">
                    <label for="password">Password</label>
                    <div class="input-wrapper">
                        <input 
                            type="password" 
                            id="password"
                            name="password" 
                            class="form-control-custom" 
                            placeholder="Masukkan password"
                            required
                        >
                        <i class="bi bi-lock input-icon"></i>
                    </div>
                </div>
                
                <button type="submit" class="btn-login">
                    Masuk Sekarang
                </button>
            </form>
            
            <div class="form-footer">
                <a href="?force_logout=1">
                    <i class="bi bi-arrow-repeat"></i> Reset Sesi (Jika Error)
                </a>
            </div>
        </div>
    </div>
</div>

</body>
</html>