{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<style>
    
 .upload__box {
	 padding: 40px;
}
 .upload__inputfile {
	 width: 0.1px;
	 height: 0.1px;
	 opacity: 0;
	 overflow: hidden;
	 position: absolute;
	 z-index: -1;
}
.upload__btn {
    display: inline-block;
    font-weight: 600;
    color: #fff !important;
    text-align: center;
    min-width: 116px;
    padding: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid;
    background-color: #bb9949;
    border-color: #bb9949;
    border-radius: 10px;
    line-height: 26px;
    font-size: 14px;
}
 .upload__btn:hover {
	 background-color: unset;
	 color: #000 !important;
	 transition: all 0.3s ease;
}
 .upload__btn-box {
	 margin-bottom: 10px;
}
 .upload__img-wrap {
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0 -10px;
}
 .upload__img-box {
	 width: 200px;
	 padding: 0 10px;
	 margin-bottom: 12px;
}
 .upload__img-close {
	 width: 24px;
	 height: 24px;
	 border-radius: 50%;
	 background-color: rgba(0, 0, 0, 0.5);
	 position: absolute;
	 top: 10px;
	 right: 10px;
	 text-align: center;
	 line-height: 24px;
	 z-index: 1;
	 cursor: pointer;
}
 .upload__img-close:after {
	 content: '\2716';
	 font-size: 14px;
	 color: white;
}
 .img-bg {
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: cover;
	 position: relative;
	 padding-bottom: 100%;
}
 
</style>
<title>Beni | Add Product</title>

<div class="content-body">
          
    <!-- row -->

    <div class="container-fluid">
          <div class="row page-titles profile mx-0">
        <div class="col">
            <h2 class="fs-32 mb-0">Add New Product</h2>
        </div>
        
    </div>
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card mt-4">
                    <div class="card-body">
                        <form method="POST" action='/add-product-store' id="store-add-product" class="form-profile  store-product-form" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="form-field-reset">
                              
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Product Name <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Product Name in English</label>
                                           <input type="text" name="product_name_english" placeholder="Enter Product Name" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Product Name in Arabic</label>
                                           <input type="text" name="product_name_arabic" placeholder="Enter Product Name" /> 
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Product Category <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                           <select class="form-select" name="maincategory" id="maincategory">
                                            <option disabled selected>Select</option>
                                            {% for main in main_categories %}
                                            <option value={{ main.id }}>{{main.category_name_english}}</option>
                                            {% endfor %}
                                           </select>
                                        </div>
                                        
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Product Sub-Category <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative" id="content">
                                           <select class="form-select" name="subcategory" id="subcategory">
                                            <option disabled selected>Select</option>
                                            {% for sub in sub_categories %}
                                            <option value={{ sub.id }}>{{sub.category_name_english}}</option>
                                            {% endfor %}
                                           </select>
                                        </div>
                                        
                                    </div>  
                                </div>
                                 <div class="form-group">
                                     <div class="row">
                                        <div class="col-12 col-md-2">
                                          <label>Description</label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Description in English</label>
                                            <textarea class="form-text" name="description_english" placeholder="Enter Description"></textarea>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Description in Arabic</label>
                                            <textarea class="form-text" name="description_arabic" placeholder="Enter Description"></textarea>
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Brand <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <select class="form-select" name="brand">
                                                <option disabled selected>Select</option>
                                                {% for brand in brands %}
                                                <option value={{ brand.id }}>{{brand.brand_name_english}}</option>
                                                {% endfor %}
                                            </select>
                                         </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Stone</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <select class="form-select" name="stone">
                                                <option disabled selected>Select</option>
                                                {% for stone in stones %}
                                                <option value={{ stone.id }}>{{stone.stone_name_english}}</option>
                                                {% endfor %}
                                            </select>
                                         </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Model</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="model_name" placeholder="Model Name" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Size</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="size" placeholder="Enter Size" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Weight</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="weight" placeholder="Enter Weight" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Color</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="color" placeholder="Color Name" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Quantity <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="quantity" placeholder="Quantity" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Price(vat {{vat_value}}%) <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="price" placeholder="Enter Price" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Discounted Price(vat {{vat_value}}%)<span class="red"> </span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="text" name="price_discount" placeholder="Discounted Price" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Upload Images <span class="red"> *</span></label>
                                           <span>(Max Images 10)</span>
                                           <span>(Max size per Image 5MB)</span>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <div class="upload__box">
                                                <div class="upload__btn-box">
                                                  <label class="upload__btn">
                                                    <p class="mb-0">Upload images</p>
                                                    <input type="file" multiple="" name="images" id="fileupload" data-max-length="9" class="upload__inputfile" accept="image/png, image/jpeg">
                                                </label>
                                                
                                                </div>
                                                <span id="imgrequired" style="color:red;"></span>
                                                <div class="upload__img-wrap"></div>
                                              </div> 
                                        </div>  
                                    </div>  
                                </div>
                            </div>
                          
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary" form="store-add-product"   >Submit</button>
                            </div>
                        </form>
                    </div>
                </div>

             
                </div>
            </div>
        </div>
    </div>
    <!-- #/ container -->
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
jQuery(document).ready(function () {
    ImgUpload();
  });
  var filesArrData = [];
  function ImgUpload() {
    var imgWrap = "";
    var imgArray = [];

  
$('.upload__inputfile').each(function () {
  $(this).on('change', function (e) {
    imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
    var maxLength = $(this).attr('data-max-length');
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    filesArrData = filesArr;
    var iterator = 0;

    filesArr.forEach(function (f, index) {
      var reader = new FileReader();
      reader.onload = function (event) {
        var image = new Image();
        image.onload = function () {
          if (f.size > 5 * 1024 * 1024) {
            // Skip if image size is greater than 5 MB
            $('#imgrequired').text('Image size exceeds 5 MB limit');
            // Remove the image from imgArray if size exceeds limit
            imgArray = imgArray.filter(function(item) {
              return item !== f;
            });
            return;
          }

          if (!f.type.match('image.*')) {
            return;
          }

          if (imgArray.length >= maxLength) {
            return false;
          } else {
            var len = imgArray.filter(function(item) {
              return item !== undefined;
            }).length;

            if (len >= maxLength) {
              return false;
            } else {
              imgArray.push(f);

              var html = "<div class='upload__img-box'><div style='background-image: url(" + event.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
              imgWrap.append(html);
              iterator++;
            }
          }
        };
        image.src = event.target.result;
      };
      reader.readAsDataURL(f);
    });
  });
});


  
    $('body').on('click', ".upload__img-close", function (e) {
      var file = $(this).parent().data("file");
      for (var i = 0; i < imgArray.length; i++) {
        if (imgArray[i].name === file) {
          imgArray.splice(i, 1);
          break;
        }
      }
      $(this).parent().parent().remove();
    });

    $("#maincategory").change(function () {
        var main_id      = $(this).val();
        $.ajax({
            url:"/add-product-store",
            type:"GET",
          data: {
            'main_id': main_id
          },
          success: function (data) {
            filtered_html = $(data).find("#content").html();
            console.log(filtered_html)
            $("#content").html(filtered_html);
          }
        });
      });

  }
  $("form").submit(function() {
        $('#imgrequired').text('');
        if (filesArrData.length==0){
        $('#imgrequired').text('Atleast one image required');
        return false;
        }
    
    });
  </script>
{% endblock %}