{% extends "marchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    <title>Specification Index</title>
{% endblock title %}

{% block Style %}
<style>
    .data-search {
        float: left;
    }
</style>
{% endblock Style %}

{% block MainContent %}
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}
<div class="contents">
    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="sample-name">
                        <h4>Style Specification</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'specification_create' %}"> 
                            <button id="mother-rganization" class="cus-btn" type="button" name="button">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                Specification Add
                            </button>
                        </a>
                        <a href="{% url 'specification_create_with_exel' %}"> 
                            <button id="mother-rganization" class="cus-btn" type="button" name="button">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                Specification Add With File
                            </button>
                        </a>
                        <a href="#"> 
                            <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                                    <i class="fa fa-shopping-basket" aria-hidden="true"></i>
                                    Specification Merge
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- table-title -->
        <div class="table-header">
            <div class="row">
                <div class="col-md-12">
                    <div class="data-search">
                        <div class="input-group search">
                            <input type="search" class="form-control" id="search_specification" placeholder="Search...">
                            <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tables table-responsive" id="style_specification">
            <table class="table  table-striped table-hover">
                <thead>
                    <tr>
                        <th>Serial Number</th>
                        <th rowspan="2">Style Number, Purchase Order and Lot Number Information</th>
                        <th>Colour</th>
                        <th>Size</th>
                        <th>Quantity</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% if specifications %}
                    {% regroup specifications by lot_number as grouped %}
                    {% for group in grouped %}
                    {% for obj in group.list %}
                    <tr>
                    {% ifchanged %}
                    <td class="text-center align-middle" rowspan="{{ group.list|length }}">{{forloop.parentloop.counter}}</td>
                    <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.style_number }} {{  obj.lot_number }}</td>
                    {% endifchanged %}
                    <td>{{ obj.color }}</td>
                    <td>{{ obj.size }}</td>
                    <td>{{ obj.quantity }}</td>
                    <td>
                        <ul class="action">     
                            <li>
                                <a href="{% url 'specification_update' obj.id %}" type="button">
                                    <i aria-hidden="true" class="fa fa-pencil"></i>
                                </a>
                            </li>    
                            <li>
                                <a href="{% url 'specification_delete' obj.id %}" onclick="SweetDelete(event,this.href)">
                                    <i aria-hidden="true" class="fa fa-trash"></i>
                                </a>
                            </li>
                        </ul>
                    </td>
                    </tr>
                {% endfor %}
                {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>    
    </div>
{% endblock MainContent %}

{% block meassage %}
{% include 'notifications/notifications.html' %}
{% endblock meassage %}
{% block JS %}
<script type=text/javascript>
    var ajax_search_url = "{% url 'specification_search' %}"
</script>
<script src="{% static 'js/marchant_app/sizescale/index.js' %}"></script>
{% endblock JS %}