<!DOCTYPE html>
<html>

<head>
  <title> Dashboard Model Variation - Doors & Specialities </title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/demo-custom/microbiotech/images/favicon.png" type="image/x-icon">
  <%- include('./includes/css-links') %>
</head>

<body>
  <main>
    <div class="dashboard-wrapper">
      <%- include('./includes/sidebar') %>
      <div class="dashboard-content">
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h3 class="theme-h3 m-0">Model Variation</h3>
          <a class="add-new-btn" href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#modelvariationtype">Add New
            <i class="fa-solid fa-plus"></i>
          </a>
        </div>
        <div class="dashboard-card">
          <textarea class="inp-val" style="display: none;"></textarea>
          <div class="card-head">
            <h5 class="theme-h5">Variation</h5>
          </div>
          <div class="h-100 card-inner">
            <div class="row g-4">
              <div class="col-lg-2 col-12">
                <ul class="panel nav flex-lg-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                  <% variations.forEach((item, index)=> { %>
                  <% const variationType=item.type %>
                  <li class="nav-item">
                    <button class="nav-link<%= index == 0 ? ' active' : '' %>" id="v-pills-<%- variationType.title.replace(/\s/g, '') %>-<%- variationType.id %>-tab" data-bs-toggle="pill" data-bs-target="#v-pills-<%- variationType.title.replace(/\s/g, '') %>-<%- variationType.id %>" type="button" role="tab" aria-controls="v-pills-<%- variationType.title.replace(/\s/g, '') %>-<%- variationType.id %>" aria-selected="true"><%- variationType.title %></button>
                  </li>
                  <% }) %>
                </ul>
              </div>
              <div class="col-lg-10 col-12 panel">
                <div class="tab-content" id="v-pills-tabContent">
                  <% variations.forEach((item, index)=> { %>
                  <% const variationType=item.type %>
                  <% const variationValues=item.values %>
                  <div class="tab-pane fade<%- index == 0 ? ' show active' : '' %>" id="v-pills-<%- variationType.title.replace(/\s/g, '') %>-<%- variationType.id %>" role="tabpanel" aria-labelledby="v-pills-<%- variationType.title.replace(/\s/g, '') %>-<%- variationType.id %>-tab" tabindex="0">
                    <form class="variation-field-form" data-variationtype="<%- variationType.id %>">
                      <div class="card-head">
                        <h5 class="theme-h5"><%- variationType.title %></h5>
                        <a class="add-new-btn add-variation-field" data-type="<%- variationType.valuetype %>" href="javascript:;"><i class="fa-solid fa-plus"></i></a>
                      </div>
                      <div class="fields-wrapper">
                        <% variationValues.forEach((value)=> { %>
                        <div class="item-data" id="variation-value-<%- value.id %>">
                          <!-- <label class="radio-field" for="<%= value.id %>">
                            <input class="radio-inp" type="radio" name="default-<%= variationType.id %>" <%- value.defaultValue ? 'checked' : '' %> value="true" id="<%= value.id %>">
                            <p class="text-sm">Make Default</p>
                          </label> -->
                          <input name="id" type="hidden" value="<%- value.id %>">
                          <div class="row g-4 align-items-center">
                            <div class="col-2">
                              <div class="form-check form-switch">
                                <input class="form-check-input attribute-make" type="checkbox" role="switch" id="variation-val-<%- value.id %>" <%- value.imageAvailable ? 'checked' : '' %>>
                                <label class="form-check-label" for="variation-val-<%- value.id %>">
                                  <h6 class="card-inner-h6">Make Attributes</h6>
                                </label>
                              </div>
                            </div>
                            <div class="col-3">
                              <div class="input-field">
                                <h6 class="card-inner-h6">Enter Value</h6>
                                <input name="value" type="<%- variationType.valuetype %>" value="<%- value.value %>" required>
                              </div>
                            </div>
                            <div class="col-3">
                              <div class="input-field">
                                <h6 class="card-inner-h6">Enter Price</h6>
                                <input name="price" type="number" value="<%- value.price %>" required>
                              </div>
                            </div>
                            <div class="col-3">
                              <input type="hidden" name="image" value='<%- value.image && JSON.stringify({id: value.mediaId, file_name: value.file_name,file_path: value.file_path}) %>'>
                              <button class="full-with-btn" type="button" onclick="mediaLibrary(`#variation-value-<%- value.id %> [name='image']`,`image`,false)">
                                <% if(value.image) { %>
                                <img class="img-fluid" src="<%- value.file_path %>/<%- value.file_name %>" alt="">
                                <% } else { %>
                                Select Image
                                <% } %>
                              </button>
                            </div>
                            <div class="col-1 pb-2">
                              <button class="delete-item" title="Delete Item" onclick="removeItem(this)"><i class="fa-solid fa-trash"></i></button>
                            </div>
                          </div>
                        </div>
                        <% }) %>
                      </div>
                      <button type="submit" class="theme-btn mt-3 ms-auto">Save</button>
                    </form>
                  </div>
                  <% }) %>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dashboard-card mt-3">
          <textarea class="inp-val" style="display: none;"></textarea>
          <div class="card-head">
            <h5 class="theme-h5">Attributes</h5>
            <ul>
              <li><button class="update-attributes btn btn-sm btn-success">Update Attributes</button></li>
              <li><button class="delete-attributes btn btn-sm btn-danger">Delete Attributes</button></li>
            </ul>
          </div>
          <div class="card-inner">
            <form class="variation-attributes-form">
              <ul>
                <li>
                  <ul class="item-ul">
                    <% attributes.forEach(item => { %>
                    <li class="variation-attribute-item" id="attribute-<%- item.id %>">
                      <% const defaultValue = item.combination.filter((item) => item.defaultValue === 1).length === item.combination.length %>
                      <% item.combination.forEach(value => { %>
                      <div class="card-inner mb-3">
                        <h6 class="card-inner-h6"><%= value.type.title %></h6>
                        <% if(value.type.valuetype == 'color'){ %>
                        <div class="box" style="background-color: <%- value.value %>;"></div>
                        <% } else { %>
                        <p class="theme-p"><%= value.value %></p>
                        <% } %>
                      </div>
                      <% }) %>
                      <div class="card-inner mb-3">
                        <%- defaultValue ? '<h6 class="card-inner-h6">Default Image</h6>' : '' %>
                        <% if(item.image !== null) { %>
                        <input class="targetelem" type="hidden" data-id="<%= item.id %>" name="image" value='<%- JSON.stringify({
                          id: item.image,
                          file_name: item.imageName,
                          file_path: item.imagePath
                        }) %>'>
                        <button class="full-with-btn" type="button" onclick="mediaLibrary(`#attribute-<%- item.id %> [name='image']`,`image`,false)"><img class="img-fluid" src="<%- item.imagePath %>/<%- item.imageName %>"></button>
                        <% } else { %>
                        <input class="targetelem" type="hidden" data-id="<%= item.id %>" name="image">
                        <button class="full-with-btn" type="button" onclick="mediaLibrary(`#attribute-<%- item.id %> [name='image']`,`image`,false)">Insert Image</button>
                        <% } %>
                      </div>
                    </li>
                    <% }) %>
                  </ul>
                </li>
              </ul>
              <button type="submit" class="theme-btn mt-3 ms-auto">Save</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </main>
  <%- include('./includes/footer') %>
  <div class="modal fade" id="modelvariationtype" tabindex="-1" aria-labelledby="modelVariationTypeLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="modelVariationTypeLabel">Create Model Variation</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form class="add-model-variation-type">
          <div class="modal-body">
            <div class="row g-4">
              <div class="col-12">
                <div class="input-field">
                  <h6 class="card-inner-h6">Title</h6>
                  <input name="title" type="text" required>
                </div>
              </div>
              <div class="col-12">
                <div class="input-field">
                  <h6 class="card-inner-h6">Type</h6>
                  <select name="valueType" required>
                    <option value="text">text</option>
                    <option value="color">color</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Create Variation</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <%- include('./includes/media-library') %>
  <%- include('./includes/script-links') %>
  <script>
    $(".variation-attributes-form").submit(async function(e) {
      e.preventDefault()
      const curForm = e.target
      let formData = []
      $(curForm).find('input[name="image"]').each((ind, inp) => {
        if ($(inp).val()) {
          console.log('inp', inp)
          console.log('$(inp).val()', $(inp).val())
          formData.push({
            id: $(inp).data('id'),
            value: JSON.parse($(inp).val())
          })
        }
      })
      const response = await fetch('/api/model/model-variation-attribute-media', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData)
      })
      const result = await response.json()
      console.log('result', result)
      if(result.success){
        return alert('Variation Attributes Updated', 'success')
      }
      // location.reload()
    })
    $(".add-model-variation-type").submit(async function(e) {
      e.preventDefault()
      const curForm = e.target
      const formData = new FormData(curForm);
      const formDataObj = {};
      formData.forEach((value, key) => {
        formDataObj[key] = value;
      });
      const response = await fetch('/api/model/model-variation-type', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formDataObj)
      })
      const result = await response.json()
      console.log('result', result)
      location.reload()
    })
    $(".add-variation-field").click(function() {
      const container = $(this).parents('.tab-pane')
      const inpType = $(this).data('type')
      const radioName = `default-${$(container).find('form').data('variationtype')}`
      // const newElem = `<div class="item-data">
      //   <label class="radio-field" for="val-${Date.now()}">
      //     <input class="radio-inp" type="radio" name="${radioName}" value="true" id="val-${Date.now()}">
      //     <p class="text-sm">Make Default</p>
      //   </label>
      //   <div class="row g-4 align-items-end">
      //     <div class="col-7">
      //       <div class="input-field">
      //         <h6 class="card-inner-h6">Enter Value</h6>
      //         <input name="value" type="${inpType}" required>
      //       </div>
      //     </div>
      //     <div class="col-4">
      //       <div class="input-field">
      //         <h6 class="card-inner-h6">Enter Price</h6>
      //         <input name="price" type="number" required>
      //       </div>
      //     </div>
      //     <div class="col-1 pb-2">
      //       <button class="delete-item" title="Delete Item" onclick="removeItem(this)"><i class="fa-solid fa-trash"></i></button>
      //     </div>
      //   </div>
      // </div>`
      const id = Date.now()
      const newElem = `<div class="item-data" id="variation-value-${id}">
                          <!-- <label class="radio-field" for="val-${id}">
                            <input class="radio-inp" type="radio" name="${radioName}" value="true" id="val-${id}">
                            <p class="text-sm">Make Default</p>
                          </label> -->
                          <div class="row g-4 align-items-center">
                            <div class="col-2">
                              <div class="form-check form-switch">
                                <input class="form-check-input attribute-make" type="checkbox" role="switch" id="variation-val-${id}">
                                <label class="form-check-label" for="variation-val-${id}">
                                  <h6 class="card-inner-h6">Make Attributes</h6>
                                </label>
                              </div>
                            </div>
                            <div class="col-3">
                              <div class="input-field">
                                <h6 class="card-inner-h6">Enter Value</h6>
                                <input name="value" type="${inpType}" required>
                              </div>
                            </div>
                            <div class="col-3">
                              <div class="input-field">
                                <h6 class="card-inner-h6">Enter Price</h6>
                                <input name="price" type="number" required>
                              </div>
                            </div>
                            <div class="col-3">
                              <input type="hidden" name="image" />
                              <button class="full-with-btn" type="button" onclick="mediaLibrary(${`#variation-value-${id} [name='image']`},'image',false)">Select Image</button>
                            </div>
                            <div class="col-1 pb-2">
                              <button class="delete-item" title="Delete Item" onclick="removeItem(this)"><i class="fa-solid fa-trash"></i></button>
                            </div>
                          </div>
                        </div>`
      $(container).find('.fields-wrapper').append(newElem)
    })
    const removeItem = (elem) => {
      $(elem).parents('.item-data').remove()
    }
  </script>
  <script>
    $(".variation-field-form").submit(async function(e) {
      e.preventDefault()
      let formData = []
      const variationType = $(this).data('variationtype')
      $(this).find('.item-data').each((ind, elem) => {
        let tempObj = {
          id: $(elem).find(`[name="id"]`).val(),
          value: $(elem).find(`[name="value"]`).val(),
          price: $(elem).find(`[name="price"]`).val(),
          image: $(elem).find(`[name="image"]`).val() ? JSON.parse($(elem).find(`[name="image"]`).val()) : null,
          variationType,
          imageAvailable: $(elem).find(".attribute-make").prop('checked'),
          defaultValue: $(elem).find(`.radio-inp`).prop('checked'),
          model: '<%= modelId %>',
        }
        formData.push(tempObj)
      })
      console.log('formData', formData)
      // return
      const response = await fetch('/api/model/model-variation-value', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          variationsValue: formData
        })
      })
      const result = await response.json()
      console.log('result', result)
      const {
        success,
        modelvariationvalue,
        error
      } = result
      if (success) {
        return alert('Variation Values Updated', 'success')
        //  location.reload()
      }
      return alert(error, 'danger')
    })
  </script>
  <script>
    $(".delete-attributes").click(async function(e) {
      e.preventDefault()
      const response = await fetch('/api/model/model-variation-attribute', {
        method: 'DELETE',
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: '<%- modelId %>'
        })
      })
      const result = await response.json()
      console.log('result', result)
      const {
        success,
        error
      } = result
      if (success) {
        alert('Attributes Values Deleted', 'success')
        location.reload()
        return
      }
      return alert(error, 'danger')
    })
  </script>
  <script>
    $(".update-attributes").click(async function(e) {
      e.preventDefault()
      const response = await fetch('/api/model/model-variation-attribute', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: '<%- modelId %>'
        })
      })
      const result = await response.json()
      console.log('result', result)
      const {
        success,
        error
      } = result
      if (success) {
        alert('Attributes Values Updated', 'success')
        location.reload()
        return
      }
      return alert(error, 'danger')
    })
  </script>
</body>

</html>