<style>
.profile-wrapper {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    min-height:80vh;
    padding:40px 20px;
    flex-wrap:wrap;
}
.profile-card, .orders-card {
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,0.1);
    padding:40px;
    flex:1 1 360px;
    max-width:480px;
}
.profile-title {
    font-family:"Playfair Display", serif;
    font-size:30px;
    text-align:center;
    margin-bottom:30px;
    color:#3b302a;
}
.profile-section {
    margin-bottom:40px;
}
.profile-section h3 {
    font-size:20px;
    color:#3b302a;
    margin-bottom:15px;
    border-bottom:2px solid #f0eae6;
    padding-bottom:6px;
}
.profile-section p, .profile-section li {
    font-size:15px;
    color:#4a403b;
    line-height:1.6;
}
.profile-section strong {
    color:#3b302a;
}
.profile-list {
    list-style:none;
    padding-left:0;
}
.button {
    display:inline-block;
    background-color:#3b302a;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    text-decoration:none;
    transition: background 0.3s;
}
.button:hover {
    background-color:#57463d;
}
.order-card {
    padding:15px 20px;
    border:1px solid #eee;
    border-radius:10px;
    margin-bottom:12px;
    background-color:#fcfbfa;
}
.order-card ul {
    margin:8px 0 0 20px;
    padding:0;
}
.form-style input, .form-style select, .form-style textarea {
    width:100%;
    margin-bottom:15px;
    padding:10px 12px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:14px;
}
.form-style label {
    font-weight:500;
    color:#3b302a;
    font-size:14px;
    margin-bottom:5px;
    display:block;
}
@media (max-width:768px) {
    .profile-wrapper {
        flex-direction:column;
        padding:20px 10px;
    }
    .profile-card, .orders-card {
        max-width:100%;
        width:100%;
        padding:25px 20px;
        box-sizing:border-box;
    }
}

</style>

<div class="profile-wrapper">
    <div class="profile-card">
        <h2 class="profile-title">My Profile</h2>
        <section class="profile-section">
            <p><strong>Name:</strong>
                <?= h(trim(($user->first_name ?? '') . ' ' . ($user->last_name ?? ''))) ?: '—' ?>
            </p>
            <p><strong>Email:</strong> <?= h($user->email) ?></p>
            <p><strong>Phone:</strong> <?= h($user->phone ?? '—') ?></p>
            <p><strong>Date of Birth:</strong>
                <?php
                use Cake\I18n\FrozenDate;
                if ($user->date_of_birth) {
                    $dob = $user->date_of_birth instanceof FrozenDate
                        ? $user->date_of_birth
                        : new FrozenDate($user->date_of_birth);
                    echo $dob->i18nFormat('dd MMM yyyy');
                } else {
                    echo '—';
                }
                ?>
            </p>
            <?= $this->Html->link('Edit Profile', ['action' => 'editProfile'], ['class' => 'button']) ?>
        </section>

        <section class="profile-section">
            <h3>Your Preferences</h3>
            <?php if (empty($user->user_preferences)): ?>
                <p><em>No preferences saved.</em></p>
            <?php else: ?>
                <ul class="profile-list">
                    <?php foreach ($user->user_preferences as $p): ?>
                        <li><strong><?= h($p->pref_key) ?>:</strong> <?= h($p->pref_value) ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>

            <h4 style="margin-top:20px;font-size:18px;color:#3b302a;">Add / Update a Preference</h4>
            <?= $this->Form->create(null, ['url' => ['action' => 'savePreference'], 'class'=>'form-style']) ?>
                <?= $this->Form->control('pref_key', [
                    'label' => 'Key (e.g., roast, milk, size)',
                    'class' => 'login-input',
                    'templates' => ['label' => '<label>{{text}}</label>']
                ]) ?>
                <?= $this->Form->control('pref_value', [
                    'label' => 'Value (e.g., medium, oat, 12oz)',
                    'class' => 'login-input',
                    'templates' => ['label' => '<label>{{text}}</label>']
                ]) ?>
                <?= $this->Form->button('Save Preference', ['class' => 'button', 'style'=>'width:100%;margin-top:10px;']) ?>
            <?= $this->Form->end() ?>
        </section>
    </div>

    <div class="orders-card">
        <h2 class="profile-title">Recent Orders</h2>
        <?php if (empty($user->orders)): ?>
            <p><em>No past orders.</em></p>
        <?php else: ?>
            <?php foreach ($user->orders as $o): ?>
                <div class="order-card">
                    <div>
                        <strong>#<?= h($o->order_no ?? ('ORD-' . $o->id)) ?></strong>
                        &nbsp; | &nbsp; <?= h($o->status ?? '—') ?>
                        &nbsp; | &nbsp; $<?= number_format((float)($o->total ?? 0), 2) ?>
                        <?php if ($o->created): ?>
                            &nbsp; | &nbsp; <?= $o->created->i18nFormat('dd MMM yyyy') ?>
                        <?php endif; ?>
                    </div>
                    <?php if (!empty($o->order_items)): ?>
                        <ul>
                            <?php foreach ($o->order_items as $item): ?>
                                <li><?= h($item->name) ?> × <?= (int)$item->qty ?> — $<?= number_format((float)$item->unit_price, 2) ?></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

<!-- ===== Member Discount Popup (Profile only) ===== -->
<div id="memberDiscountModal" style="
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45);
">
  <div style="
    position:relative;                 /* <-- so the X can be absolutely positioned */
    background:#fff; margin:10% auto; padding:28px;
    width:90%; max-width:480px; border-radius:12px;
    text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.18);
  ">

    <!-- ✕ Close button (top-right) -->
    <button id="closeMemberX" aria-label="Close" style="
      position:absolute; top:10px; right:12px;
      background:transparent; border:none; font-size:22px; line-height:1;
      color:#7a6a5c; cursor:pointer; padding:4px;
    ">✕</button>

    <h2 style="margin:0 0 6px; color:#4b2e05; font-weight:800;">☕ Member Perk!</h2>
    <p style="margin:8px 0 14px;">
      As you are a member with us, you can apply this code to get
      <strong>5% off</strong> for your order.
    </p>

    <div style="font-size:1.1rem; margin:0 auto 14px; padding:10px 14px;
                background:#f5efe6; border:1px dashed #c7b9a1; border-radius:8px; width:max-content;">
      <strong id="discountCode">BrewhubLover123</strong>
    </div>

    <div style="display:flex; gap:10px; justify-content:center; flex-wrap:wrap;">
      <button id="copyCodeBtn" style="
        background:#4b2e05; color:#fff; border:0; padding:10px 16px;
        border-radius:8px; cursor:pointer;
      ">Copy Code</button>

      <a href="/product-browser/index" style="
        display:inline-block; background:#2f2415; color:#fff; text-decoration:none;
        padding:10px 16px; border-radius:8px;
      ">Shop Now</a>
    </div>

    <div id="copyFeedback" style="margin-top:8px; color:#2e7d32; display:none;">
      Code copied!
    </div>
  </div>
</div>

<script>
window.addEventListener("load", function () {
  const modal = document.getElementById("memberDiscountModal");
  modal.style.display = "block";

  // Close on ✕
  document.getElementById("closeMemberX").addEventListener("click", function(){
    modal.style.display = "none";
  });

  // Close when clicking backdrop
  window.addEventListener("click", function(e){
    if (e.target === modal) modal.style.display = "none";
  });

  // Close on Esc
  window.addEventListener("keydown", function(e){
    if (e.key === "Escape") modal.style.display = "none";
  });

  // Copy to clipboard
  document.getElementById("copyCodeBtn").addEventListener("click", async function(){
    const code = document.getElementById("discountCode").innerText.trim();
    try {
      await navigator.clipboard.writeText(code);
      const fb = document.getElementById("copyFeedback");
      fb.style.display = "block";
      setTimeout(()=> fb.style.display = "none", 1500);
    } catch(e) {
      alert("Copy failed. Code: " + code);
    }
  });
});
</script>
<!-- ===== /Member Discount Popup ===== -->


