<!-- pages/login.html -->
<div class="login-wrapper">
    <div class="login-card">
        <div class="login-header">
            <img src="assets/logo.png" alt="Logo" class="login-logo">
            <h2>بابا نوید ٹریڈرز</h2>
            <p>غلہ منڈی، اوکاڑہ — خوش آمدید</p>
        </div>

        <form id="loginForm" class="login-form">
            <div class="form-group">
                <label for="username">یوزر نیم (Username)</label>
                <div class="input-icon">
                    <i class="fas fa-user"></i>
                    <input type="text" id="username" class="form-control" placeholder="اپنا یوزر نیم درج کریں" required autocomplete="username">
                </div>
            </div>

            <div class="form-group">
                <label for="password">پاس ورڈ (Password)</label>
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="password" class="form-control" placeholder="اپنا پاس ورڈ درج کریں" required autocomplete="current-password">
                </div>
            </div>

            <button type="submit" class="btn-primary btn-block btn-lg" id="loginBtn">
                <i class="fas fa-sign-in-alt"></i> لاگ ان کریں
            </button>
        </form>

        <div class="login-footer">
            <p>&copy; 2026 بابا نوید ٹریڈرز۔ جملہ حقوق محفوظ ہیں۔</p>
        </div>
    </div>
</div>

<style>
/* Login Specific Styles */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: 20px;
}

.login-card {
    background: var(--surface);
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    animation: slideUp 0.5s ease-out;
}

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

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

.login-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.login-header h2 {
    color: var(--accent);
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
}

.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.input-icon .form-control {
    padding-right: 45px;
    height: 50px;
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.login-footer p {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .login-card {
        padding: 25px;
    }
}
</style>

<script>
function initLogin() {
    // Hide sidebar on login page
    $('#sidebar, .header').hide();
    $('.main-content').css({ 'margin-right': '0', 'width': '100%' });

    $('#loginForm').off('submit').on('submit', async function(e) {
        e.preventDefault();
        
        const username = $('#username').val();
        const password = $('#password').val();
        const $btn = $('#loginBtn');

        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> پروسیسنگ...');

        try {
            const res = await API.post('/auth/login', { username, password });
            
            if (res.success) {
                localStorage.setItem('jwt_token', res.data.token);
                localStorage.setItem('current_user', JSON.stringify(res.data.user));
                Toast.success("خوش آمدید! آپ کامیابی سے لاگ ان ہو گئے ہیں۔");
                
                // Refresh app state and redirect
                setTimeout(() => {
                    window.location.hash = '#dashboard';
                    window.location.reload(); // Hard reload to reset sidebar/header
                }, 1000);
            }
        } catch (err) {
            $btn.prop('disabled', false).html('<i class="fas fa-sign-in-alt"></i> لاگ ان کریں');
        }
    });
}
</script>
