<?php session_start(); ?>
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShareIt - דף הבית</title>
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <style>
        /* התאמת האלמנטים החדשים לפלטת הצבעים של שירה */
        .toast-success {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--logo-green-dark); /* שימוש בירוק מהלוגו */
            color: white;
            padding: 12px 25px;
            border-radius: 50px;
            box-shadow: var(--shadow); /* שימוש בצל מה-CSS שלך */
            z-index: 10000;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 2px solid var(--logo-red-pure); /* מסגרת אדומה עדינה */
            animation: slideDownFade 4s forwards;
        }

        .header-profile-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 10px;
            border: 2px solid var(--logo-red-pure); /* מסגרת אדומה לתמונה */
            object-fit: cover;
        }

        @keyframes slideDownFade {
            0% { opacity: 0; top: -50px; }
            10% { opacity: 1; top: 20px; }
            90% { opacity: 1; top: 20px; }
            100% { opacity: 0; top: -50px; }
        }

        /* עיצוב כרטיסי האוכל בתוך ה-Grid */
        .item-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .item-details {
            padding: 15px;
        }
        .item-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        .distance-tag {
            font-size: 0.9rem;
            color: #666;
            font-weight: 600;
        }
    </style>
</head>
<body>

    <?php if (isset($_SESSION['success_message'])): ?>
        <div class="toast-success">
            <span>✅</span>
            <?php echo $_SESSION['success_message']; unset($_SESSION['success_message']); ?>
        </div>
    <?php endif; ?>

    <header>
        <div class="header-right">
            <img src="../assets/img/logo.jpeg" alt="ShareIt Logo" class="header-logo">
        </div>
        
        <div id="user-info">
            <?php if(isset($_SESSION['first_name'])): ?>
                <div style="display: flex; align-items: center;">
                    <img src="../assets/img/default-avatar.png" class="header-profile-img">
                    שלום, <strong><?php echo $_SESSION['first_name']; ?></strong>
                    <a href="upload.php" style="margin-right: 15px;">שתף אוכל +</a>
                    <a href="../api/auth_logout.php">התנתק</a>
                </div>
            <?php else: ?>
                <a href="login.php">התחברות</a>
                <a href="register.php" class="btn-register-outline">הרשמה</a>
            <?php endif; ?>
        </div>
    </header>

    <main>
        <section class="hero-section">
            <div class="hero-content">
                <div class="hero-brand-name">ShareIt</div>
                <div class="hero-badge">קהילה משתפת, חוסכת ויוצרת קיימות חברתית 🌍♻️</div>
                <h1>
                    <span class="white-text">מה מתחשק לנו היום</span><br>
                    <span id="changing-text">קובה סלק של שישי?</span>
                </h1>
            </div>
        </section>

        <section id="location-bar">
            <p>📍 מציג אוכל ברדיוס של 10 ק"מ מ: <strong><?php echo $_SESSION['user_address'] ?? 'מיקום לא ידוע'; ?></strong></p>
        </section>

        <section id="feed-container">
            <div id="loading-msg" style="text-align: center; color: var(--logo-green-dark); font-weight: bold;">
                מחפשים אוכל טעים בסביבה...
            </div>
            <div id="items-grid" class="grid"></div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-links">
                <a href="about.php">אודות</a> | <a href="#">צרו קשר</a> | <a href="faq.php">שאלות תשובות</a>
            </div>
            <p>© 2026 ShareIt - פלטפורמה קהילתית לשיתוף מזון</p>
        </div>
    </footer>

    <script src="../assets/js/main.js"></script>

    <script>
        async function loadFeed() {
            try {
                const response = await fetch('../api/get_feed.php');
                const items = await response.json();
                const grid = document.getElementById('items-grid');
                const loader = document.getElementById('loading-msg');

                if (!items || items.length === 0) {
                    loader.innerHTML = "<p>אין כרגע אוכל זמין בסביבה. תהיו הראשונים לשתף! 🥗</p>";
                    return;
                }

                loader.style.display = 'none';
                grid.innerHTML = '';

                items.forEach(item => {
                    const card = `
                        <div class="item-card">
                            <img src="../${item.image_url}" alt="${item.title}" class="item-img">
                            <div class="item-details">
                                <h3 style="color: var(--logo-green-dark); margin-bottom: 5px;">${item.title}</h3>
                                <p style="font-size: 0.9rem; color: #555;">${item.description}</p>
                                <div class="item-meta">
                                    <span class="distance-tag">📍 ${parseFloat(item.distance).toFixed(1)} ק"מ</span>
                                    <button onclick="alert('פרטי קשר ייפתחו בקרוב')">פרטים</button>
                                </div>
                            </div>
                        </div>
                    `;
                    grid.innerHTML += card;
                });
            } catch (e) {
                console.error("Error loading feed:", e);
            }
        }
        loadFeed();
    </script>
</body> 
</html>