<div class="row">
  <div class="col-md-12 mt-2">
    <div class="float-left mb-2">
      <p>
        <a title="Main Module" href="/manage-product/list"
          ><i class="fa fa-chevron-circle-left"></i> &nbsp; Zurück zur Liste der
          Daten Produkte verwalten</a
        >
      </p>
    </div>
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <div class="card w-90 float-right mb-2">
          <a
            href="#"
            id="btn_add_new_data"
            class="btn btn-sm btn-info m-1"
            title="Add Data"
            onclick="toggleModal()"
          >
            <i class="fa fa-plus-circle"></i> Daten hinzufügen
          </a>
        </div>
      </div>
    </div>
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title"><%= pageTitle %></h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-hover table-head-fixed datatable123">
          <thead>
            <tr>
              <th style="width: 1%">#</th>
              <th style="width: auto; text-align: left">Product</th>
              <th style="width: auto">Bild</th>
              <th style="width: 40%" data-orderable="false">Aktion</th>
            </tr>
          </thead>
          <tbody>
            <% if (images?.length > 0){ %> <% let index=((currentPage - 1) * 10
            )+1;%> <% images.forEach(function(data) { %>
            <tr>
              <td><%=index++%></td>
              <td style="text-align: left">
                <%= dataInfo?.product?.product_title%>
              </td>

              <td>
                <%if(data.image_path !=null && data.image_path !="" ){%>
                <img
                  class="img-thumbnail"
                  style="width: 50px"
                  src="/<%=data.image_path %>"
                  alt="Image"
                />
                <%}else{%>
                <img
                  class="img-thumbnail"
                  style="width: 50px"
                  src="/images/no-image.jpg%>"
                  alt="Image"
                />
                <%}%>
              </td>

              <td>
                <a
                  class="btn btn-danger btn-sm"
                  id="delete_<%=data.id%>"
                  onclick="deleteDataFunc(`<%=data.id%>`,`manage-product/delete-product-image/<%=data.id%>`)"
                  data-toggle="tooltip"
                  title="Delete"
                >
                  <i class="fas fa-trash"> </i>
                </a>
              </td>
            </tr>
            <% }) %> <% }else{ %> <% } %>
          </tbody>
        </table>
        <% if (images?.length > 0){ %>
        <div class="col-sm-12 col-md-7 pl-0">
          <div
            class="dataTables_paginate paging_simple_numbers"
            id="DataTables_Table_0_paginate"
          >
            <ul class="pagination">
              <!-- Previous Page Button -->
              <li
                class="paginate_button page-item previous <%= currentPage == 1 ? 'disabled' : '' %>"
                id="DataTables_Table_0_previous"
              >
                <a
                  href="/manage-product/images/<%= dataInfo?.product?.id %>?page=<%= currentPage - 1 %>"
                  class="page-link"
                  aria-controls="DataTables_Table_0"
                  tabindex="0"
                  >Previous</a
                >
              </li>

              <!-- Page Numbers -->
              <% for (let i = 1; i <= totalPages; i++) { %>
              <li
                class="paginate_button page-item <%= currentPage == i ? 'active' : '' %>"
              >
                <a
                  href="/manage-product/images/<%= dataInfo?.product?.id %>?page=<%= i %>"
                  class="page-link"
                  aria-controls="DataTables_Table_0"
                  tabindex="0"
                  ><%= i %></a
                >
              </li>
              <% } %>

              <!-- Next Page Button -->
              <li
                class="paginate_button page-item next <%= currentPage == totalPages ? 'disabled' : '' %>"
                id="DataTables_Table_0_next"
              >
                <a
                  href="/manage-product/images/<%= dataInfo?.product?.id %>?page=<%= currentPage + 1 %>"
                  class="page-link"
                  aria-controls="DataTables_Table_0"
                  tabindex="0"
                  >Next</a
                >
              </li>

              <!-- Last Page Button -->
            </ul>
          </div>
        </div>
        <% } %>
      </div>
    </div>
    <div
      class="modal fade"
      id="addImageModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Data</h5>
            <button
              type="button"
              class="fa fa-close"
              data-dismiss="modal"
              aria-label="Close"
              style="
                font-size: 29px;
                color: black;
                border: #ffffff;
                background-color: #ffffff;
              "
              onclick="toggleModal()"
            ></button>
          </div>
          <div class="modal-body">
            <form
              action="/manage-product/post-add-product-image"
              method="post"
              enctype="multipart/form-data"
            >
              <input
                type="hidden"
                name="product_id"
                value="<%= dataInfo?.product?.id%>"
              />
              <div class="form-group mb-3">
                <label>Image</label>
                <input
                  type="file"
                  name="image"
                  class="form-control"
                  accept="image/*"
                  required
                  style="padding: 4px 4px"
                />
              </div>
              <!-- <div class="form-group mb-3">
                <label class="required" for="inputName">Variation </label>
                <select
                  id="variation_color"
                  name="variation_color"
                  class="form-control"
                >
                  <option selected disabled>Variation</option>
                  <% if (variations && variations.length) { %> <% for (let item of
                    variations) { %>
                  <option value="<%= item.color %>">
                    <%= item.color %>
                  </option>
                  <% } %> <% } else { %>
                  <option disabled>No variation available</option>
                  <% } %>
                </select>
              </div> -->
              <div class="form-group mb-3">
                <label class="required d-block">Variation</label>
              
                <% if (variations && variations.length) { %>
                  <% for (let item of variations) { %>
                    <div class="form-check form-check-inline text-center" style="margin-right: 10px;">
                      <input 
                        class="form-check-input d-none variation-radio" 
                        type="radio" 
                        id="variation_<%= item.color %>" 
                        name="variation_color" 
                        value="<%= item.color %>"
                      />
                      <label 
                        class="form-check-label variation-label" 
                        for="variation_<%= item.color %>" 
                        style="cursor: pointer;"
                      >
                      <%if(item.image !=null && item.image !="" ){%>
                        <img
                          class="img-thumbnail"
                          style="width: 50px"
                          src="/<%=item.image %>"
                          alt="Image"
                        />
                        <%}else{%>
                          <div class="color-box" 
                          style="height: 50px; width: 50px; background-color: <%= item.color %>;" 
                          title="<%= item.color %>">
                     </div>
                        <%}%>
                       
                      </label>
                    </div>
                  <% } %>
                <% } else { %>
                  <p>No variation available</p>
                <% } %>
              </div>
              
              
              
              
              <button type="submit" class="btn btn-primary">
                Speichern
              </button>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
              onclick="toggle_visibility('contact-popup');"
            >
            Zurück
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
  <script>
    $(document).ready(function () {
      $(".datatable123").DataTable({
        paging: false, // Enable pagination
        lengthChange: false,
        searching: true,
        ordering: true,
        info: false,
        autoWidth: false
      });
    });
  </script>
</div>
<!-- /.row -->
