{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<title>Beni | Edit Product</title>
<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 | Edit New 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">Edit New Product</h2>
        </div>
        <div class="col pl-0">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/product-listing-store">Products</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Product</a></li>
            </ol>
        </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='/edit-product-store/{{ store_obj.id }}' 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" value="{{ store_obj.product_name_english}}"/> 
                                        </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" value="{{ store_obj.product_name_arabic}}"/> 
                                        </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 }}{% if store_obj.maincategory_id == main.id %} selected{% endif %}>{{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 }} {% if store_obj.subcategory_id == sub.id %}selected{% endif %}>{{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">{{store_obj.description_english}}</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">{{store_obj.description_arabic}}</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 }}  {% if store_obj.brand_id == brand.id %}selected{% endif %}>{{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 }}  {% if store_obj.stone_id == stone.id %}selected{% endif %}>{{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" value="{{store_obj.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" value="{{store_obj.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" value="{{store_obj.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" value="{{store_obj.color}}"  /> 
                                        </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" value="{{store_obj.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" value="{{store_obj.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" value="{{store_obj.offer_discount}}"/> 
                                        </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" value="" 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">
                                                <input type="hidden" value="{% if product_images|length > 0 %}{{product_images}}{% else %}{% endif %}" id="checkeditimages">
                                                    {% for img in product_images %}
                                                    <div class='upload__img-box'>
                                                        <div style='background-image: url({{img}})' data-number='" + $(".upload__img-close").length + "' data-file="'{{img}}'" class='img-bg'><div class='upload__img-close'></div></div></div>
                                                    {% endfor %}
                                                </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();
  });
  
  if($('#checkeditimages').val()){
    var filesArrData = [$('#checkeditimages').val()];
  }
  else {
    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) {
  
          if (!f.type.match('image.*')) {
            return;
          }

          if (f.size > 5 * 1024 * 1024) {
            // Skip if image size is greater than 5 MB
            $('#imgrequired').text('Image size exceeds 5 MB limit');
            return;
          }
  
          if (imgArray.length > maxLength) {
            return false
          } else {
            var len = 0;
            for (var i = 0; i < imgArray.length; i++) {
              if (imgArray[i] !== undefined) {
                len++;
              }
            }
            if (len > maxLength) {
              return false;
            } else {
              imgArray.push(f);
  
              var reader = new FileReader();
              console.log(e)
              reader.onload = function (e) {
                var html = "<div class='upload__img-box'><div style='background-image: url(" + e.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++;
              }
              reader.readAsDataURL(f);
            }
          }
        });
      });
    });
  
    $('body').on('click', ".upload__img-close", function (e) {
        var file = $(this).parent().data("file");
        console.log(file)
        for (var i = 0; i < imgArray.length; i++) {
            if (imgArray[i].name === file) {
            imgArray.splice(i, 1);
            break;
            }
        }
        $(this).parent().parent().remove();
        
        // update filesArrData array
        var data = [];
        $('.img-bg').each(function() {
            var file = $(this).data('file');
            data.push(file);
        });
        filesArrData = data;
        
        $.ajax({
            url:"/remove-image-product",
            type:"GET",
            data: {
            'product_id': '{{store_obj.id}}',
            'file_name': file
            },
            success: function (data) {
            console.log('success')
            }
        });
});
    $("#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('');
        console.log('filesArrData.length',filesArrData)
        
        if (filesArrData.length==0){
        $('#imgrequired').text('Atleast one image required');
        return false;
        }
    
    });
  </script>

{% endblock %}