{% extends "base.html" %}
{% block content %}
  <!-- Main Dashboard Content -->
  <main class="min-h-[70vh] p-20 mt-10 bg-[#E9F2EB] border-4 border-[#093D18]">
    <div class="dashboard-box ">
      <h1 class="text-2xl font-bold text-[#0C084D] mb-6">Welcome to Your Dashboard</h1>
      {% if user %}
        <p class="mb-4 text-lg">Hello, {{ user.username }}!</p>
        <div class="bg-white rounded shadow p-4 ">
          <h2 class="text-lg font-semibold mb-2">OpenQQuantify Quantifiers</h2>
          <ul class="list-disc list-inside text-gray-700">
            <li>Building Digital Futures Together</li>
          <!--<li>Joined: {{ user.created_at.strftime('%Y-%m-%d') if user.created_at else "N/A" }}</li>-->
          <!--<li>Joined: N/A</li>-->
          <img src="{{ url_for('static', filename='assets/image_Paul/donate.png') }}" alt="User Insight" class="h-10 w-48">
          </ul>
        </div>
      {% else %}
        <p class="text-gray-600">User data not available.</p>
      {% endif %}
    </div>
  </main>
    <!-- Latest Products Section -->
    <h2 class="text-lg font-semibold mt-6 mb-2">Latest Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      {% for product in products %}
      <div class="bg-white shadow rounded p-4">
        <h3 class="font-bold text-lg text-blue-800">{{ product.name }}</h3>
        <p class="text-sm text-gray-600">${{ product.price }}</p>
        <a href="{{ url_for('payments.add_to_cart', product_id=product.id) }}"
          class="inline-block mt-18 mb-2 px-3 py-6 bg-green-600 text-white text-sm rounded hover:bg-green-700">
          Add to Cart
        </a>
      </div>
      {% endfor %}
    </div>
    <!-- Optional Chart JS -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const ctx = document.createElement('canvas');
    document.querySelector('.dashboard-box').appendChild(ctx);

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Product A', 'B', 'C'],
        datasets: [{
          label: 'Sales',
          data: [12, 19, 3],
          backgroundColor: ['#4F46E5', '#22C55E', '#EF4444'],
        }]
      }
    });
  </script>

{% endblock %}