<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">variation</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 !=null && data.image !="" ){%>
                  <img
                    class="img-thumbnail"
                    style="width: 50px"
                    src="/<%=data.image %>"
                    alt="Image"
                  />
                  <%}else{%>
                    <div style="width: 40px; height: 40px; border-radius: 50%; background-color:<%=data.color%>;"></div>

                  <%}%>
                </td>
  
                <td>
                  <a
                    class="btn btn-danger btn-sm"
                    id="delete_<%=data.id%>"
                    onclick="deleteDataFunc(`<%=data.id%>`,`manage-product/delete-product-variation/<%=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/variation/<%= 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/variation/<%= 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/variation/<%= 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-variation"
                method="post"
                enctype="multipart/form-data"
              >
                <input
                  type="hidden"
                  name="product_id"
                  value="<%= dataInfo?.product?.id%>"
                />
                <div class="form-group mb-3">
                    <label class="required" for="inputName">Color </label>
                    <input type="color" title="Color" class="form-control" name="color" id="color" placeholder="Color" >                                      
                  </div>
                <div class="form-group mb-3">
                  <label>Image</label>
                  <input
                    type="file"
                    name="image"
                    class="form-control"
                    accept="image/*"
                    
                    style="padding: 4px 4px"
                  />
                </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 -->
  