{% extends "marchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}<title>Fabric Add</title>{% endblock title %}
{% block Style %}

{% endblock Style %}


{% block MainContent %}
<div class="contents">
    {% 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 %}

{% if request.user.is_superuser == True or request.user.marchant_user_type == 'mother_admin' or request.user.marchant_user_type == 'sister_admin' or request.user.marchant_user_type == 'admin' or request.user.marchant_user_type == 'regular_user' %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
{% csrf_token %}
    <div class="accordion-item">
        <div class="card">
            <div class="card-body" id="after-add-more">
                <div class="row">
                    <div class="col-md-3">
                        {{form.fabric_type|as_crispy_field}}
                    </div>
                    <div class="col-md-3">
                        {{form.fabric_name|as_crispy_field}}
                    </div> 
                    <div class="col-md-3">
                        {{form.reference|as_crispy_field}}
                    </div>
                    <div class="col-md-3">
                        {{form.composition|as_crispy_field}}
                    </div> 
                </div>
                <div class="row">
                    <div class="col-md-3">
                        {{form.construction|as_crispy_field}}
                    </div> 
                    <div class="col-md-3">
                        {{form.before_wash_weight|as_crispy_field}}
                    </div>
                    <div class="col-md-3">
                        {{form.after_wash_weight|as_crispy_field}}
                    </div> 
                    <div class="col-md-3">
                        {{form.shrinkage_length|as_crispy_field}}
                    </div> 
                    <div class="col-md-3">
                        {{form.shrinkage_width|as_crispy_field}}
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
            <div class="col-md-12 text-center">
                <button type="submit" class="cus-btn" >Submit</button>
            </div>
        </div>
    </div>
</form>
{% endif %}
<div class="table-area mt-5">
    <div class="table-title">
        <div class="row">
            <div class="col-md-4">
                <div class="fabric_list">
                    <h4>Fabric List</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="tables table-responsive" id="fabric_list">
        <table class="table  table-striped table-hover align-middle">
            <thead>
            <tr>
                <th class="text-center" scope="col" style="vertical-align: middle; width: 20px;height: 40px;">SL
                </th>
                <th class="text-center table_header" scope="col">Fabric Type</th>
                <th class="text-center" scope="col">Fabric Name</th>
                <th class="text-center" scope="col" style="width: 15px">Reference</th>
                <th class="text-center" scope="col">Composition</th>
                <th class="text-center" scope="col">Construction</th>
                <th class="text-center" scope="col">Weight-BW</th>
                <th class="text-center" scope="col">Weight-AW</th>
                <th class="text-center" scope="col">Shrinkage-length %</th>
                <th class="text-center" scope="col">Shrinkage-width %</th>
                <th class="text-center" scope="col">Action</th>
            </tr>
            </thead>
            <tbody>
                {% if fabric_materials %}
                    {% for item in fabric_materials %}
                    <tr>
                        <td class="text-center align-middle">{{forloop.counter}}</td>
                        <td class="align-middle">{{item.fabric_type}}</td>
                        <td class="align-middle">{{ item.fabric_name }}</td>
                        {% if item.reference %}
                        <td class="align-middle">{{ item.reference }}</td>
                        {% else %}
                        <td class="align-middle">N/A</td>
                        {% endif %}
                        <td class="align-middle">{{ item.composition }}</td>
                        <td class="align-middle">{{ item.construction }}</td>
                        {% if item.before_wash_weight %}
                        <td class="align-middle">{{ item.before_wash_weight }}</td>
                        {% else %}
                        <td class="align-middle">N/A</td>
                        {% endif %}
                        {% if item.after_wash_weight %}
                        <td class="align-middle">{{ item.after_wash_weight }}</td>
                        {% else %}
                        <td class="align-middle">N/A</td>
                        {% endif %}
                        {% if item.shrinkage_length %}
                        <td class="align-middle">{{ item.shrinkage_length|floatformat:3 }}</td>
                        {% else %}
                        <td class="align-middle">N/A</td>
                        {% endif %}
                        {% if item.shrinkage_width %}
                        <td class="align-middle">{{ item.shrinkage_width|floatformat:3 }}</td>
                        {% else %}
                        <td class="align-middle">N/A</td>
                        {% endif %}         
                        <td class="align-middle">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'added_fabric_edit' item.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td class="text-center align-middle" colspan="11">No Data Found</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}

{% block JS %}
<script type=text/javascript>
  var load_branch_url = "{% url 'ajax_load_branchs' %}"
  var load_sister_organization_url = "{% url 'sister-organization-load' %}"
  var load_branch_organization_url = "{% url 'load-branch-organization' %}"

$(document).ready(function() {
    $("#id_fabric_type").select2({
        
    });
  });
    var info_messages = document.getElementsByClassName('alert');

    setTimeout(function(){
        for (var i = 0; i < info_messages.length; i ++) {
            // Set display attribute as !important, neccessary when using bootstrap
            info_messages[i].setAttribute('style', 'display:none !important');
        }
    }, 5000);
</script>

<script src="{% static 'js/merchandising/materials/fabrics/create.js' %} "></script>
<script>
    if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}
$(document).ready(function() {
    $('form').submit(function() {
        if ($(this).data('submitted') === true) {
            // If form already submitted, do not submit again
            return false;
        } else {
            // Disable the submit button and mark form as submitted
            $(this).find(':submit').attr('disabled', true);
            $(this).data('submitted', true);
            return true;
        }
    });
});
</script> 
{% endblock JS %}