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

{% block title %}
<title>Order Checklist Index</title>
{% endblock title %}
{% block Style %}
<style>
.fa-plus {
  background: #0077b7;
}
.fa-plus:hover {
  background: #0077b7;
}
</style>
{% endblock Style %}

{% block MainContent %}

<div class="contents">

    {% if messages %}
        {% for message in messages %}
            <div id="divID" 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 aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="style-name">
                        <h4>Fabric Approvals(Order Checklist)</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'merchant_app_order_checklist_create' %}">
                            <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                Fabric Order Check List
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <form method="post" id="personForm" enctype="multipart/form-data" data-cities-url="" novalidate>
            {% csrf_token %}
            <div class="table-header">
                <div class="row">
                    <div class="col-md-6">
                        {{ style_form.style|as_crispy_field }}
                    </div> 
                    <div class="col-md-6 mt-4">
                        
                              <button class="cus-btn bg-info" type="submit">Submit </button>
                    
                    </div> 
                    
                </div>
                
            </div> 
            
  
        </form>

        <div class="tables table-responsive" id="styleList">
            <table class="table  table-striped table-hover align-middle">
                <thead>
                    <tr>
                        <th class="text-center" scope="col">SL</th>
                        <th class="text-center" scope="col">Style</th>
                        <th class="text-center" scope="col">Item Description</th>
                        <th class="text-center" scope="col">Consumption</th>
                        <th class="text-center" scope="col">Wastage</th>
                        <th class="text-center" scope="col">Required Quantity</th>
                        
                        <th class="text-center" scope="col">Supplier</th>
                        <th class="text-center" scope="col">Color</th>
                        <th class="text-center" scope="col">Development</th>
                        <th class="text-center" scope="col">Buyer Status</th>
                        <th class="text-center" scope="col">Feedback Date</th>
                        <th class="text-center" scope="col">Tentative Feedback Date</th>
                        <th class="text-center" scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% if fabric_material_approvals %}
                        {% regroup fabric_material_approvals by item 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.item.style }}</td>
                                        <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.item }}</td>
                                        <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.item.consumption|floatformat:3 }} {{ obj.item.unit }}</td>
                                        <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.item.wastage|floatformat:3 }} {{ obj.item.unit }}</td>
                                        <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.item.total_uses|floatformat:3 }} {{ obj.item.unit }}</td>
                                        
                                        <td rowspan="{{ group.list|length }}" class="text-center align-middle">{{ obj.item.mill_name }}</td>
                                    {% endifchanged %}
                                    <td>{{ obj.color }}</td>
                                    <td>{{ obj.get_development_status_display }}</td>
                                    <td>{{ obj.get_buyer_status_display }}</td>
                                    <td>{{ obj.buyer_feedback_date }}</td>
                                    <td>{{ obj.tentative_feedback_date }}</td>
                                    <td>
                                        <ul class="action">
                                            <li>
                                                <a href="{% url 'merchant_app_order_checklist_addmore' obj.id %}">
                                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a type="button" href="{% url 'merchant_app_order_checklist_edit' obj.id %}">
                                                    <i class="fa fa-pencil" aria-hidden="true"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a onclick="SweetDelete(event,this.href)" href="{% url 'merchant_app_order_checklist_delete' obj.id %}">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </td>

                                </tr>
                            {% endfor %}
                        {% endfor %}
                    {% else %}
                        <tr><td colspan="13" class="text-center">No Data Is Found</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock MainContent %}

{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}
    {% comment %} <script src="{% static 'js/merchant_app/material_approval/script.js' %}"></script>   {% endcomment %}

    <script>
            $("#id_style").select2()
    </script>

{% endblock JS %}