{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}<title>Add Accessory Material</title>{% endblock title %}
{% block Style %}
<style>
  .data-search {
    justify-content: flex-start;
  }
  .right{
    text-align: right !important;
  }
  </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"> Add Accessories </p> </h4>
                    </div>
                </div>
               
                <div class="col-md-8 right">
                    {% comment %} <a href="{% url 'merchant_global_accessory_create' style.id %}"> 
                        <button id="globalTrim" class="cus-btn "  type="button" name="button">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Global Accessories
                        </button>
                    </a> {% endcomment %}
                </div>
            </div>
        </div>
    </div>

    <div class="table-area">
    <div class="table-header bg-white">
        <form method="post" id="personForm" data-cities-url="" novalidate>
        {% csrf_token %}
            <div class="row">
                <div class="row mb-4"  >
                    {% comment %} <div class="col-md-9"></div> {% endcomment %}
                    <div  class="col-md-3 ">
                        <label class="mb-3 p-2" style="background-color: rgb(134, 220, 214)">Consumption Calculator:</label>
                        <select  id="consumption_calculator" >
                            <option value="">--SELECT--</option>
                            <option value="carton">Carton</option>
                            <option  value="gumtepe">Gumtepe</option>
                        </select>
                        <p id="carton" onclick="SweetModalCalculetor(event)" data-bs-toggle="modal" data-bs-target="#exampleModal" >att</p>
                    </div>
                </div>
            <hr>
                
                <div class="col-md-12">
                
                
                    <div class="row">
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.accesory|as_crispy_field}}
                            </div> 
                            <div class="col-md-3 fw-bold">
                                {{form.material_description|as_crispy_field}}
                            </div>
                            <div class="col-md-3 fw-bold">
                                {{form.supplier|as_crispy_field}}
                            </div> 
                            <div class="col-md-3 fw-bold">
                                {{form.supplier_type|as_crispy_field}}
                            </div> 
                      
 
                        </div>
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.supplier_origin|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" style="margin-top: 31px; float: right;">
                                <button type="submit" style="float: right;"  class="cus-btn right">Add</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-calculator" aria-hidden="true"></i> Carton Consumption Calculator</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="col-6">
                 <label width="300px" for="fname">Carton Capacity:</label>
                </div>
                <div class="col-6">
                    <input type="number" class="form-control" id="carton_capacity">
                </div>
            </div>
            <div class="row">
                <div class="col-6 mt-3">
                 <label width="300px" for="fname">Result:</label>
                </div>
                <div class="col-6 mt-3">
                    <input style="background-color:#ddede0" class="form-control" type="number" value="0" id="carton_consumption" >
                </div>
            </div>
           
          </div>
          <div class="modal-footer">
              <button type="button" id="CartonDataInput" data-bs-dismiss="modal" class="cus-btn2">OK</button>
              {% comment %} <button type="button" class="cus-btn" data-bs-dismiss="modal"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button> {% endcomment %}
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="exampleModalGumtepe" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-calculator" aria-hidden="true"></i> Gumtepe Consumption Calculator</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="col-6">
                <label width="300px" for="fname">Carton Capacity:</label>
                </div>
                <div class="col-6">
                <input class="form-control" type="number" id="gumtepe_carton_capacity">
                </div>
           </div>
           <div class="row">
                <div class="col-6 mt-2">
                    <label width="300px" for="fname">Carton/Consumption:</label>
                </div>
                <div class="col-6 mt-2">
                    <input class="form-control" type="number" id="actual_gumtepe_consumption" >
                </div>
            </div>
            <div class="row">
                <div class="col-6 mt-2">
                    <label width="300px" for="fname">Result:</label>
                </div>
                <div class="col-6 mt-2">
                   <input style="background-color:#ddede0" class="form-control" type="number" value="0" id="gumtepe_consumption" >
                </div>
            </div>
           
          </div>
          <div class="modal-footer">
              <button type="button" id="DataInput"  data-bs-dismiss="modal" class="cus-btn2">OK</button>
              {% comment %} <button type="button" class="cus-btn" data-bs-dismiss="modal"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button> {% endcomment %}
          </div>
      </div>
  </div>
</div>

    
</div>

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

{% block JS %}

<script>
    let unitURL = "{% url 'merchant_accessory_material_unit_load' %}"
</script> 

<script src="{% static 'js/merchant_app/query/materials/accessory/material/script.js' %} "></script>

{% endblock JS %}