{% extends "marchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}<title>Add Fabric</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 %}
    <h5 id ="style_id" class="d-none">{{style.id}}</h5>

    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div>
                        <h4>{{style}} <p class="materils-heading">Fabric </p> </h4>
                        
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'add-fabric-create' %}"> 
                        <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Fabric
                        </button>
                        </a>
                    </div>
                </div>
        </div>

    {% if style.is_material_submit == False %}
        {% 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'%}
            {% include 'marchant_app/materials/fabrics/create/super_admin_forms.html' %}
        {% endif %}
    {% endif %}
    {% if fabric_list %}
    </div>
    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="fabric-name">
                        <h4>{{style}} <p class="materils-heading">Fabric </p> </h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- table-title -->
        <div class="table-header">
            <div class="row">
                <div class="col-md-3">
                    <div class="data-search">
                        <div class="input-group search" style="width: 100%;">
                            <input type="search" class="form-control" id="search_fabric" 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="fabric_list">
            <table class="table  table-striped table-hover">
                <thead>
                    <tr>
                        <th class="text-center">SL No</th>
                        <th>Fabric Application</th>
                        <th>Name</th>
                        <th>Mill Name</th>
                        <th>Construction</th>
                        <th>Unit</th>
                        <th>Consumption</th>
                        <th>Wastage (%)</th>
                        <th>Usage</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fabric in fabric_list  %}
                    <tr>
                        <td class="text-center">{{forloop.counter}}</td>
                        <td>{{ fabric.fabric_application }}</td>
                        <td>{{ fabric.fabric.fabric_name }}</td>
                        {% if fabric.mill_name %}
                            <td>{{ fabric.mill_name }}</td>
                        {% else %}
                            <td>N/A</td>
                        {% endif %}
                        <td>{{ fabric.fabric.construction }}</td>
                        <td>{{ fabric.unit }}</td>
                        <td>{{ fabric.consumption|floatformat:3 }}</td>
                        <td>{{ fabric.wastage|floatformat:3 }}</td>
                        <td>{{ fabric.total_uses|floatformat:3 }}</td>
                        
                        {% if style.is_material_submit == False %}
                        <td>
                            <ul class="action">
                                <li >
                                    <a href="{% url 'fabric-details' fabric.id %}">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a type="button" href="{% url 'fabric-update' fabric.id %}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a onclick="SweetDelete(event,this.href)" href="{% url 'fabric-delete' fabric.id %}">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                        {% else %}
                        <td>
                            <ul class="action">
                                <li >
                                    <a href="{% url 'fabric-details' fabric.id %}">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        <div>
    </div>
</div>


{% else %}
{% comment %} <div class="table-area">
  <div class="table-title">
    <div class="row">
      <div class="">
        <div class="team-name">
          <h4 class="text-center">No Data Found</h4>
        </div>
      </div>
    </div>
  </div>
</div> {% endcomment %}
{% endif %}

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

{% block JS %}

<script>
  $(document).ready(function() {
    $("#id_mill_name").select2({
     
    });

  });

    

    $(document).ready(function() {
    $("#id_fabric_application").select2({
     
    });
  });
</script>
<script>
    if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}
</script> 
<script type=text/javascript >
 var ajax_search_url = "{% url 'fabric-search' %}"
  $(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>

<script>
    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/marchant_app/materials/fabrics/create.js' %} "></script>

{% endblock JS %}