{% extends 'supplier-panel/supplier-base.html' %}
{%load static%}
{%block section %}
           <section class="content-main">
               <form method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
                   {% csrf_token %}
                   <div class="row">
                       <div class="col-9">
                           <div class="content-header">
                               <h2 class="content-title">Add New Product</h2>
                               <div>
                 
                                   
                                   {% comment %} <button type="submit" class="btn btn-light rounded font-sm mr-5 text-body hover-up">Save to draft</button> {% endcomment %}
                                   <button type="submit" class="btn btn-md rounded font-sm hover-up">Publich</button>
                               </div>
                               
                           </div>
                           {% if messages %}
                   {% for message in messages %}
     
                   <div    class="alert align-middle alert-{{message.tags}}">
                      
                       <span class="align-middle"> {{message}}</span>
                   </div>
     
                   {% endfor %}
                   {% endif %}
                       </div>
                       <div class="col-lg-6">
                           <div class="card mb-4">
                               <div class="card-header">
                                   <h4>Basic</h4>
                               </div>
                               <div class="card-body">
                                   
                                       <div class="mb-4">
                                           <label for="product_name" class="form-label">Product title</label>
                                           <input value="{{product.product_name}}" type="text" name="product_name" maxlength="99"  placeholder="Type here" class="form-control" id="product_name" required/>
                                       </div>
                                       <div class="mb-4">
                                           <label class="form-label">Description</label>
                                           <textarea name="introduction" placeholder="Type here" class="ckeditor form-control" rows="4" required>{{product.product_description}}</textarea>
                                       </div>
                                       <div class="row">
                                           <label class="form-check mb-4">
                                               <input id="discounted" name="checkbox" class="form-check-input" type="checkbox" {% if product.PRDDiscountPrice%} checked {% endif%}/>
                                               <span class="form-check-label">Product Has Discounts</span>
                                           </label>
                                           <div class="col-lg-4">
                                               <div class="mb-4">
                                                   <label class="form-label">Price</label>
                                                   <div class="row gx-2">
                                                       <input value="{{product.PRDPrice}}" placeholder="$" name="price" type="number"  step="0.01" min="0" class="form-control" required/>
                                                   </div>
                                               </div>
                                           </div>
                                           <div id="discount_box" class="col-lg-4 {% if not product.PRDDiscountPrice%} not-visible {% endif%}">
                                               <div class="mb-4">
                                                   <label class="form-label"> Price before  discount</label>
                                                   <input value="{{product.PRDDiscountPrice}}" placeholder="$" name="discount" type="number"  step="0.01" min="0"  class="form-control" />
                                               </div>
                                           </div>
                                           <div class="col-lg-4">
                                               <label class="form-label">Currency</label>
                                               <select class="form-select">
                                                   <option>USD</option>
                                                 
                                               </select>
                                           </div>
                                           
                                       </div>
                                       
                                     

                                       {% comment %} <div class="mb-4">
                                           <label class="form-label">Full description</label>
                                           <textarea name="description" placeholder="Type here" class="form-control" rows="4"></textarea>
                                       </div> {% endcomment %}

                                       <div class="row">
                                          
                                           <div class="col-lg-4">
                                               <div class="mb-4">
                                                   <label class="form-label">Available</label>
                                                   <div class="row gx-2">
                                                       <input value="{{product.available}}" placeholder="quantity in stock" name="available" type="number" class="form-control" min="0" required/>
                                                   </div>
                                               </div>
                                           </div>
                                           <div id="discount_box" class="col-lg-4">
                                               <div class="mb-4">
                                                   <label class="form-label"> Pieces/Set</label>
                                                   <input value="{{product.pieces}}"  placeholder="quantity for Pieces" name="pieces" type="number"  min="0"  class="form-control"required />
                                               </div>
                                           </div>
                                           <div class="col-lg-4">
                                               <label class="form-label">Promotional</label>
                                               <select name="promotional" class="form-select">
                                                   {% if product.promotional == "Hot" %}
                                                   <option value="Hot" >Hot</option>
                                                   <option value="New" >New</option>
                                                   {%else%}
                                                   <option value="New">New</option>
                                                   <option value="Hot" >Hot</option>
                                                   
                                                   {%endif%}
                                                   
                                               </select>
                                           </div>
                                       </div>

                                       <div class="mb-4">
                                            <label class="form-label">Content</label>
                                            <textarea name="content" placeholder="Type here" class="ckeditor form-control" rows="4" required>{{product.content}}</textarea>
                                        </div>
                               
                               </div>
                           </div>
                           <!-- card end// -->
                           <div class="card mb-4">
                               <div class="card-header">
                                   <h4>Dimensions</h4>
                               </div>
                               <div class="card-body">
                               
                                       <div class="row">
                                           <div class="col-lg-6">
                                               <div class="mb-4">
                                                   <label for="product_name" class="form-label">Width</label>
                                                   <input value="{{product.width|floatformat}}" type="text" placeholder="inch" name="width" class="form-control" id="product_name" />
                                               </div>
                                           </div>
                                           <div class="col-lg-6">
                                               <div class="mb-4">
                                                   <label for="product_name" class="form-label">Height</label>
                                                   <input value="{{product.height|floatformat}}" type="text" placeholder="inch" name="height" class="form-control" id="product_name" />
                                               </div>
                                           </div>
                                       </div>
                                     <div class="row"> 
                                       <div class="col-lg-4">
                                           <div class="mb-4">
                                               <label class="form-label">Weight</label>
                                               <input value="{{product.PRDWeight|floatformat}}" placeholder="gam" name="weight" type="text" class="form-control" required />
                                           </div>
                                       </div>
                                       <div class="col-lg-4">
                                           <label class="form-label">Product status </label>
                                           <select name="product_status" class="form-select">
                                            {% if product.PRDISactive%}
                                               <option value="1">Active</option>
                                               <option value="0">Inactive</option>
                                            {%else%}
                                            <option value="0">Inactive</option>
                                            <option value="1">Active</option>
                                           {%endif%}
                                           </select>
                                       </div>
                                       
                                       <div class="col-lg-4">
                                        <div class="mb-4">
                                            <label class="form-label">SKU</label>
                                            <input placeholder="Product SKU" value="{{product.PRDSKU}}" name="SKU" type="text" class="form-control" />
                                        </div>
                                    </div> 
                                      
                                     </div>
                                       

                                       <div class="card mb-4">
                                           <div class="card-header">
                                               <h4>Additional Images</h4>
                                           </div>
                                           <div class="card-body">
                                               <div class="input-upload">
                                                   
                                                   
                                                 {% if product.additional_image_1%}           
                                                <img id="url-img-1"  width="100" height="100"   style="width:100px;height:100px;" src="{{product.additional_image_1.url}}" alt="" />
                                                <input id="id_image_1"  name="name_image_1" class="form-control" type="file" accept="image/*" />
                                                {%else%}
                                                <img id="url-img-1"  width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload.svg'%}" alt="" />
                                                <input id="id_image_1"  name="name_image_1" class="form-control" type="file" accept="image/*" />
                                                {%endif%}
                                                

                                                {% if product.additional_image_2%}           
                                                <img id="url-img-2"  width="100" height="100"   style="width:100px;height:100px;" src="{{product.additional_image_2.url}}" alt="" />
                                                <input id="id_image_2"  name="name_image_2" class="form-control" type="file" accept="image/*" />
                                                {%else%}
                                                <img id="url-img-2"  width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload.svg'%}" alt="" />
                                                <input id="id_image_2"  name="name_image_2" class="form-control" type="file" accept="image/*" />
                                                {%endif%}


                                                {% if product.additional_image_3%}           
                                                <img id="url-img-3"  width="100" height="100"   style="width:100px;height:100px;" src="{{product.additional_image_3.url}}" alt="" />
                                                <input id="id_image_3"  name="name_image_3" class="form-control" type="file" accept="image/*" />
                                                {%else%}
                                                <img id="url-img-3"  width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload.svg'%}" alt="" />
                                                <input id="id_image_3"  name="name_image_3" class="form-control" type="file" accept="image/*" />
                                                {%endif%}


                                                {% if product.additional_image_4%}           
                                                <img id="url-img-4"  width="100" height="100"   style="width:100px;height:100px;" src="{{product.additional_image_4.url}}" alt="" />
                                                <input id="id_image_4"  name="name_image_4" class="form-control" type="file" accept="image/*" />
                                                {%else%}
                                                <img id="url-img-4"  width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload.svg'%}" alt="" />
                                                <input id="id_image_4"  name="name_image_4" class="form-control" type="file" accept="image/*" />
                                                {%endif%}
                                                          
                                               </div>
                                           </div>
                                       </div>
                               
                               </div>
                           </div>
                           <!-- card end// -->
                       </div>
                       <div class="col-lg-3">
                           <div class="card mb-4">
                               <div class="card-header">
                                   <h4>Main Image</h4>
                               </div>
                               <div class="card-body">
                                   <div class="input-upload">
                                       <img id="url-img"  width="100" height="100"   style="width:100px;height:100px;" src="{{product.product_image.url}}" alt="" />
                                       <input id="id_image"  name="main_image" class="form-control" type="file" accept="image/*" />
                                   </div>
                               </div>
                               {% if product.digital_file %}
                               <div class="card-header">
                                <p class="file-upload">Digital File: <a href="{{product.digital_file.url}}">{{product.digital_file.url|truncatechars:30 }}</a>
                                    <label class="form-check mb-4">
                                       
                                        <input id="digital_file" name="checkbox" class="form-check-input" type="checkbox" value="2" />
                                        <span class="form-check-label">You want change your Digital File ?</span>
                                    </label>
                                </div>
                                <div class="not-visible card-body" id="digital_file_box">
                                    <div class="input-upload">
                                        <img   width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload-file.svg'%}" alt="" />
                                        <p>allowed extension are zip , rar</p>
                                        <input   name="digital_file" class="form-control" type="file" accept="file/*" />
                                    
                                    </div>
                                </div>
                               {% else %}
                               <div class="card-header">
                                    <label class="form-check mb-4">
                                        <input id="digital_file" name="checkbox" class="form-check-input" type="checkbox" value="2" />
                                        <span class="form-check-label">Your Product Has Digital File ?</span>
                                    </label>
                               </div>
                                <div class="not-visible card-body" id="digital_file_box">
                                    <div class="input-upload">
                                        <img   width="100" height="100"   style="width:100px;height:100px;" src="{% static 'assets-supplier/imgs/theme/upload-file.svg'%}" alt="" />
                                        <p>allowed extension are zip , rar</p>
                                        <input   name="digital_file" class="form-control" type="file" accept="file/*" />
                                    
                                    </div>
                                </div>
                               {% endif %}
                               

                           </div>
                           <!-- card end// -->
                           <div class="card mb-4">
                               <div class="card-header">
                                   <h4>Categories</h4>
                               </div>
                               <div class="card-body">
                                   <div class="row gx-2">
                                       <div class="col-sm-12 mb-3">
                                           
                                           <div class="mb-4">
                                               <label class="form-label">Super Category</label>
                                               <select id="super_category" name="super_category_value" class="form-select super_category">
                                                     <option value="{{product.product_supercategory.id}}"> {{product.product_supercategory}} </option>
                                                   {% for super in super_category%}
                                                        {% if product.product_supercategory.id == super.id %}
                                                           
                                                        {%else%}
                                                            <option value="{{super.id}}"> {{super.name}} </option>
                                                        {%endif%}
                                                    
                                                   {%endfor%}
                                                   
                                               </select>
                                           </div>

                                           <div class="mb-4">
                                               <label class="form-label">Main Category</label>
                                               <select id="main_category" name="main_category_value"  class="form-select main_category">
                                                        <option value="{{product.product_maincategory.id}}"> {{product.product_maincategory}} </option>
                                                   {% for main in main_category%}
                                                        {% if product.product_maincategory.id == main.id%}
                                                           
                                                        {%else%}
                                                            <option value="{{main.id}}"> {{main.name}} </option>
                                                        {%endif%}
                                                  
                                                   {%endfor%}
                                               </select>
                                           </div>

                                           <div class="mb-4">
                                               <label class="form-label">Sub Category</label>
                                               <select id="sub_category" name="sub_category_value" class="form-select sub_category">
                                                        <option value="{{product.product_subcategory.id}}"> {{product.product_subcategory}} </option>
                                                   {% for sub in sub_category%}
                                                        {% if product.product_subcategory.id == sub.id %}
                                                        
                                                        {%else%}
                                                            <option value="{{sub.id}}"> {{sub.name}} </option>
                                                        {%endif%}
                                                       
                                                   {%endfor%}
                                               </select>
                                           </div>


                                           <div class="mb-4">
                                               <label class="form-label">Mini Category</label>
                                               <select id="mini_category" name="mini_category_value" class="form-select mini_category">
                                                <option value="{{product.product_minicategor.id}}"> {{product.product_minicategor}} </option>
                                                   {% for mini in mini_category%}
                                                        {% if product.product_minicategor.id == mini.id %}
                                                            
                                                        {%else%}
                                                            <option value="{{mini.id}}"> {{mini.name}} </option>
                                                        {%endif%}
                                                       
                                                   {%endfor%}
                                               </select>
                                           </div>
                                       
                                       </div>
                                       
                                       <div class="mb-4">
                                           <label for="product_name" class="form-label">Tags</label>
                                           <input value ="{{product.PRDtags}}" type="text" name="tags" maxlength="90" class="form-control" />
                                       </div>
                                       
                                       <h5 class="mb-3">Product Variations</h5>
                                       <hr>
                                       <h5 class="mb-3">Product Size</h5>
                                       
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="XXS" value="XXS" id="product-cat" 
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "XXS"%} checked {% endif %}
                                            {% endfor %}> 
                                           <label class="form-check-label" for="product-cat"> XXS </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="XS" value="XS"id="product-cat1"
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "XS"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> XS </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="S" value="S" id="product-cat2" 
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "S"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> S </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="M" value="M" id="product-cat3"
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "M"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> M </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="L" value="L" id="product-cat4"
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "L"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> L </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="XL" value="XL" id="product-cat5"
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "XL"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> XL </label>
                                       </div>
                                       <div class="form-check">
                                           <input class="form-check-input" type="checkbox" name="XXL" value="XXL" id="product-cat6"
                                           {% for product_variation in  product_variations%}
                                            {% if product_variation.name_variation == "XXL"%} checked {% endif %}
                                            {% endfor %}>
                                           <label class="form-check-label" for="product-cat"> XXL </label>
                                       </div>
                                   </div>
                               
                                   <!-- row.// -->
                               </div>
                           </div>
                           <!-- card end// -->
                       </div>
                   </div>
               </form>
           </section>
{%endblock section%}

{%block script%}
<script>

   var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png" , "zip" , "rar"];    
   function Validate(oForm) {
       var arrInputs = oForm.getElementsByTagName("input");
       for (var i = 0; i < arrInputs.length; i++) {
           var oInput = arrInputs[i];
           if (oInput.type == "file") {
               var sFileName = oInput.value;
               if (sFileName.length > 0) {
                   var blnValid = false;
                   for (var j = 0; j < _validFileExtensions.length; j++) {
                       var sCurExtension = _validFileExtensions[j];
                       if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                           blnValid = true;
                           break;
                       }
                   }
                   
                   if (!blnValid) {
                       alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                       return false;
                   }
               }
           }
       }
   
       return true;
   }


   const image = document.getElementById('id_image')
  
   image.addEventListener('change', () => {
       const img_data = image.files[0]
       
       const url = URL.createObjectURL(img_data)
       document.getElementById("url-img").src = url
   })

   const image_1 = document.getElementById('id_image_1')
  
   image_1.addEventListener('change', () => {
       const img_data = image_1.files[0]
       
       const url = URL.createObjectURL(img_data)
       document.getElementById("url-img-1").src = url
   })

   const image_2 = document.getElementById('id_image_2')
  
   image_2.addEventListener('change', () => {
       const img_data = image_2.files[0]
       
       const url = URL.createObjectURL(img_data)
       document.getElementById("url-img-2").src = url
   })


   const image_3 = document.getElementById('id_image_3')
  
   image_3.addEventListener('change', () => {
       const img_data = image_3.files[0]
       
       const url = URL.createObjectURL(img_data)
       document.getElementById("url-img-3").src = url
   })    


   const image_4 = document.getElementById('id_image_4')
  
   image_4.addEventListener('change', () => {
       const img_data = image_4.files[0]
       
       const url = URL.createObjectURL(img_data)
       document.getElementById("url-img-4").src = url
   }) 
   const discounted = document.getElementById("discounted")
   const discountBox = document.getElementById("discount_box")
   discounted.addEventListener('change', function() {
       if (this.checked) {
         
         discountBox.classList.remove("not-visible");
       } else {
         
         discountBox.classList.add("not-visible");
       }
     });
     const digitalFile = document.getElementById("digital_file")
     const digitalFileBox = document.getElementById("digital_file_box")
     digitalFile.addEventListener('change', function() {
         if (this.checked) {
            
             digitalFileBox.classList.remove("not-visible");
         } else {
            
             digitalFileBox.classList.add("not-visible");
         }
     });
</script>
<script src="{% static 'assets-supplier/js/get-category.js'%}" type="text/javascript"></script>   
<script src="//cdn.ckeditor.com/4.18.0/basic/ckeditor.js"></script>
{%endblock script%}