<?php
$user = Auth::user();
$roles = Auth::roles();
$activeTab = $activeTab ?? 'profile';
?>
<!DOCTYPE html>
<html lang="<?= Language::getLocale() ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= e($pageTitle ?? 'CARGOO - Account Management') ?></title>
  
  <link rel="icon" type="image/png" href="<?= asset('/assets/images/brand/logo2-blue.png') ?>">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  
  <!-- Cropper.js CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" rel="stylesheet">
  
  <!-- CARGOO Design System -->
  <link href="<?= asset('/assets/css/app.css') ?>" rel="stylesheet">
</head>
<body>
  <!-- Header Navbar -->
  <?php require __DIR__ . '/../components/navbar.php'; ?>

  <!-- Account Dashboard Main Content -->
  <main class="flex-grow-1 py-4">
    <div class="container">
      <!-- Flash Messages -->
      <?php require __DIR__ . '/../components/alerts.php'; ?>

      <!-- Customer Dashboard Announcements -->
      <?php 
        $placementLocation = 'user_dashboard';
        require __DIR__ . '/../components/announcement_banner.php';
      ?>

      <div class="row g-4">
        <!-- Sidebar Navigation -->
        <div class="col-lg-3 col-md-4">
          <div class="cargoo-card p-3 mb-3">
            <!-- User Mini Profile -->
            <div class="d-flex align-items-center gap-3 pb-3 mb-3 border-bottom">
              <?php if (!empty($user['profile_image'])): ?>
                <img src="<?= asset('/uploads/profiles/' . e($user['profile_image'])) ?>" alt="Avatar" class="avatar-preview-box" style="width: 54px; height: 54px;">
              <?php else: ?>
                <img src="<?= asset('/assets/images/default-avatar.svg') ?>" alt="Default Avatar" class="avatar-preview-box" style="width: 54px; height: 54px;">
              <?php endif; ?>
              <div class="overflow-hidden">
                <h6 class="mb-0 text-truncate text-dark fw-bold"><?= e($user['first_name'] . ' ' . $user['last_name']) ?></h6>
                <small class="text-muted d-block text-truncate">@<?= e($user['username']) ?></small>
                <div class="mt-1 d-flex flex-wrap gap-1">
                  <?php foreach ($roles as $r): ?>
                    <span class="badge badge-role <?= $r === 'admin' ? 'badge-role-admin' : ($r === 'seller' ? 'badge-role-seller' : '') ?>">
                      <?= ucfirst($r) ?>
                    </span>
                  <?php endforeach; ?>
                </div>
              </div>
            </div>

            <!-- Navigation Links -->
            <div class="nav flex-column account-sidebar-nav">
              <a href="<?= url('/account/orders') ?>" class="nav-link <?= $activeTab === 'orders' ? 'active' : '' ?>">
                <i class="bi bi-bag-check"></i> <?= __('my_orders') ?>
              </a>
              <a href="<?= url('/account/wishlist') ?>" class="nav-link <?= $activeTab === 'wishlist' ? 'active' : '' ?>">
                <i class="bi bi-heart"></i> <?= __('my_wishlist') ?>
              </a>
              <a href="<?= url('/account/reviews') ?>" class="nav-link <?= $activeTab === 'reviews' ? 'active' : '' ?>">
                <i class="bi bi-star"></i> รีวิวของฉัน
              </a>
              <a href="<?= url('/account/notifications') ?>" class="nav-link <?= $activeTab === 'notifications' ? 'active' : '' ?>">
                <i class="bi bi-bell"></i> การแจ้งเตือน
              </a>
              <a href="<?= url('/account/profile') ?>" class="nav-link <?= $activeTab === 'profile' ? 'active' : '' ?>">
                <i class="bi bi-person-badge"></i> <?= __('profile') ?>
              </a>
              <a href="<?= url('/account/addresses') ?>" class="nav-link <?= $activeTab === 'addresses' ? 'active' : '' ?>">
                <i class="bi bi-geo-alt"></i> <?= __('addresses') ?>
              </a>
              <a href="<?= url('/account/security') ?>" class="nav-link <?= $activeTab === 'security' ? 'active' : '' ?>">
                <i class="bi bi-shield-lock"></i> <?= __('security') ?>
              </a>
              <a href="<?= url('/account/login-history') ?>" class="nav-link <?= $activeTab === 'login_history' ? 'active' : '' ?>">
                <i class="bi bi-clock-history"></i> <?= __('login_history') ?>
              </a>
              <a href="<?= url('/account/delete-account') ?>" class="nav-link text-danger <?= $activeTab === 'delete_account' ? 'active' : '' ?>">
                <i class="bi bi-trash3 text-danger"></i> <?= __('delete_account') ?>
              </a>
            </div>
          </div>

          <!-- Seller / Admin quick links box -->
          <div class="cargoo-card p-3">
            <h6 class="fw-bold mb-2 small text-uppercase text-muted">โหมดการใช้งาน</h6>
            <?php if (Auth::isSeller()): ?>
              <a href="<?= url('/seller') ?>" class="btn btn-outline-primary w-100 btn-sm mb-2 d-flex align-items-center justify-content-center gap-2">
                <i class="bi bi-shop"></i> <?= __('seller_center') ?>
              </a>
            <?php else: ?>
              <a href="<?= url('/seller/register') ?>" class="btn btn-cargoo-primary w-100 btn-sm mb-2 d-flex align-items-center justify-content-center gap-2">
                <i class="bi bi-shop"></i> <?= __('open_store') ?>
              </a>
            <?php endif; ?>

            <?php if (Auth::isAdmin()): ?>
              <a href="<?= url('/admin') ?>" class="btn btn-outline-danger w-100 btn-sm d-flex align-items-center justify-content-center gap-2">
                <i class="bi bi-speedometer2"></i> <?= __('admin_panel') ?>
              </a>
            <?php endif; ?>
          </div>
        </div>

        <!-- Main Account Content Area -->
        <div class="col-lg-9 col-md-8">
          <?= $content ?>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <?php require __DIR__ . '/../components/footer.php'; ?>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Cropper.js JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
  <script src="<?= asset('/assets/js/app.js') ?>"></script>
</body>
</html>
