<%- include('./admin_partials/header') -%>
<link rel="stylesheet" href="/admin/product/new_product.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    #primary-img{
        display: flex;
        flex-direction: row;
    }
    #primary-img input{
width: max-content;
height: max-content;
    }
     .contain{
        width: max-content;
        position: relative;
        cursor: pointer;
    }
    .contain img{
        display: block;
    }
    .contain span{
        position: absolute;
        top: 0;
        right: 1%;
    }
    .contain img{
height: 10vmax;
width: auto;
    }
    #secondary_imgs{
        display: flex;
        justify-content: center;
    }
</style>
<h2 style="text-align: center;text-transform: uppercase;margin-top: 1%;">
    <%=product.name%>
</h2>

    <br>
    <div class="container">
        <h2>Edit PRODUCT:</h2>
        <br>
      <form action="/edit_product?p_id=<%=product._id%>" method="POST" enctype="multipart/form-data" id="edit_form">
        <div class="row">
          <div class="col-25">
            <label for="fname">Product Name</label>
          </div>
          <div class="col-75">
            <input type="text" id="pname" name="productName" placeholder="name.." value="<%=product.name%>" required>
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="price">Price (MAD)</label>
          </div>
          <div class="col-75">
            <input type="number" id="price" name="price" placeholder="product price.." value="<%=product.price%>" required>
          </div>
        </div>
        <div class="row">
            <div class="col-25">
                <label for="inStock">in Stock</label>
              </div>
              <div class="form-check form-switch col-75">
                  <% var checked=""; if(product.in_stock) checked="checked"%>
                <input class="form-check-input" type="checkbox" id="inStock" name="inStock" <%=checked%> >
              </div>
          </div>
        <div class="row">
          <div class="col-25">
            <label for="subItem_id">Sub Category</label>
          </div>
          <div class="col-75">
            <select id="subItem_id" name="subItem_id">
                <% allSubs.forEach(function(sub){
                    var selected="";
                    if(sub._id.toString()==product.Sub_item.toString()) selected="selected";
                    %>
                    <option value="<%=sub._id%>" <%= selected %> ><%=sub.name%></option>
                <%})%>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="productDesc">Description</label>
          </div>
          <div id="editorjs_container" class="col-75">
            <!--textarea id="productDesc" name="productDesc" placeholder="Write something.." style="height:10vmax"></textarea-->
            <div id="editorjs"></div>
            <input type="hidden" value="" id="productDesc" name="productDesc">
          <input type="hidden" id="description_blocks" value="<%=product.description_blocks%>" name="description_blocks">
          </div>
        </div>
        <div class="row">
            <div class="col-25">
                <label for="images">primary Image</label>
            </div>
            <div id="primary-img" class="row col-75">
                <input type="file" id="primaryImg" name="productImages" disabled required/>
                <div class="contain">
                    <img src="<%=product.images[0].secure_url || product.images[i]%>" alt="" onclick="delete_p_img(this,0);">
                    <span style="color: #C82A26;"><i class="fa fa-trash"></i></span>
                </div>
            </div>
                    </div>

        <div class="row">
<div class="col-25">
    <label for="images">Images</label>
</div>
<div class="col-75">
    <input type="file" name="productImages" multiple/>
</div>
        </div>
        <div id="secondary_imgs">
            <%for(var i=1;i<product.images.length;i++){%>
                <div class="contain">
                    <img src="<%=product.images[i].secure_url%>" alt="" onclick="delete_s_img(this,'<%=i%>');">
                    <span style="color: #C82A26;"><i class="fa fa-trash"></i></span>
                </div>
            <%} %>
        </div>

        <br>
        <input type="hidden" name="remove_imgs" id="remove_imgs">
        <div class="row">
          <input type="submit" value="Save">
        </div>
      </form>
    </div>
    
<br>
<span id="product_images" style="display: none;"><%=product.images%></span>
<input hidden id="product_id" value="<%=product._id%>" />

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="/admin/product/edit_product.js"></script>

<%- include('./admin_partials/footer') -%>