{% extends 'oscar/dashboard/layout.html' %}
{% load i18n %}

{% block body_class %}{{ block.super }} create-page{% endblock %}

{% block title %}
    {% blocktrans with name=range.name %}Products in range '{{ name }}'{% endblocktrans %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:range-list' %}">{% trans "Ranges" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:range-update' pk=range.id %}">'{{ range.name }}'</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                {% trans "Products" %}
            </li>
        </ol>
    </nav>
{% endblock %}

{% block headertext %}
    {{ range.name }}: {% trans "products" %}
{% endblock %}

{% block dashboard_content %}

<div class="tabbable dashboard">

  <ul class="nav nav-tabs mb-0" role="tablist">
    {% block nav_tabs %}
      <li class="nav-item">
        <a class="nav-link {% if not upload_type == "excluded" %}active{% endif %}" href="#included" data-toggle="tab">
          {% trans "Products in range" %}
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link {% if upload_type == "excluded" %}active{% endif %}" href="#excluded" data-toggle="tab">
          {% trans "Products excluded from range" %}
        </a>
      </li>
      {% endblock nav_tabs %}
  </ul>

  <div class="tab-content">

    <div class="tab-pane fade {% if not upload_type == "excluded" %}show active{% endif %}" id="included" role="tabpanel">

      {% if range.includes_all_products %}
        {% trans "This range contains all products. To add products manually, please unselect the 'Includes All Products' option on the edit range page." %}
      {% else %}

        <div class="table-header">
          <h3>{% trans "Add products" %}</h3>
        </div>

        <div class="card card-body bg-light">

          <form method="post" class="form-stacked" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_products"/>
            {% include 'oscar/dashboard/partials/form_fields.html' with form=form %}
            <div class="controls">
              <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Running...' %}">
                {% trans "Go!" %}
              </button>
            </div>
          </form>

          {% with uploads=file_uploads_included %}
            {% if uploads %}
            <div class="table-header">
              <h3>{% trans "Upload history" %}</h3>
            </div>
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>{% trans "Filename" %}</th>
                  <th>{% trans "New products" %}</th>
                  <th>{% trans "Duplicate products" %}</th>
                  <th>{% trans "Unknown products" %}</th>
                  <th>{% trans "Date uploaded" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for upload in uploads %}
                  <tr>
                    <td>{{ upload.filepath }}</td>
                    <td>{{ upload.num_new_skus }}</td>
                    <td>{{ upload.num_duplicate_skus }}</td>
                    <td>{{ upload.num_unknown_skus }}</td>
                    <td>{{ upload.date_uploaded }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            {% endif %}
          {% endwith %}

          {% if products %}
          <form method="post">
            {% csrf_token %}
            <table class="table table-striped table-bordered table-hover">
             <caption>
                <h3 class="float-left">{% trans "Products in range" %}</h3>
                <div class="float-right">
                  <input type="hidden" name="action" value="remove_selected_products" />
                  <button type="submit" class="btn btn-secondary" data-loading-text="{% trans 'Removing...' %}">
                    {% trans "Remove selected products" %}
                  </button>
                </div>
              </caption>
              <thead>
                <tr>
                  <th></th>
                  <th>{% trans "UPC" %}</th>
                  <th>{% trans "Title" context "Product title" %}</th>
                  <th>{% trans "Is product discountable?" %}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody class="product_list">
                {% for product in products %}
                  <tr id="product_{{ product.pk }}">
                    <td>
                      <input type="checkbox" name="selected_product" value="{{ product.id }}" />
                    </td>
                    <td>{{ product.upc|default:"-" }}</td>
                    <td><a href="{% url 'dashboard:catalogue-product' pk=product.id %}">{{ product.get_title }}</a></td>
                    <td>{% if product.is_discountable %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</td>
                    <td>
                      <a class="btn btn-danger" href="#" data-behaviours="remove">{% trans "Remove" %}</a>
                      {% if range.is_reorderable %}
                        <a href="#" class="btn btn-info btn-handle"><i class="fas fa-arrows-alt"></i>
                           {% trans "Re-order" context "Change the sequence order" %}
                        </a>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            {% include "oscar/dashboard/partials/pagination.html" %}
          </form>

          {% else %}
          <table class="table table-striped table-bordered table-hover">
            <caption>
              {% trans "Products in Range" %}
            </caption>
            <tr><td>{% trans "No products found." %}</td></tr>
          </table>
          {% endif %}

        </div>

      {% endif %}

    </div>

    <div class="tab-pane fade {% if upload_type == "excluded" %}show active{% endif %}" id="excluded" role="tabpanel">

        <div class="table-header">
          <h3>{% trans "Exclude products" %}</h3>
        </div>

        <div class="card card-body bg-light">

          <form method="post" class="form-stacked" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_excluded_products"/>
            {% include 'oscar/dashboard/partials/form_fields.html' with form=form_excluded %}
            <div class="controls">
              <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Running...' %}">
                {% trans "Go!" %}
              </button>
            </div>
          </form>

          {% with uploads=file_uploads_excluded %}
          {% if uploads %}
            <div class="table-header">
              <h3>{% trans "Upload history" %}</h3>
            </div>
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>{% trans "Filename" %}</th>
                  <th>{% trans "New products" %}</th>
                  <th>{% trans "Duplicate products" %}</th>
                  <th>{% trans "Unknown products" %}</th>
                  <th>{% trans "Date uploaded" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for upload in uploads %}
                  <tr>
                    <td>{{ upload.filepath }}</td>
                    <td>{{ upload.num_new_skus }}</td>
                    <td>{{ upload.num_duplicate_skus }}</td>
                    <td>{{ upload.num_unknown_skus }}</td>
                    <td>{{ upload.date_uploaded }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% endif %}
          {% endwith %}

          {% if range.excluded_products.count %}
            <form method="post">
              {% csrf_token %}
              <table class="table table-striped table-bordered table-hover">
               <caption>
                  <h3 class="float-left">{% trans "Products excluded from range" %}</h3>
                  <div class="float-right">
                    <input type="hidden" name="action" value="remove_excluded_products" />
                    <button type="submit" class="btn btn-secondary" data-loading-text="{% trans 'Removing...' %}">
                      {% trans "Remove selected excluded products" %}
                    </button>
                  </div>
                </caption>
                <thead>
                  <tr>
                    <th></th>
                    <th>{% trans "UPC" %}</th>
                    <th>{% trans "Title" context "Product title" %}</th>
                    <th>{% trans "Is product discountable?" %}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody class="product_list">
                  {% for product in range.excluded_products.all %}
                    <tr id="product_{{ product.pk }}">
                      <td>
                        <input type="checkbox" name="selected_product" value="{{ product.id }}" />
                      </td>
                      <td>{{ product.upc|default:"-" }}</td>
                      <td><a href="{% url 'dashboard:catalogue-product' pk=product.id %}">{{ product.get_title }}</a></td>
                      <td>{% if product.is_discountable %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</td>
                      <td><a class="btn btn-danger" href="#" data-behaviours="remove">{% trans "Remove" %}</a></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </form>

          {% else %}
            <table class="table table-striped table-bordered table-hover">
              <caption>
                {% trans "Products excluded from Range" %}
              </caption>
              <tr><td>{% trans "No products found." %}</td></tr>
            </table>
          {% endif %}

        </div>

    </div>

  </div>

</div>

<div class="form-actions">
  <a href="{% url 'dashboard:range-update' pk=range.id %}" class="btn btn-primary">{% trans "Edit range" %}</a> {% trans "or" %}
  <a href="{% url 'dashboard:range-list' %}" class="">{% trans "return to range list" %}</a>
</div>

{% endblock dashboard_content %}

{% block onbodyload %}
    {{ block.super }}
    oscar.dashboard.ranges.init();
    oscar.dashboard.reordering.init({
        wrapper: '.product_list',
        submit_url: '{% url 'dashboard:range-reorder' pk=range.id %}'
    });
{% endblock %}
