{% extends 'layout/default.html' %}
{% load i18n %}
{% load querystring %}
{% block title %}{% translate "List Product" %}{% endblock %}

{% block breadcumbheading %} {% translate "Manage Products" %} {% endblock  %}
{% block breadcumbfirst %}
    <a href="/product/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Products </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;">List</li>
{% endblock  %} 

{% block content %}
<div class="custom mt-3">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10 cust-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush h-md-100 cust-card">
        	    <div class="card-header pt-7">
        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Product List</span>
        		    </h3>
		    
                    {% if messages %}
                    {% for message in messages %}
                      <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                        {{ message }}
                        </div>  
                    {% endfor %}
            {% endif %}
        		    
        		    <div class="card-toolbar">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                           <a href="{% url 'product:create_product'%}"> 
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">Add Product</button>
                           </a>
                        </div>
        	    	</div>
            	</div>
        	    <div class="card-body pt-6">
        			<form action="#" class="sp-searchpanel mb-7">
                        <div class="search-row">
                            <!--<input name="product_name" id="product_name"  value="{% if request.GET.product_name %}{{ request.GET.product_name }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Name" autocomplete="off">-->
        					<select class="form-select" name="product_id" id="product_name"  data-control="select2" data-placeholder="Select Product">
		                        <option></option>
                                {% for product in allproducts %}
                                    <option value="{{ product.id}}" {% if request.GET.product_id|slugify == product.id|slugify %} selected {% endif %}}>{{ product.product_name }}({{ product.sku}})</option>
                                {% endfor %}
                            </select>
        					
        					<input name="sku" id="sku"  value="{% if request.GET.sku %}{{ request.GET.sku }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="SKU" autocomplete="off">
        				    <select data-placeholder="Select Category" name="category"   data-control="select2" class="form-select " tabindex="0" >
                                <option value="" disabled selected hidden>Select Category</option>
                                {% for category1 in categories %}    
                                    <option value="{{category1.id}}" {% if request.GET.category|slugify == category1.id|slugify %} selected {% endif %}>{{category1.category_name}}</option>
                                {% endfor %}
                            </select>
                            <div class="col-3 formfbtn">
                                <button type="submit" class="btn btn-alt-primary search-btn"><i class="fa fa-search pe-sm-1"></i>Search</button>
                                <a href="{% url 'product:list_product' %}" class="btn btn-alt-danger reste-btn"><i class="fa fa-refresh pe-sm-1"></i>Reset</a>
                            </div>
                        </div>
                    </form>
	    	    <div class="table-responsive cust-table mt-2 prod-table">
	    	    {% if products %} 
			    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
			    	    <thead>
			    		    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
			    		        <th class="pb-3 min-w-175px fw-bold text-start pe-12">IMAGE</th>
			    		        <th class="pb-3 min-w-100px fw-bold text-start">NAME</th>
			    		    	<th class="pb-3 min-w-175px fw-bold text-start">SKU</th>
			    		    	 
			    		    	<th class="pb-3 min-w-100px fw-bold text-start">TYPE</th>
			    		    	<th class="pb-3 min-w-100px fw-bold text-start">CATEGORY</th>
			    		    	
			    	
			    		    	<th class="pb-3 min-w-175px fw-bold text-start pe-12">PRICE</th>
			    		   <th class="pb-3 min-w-175px fw-bold text-start pe-12">Details PDF</th>
			    		   <th class="pb-3 min-w-175px fw-bold text-start pe-12">Spec PDF</th>
			    		   <th class="pb-3 min-w-175px fw-bold text-start pe-12">User Manual PDF</th>
			    		   <th class="pb-3 min-w-175px fw-bold text-start pe-12">Details PDF</th>
			    		    		<th class="pb-3 min-w-175px fw-bold text-start pe-12">STATUS</th>
									
									<th class="pb-3 w-150px fw-bold text-start pe-7">MYOB SYNCH</th>
			    		    	<th class="pb-3 w-50px fw-bold text-start">ACTIONS</th>
			    		    </tr>
			    	    </thead>
			    	    <tbody>
			    	        
			    	        
			    	        
			    	         {% for product in products %} 
			    		       <tr>
			    		           
			    		          <td class="text-start pe-12">
			    		           {% if product.product_image_main %}
			    		               <a href="{%url 'product:product_details' product.id   %}"><img src="{{ request.scheme }}://{{ request.get_host }}{{ product.product_image_main.url }}" class="product-image" alt="Product Image"></a>
                                        <!--<span class="badge py-3 px-4 fs-7 badge-light-primary prod-img">In Process</span>-->
                                     {% else %}
                                      No image available
                                    {% endif %}
                                    </td>
                                    <td class="text-start pe-12">
			    			        	<span class="text-black-600  fw-bold fs-6 prod-name">{{ product.product_name }}</span>
			    			        </td>
			    			        <td>
			    			            
			    				        <div class="align-items-center">
			    				    	    <div class="justify-content-start flex-column">
			    					    	    <a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6 prod-sku">{{ product.sku }}</a>
			    				    	    </div>
			    			        	</div>
			    			        </td>
			    			        
			    			        <td class="text-start pe-0">
			    			        	<span class="text-black-600  fw-bold fs-6 prod-type">{{ product.get_product_type_display }}</span>
			    			        </td>
			    			        <td class="text-start pe-0">
			    				        <span class="text-black-600  fw-bold fs-6 prod-cat">{{ product.category }}</span>
			    			        </td>
			    			        
			    	
                                    
                                     <td class="text-start pe-12">
                                        <span class="badge py-3 px-4 fs-7  prod-price prod-pdf">${{ product.price }}</span>
                                    </td>
                                    
                                  <td class="text-start pe-12">
                                        <span class="badge py-3 px-4 fs-7  prod-price prod-pdf">
                                        {% if product.product_details_pdf %}
                                            <a href="{{ product.product_details_pdf.url }}" target="_blank" title="View Product Details PDF"  class="pdf-icon" > <i class="fa-solid fa-file-pdf"></i> </a>
                                        {% else %}
                                            -
                                        {% endif %}
                                        </span>
                                    </td>
                                    
                                    <td class="text-start pe-12">
                                        <span class="badge py-3 px-4 fs-7  prod-price prod-pdf">
                                        {% if product.product_spec_objects %}
                                            {% for pdfs in product.product_spec_objects %}
                                            <a href="{{ pdfs.file }}" target="_blank" title="View Product Specification PDF"  class="pdf-icon" > <i class="fa-solid fa-file-pdf"></i> </a>
                                            {% endfor %}
                                        {% else %}
                                            -
                                        {% endif %}
                                        </span>
                                    </td>
                                    
                                    <td class="text-start pe-12">
                                        <span class="badge py-3 px-4 fs-7  prod-price prod-pdf">
                                        {% if product.product_spec_objects %}
                                            {% for pdfs in product.product_user_manual_objects %}
                                            <a href="{{ pdfs.file }}" target="_blank" title="View Product User Manual PDF"  class="pdf-icon" > <i class="fa-solid fa-file-pdf"></i> </a>
                                            {% endfor %}
                                        {% else %}
                                            -
                                        {% endif %}
                                        </span>
                                    </td>
                                    
                                    <td class="text-start pe-12">
                                        {% if product.get_status == 'Active' %}
                                            <span class="badge py-3 px-4 fs-7 badge-light-primary product-state active">{{ product.get_status }}</span>
                                            {% else %}
                                            <span class="adge py-3 px-4 fs-7 badge-light-primary product-state inactive">{{ product.get_status }}</span>
                                        {% endif %}
                                    </td>



									
									<td class="text-start pe-0">
										<div class="menu-item px-3 documnet-icon">
											{% if product.uid %}
											<i class="ki-duotone ki-shield-tick fs-2hx"  title="Already Synch With Myob" >
												<span class="path1"></span>
												<span class="path2"></span>
											</i>

											
											 {% else %}
											  <a href="{%url 'product:sync-myob-product-row' product.id  %}"  title="Synch With Myob"   class="email-icon">
													<i class="ki-duotone ki-arrow-right  fs-2hx">
														<span class="path1"></span>
														<span class="path2"></span>
													</i>
												</a>
											 {% endif %}
										   
										 </div>
								 </td>
			    			        <td class="text-end">
			    			            
			    			            
                                        <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Select<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" style="">
                                              
                                              <div class="menu-item px-3">
                                                <a href="{%url 'product:product_details' product.id   %}" class="menu-link px-3">View</a>
                                            </div>
                                            
                                            <div class="menu-item px-3">
                                                <a href="{%url 'product:edit_product' product.id %}" class="menu-link px-3">Edit</a>
                                            </div>
                                            <div class="menu-item px-3">
                                                <a href="javascript:void(0);" class="menu-link px-3"  onclick="confirmDelete({{product.id}})"
                                                class="menu-link px-3" data-kt-users-table-filter="delete_row">Delete</a>
                                            </div>
                                          
                                        </div>
                                    </td>
			    		        </tr>
			    		        
			    		        
			    		        {% endfor %}
			    	        </tbody>
	    		        </table>

						<nav aria-label="Page navigation">
							<ul class="pagination justify-content-end">
								{% if products.has_previous %}
								<li class="page-item">
									<a class="page-link" href="?{% querystring request page=1 %}" aria-label="First">
										<span aria-hidden="true">&laquo;&laquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?{% querystring request page=products.previous_page_number %}" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								{% endif %}
				
								{% for i in products.paginator.page_range %}
								<li class="page-item {% if products.number == i %}active{% endif %}">
									<a class="page-link" href="?{% querystring request page=i %}">{{ i }}</a>
								</li>
								{% endfor %}
				
								{% if products.has_next %}
								<li class="page-item">
									<a class="page-link" href="?{% querystring request page=products.next_page_number %}" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?{% querystring request page=products.paginator.num_pages %}" aria-label="Last">
										<span aria-hidden="true">&raquo;&raquo;</span>
									</a>
								</li>
								{% endif %}
							</ul>
						</nav>
						
						
						
						


	    		           {% else %}
	    		         No Record Found.
	    		        {% endif %}
	    	        </div>
	            </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}
{% block script %}
<script>
function confirmDelete(id) {
     let text;
  var delurl = "{% url 'product:delete_product' id=1%}"
  if (confirm("Are you sure you want to delete this record?") == true) {
$.ajax({
      url: delurl.replace('1',id),
      dataType: "json", 
      async: false
  });
    window.location.reload();
  }
}
</script>
{% endblock script%}