<?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/profile.css">
</head>
<body>

    <!-- ===== HEADER ===== -->
    <header>
        <div class="header-right">
            <img src="../assets/img/logo.jpeg" alt="ShareIt" class="header-logo">
        </div>
        <nav class="header-nav">
            <a href="upload.php">שתף אוכל +</a>
            <span class="nav-sep">|</span>
            <a href="index.php">חזרה לפיד</a>
            <span class="nav-sep">|</span>
            <a href="../api/auth_logout.php">התנתק</a>
        </nav>
    </header>

    <main class="profile-main">

        <!-- ===== כרטיס פרופיל ===== -->
        <section class="profile-card" id="profile-card">

            <!-- פס אדום עליון -->
            <div class="card-top-bar"></div>

            <div class="card-body">

                <!-- תמונת פרופיל -->
                <div class="avatar-wrap">
                    <img id="avatar-img" src="" alt="">
                    <span id="avatar-letter">
                        <?php echo mb_strtoupper(mb_substr($_SESSION['first_name'] ?? 'U', 0, 1, 'UTF-8'), 'UTF-8'); ?>
                    </span>
                    <label class="avatar-edit-overlay" for="pic-input" id="avatar-overlay">📷</label>
                    <input type="file" id="pic-input" accept="image/*">
                </div>

                <!-- ===== VIEW MODE ===== -->
                <div id="view-mode">

                    <h1 class="profile-name">
                        <span id="v-firstname"><?php echo htmlspecialchars($_SESSION['first_name'] ?? ''); ?></span>
                        <span id="v-lastname"></span>
                    </h1>

                    <div class="details-list">

                        <div class="detail-item">
                            <span class="d-icon">✉️</span>
                            <div class="d-content">
                                <span class="d-label">אימייל</span>
                                <span class="d-value" id="v-email">
                                    <?php echo htmlspecialchars($_SESSION['user_email'] ?? '—'); ?>
                                </span>
                            </div>
                        </div>

                        <div class="detail-item" id="v-phone-row" style="display:none">
                            <span class="d-icon">📞</span>
                            <div class="d-content">
                                <span class="d-label">טלפון</span>
                                <span class="d-value" id="v-phone"></span>
                            </div>
                        </div>

                        <div class="detail-item">
                            <span class="d-icon">📍</span>
                            <div class="d-content">
                                <span class="d-label">כתובת מגורים</span>
                                <span class="d-value" id="v-address">
                                    <?php echo htmlspecialchars($_SESSION['user_address'] ?? '—'); ?>
                                </span>
                            </div>
                        </div>

                    </div>

                    <button class="btn-green" id="btn-edit">עריכת פרטים</button>

                </div>

                <!-- ===== EDIT MODE ===== -->
                <form id="edit-mode" novalidate>

                    <div class="form-row-2">
                        <div class="fg">
                            <label for="e-fn">שם פרטי</label>
                            <input type="text" id="e-fn" name="first_name">
                            <span class="ferr" id="err-fn"></span>
                        </div>
                        <div class="fg">
                            <label for="e-ln">שם משפחה</label>
                            <input type="text" id="e-ln" name="last_name">
                            <span class="ferr" id="err-ln"></span>
                        </div>
                    </div>

                    <div class="fg">
                        <label for="e-em">אימייל</label>
                        <input type="email" id="e-em" name="email">
                        <span class="ferr" id="err-em"></span>
                    </div>

                    <div class="fg">
                        <label for="e-ph">טלפון</label>
                        <input type="tel" id="e-ph" name="phone" placeholder="050-0000000">
                        <span class="ferr" id="err-ph"></span>
                    </div>

                    <p class="edit-section-label">כתובת מגורים</p>

                    <div class="form-row-2">
                        <div class="fg">
                            <label for="e-city">עיר</label>
                            <input type="text" id="e-city" name="city">
                        </div>
                        <div class="fg">
                            <label for="e-str">רחוב</label>
                            <input type="text" id="e-str" name="street">
                        </div>
                        <div class="fg">
                            <label for="e-hn">מספר בית</label>
                            <input type="text" id="e-hn" name="house_number">
                        </div>
                        <div class="fg">
                            <label for="e-apt">דירה</label>
                            <input type="text" id="e-apt" name="apartment">
                        </div>
                    </div>

                    <div class="edit-btns">
                        <button type="submit" class="btn-green" id="btn-save">שמור שינויים</button>
                        <button type="button" class="btn-outline" id="btn-cancel">ביטול</button>
                    </div>

                </form>

            </div><!-- /card-body -->
        </section>

        <!-- ===== הפריטים ששיתפתי ===== -->
        <section class="items-section" id="items-section">
            <h2 class="section-title">הפריטים ששיתפתי</h2>
            <div id="items-grid" class="items-grid"></div>
        </section>

        <!-- ===== הפריטים שצרכתי ===== -->
        <section class="items-section" id="consumed-section">
            <h2 class="section-title">הפריטים שצרכתי</h2>
            <div id="consumed-grid" class="items-grid"></div>
        </section>

    </main>

    <div id="toast"></div>

    <script src="../assets/js/profile.js"></script>
</body>
</html>
