{% extends "base.html" %}
{% block content %}

<div class="container py-5">

  <!-- ====== شريط العلامات التجارية ====== -->
  <div class="d-flex flex-wrap gap-2 mb-5 justify-content-center">

    <a href="{{ url_for('products') }}"
       class="btn {{ 'btn-primary' if not selected_brand else 'btn-outline-primary' }}">
      الكل
    </a>

    {% for brand in brands %}
      <a href="{{ url_for('products', brand=brand.id) }}"
         class="btn btn-brand-logo {{ 'active' if selected_brand == brand.id|string else '' }} d-flex align-items-center justify-content-center"
         style="border-radius: 8px; transition: all 0.3s;">
        {% if brand.logo %}
          <img src="{{ url_for('uploaded_file', filename=brand.logo.replace('uploads/', '')) }}"
               class="me-2"
               style="height: 30px; width: 30px; object-fit: contain;">
        {% endif %}
        {{ brand.name }}
      </a>
    {% endfor %}

  </div>

  <!-- ====== شبكة المنتجات ====== -->
  <div class="row g-4">

    {% if products %}
      {% for product in products %}
      <div class="col-12 col-sm-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 50 }}">

        <div class="card h-100 shadow-sm border-0 rounded-3 overflow-hidden product-card position-relative">
          
          <!-- صورة المنتج -->
          {% if product.image %}
          <div class="product-img-wrapper overflow-hidden">
            <img src="{{ url_for('uploaded_file', filename=product.image.replace('uploads/', '')) }}"
                 class="card-img-top product-image"
                 alt="{{ product.name }}">
          </div>
          {% else %}
          <div class="d-flex align-items-center justify-content-center " style="height:200px;">
            <span >لا توجد صورة</span>
          </div>
          {% endif %}

          <div class="card-body d-flex flex-column">
            <h5 class="card-title">{{ product.name }}</h5>
            <p class="card-text flex-grow-1">{{ product.description[:100] }}{% if product.description|length > 100 %}...{% endif %}</p>
            <small class=" mb-2">العلامة التجارية: {{ product.brand.name }}</small>

            <!-- زر عرض المنتج -->
            <button class="btn btn-primary w-100 mt-auto" data-bs-toggle="modal" data-bs-target="#productModal{{ product.id }}">
              عرض المنتج
            </button>

          </div>
        </div>
      </div>

      <!-- ====== مودال المنتج ====== -->
<div class="modal fade" id="productModal{{ product.id }}" tabindex="-1" aria-labelledby="productModalLabel{{ product.id }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-4 shadow-sm overflow-hidden"
         style="background-color: var(--card-bg); color: var(--text-color);">

      <!-- رأس المودال -->
      <div class="modal-header" style="background-color: var(--card-bg); color: var(--text-color); border-bottom: 1px solid rgba(0,0,0,0.1);">
        <h5 class="modal-title" id="productModalLabel{{ product.id }}">{{ product.name }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <div class="modal-body text-center p-4">
        {% if product.image %}
        <img src="{{ url_for('static', filename=product.image) }}" 
             class="img-fluid rounded mb-3" 
             alt="{{ product.name }}" 
             style="max-height:400px; object-fit:contain; width:100%;">
        {% endif %}
        <p>{{ product.description }}</p>
      </div>

      <div class="modal-footer justify-content-center" style="background-color: var(--card-bg); border-top: 1px solid rgba(0,0,0,0.1);">
        <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">إغلاق</button>
      </div>

    </div>
  </div>
</div>



      {% endfor %}
    {% else %}
      <div class="col-12 text-center py-5">
        <p>لا توجد منتجات لعرضها.</p>
      </div>
    {% endif %}

  </div>
</div>



{% endblock %}