{% include 'header.html' %}
<style>
  .table-responsive {
    height: 400px;
    overflow-y: scroll;
  }
</style>
<div class="main-panel">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
    <div class="container-fluid">
      <div class="navbar-wrapper">
        <div class="navbar-toggle">
          <button type="button" class="navbar-toggler">
            <span class="navbar-toggler-bar bar1"></span>
            <span class="navbar-toggler-bar bar2"></span>
            <span class="navbar-toggler-bar bar3"></span>
          </button>
        </div>
        <a class="navbar-brand" href="javascript:;">Bundling List</a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
        aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-bar navbar-kebab"></span>
        <span class="navbar-toggler-bar navbar-kebab"></span>
        <span class="navbar-toggler-bar navbar-kebab"></span>
      </button>
    </div>
  </nav>
  <!-- End Navbar -->
  <div class="content">
    <div class="row">
      <div class="col-md-12">
        <form action="" method="post" style="justify-content:center;">
          <label for="shopName">Choose Shop :</label>
          <select id="shopName" name="shopName" onchange="bundle()"></select>
        </form>
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Bundling Produk</h4>
          </div>
          <div>
            <form>
              <b>Discount type</b><br>
              <input type="radio" class="disc" onclick="discType()" id="discPercent" name="discountType" value="discPercent">
              <label for="discPercent">Percentage</label><br>
              <input type="radio" class="disc" onclick="discType()" id="discAmt" name="discountType" value="discAmt" checked>
              <label for="discAmt">Amount</label>
          </form>                   
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead class=" text-primary">
                  <th>
                    Nama Produk
                  </th>
                  <th>
                    Harga Produk
                  </th>
                  <th>
                    Qty
                  </th>
                  <th>
                    Promosi
                  </th>
                  <th>
                    Harga Akhir
                  </th>
                  <th>
                    Action
                  </th>
                </thead>
                <tbody id="result">

                </tbody>
              </table>
            </div>
            <br><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
{% if msg %}
<script>
  alert("{{ msg }}");
</script>
{% endif %}
{% include 'footer.html' %}
<script>
  $(document).ready(function () {
    $.get('/callShop', function (data) {
      if (data === "NO SHOP REGISTERED ! ADD NEW SHOP !") {
        window.alert('Belum ada toko yang terdaftar ! Tambah toko baru !');
        window.location.href = '/user';
      } else {
        var selectElement = $('#shopName');
        // Clear existing options
        selectElement.empty();
        selectElement.append('<option value="none" default>----</option>')
        // Iterate through the array of objects
        for (var i = 0; i < data.length; i++) {
          var shop = data[i];
          // Append options to the select element
          selectElement.append('<option value="' + shop.shop_id + '">' + shop.shop_name + '</option>');
        }
      }
    });

  })

  var typeDisc = ""
  function discType() {
      const discountType = document.querySelector('input[name="discountType"]:checked').value;
      if (discountType === 'discPercent') {
          typeDisc = "percentage"
          const totalInputs = document.querySelectorAll('.discounted-price-input')
          totalInputs.forEach(input => input.value = 0);
          const discountInputs = document.querySelectorAll('.discount-input');
          discountInputs.forEach(input => input.value = 0);
      } else if (discountType === 'discAmt') {
          typeDisc = "amount"
          const totalInputs = document.querySelectorAll('.discounted-price-input')
          totalInputs.forEach(input => input.value = 0);
          const discountInputs = document.querySelectorAll('.discount-input');
          discountInputs.forEach(input => input.value = 0);
      }
      return typeDisc
  }


  function bundle() {
    let shopId = $('#shopName').val();
    console.log(shopId);
    $.post('/callSavedBundling', { shop_id: shopId }, function (data) {
      console.log(data.response);
      var results = data.response;
      var res = document.querySelector("#result");

      // Clear previous results
      res.innerHTML = '';

      // Adding a colgroup for setting column widths
      res.innerHTML += `
      <colgroup>
        <col style="width: 30%;">
        <col style="width: 15%;">
        <col style="width: 5%;">
        <col style="width: 10%;">
        <col style="width: 15%;">
        <col style="width: 25%;">
      </colgroup>`;

      // Group results by group_id
      var groupedResults = results.reduce((acc, item) => {
        if (!acc[item.group_id]) {
          acc[item.group_id] = [];
        }
        acc[item.group_id].push(item);
        return acc;
      }, {});

      // Iterate over grouped results and construct rows
      for (var groupId in groupedResults) {
        var groupItems = groupedResults[groupId];
        var items_str = ""
        groupItems.forEach(item => {
          items_str += `${item.itemset_id}//`
        });
        console.log(items_str)

        var rowHTML = `<tr id="row-${groupId}" data-itemset-id="${items_str}">`;
        console.log(groupId);


        // Concatenate product names if multiple items in the group
        rowHTML += '<td>';
        groupItems.forEach(item => {
          rowHTML += `<b style="width: 100%;">${item.product_name}</b><br>`;
        });
        rowHTML += '</td>';

        // Unit Price
        rowHTML += '<td>';
        groupItems.forEach(item => {
          rowHTML += `<input type="number" value="${item.unitPrice}" disabled style="width: 100%; margin-bottom: 5px;" class="unit-price-input">`;
        });
        rowHTML += '</td>';

        // Quantity
        rowHTML += '<td>';
        groupItems.forEach(item => {
          rowHTML += `<input type="number" value="${item.quantity}" class='quantity-input' disabled style="width: 100%; margin-bottom: 5px;">`;
        });
        rowHTML += '</td>';

        // Discount
        rowHTML += '<td>';
        groupItems.forEach((item, index) => {
          rowHTML += `<input type="number" value="${item.discount}" style="width: 100%; margin-bottom: 5px;" class="discount-input" disabled>`;
        });
        rowHTML += '</td>';

        // Discounted Price
        rowHTML += '<td>';
        groupItems.forEach((item, index) => {
          rowHTML += `<input type="number" value="${item.discounted_price}" disabled style="width: 100%; margin-bottom: 5px;" class="discounted-price-input">`;
        });
        rowHTML += '</td>';

        // Actions
        rowHTML += `<td>
                    <div style='display:flex; gap:20px'>
                      <button class='btn btn-primary' type='button' id='edit-${groupId}' onclick='edit("${groupId}")'>Edit</button>
                      <button class='btn btn-danger' type='button' onclick='delBundle("${groupId}")'>Delete</button>
                    </div>
                  </td>`;

        rowHTML += `</tr>`;
        res.innerHTML += rowHTML;

        document.addEventListener("input", function (event) {
          var target = event.target;
          // Check if the target element is an input
          if (target.tagName.toLowerCase() === 'input') {
            // Check if the input has a class of 'quantity-input' or 'discount-input'
            if (target.classList.contains('quantity-input') || target.classList.contains('discount-input')) {
              // Find the parent row element
              var row = target.closest('tr');
              // Call the updateDiscountedPrices function for the parent row
              updateDiscountedPrices(row);
            }
          }
        });
      }
    });
  }



  function edit(group_id) {
    var row = document.querySelector(`#row-${group_id}`);
    if (!row) {
      console.error(`Row with id "row-${group_id}" not found.`);
      return;
    }

    // Find all discount inputs
    var discountInputs = row.querySelectorAll('.discount-input');
    if (discountInputs.length > 0) {
      // Enable the first discount input
      discountInputs[0].disabled = false;

      // Add event listener to update the bottom discount input
      discountInputs[0].addEventListener('input', function () {
        for (let i = 1; i < discountInputs.length; i++) {
          discountInputs[i].value = discountInputs[0].value;
        }
      });
    }

    // Enable all quantity inputs
    var quantityInputs = row.querySelectorAll('input:not(.unit-price-input):not(.discount-input):not(.discounted-price-input)');
    quantityInputs.forEach(input => input.disabled = false);

    // Change the Edit button to Save button
    var editButton = document.querySelector(`#edit-${group_id}`);
    if (editButton) {
      editButton.textContent = 'Save';
      editButton.className = 'btn btn-success';
      editButton.setAttribute('onclick', `save("${group_id}")`);
    } else {
      console.error(`Edit button with id "edit-${group_id}" not found.`);
    }
  }

  function updateDiscountedPrices(row, ids) {
    var quantityInputs = row.querySelectorAll('.quantity-input');
    var discountInputs = row.querySelectorAll('.discount-input');
    var discountedPriceInputs = row.querySelectorAll('.discounted-price-input');
    var unitPriceInputs = row.querySelectorAll('.unit-price-input');

    if (quantityInputs.length > 0 && discountInputs.length > 0 && discountedPriceInputs.length > 0 && unitPriceInputs.length > 0) {
      // Calculate total quantity and total discounted price for the group
      var totalQuantity = 0;
      var totalDiscountedPrice = 0;

      for (var i = 0; i < quantityInputs.length; i++) {
        var quantity = parseFloat(quantityInputs[i].value) || 0;
        var unitPrice = parseFloat(unitPriceInputs[i].value) || 0;
        totalQuantity += quantity;
        totalDiscountedPrice += unitPrice * quantity; // Initially, calculate without discount
      }

      var discount;
      var xy = discType()
      if(xy == "percentage") {
        discount = parseFloat(discountInputs[0].value)*totalDiscountedPrice / 100;
        totalDiscountedPrice-=parseInt(discount);
      }
      else {
        discount = parseFloat(discountInputs[0].value) || 0;
        totalDiscountedPrice -= discount;
      }
      

      // Assign the total discounted price to each discountedPrice input field
      discountedPriceInputs.forEach(discountedPriceInput => {
        discountedPriceInput.value = totalDiscountedPrice;
      });

      // Add event listeners to quantity and discount inputs to update the total discounted price dynamically
      quantityInputs.forEach(quantityInput => {
        quantityInput.addEventListener('input', updateTotalDiscountedPrice);
      });

      discountInputs.forEach(discountInput => {
        discountInput.addEventListener('input', updateTotalDiscountedPrice);
      });
    }

    function updateTotalDiscountedPrice() {
      var totalDiscountedPrice = 0;

      for (var i = 0; i < quantityInputs.length; i++) {
        var quantity = parseFloat(quantityInputs[i].value) || 0;
        var unitPrice = parseFloat(unitPriceInputs[i].value) || 0;
        totalDiscountedPrice += unitPrice * quantity; // Initially, calculate without discount
      }

      // Apply discount to the total discounted price

      var discount;
      var xy = discType()
      if(xy == "percentage") {
        discount = parseFloat(discountInputs[0].value)*totalDiscountedPrice / 100;
        totalDiscountedPrice-=parseInt(discount);
      }
      else {
        discount = parseFloat(discountInputs[0].value) || 0;
        totalDiscountedPrice -= discount;
      }
      

      // Assign the updated total discounted price to each discountedPrice input field
      discountedPriceInputs.forEach(discountedPriceInput => {
        discountedPriceInput.value = totalDiscountedPrice.toFixed(2);
      });
    }
  }




  function save(group_id) {
    var row = document.querySelector(`#row-${group_id}`);
    var row = document.querySelector(`#row-${group_id}`);
    var itemsetId = row.dataset.itemsetId
    var ids = itemsetId.split("//")
    ids = ids.filter(function (element) {
      return element !== ""; // Keep only elements that are not empty strings
    });
    console.log(ids)
    var inputs = row.querySelectorAll('input');
    var updatedData = [];

    // Assume that each row of inputs for an item has the same number of inputs
    var numInputsPerItem = 4;
    var numItems = inputs.length / numInputsPerItem;

    for (let i = 0; i < numItems; i++) {
      var itemData = {
        quantity: inputs[i + numItems].value,
        discount: inputs[i + 2 * numItems].value,
        discounted_price: inputs[i + 3 * numItems].value,
        itemset_id: ids[i]
      };
      updatedData.push(itemData);

      // Disable the inputs
      inputs[i].disabled = true;
      inputs[i + numItems].disabled = true;
      inputs[i + 2 * numItems].disabled = true;
      inputs[i + 3 * numItems].disabled = true;
    }

    console.log(updatedData);

    $.post('/updateSavedBundling', { products: JSON.stringify(updatedData) })
      .done(function (data) {
        alert(data.message)

      })
      .fail(function (error) {
        console.error('Error:', error);
      });

    // Change the Save button back to Edit button
    var saveButton = document.querySelector(`#edit-${group_id}`);
    saveButton.textContent = 'Edit';
    saveButton.className = 'btn btn-primary';
    saveButton.setAttribute('onclick', `edit("${group_id}")`);
  }




  function delBundle(savedBundle_id) {
    $.post('/delSaved', { group_id: savedBundle_id })
      .done(function (data) {
        alert(data.message)
        window.location.reload()
      })
  }
</script>
</body>

</html>