{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}<title>Add Fabric Materials</title>{% endblock title %}
{% block Style %}
<style>
.right{
    text-align: right !important;
  }

  .form-label-color {
    color:red !important;
    background-color:
}
</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">
                        <h4>{{style}} <p class="materils-heading">Add Fabric Materials</p></h4>                        
                </div>
                <div class="col-md-8 right">
                    {% comment %} <a href="{% url 'merchant_global_fabric_create' style.id %}"> 

                        <button id="globalFabric" class="cus-btn"  type="button" name="button">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Global Fabric
                        </button>
                    </a> {% endcomment %}
                <div>
            </div>
        </div>
        </div>
        </div>
        <div class="tables table-responsive" id="styleList">
    
                    {% if style.is_material_submit == False %}
                    <form method="post" id="personForm" data-cities-url="" novalidate>
                    {% csrf_token %}
                            <div class="accordion-item">
                                <div class="card">
                                  <div class="card-header">
                                    <h5 class="mb-0 fw-bold text-center"> 
                                        Fabric Information
                                    </h5>
                                  </div>
                                  <div class="card-body">

                                    <div class="row">
                                        <div class="col-md-3 form-label-color">
                                            {{global_fabric_form.fabric_category|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.reference|as_crispy_field}}
                                        </div>
                                        <div class="col-md-3">
                                            {{global_fabric_form.composition|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.construction|as_crispy_field}}
                                        </div> 
                                    </div>
                                    <div class="row">
                         
                                        <div class="col-md-3">
                                            {{global_fabric_form.before_wash_weight|as_crispy_field}}
                                        </div>
                                        <div class="col-md-3">
                                            {{global_fabric_form.after_wash_weight|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.shrinkage_length|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.shrinkage_width|as_crispy_field}}
                                        </div>
                                    </div>
                                    <div class="row">
                         
                                        <div class="col-md-3">
                                            {{global_fabric_form.dye_process|as_crispy_field}}
                                        </div>
                                        <div class="col-md-3">
                                            {{global_fabric_form.finishing|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.origin|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3">
                                            {{global_fabric_form.width|as_crispy_field}}
                                        </div>
                                        <div class="col-md-3 fw-bold">
                                            {{form.cuttable_width|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.mill_name|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.mill_type|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.mill_origin|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{global_fabric_form.remarks|as_crispy_field}}
                                        </div> 
                                    </div>
                                  </div>
                            </div>
                            <div class="accordion-item">
                                <div class="card">
                                  <div class="card-header">
                                    <h5 class="mb-0 fw-bold text-center"> 
                                        Consumption Details
                                    </h5>
                                  </div>
                                  <div class="card-body">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="row">
                                        <div class="col-md-3 fw-bold">
                                            {{form.fabric_type|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.fabric_application_model|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.unit|as_crispy_field}}
                                        </div> 
                                        <div class="col-md-3 fw-bold">
                                            {{form.consumption|as_crispy_field}}
                                        </div>
                                        <div class="col-md-3 fw-bold">
                                            {{form.wastage|as_crispy_field}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 right" style="margin-top: 31px; float: right;">
                                            <button id="submit-button" type="submit"class="cus-btn right">Add</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </form>
                
        {% endif %}
     </div>

    </div>
</div>

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

{% block JS %}

    <script src="{% static 'js/merchant_app/query/materials/fabric/material/script.js' %}"></script>
 <script>
    function handleSave() {
        const saveButton = document.getElementById('submit-button');
        
        // Disable the button immediately to prevent double submission
        saveButton.disabled = true;
    
        // Execute your save function here (like an API call)
        saveData().then(() => {
            // Optionally, you can re-enable the button after saving is complete
            saveButton.disabled = false;
        }).catch(error => {
            console.error('Save failed', error);
            // Re-enable the button in case of an error
            saveButton.disabled = false;
        });
    }
    
    function saveData() {
        // Simulating a save operation, like an API call
        return new Promise((resolve) => {
            setTimeout(resolve, 1000); // mock delay for save operation
        });
    }
 </script>
{% endblock JS %}