<!DOCTYPE html>
<html lang="en">
<head>

  <%- include('../../partials/head.ejs') %>

  <style>
    td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;  /* Or whatever width you want */
    }
  </style>
</head>
<body>

  <%- include('../../partials/model/scripts.ejs') %>
  <%- include('../../partials/model/navbar.ejs') %>

  <%- include('../../partials/modal/confirmation.ejs') %>
  <%- include('../../partials/modal/error.ejs') %>
  <%- include('../../partials/modal/success.ejs') %>

  <link href="./assets/css/jquery.dataTables.min.css" rel="stylesheet"></script>
  <script src="./assets/js/jquery.dataTables.min.js"></script>
  <script src="./assets/js/fontawesome.js"></script>

  <div class="container-fluid">
      <div class="row flex-nowrap">
          <%- include('../../partials/model/sidebar.ejs') %>
          <div class="col py-3">
            <div class="content-header">
              <div class="d-flex align-items-center justify-content-between">
                <h3><%= model.name %> - Variants</h3>
                <% if(user.level >= 4){ %>
                <button id="openVariantBtn" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#variantModal">
                  + 
                </button>
                <%}%>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 mb-3 mb-sm-0">
                <div class="card py-3 overflow-auto" style="width:100%">
                  <table id="variants" class="display">
                    <thead>
                        <tr>
                            <th></th>
                            <th>id</th>
                            <th>name</th>
                            <th>description</th>
                        </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>

<!-- Modal for Variant Creation -->
<div class="modal fade" id="variantModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form class="modal-content" id="variantForm" novalidate>
      <div class="modal-header">
        <h5 class="modal-title">Add Variant</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <!-- Variant Name -->
        <div class="mb-3">
          <label for="variantName" class="form-label">Variant Name</label>
          <input id="variantName" class="form-control" type="text" placeholder="e.g. v2-lte" required />
          <div class="invalid-feedback">Please enter a variant name.</div>
        </div>

        <!-- Description -->
        <div class="mb-3">
          <label for="variantDescription" class="form-label">Description</label>
          <textarea id="variantDescription" class="form-control" rows="3" placeholder="Variant description..."></textarea>
        </div>
        
      </div><!-- /.modal-body -->

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

  <script>

    var t;
    var id;
    var modelID = api.getModelID();
    let variants = <%- JSON.stringify(variants) %>;
    let user = <%- JSON.stringify(user) %>;

    $(document).ready(function () {

      t = $('#variants').DataTable();

      variants.forEach((item, i) => {
        addRow(item.id,item.name,item.description);
      });

    });

    function addRow(id,name,description){
      const buttonHtml = `
        <button 
          id="${id}" 
          onclick="deleteVariant('${id}');" 
          type="button" 
          class="delete btn btn-secondary btn-sm"
          ${user.level < 4 ? 'disabled' : ''}
        >
          <i class="bi bi-folder-x"></i>
        </button>`;

      t.row.add([
        buttonHtml,
        id,
        name,
        description]).draw(true);
    }

    // Handle new variant form submission
    document.getElementById('variantForm').addEventListener('submit', function(event) {
      event.preventDefault();

      const variantName = document.getElementById('variantName').value.trim();
      const variantDescription = document.getElementById('variantDescription').value.trim();

      if (variantName === '') {
        $('#error').text("Variant name is required");
        $('#suggestion').text("Please enter a variant name");
        $('#modalError').modal('show');
        return;
      }

      api.addVariant(modelID, variantName, variantDescription, (err, res) => {
        if(err){
          $('#error').text("Error adding variant");
          if(err.hasOwnProperty("sqlMessage"))
            $('#suggestion').text(err.sqlMessage);
          else
            $('#suggestion').text(err);
          $('#modalError').modal('show');
        }else{
          $("#successHeader").text("Variant successfully added");
          $('#successMsg').text("Variant '" + variantName + "' has been created successfully");
          $('#modalSuccess').modal('show');
          
          setTimeout(() => {
            location.reload();
          }, 2000);
        }

        var modalInstance = bootstrap.Modal.getInstance(document.getElementById('variantModal'));
        if (modalInstance) {
          modalInstance.hide();
        }

        document.getElementById('variantForm').reset();
      });
    });

    function deleteVariant(variant_id){
      id = variant_id;
      $('#modalConfirmation').modal('show');
    };

    $("#modalProceed").click(()=>{
      
      api.removeVariant(modelID,id,(err,res)=>{
        if(err){
          $('#error').text("Your request cannot be executed");
          $('#suggestion').text(err.sqlMessage || err);
          $('#modalError').modal('show');
        }else location.reload();
      });
    })

  </script>
</body>
</html>
