<?php
// login.php - Daily Market Sales Ops Authentication
session_start();

// Redirect if already logged in
if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) {
    header('Location: index.php');
    exit();
}

require_once 'auth.php';

$error = '';
$success = '';

// Handle Login Logic
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if (empty($username) || empty($password)) {
        $error = 'Please enter your username and password.';
    } elseif (login($username, $password)) {
        header('Location: index.php');
        exit();
    } else {
        $error = 'Invalid credentials. Please try again.';
    }
}

// Logout Message
if (isset($_GET['logout']) && $_GET['logout'] == 1) {
    $success = 'You have logged out successfully.';
}

// Expired Session Message
if (isset($_GET['expired']) && $_GET['expired'] == 1) {
    $error = 'Your session has expired. Please login again.';
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Store Map System</title>
    <link rel="icon" type="image/png" href="/St/favicon.png">

    
    <style>
        /* معرفی فونت لوکال */
        @font-face {
            font-family: 'YekanBakh';
            src: url('/fonts/YekanBakh-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --dm-red: #D6001C; /* Daily Market Official Red */
            --dm-red-hover: #b90018;
            --slate-900: #0f172a;
            --slate-600: #475569;
            --slate-400: #94a3b8;
            --slate-100: #f1f5f9;
            --white: #ffffff;
            --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* اعمال فونت یکان‌بخ برای تمامی بخش‌ها */
            font-family: 'YekanBakh', Tahoma, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: #f8fafc;
            /* Modern subtle background pattern */
            background-image: 
                radial-gradient(at 0% 0%, rgba(214, 0, 28, 0.03) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(15, 23, 42, 0.03) 0px, transparent 50%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 24px;
        }

        .main-container {
            width: 100%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: 32px;
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Login Card */
        .login-card {
            background: var(--white);
            border-radius: 24px;
            box-shadow: var(--shadow-lg);
            padding: 48px 40px;
            border: 1px solid rgba(255,255,255,0.8);
            position: relative;
            overflow: hidden;
        }

        /* Top accent line */
        .login-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--dm-red), #ff4d4d);
        }

        .header {
            text-align: center;
            margin-bottom: 32px;
        }

        .logo-container {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
        }

        .header h1 {
            color: var(--slate-900);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }

        .header p {
            color: var(--slate-600);
            font-size: 14px;
        }

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

        .label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--slate-600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .input-wrapper {
            position: relative;
        }

        .form-input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-size: 15px;
            color: var(--slate-900);
            transition: all 0.2s ease;
            background: var(--slate-100);
        }

        .form-input:focus {
            outline: none;
            background: var(--white);
            border-color: var(--dm-red);
            box-shadow: 0 0 0 4px rgba(214, 0, 28, 0.1);
        }

        .form-input::placeholder {
            color: var(--slate-400);
        }

        .toggle-password {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--slate-400);
            font-size: 18px;
            transition: color 0.2s;
        }

        .toggle-password:hover {
            color: var(--slate-600);
        }

        .btn-submit {
            width: 100%;
            padding: 16px;
            background-color: var(--dm-red);
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 12px;
        }

        .btn-submit:hover {
            background-color: var(--dm-red-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(214, 0, 28, 0.25);
        }

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

        /* Alerts */
        .alert {
            padding: 12px;
            border-radius: 8px;
            font-size: 13px;
            text-align: center;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .alert-error {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fee2e2;
        }

        .alert-success {
            background: #f0fdf4;
            color: #166534;
            border: 1px solid #dcfce7;
        }

        /* Footer / Powered By */
        .footer-info {
            text-align: center;
        }

        .powered-by {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .powered-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--slate-400);
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .team-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--slate-900);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .dm-badge {
            background: var(--dm-red);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 6px;
            border-radius: 4px;
            text-transform: uppercase;
        }

        .product-tag {
            font-size: 12px;
            color: var(--slate-600);
            margin-top: 2px;
            opacity: 0.8;
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 32px 24px;
            }
        }
    </style>
</head>
<body>

    <div class="main-container">
        <div class="login-card">
            <div class="header">
                <div class="logo-container">
                    <!-- Icon from root directory -->
                    <img src="icon.png" alt="Daily Market Logo">
                </div>
                <h1>Welcome Back</h1>
                <p>Please enter your details to sign in.</p>
            </div>

            <?php if ($error): ?>
                <div class="alert alert-error">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <?php echo htmlspecialchars($error); ?>
                </div>
            <?php endif; ?>

            <?php if ($success): ?>
                <div class="alert alert-success">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
                    <?php echo htmlspecialchars($success); ?>
                </div>
            <?php endif; ?>

            <form method="POST" action="">
                <!-- فیلد نام کاربری اصلاح شد و autocomplete اضافه شد -->
                <div class="form-group">
                    <label for="username" class="label">Username</label>
                    <div class="input-wrapper">
                        <input type="text" 
                               id="username" 
                               name="username" 
                               class="form-input" 
                               placeholder="Enter your username"
                               autocomplete="username"
                               required>
                    </div>
                </div>

                <!-- فیلد رمز عبور اصلاح شد و autocomplete اضافه شد -->
                <div class="form-group">
                    <label for="password" class="label">Password</label>
                    <div class="input-wrapper">
                        <input type="password" 
                               id="password" 
                               name="password" 
                               class="form-input" 
                               placeholder="Enter your password"
                               autocomplete="current-password" 
                               required>
                        <span class="toggle-password" onclick="togglePassword()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                        </span>
                    </div>
                </div>

                <button type="submit" class="btn-submit">Sign In</button>
            </form>
        </div>

        <div class="footer-info">
            <div class="powered-by">
                <span class="powered-label">Powered By</span>
                <div class="team-name">
                    <span class="dm-badge">DAILY MARKET</span>
                    SALES OPS TEAM
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.querySelector('.toggle-password');
            
            // Icons
            const eyeOpen = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>';
            const eyeClosed = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>';

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.innerHTML = eyeClosed;
                toggleIcon.style.color = '#D6001C'; // Red when visible
            } else {
                passwordInput.type = 'password';
                toggleIcon.innerHTML = eyeOpen;
                toggleIcon.style.color = '';
            }
        }
    </script>
</body>
</html>
