<!-- Bootstrap CSS + JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<!-- jQuery (nécessaire pour AJAX + Bootstrap 5 modal) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<?php
// Retrieve user listings
if (!empty($_SESSION['mesannonces']) && is_array($_SESSION['mesannonces'])) {
    $annonces = $_SESSION['mesannonces'];
    $nbrannonces =  $_SESSION['totallisting'];
} else {
    $annonces = [];
    $nbrannonces =  $_SESSION['totallisting'];
    addMsg('debug', trad('No listings found.'));
}

// User name
$name = $_SESSION['user']['lastname'] ?? $_SESSION['user']['firstname'];
$name = $name ?? trad('User');

showMsg();
?>

<div class="container-fluid py-5">
  <!-- Header -->
  <div class="row mb-4 text-center">
    <div class="col">
      <h3>👋 <?= trad('Hello') ?> <?= htmlspecialchars($name) ?></h3>
      <p class="text-muted mb-0"><?= trad('Welcome to your Mondialisa dashboard') ?></p>
      <p class="mt-2">
  <span class="badge bg-success fs-6 px-3 py-2 rounded-pill">
    💰 <?= number_format($_SESSION['user']['solde'], 2) ?> 
    </span>
     <a href="index.php?p=solde_recharge" class="btn btn-outline-primary btn-sm">
        ➕
    </a>
  
</p>
      <a href="logout.php" class="text-danger">🚪 <?= trad('Log out') ?></a>
    </div>
  </div>

  <!-- 4 main cards -->
  <div class="row text-center mb-4">
    <div class="col-md-3 mb-3">
      <div class="card shadow-sm p-4 h-100">
        <h5 class="text-danger"><?= trad('My profile') ?></h5>
        <p><?= trad('Manage your personal information and contact details.') ?></p>
        <a href="index.php?p=user_monprofil" class="btn btn-danger btn-sm"><?= trad('Edit my profile') ?></a>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="card shadow-sm p-4 h-100">
        <h5 class="text-primary"><?= trad('My listings') ?></h5>
        <h4><?= count($annonces).' / '.$nbrannonces ?></h4>
        <a href="index.php?p=mes_annonces" class="btn btn-outline-primary btn-sm mt-2"><?= trad('View all') ?></a>
      </div>
    </div>

  <div class="col-md-3 mb-3">
      <div class="card shadow-sm p-3 h-100">
        <h5 class="text-primary"><?= trad('My properties') ?></h5>
        <h4><?= $_SESSION['totalproperties'] ?></h4>
        <a href="index.php?p=properties_my_list" class="btn btn-outline-primary btn-sm mt-2"><?= trad('Manage') ?></a>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="card shadow-sm p-4 h-100">
        <h5 class="text-success"><?= trad('Learn') ?></h5>
                <a href="index.php?p=learn_my_formations" class="btn btn-outline-primary btn-sm mt-2"><?= trad('My Learning') ?></a>
      </div>
    </div>
    

  </div>

  <!-- My Listings section -->
  <div class="card shadow-sm p-4">
    <h5 class="mb-3"><?= trad('My listings') ?></h5>

<section class="featured-section">
  <div class="listings">
    <?php if (empty($annonces)): ?>
      <p class="text-center text-muted py-3"><?= trad('You don’t have any listings yet.') ?></p>
    <?php else: ?>
      <?php foreach ($annonces as $annonce): 
        $photos = [];
        $field = trim($annonce['photo'] ?? '');
        if ($field !== '') {
            $photos = array_map('trim', explode(',', $field));
        }
        $mainPhoto = $photos[0] ?? 'uploads/default.png';
        $carouselId = 'carousel' . $annonce['ref'];
      ?>

      <div class="listing">
        <a href="index.php?p=details&ref=<?= urlencode($annonce['ref']) ?>" class="listing-link">

          <!-- Carousel -->
          <div id="<?= $carouselId ?>" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <?php foreach ($photos as $index => $photo): ?>
                <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
                  <img src="<?= htmlspecialchars($photo) ?>" class="d-block w-100" alt="<?= htmlspecialchars($annonce['titre']) ?>" style="height:160px; object-fit:cover;">
                </div>
              <?php endforeach; ?>
            </div>

            <?php if(count($photos) > 1): ?>
            <button class="carousel-control-prev" type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden"><?= trad('Previous') ?></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden"><?= trad('Next') ?></span>
            </button>
            <?php endif; ?>
          </div>

          <!-- Titre -->
          <div class="mt-2 fw-bold"><?= htmlspecialchars($annonce['titre']) ?></div>

          <!-- Description -->
          <div class="desc"><?= htmlspecialchars($annonce['description']) ?></div>

          <!-- Meta infos -->
          <div class="meta mt-2">
            <div class="price fw-bold"><?= htmlspecialchars($annonce['prix']) ?> <?= htmlspecialchars($_SESSION['devise'] ?? '') ?></div>
            <div><?= htmlspecialchars($annonce['ville']) ?></div>
            <div>
              <span class="badge bg-<?= $annonce['statut'] == 1 ? 'success' : 'secondary' ?>">
                <?= $annonce['statut'] == 1 ? trad('Active') : trad('Pending') ?>
              </span>
            </div>
          </div>
        </a>

        <!-- Action buttons -->
        <div class="mt-2 d-flex justify-content-between">
          <button class="btn btn-sm btn-outline-danger btn-action"
                  onclick="confirmerSuppression('<?= htmlspecialchars($annonce['ref']) ?>')">
            🗑 <?= trad('Delete') ?>
          </button>

          <a href="index.php?p=booster_annonce&ref=<?= urlencode($annonce['ref']) ?>"
             class="btn btn-sm btn-outline-warning btn-action">
            🚀 <?= trad('Boost') ?>
          </a>
        </div>
      </div>

      <?php endforeach; ?>
    <?php endif; ?>
  </div>
</section>

<!-- Styles -->
<style>
.carousel-item img {
    border-radius: 8px;
}

.listing {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    margin-bottom: 20px;
}

.desc {
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    color: #555;
}
.price {
    direction: ltr !important;
    unicode-bidi: embed;
    text-align: left;
    display: inline-block;
    white-space: nowrap;
}
.meta {
    font-size: 13px;
    color: #555;
}

.btn-action {
    width: 48%;
    font-size: 13px;
}

@media (max-width: 480px) {
    .btn-action {
        width: 100%;
        margin-bottom: 6px;
    }
}
</style>

<script>
function confirmerSuppression(ref) {
    if (confirm("<?= trad('Are you sure you want to delete this listing?') ?>")) {
        window.location = "index.php?p=supprimer_annonce&ref=" + encodeURIComponent(ref);
    }
}
</script>
</div>

