{% extends 'layout/default.html' %}
{% load i18n %}
{% block title %}{% translate "Add Category" %}{% endblock %}
{% block breadcumbheading %} <a href="{%url 'product:list_category'%}"> {% translate "Manage Categories" %} </a>{% endblock  %}
{% block breadcumbfirst %}
<a href="{%url 'product:list_category'%}" class="text-muted text-hover-primary"  style="text-transform: capitalize;">Manage Categories</a>
{% endblock  %}
{% block breadcumbaddmore %}
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Add</li>
{% endblock  %} 

{% block content %}
<div class="custom mt-3 cat-create">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush h-md-100">
        	    <div class="card-header pt-7">
        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Add Category</span>
        		    </h3>
        		    <div class="card-toolbar">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                           <a href="{%url 'product:list_category'%}"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                             View List
                         </button></a>
                     </div>
        	    	</div>
            	</div>
        	    <div class="card-body pt-9">
        	    	<div class=" me-n7 pe-7" >
                       {% if messages %}
                {% for message in messages %}
                  <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                    {{ message }}
                    </div>  
                {% endfor %}
            {% endif %}
                        <form method="post">
                            {% csrf_token %}
                            <div class="row g-9 mb-5">
                                <div class="col-md-6 fv-row fv-plugins-icon-container">
                                    <label class="required fs-5 fw-semibold mb-2" >Category Name</label>
                                    <input class="form-control form-control-solid" placeholder="Enter Category Name"  pattern="^\S.*\S$" title="No leading or trailing spaces allowed"  name="category_name"  id="category_name"  required>
                                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container mb-3">
                                <label class=" fs-5 fw-semibold mb-2" >Status</label><br>
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" name="is_active" id="is_active" type="checkbox" value="on"   checked >
                                    <span class="form-check-label fw-semibold text-muted">
                                        Active
                                    </span>
                                </label>
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class=" fs-5 fw-semibold mb-2" >Allow Edit Price In Quote</label><br>
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" name="allow_price_edit" id="allow_price_edit" type="checkbox" value="on"  {% if form.allow_edit_price == 'on' %} checked {% endif %}>
                                    <span class="form-check-label fw-semibold text-muted"> Yes </span>
                                </label>
                            </div><br>
                             <div class="card-toolbar">
                			    <div>
                                    <a  href="{% url 'product:list_category' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5"> Cancel  </a>
                                    <button type="submit" class="btn btn-primary" > Save </button>
                                </div>
                            </div>
                        </form>
                    </div>
	            </div>
            </div>
        </div>
    </div>
</div>

 <script>
    document.addEventListener("DOMContentLoaded", function () {
        var categorySelect = document.getElementById("category");
        var companyField = document.getElementById("companyField");
        var individualFields = document.getElementById("individualFields");
        categorySelect.addEventListener("change", function () {
            if (categorySelect.value === "0") {
                companyField.style.display = "block";
                individualFields.style.display = "none";
            } else if (categorySelect.value === "1") {
                companyField.style.display = "none";
                individualFields.style.display = "block";
            } else {
                companyField.style.display = "none";
                individualFields.style.display = "none";
            }
        });
    });
</script>				
{% endblock content %}