{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}<title>Global Accessory Update</title>{% endblock title %}
{% block Style %}
<style>
    fieldset {
        background-color: #eeeeee;
      }
      
      legend {
        background-color: gray;
        color: white;
        padding: 5px 10px;
      }
      
      input {
        margin: 5px;
      }
      #unit_color{
        background-color: gray;
        background-color: #eeee;
      }
</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 %}



<div class="table-area">
    <div class="table-title">
        <div class="row">
            <div class="col-md-4">
                <div class="fabric_list">
                    <h4>Accesory Details</h4>
                </div>
            </div>
            <div class="col-md-8">
                <div class="add-btn">
                    <a href="{% url 'merchant_global_accessory_create_index' %}">
                        <button class="cus-btn" id="mother-rganization" name="button" type="button">
                            <i aria-hidden="true" class="fa fa-plus-circle"></i>
                            Back To Acc List
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>

    







    <div class="tables table-responsive" id="thread_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">Name</th>
                <th class="text-center" scope="col">Base Unit</th>
                <th class="text-center" scope="col">Action</th>
                
                {% comment %} <th class="text-center" scope="col">Action</th> {% endcomment %}
            </tr>
            </thead>
            <tbody>
                {% if accessory %}
                    
                    <tr>
                        <td class="text-center align-middle">1</td>
                        <td class="align-middle">{{accessory}}</td>
                        <td class="align-middle">
                        {% if not accessory.unit_type.base_unit %}
                            <p style="color:red">Must ADD Base Unit</p>
                        {% else %}
                        {{ accessory.unit_type.base_unit }}
                        {% endif %}
                            
                        </td>
                              
                        <td class="align-middle">
                           <ul class="action">
                                <li>
                                    <a href="{% url 'global_accessory_base_unit_update' accessory.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil"></i>
                                    </a>
                                </li> 
                                 {% comment %} 
                                <li>
                                    <a onclick="SweetDelete(event,this.href)" href="{% url 'merchant_global_accessory_delete' item.id %}">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </a>
                                </li>
                                {% endcomment %}
                            </ul> 
                        </td>
                    </tr>
                    
                {% else %}
                    <tr>
                        <td class="text-center align-middle" colspan="6">No Data Found</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="style-name">
                        <h4>Unit Conversions</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'accessory_unit_conversion_create' accessory.id %}">
                            <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                Conversion
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>



    <div class="tables table-responsive" id="thread_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">Type</th>

                <th class="text-center table_header" scope="col">From</th>
                <th class="text-center" scope="col">TO</th>
                <th class="text-center" scope="col">Coefficient</th>
                <th class="text-center" scope="col">Action</th>
                
                {% comment %} <th class="text-center" scope="col">Action</th> {% endcomment %}
            </tr>
            </thead>
            <tbody>
                {% if accessory_unit_conversion %}
                    
                    
                    {% for conversion  in accessory_unit_conversion %}
                    <tr>
                   
                        <td class="text-center align-middle">{{forloop.counter}}</td>
                        <td class="align-middle">{{conversion.type}}</td>
                        <td class="align-middle">{{conversion.from_unit}}</td>
                        <td class="align-middle">{{conversion.to_unit}}</td>
                        <td class="align-middle">{{conversion.co_efficient_multiply_factor}}</td>
                              
                        <td class="align-middle">
                           <ul class="action">
                                <li>
                                    <a href="{% url 'accessory_unit_conversion_update' conversion.id accessory.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil"></i>
                                    </a>
                                </li> 
                             
                                <li>
                                    <a onclick="SweetDelete(event,this.href)" href="{% url 'accessory_unit_conversion_delete' conversion.id accessory.id %}">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </a>
                                </li>
                               
                            </ul> 
                        </td>
                     </tr>
                     {% endfor %}
                   
                    
                {% else %}
                    <tr>
                        <td class="text-center align-middle" colspan="6">No Data Found</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>






</div>


</div>

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

{% block JS %}
<script>
let unit_form_num=0
$('#add_units').click(
  function(event){
     
      event.preventDefault()
      unit_form_num += 1      
      let cloned_node=$("#units_form").clone()   
      let formRegex = RegExp(`units-(\\d){1}-`,'g')
      cloned_node.html(cloned_node.html().replace(formRegex, `units-${unit_form_num}-`))
      cloned_node.appendTo("#units_table")        
      $('#units_table #id_units-TOTAL_FORMS').attr('value', `${unit_form_num+1}`)
      //console.log($('#skills_table #id_form-TOTAL_FORMS').attr('value'))

    //   console.log($('#education_table').html())
       console.log(unit_form_num)

  }
)

$(document).ready(function() {
    $("#id_unit_category").select2({
     
    });
  });
</script>
    <script src="{% static 'js/merchant_app/query/materials/accessory/global/script.js' %} "></script>

{% endblock JS %}