<%- include('./includes/header', { title: `Home - Doors & Specialities` }) %>
<main>
  <div class="quote-builder py-lg-5 py-4">
    <div class="row justify-content-center">
      <div class="col-lg-9 col-12">
        <div class="row justify-content-center">
          <div class="col-lg-9 col-12">
            <div class="text-center">
              <h2 class="theme-h2">Quote Builder</h2>
              <h3 class="theme-h3"><%- currentstep.title %></h3>
              <!-- <p class="theme-p">Select a product below to start building your quote.</p> -->
              <%- currentstep.description %>
            </div>
          </div>
        </div>
        <form class="step-form" action="/demo-custom/doors-specialties/api/quoteproduct/quote-product" method="post">
          <input type="hidden" name="id" value="<%- quoteId %>">
          <input type="hidden" name="user" value="<%- user?.id %>">
          <input type="hidden" name="product" value="<%- product.id %>">
          <input type="hidden" name="currentstep" value="<%- currentstep.id %>">
          <div class="row g-4 justify-content-center my-3">
            <% let showNext = false %>
            <% stepItems.forEach((item)=> { %>
            <% 
              if(item.inputtype == 'user-input'){
                showNext = true
              }
              %>
            <div class="col-lg-3 col-12">
              <input class="quote-product-radio d-none <%- item.inputtype == 'user-input' ? 'custom-value' : '' %>" id="quote-product-<%- item.id %>" type="<%- currentstep.inputtype %>" name="selection" value="<%- currentstep.id %>-<%- item.id %>">
              <label for="quote-product-<%- item.id %>" class="quote-product-card text-center">
                <div class="img-wraper">
                  <% if(item.image){ %>
                  <img class="img-fluid" src="/demo-custom/doors-specialties<%- item.mediaPath %>/<%- item.mediaName %>" alt="">
                  <% } %>
                </div>
                <div class="content">
                  <h4><%- item.title %></h4>
                  <%- item.description %>
                  <% if(item.inputtype == 'user-input') { %>
                  <input class="user-input" type="text" name="value" id="">
                  <p>Enter value then click Next</p>
                  <% } %>
                </div>
              </label>
            </div>
            <% }) %>
          </div>
          <% if (currentstep.inputtype == 'checkbox' || showNext) { %>
          <button class="submit-btn" type="submit">Next</button>
          <% } %>
        </form>
      </div>
      <div class="col-lg-3 col-12 panel">
        <div class="quote-summary">
          <h4 class="theme-h4">Your Quote Summary</h4>
          <h5 class="theme-h5"><%- product.title %></h5>
          <% if(quoteSummary.length > 0) { %>
          <ul>
            <% quoteSummary.forEach((item) => { %>
            <li>
              <form action="/demo-custom/doors-specialties/api/quoteproduct/change-current-step" method="post">
                <input type="hidden" name="id" value="<%- quoteId %>">
                <input type="hidden" name="product" value="<%- product.id %>">
                <input type="hidden" name="targetStep" value="<%- item.step?.id %>">
                <button type="submit">
                  <strong><%- item.step?.title %></strong>
                  <% if(item.customValue) { %>
                  <span><%- item.value?.title %> - (<%- item.customValue %>)</span>
                  <% } else { %>
                  <% if (Array.isArray(item.value)) { %>
                  <ul class="option-values"><%- item.value.map(item => `<li>${item.title}</li>`).join('') %></ul>
                  <% } else { %>
                  <span><%- item.value?.title %></span>
                  <% } %>
                  <% } %>
                </button>
              </form>
            </li>
            <% }) %>
          </ul>
          <% } %>
          <% if(quoteSummary.length > 0) { %>
          <form method="POST" action="/demo-custom/doors-specialties/api/quoteproduct/reset">
            <input type="hidden" name="id" value="<%- currentDraft?.id %>">
            <button type="submit" class="restart-quote">Restart Quote</button>
          </form>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</main>
<%- include('./includes/footer') %>
<% if (currentstep.inputtype == 'radio') { %>
<script>
  $(".quote-product-radio:not(.custom-value)").on("click change", function() {
    $(this).closest('form').submit();
  });
</script>
<% } %>
<script>
  $('.user-input').change(function() {
    if ($(this).val()) {
      $('.quote-product-radio').prop('checked', false)
      $(this).parents('label').siblings('.quote-product-radio').prop('checked', true)
    } else {
      $(this).parents('label').siblings('.quote-product-radio').prop('checked', false)
    }
  })
  // $(".restart-quote").click(function() {
  //   document.cookie = `quoteproduct=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
  //   location.href = '/demo-custom/doors-specialties/quote-request'
  // })
</script>