{% extends 'panel/base.html' %}
{% load static %}

{% block css %}

{% endblock css %}

{% block content %}
<!-- Start::app-content -->
<div class="main-content app-content">
  <div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
      <h1 class="page-title fw-semibold fs-18 mb-0">Data Tables</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Tables</a></li>
            <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->




    <!-- Start:: row-4 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-header">
            <div class="card-title">Product details
            </div>
          </div>
          <div class="card-body">




            <h1>{{ product.title }}</h1>
            <div class="row mt-3">
              <div class="col-md-6">
                <img src="{{ product.image.url }}" alt="{{ product.title }}" class="img-fluid">
                <div class="mt-3">
                  {% if product.img1 %}
                    <img src="{{ product.img1.url }}" alt="Image 1" class="img-thumbnail">
                  {% endif %}
                  {% if product.img2 %}
                    <img src="{{ product.img2.url }}" alt="Image 2" class="img-thumbnail">
                  {% endif %}
                  {% if product.img3 %}
                    <img src="{{ product.img3.url }}" alt="Image 3" class="img-thumbnail">
                  {% endif %}
                  {% if product.img4 %}
                    <img src="{{ product.img4.url }}" alt="Image 4" class="img-thumbnail">
                  {% endif %}
                </div>
              </div>
              <div class="col-md-6">
                <p><strong>Short Details:</strong> {{ product.short_details }}</p>
                <p><strong>Price:</strong> {{ product.price }}</p>
                <p><strong>Points:</strong> {{ product.points }}</p>
                <p><strong>Discount:</strong> {% if product.discount %} Yes {% else %} No {% endif %}</p>
                {% if product.discount %}
                <p><strong>Previous Price:</strong> {{ product.previous_price }}</p>
                {% endif %}
                <p><strong>Rating:</strong> {{ product.rating }}</p>
                <p><strong>Remark:</strong> {{ product.get_remark_display }}</p>
                <p><strong>Category:</strong> {{ product.category }}</p>
                <p><strong>Brand:</strong> {{ product.brand }}</p>
                <p><strong>Status:</strong> {{ product.get_status_display }}</p>
                <p><strong>Details:</strong> {{ product.details|safe }}</p>
                <p><strong>Stock:</strong> {% if product.stock %} In Stock {% else %} Out of Stock {% endif %}</p>
                <p><strong>Color:</strong> {{ product.color }}</p>
                <p><strong>Size:</strong> {{ product.size }}</p>
                <p><strong>Variations:</strong> {{ product.variations }}</p>
                <p><strong>Additional Info:</strong> {{ product.additional_info }}</p>
                <p><strong>Created At:</strong> {{ product.created_at }}</p>
                <p><strong>Updated At:</strong> {{ product.updated_at }}</p>
                <!-- Add any other fields you want to display -->
              </div>
            </div>

            <div class="col-md-6">
              <!-- Other product details here -->
              <a href="{% url 'product_edit' product_id=product.id %}" class="btn btn-warning">Edit</a>
              <form action="{% url 'product_destroy' product_id=product.id %}" method="post" class="d-inline">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{ product.name }}?')">Delete</button>
              </form>
            </div>





          </div>
        </div>
      </div>
    </div>
    <!-- End:: row-4 -->



  </div>
</div>
<!-- End::app-content -->


{% endblock content %}


{% block js %}

{% endblock js %}