{% extends 'admin/inspect.html' %}
{% load i18n static admin_urls admin_modify simpelcore_tags %}

{% block title %}{{ object }}{% endblock %}

{% if not is_popup %}
  {% block breadcrumbs %}
    <li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% translate 'Home' %}</a></li>
    <li class="breadcrumb-item"><a href="{% url base_opts|admin_urlname:'changelist' %}">{{ base_opts.verbose_name_plural|capfirst }}</a></li>
    <li class="breadcrumb-item"><a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a></li>
    <li class="breadcrumb-item">{{ object }}</li>
  {% endblock %}
{% endif %}

{% block content %}

<div class="row">
  <div class="col-lg-9">
    <div class="card card-body shadow-sm p-6">

      <div class="mt-0">
        <div class="h5 fw-bold mb-3">{% trans "Description" %}</div>
        <div> {% if object.description %}{{ object.description|safe }}{% else %}{% trans "No description" %}{% endif %}</div>
      </div>
     
      {% if object.audience_criterias %}
        <div class="mt-6">
          <div class="h5 fw-bold mb-3">{% trans "Audience Criteria" %}</div>
          <div>{{ object.audience_criterias|safe }}</div>
        </div>
      {% endif %}
    
      {% if object.specifications.all %}
        <div class="mt-6">
          <div class="h5 fw-bold mb-3">{% trans "Specifications" %}</div>
          <ul>
            {% for spec in object.specifications.all %}
              <li>
                <div class="fw-bold">{{ spec.feature }}</div>
                {% if spec.description %}<div class="small">{{ spec.description|safe }}</div>{% endif %}
                {% if spec.value %}<span class="small text-muted">{% trans "Minimum Value" %}: {{ spec.value }}</span>{% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    
      {% if object.topics.count %}
        <div class="mt-6">
          <div class="h5 fw-bold mb-3">{% trans "Training Topics" %}</div>
          <ul>
            {% for topic in object.topics.all %}
              <li>
                <div class="fw-bold">{{ topic.title }}</div>
                {% if topic.description %}<p class="small">{{ topic.description|safe }}</p>{% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      {% if object.specific.bundle_items.count %}
        <div class="mt-6">
          <div class="h5 fw-bold mb-3">{% trans "Bundled Items" %}</div>
          <div class="table-responsive">
            <table class="table small mb-0">
              <thead>
                <tr>
                  <th class="bg-gray-50 align-middle">{% trans "Inner ID" %}</th>
                  <th class="bg-gray-50 align-middle">{% trans "Product" %}</th>
                  <th width="80" class="bg-gray-50 align-middle text-center">{% trans "Unit" %}</th>
                  <th width="150" class="bg-gray-50 align-middle">{% trans "Quantity" %}</th>
                  <th width="100" class="bg-gray-50 text-end align-middle">{% trans "Tarif" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for bundle in object.specific.bundle_items.all %}
                  <tr>
                    <td class="align-middle">{{ bundle.product.inner_id }}</td>
                    <td class="align-middle">{{ bundle.product }}</td>
                    <td class="align-middle text-center">{% if bundle.product.unit %}{{ bundle.product.unit|safe }}{% else %}-{% endif %}</td>
                    <td class="align-middle">{{ bundle.quantity }}</td>
                    <td class="text-end align-middle">{{ bundle.total|currency }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      {% endif %}
      
      {% if object.specific.recommended_items.count %}
        <div class="mt-6">
          <div class="h5 fw-bold mb-3">{% trans "Recommended Items" %}</div>
          <div class="table-responsive">
            <table class="table small mb-0">
              <thead>
                <tr>
                  <th class="bg-gray-50 align-middle">{% trans "Inner ID" %}</th>
                  <th class="bg-gray-50 align-middle">{% trans "Product" %}</th>
                  <th width="80" class="bg-gray-50 align-middle text-center">{% trans "Satuan" %}</th>
                  <th width="120" class="bg-gray-50 align-middle">{% trans "Quantity" %}</th>
                  <th width="110" class="bg-gray-50 text-end align-middle">{% trans "Tarif" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for recommendation in object.specific.recommended_items.all %}
                  <tr>
                    <td class="align-middle">{{ recommendation.product.inner_id }}</td>
                    <td class="align-middle">{{ recommendation.product }}</td>
                    <td class="align-middle text-center">{% if recommendation.product.unit_code %}{{ recommendation.product.unit_code }}{% endif %}</td>
                    <td class="align-middle">{{ recommendation.quantity }} {% if recommendation.product.unit %}{{ recommendation.product.unit|safe }}{% endif %}</td>
                    <td class="text-end align-middle">{{ recommendation.total|currency }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      {% endif %}

    </div>
  </div>
  <div class="col-lg-3">
    <div class="card card-body shadow-sm">
      <div class="list-group list-group-flush">
        <div class="list-group-item py-3">
          <h3 class="h6 fw-bold">{% trans "Price" %}</h3>
          <div class="h4">{{ object.estimation_price|currency }}</div>
        </div>
        <div class="list-group-item">
          <table class="table table-borderless small">
            <tbody>
              <tr>
                <th class="ps-0">
                  {% trans "Estimation" %}
                  <i class="mdi mdi-help-circle-outline"
                      data-bs-toggle="popover"
                      data-bs-trigger="hover"
                      data-bs-placement="top"
                      data-bs-content="{% trans "Total price with all recommended bundled items" %}"
                    ></i>
                </th>
                <td class="text-end">{{ object.estimation_price|currency }}</td>
              </tr>
              {% if object.min_stock %}
              <tr>
                <th class="ps-0 py-1">{% trans "Minimum Stock" %}</th>
                <td class="text-end py-1">{{ object.min_stock }}</td>
              </tr>
              {% endif %}
              {% if object.max_stock %}
              <tr>
                <th class="ps-0 py-1">{% trans "Maximum Stock" %}</th>
                <td class="text-end py-1">{{ object.max_stock }}</td>
              </tr>
              {% endif %}
              <tr>
                <th class="ps-0 py-1">{% trans "Minimum Order" %}</th>
                <td class="text-end py-1">{{ object.min_order }}</td>
              </tr>
              <tr>
                <th class="ps-0 py-1">{% trans "Maximum Order" %}</th>
                <td class="text-end py-1">{{ object.max_order }}</td>
              </tr>
              {% if object.analysis_method %}
              <tr>
                <th class="ps-0 py-1">{% trans "Analysis Method" %}</th>
                <td class="text-end py-1">{{ object.analysis_method }}</td>
              </tr>
              {% endif %}
              <tr>
                <th class="ps-0 py-1">
                  {% trans "Partial" %}
                  <i class="mdi mdi-help-circle-outline"
                      data-bs-toggle="popover"
                      data-bs-trigger="hover"
                      data-bs-placement="top"
                      data-bs-content="{% trans "Can be included as bundled item." %}"
                    ></i>
                </th>
                <td class="text-end py-1">
                  {% if object.is_partial %}
                    <i class="mdi text-success mdi-check-circle"></i>
                  {% else %}
                    <i class="mdi text-danger mdi-close-circle"></i>
                  {% endif %}
                </td>
              </tr>
              <tr>
                <th class="ps-0 py-1">{% trans "Category" %}</th>
                <td class="text-end py-1">{% if object.category %}{{ object.category }} {% else %} {% trans "Uncategorized" %} {% endif %}</td>
              </tr>
              <tr>
                <th class="ps-0 py-1">{% trans "Tags" %}</th>
                <td class="text-end py-1">
                  {% for tag in object.tags.all %}
                    <span class="badge bg-opacity-50 bg-primary d-inline-block">
                      {{ tag|title }}
                    </span>
                  {% empty %}
                    {% trans "No Tag" %}
                  {% endfor %}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
