<%- include('./admin_partials/header') -%>
  <link rel="stylesheet" href="/admin/product/new_product.css">

  <h2 style="text-align: center;text-transform: uppercase;margin-top: 1%;">
    <%=subItem.name%>
  </h2>

  <br>
  <div class="container">
    <h2>NEW PRODUCT:</h2>
    <br>
    <form action="/new_product" method="POST" enctype="multipart/form-data" id="new_prod_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.." 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.." 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">
          <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()==subItem._id.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" id="productDesc" name="productDesc">
          <input type="hidden" id="description_blocks" name="description_blocks">
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="images">primary Image</label>
        </div>
        <div class="col-75">
          <input type="file" name="productImages" accept="image/*" required />
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="images">Images</label>
        </div>
        <div class="col-75">
          <input type="file" name="productImages" accept="image/*" multiple />
        </div>
      </div>
      <br>
      <div class="row">
        <input type="submit" id="save" onclick="" value="Submit">
      </div>
    </form>
  </div>

<!--button onclick="save_description()">test</button-->
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
  <script>
    const editor = new EditorJS();

    const element = document.querySelector('#new_prod_form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  save_description();
});

    function save_description() {

      editor.save().then((output) => {
        if(!output.blocks.length)
        {
          return swal({ text: "please enter a description", icon: "error", buttons: false });
        }

        var convertedHtml = "";
        output.blocks.map(block => {

          switch (block.type) {
            case "header":
              convertedHtml += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
              break;
            case "embded":
              convertedHtml += `<div><iframe width="560" height="315" src="${block.data.embed}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>`;
              break;
            case "paragraph":
              convertedHtml += `<p>${block.data.text}</p>`;
              break;
            case "delimiter":
              convertedHtml += "<hr />";
              break;
            case "image":
              convertedHtml += `<img class="img-fluid" src="${block.data.file.url}" title="${block.data.caption}" /><br /><em>${block.data.caption}</em>`;
              break;
            case "list":
              convertedHtml += "<ul>";
              block.data.items.forEach(function (li) {
                convertedHtml += `<li>${li}</li>`;
              });
              convertedHtml += "</ul>";
              break;
            default:
              console.log("Unknown block type", block.type);
              break;
          }
        });
$("#description_blocks").val(JSON.stringify(output.blocks));
        $("#productDesc").val(convertedHtml);
         document.getElementById("new_prod_form").submit();

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