SweetSpHTML3 1.1.2

@section Scripts { <script> function previewImage(event) { const input = event.target; const preview = document.getElementById('photoPreview'); if (input.files && input.files[0]) { const reader = new FileReader(); reader.onload = function (e) { preview.src = e.target.result; preview.classList.remove('d-none'); } reader.readAsDataURL(input.files[0]); } }

    let addressCount = 1;
    document.getElementById('btnAddDeliveryAddress').addEventListener('click', function () {
        const newRow = document.createElement('tr');
        newRow.classList.add('deliveryAddressRow');
        newRow.id = `deliveryAddressRow_${addressCount}`;
        newRow.innerHTML = `
                            <td><input type="text" name="DeliveryAddresses[${addressCount}].Address" class="form-control" required /></td>
                            <td><input type="text" name="DeliveryAddresses[${addressCount}].ContactPerson" class="form-control" required /></td>
                            <td><input type="text" name="DeliveryAddresses[${addressCount}].Phone" class="form-control" required /></td>
                             <td>
                                <button type="button" class="btn btn-danger btn-sm btnRemoveDeliveryAddress" >Delete</button>
                             </td>
                        `;
        document.getElementById('deliveryAddressContainer').appendChild(newRow);
        addressCount++;
    });



    document.getElementById('deliveryAddressContainer').addEventListener('click', function (e) {
        if (e.target.classList.contains('btnRemoveDeliveryAddress')) {
            e.target.closest('tr').remove();
        }
    })



    //edit customer

    function editCustomer(customerId) {
        $.ajax({
            url: '/Customers/GetCustomer',
            type: 'GET',
            data: { id: customerId },
            success: function (response) {
                if (response) {
                    //console.log(response);
                    $("#customerId").val(response.customerId);
                    $("#name").val(response.name);
                    $("#businessStart").val(response.businessStart.split('T')[0]);
                    $("#creditDetails").val(response.creditDetails);
                    $("#phone").val(response.phone);
                    $("#email").val(response.email);
                    $("#customerType").val(response.customerType);
                    $("#address").val(response.address);

                    //Handle Photo

                    if (response.photo) {
                        $("#photoPreview").attr("src", "/Uploads/" + response.photo).removeClass("d-none");
                    } else {
                        $("#photoPreview").addClass("d-none");
                    }

                    //Handle Delivery Address

                    $("#deliveryAddressContainer").empty();
                    response.deliveryAddresses.forEach((address, index) => {
                        var row = ` <tr class="deliveryAddressRow">
                                              <td><input type="text" name="DeliveryAddresses[${index}].Address" class="form-control" value="${address.address}" required /></td>
                                              <td><input type="text" name="DeliveryAddresses[${index}].ContactPerson" class="form-control" value="${address.contactPerson}" required /></td>
                                              <td><input type="text" name="DeliveryAddresses[${index}].Phone" class="form-control" value="${address.phone}" required /></td>
                                              <td>
                                                 <button type="button" class="btn btn-danger btn-sm btnRemoveDeliveryAddress" >Delete</button>
                                                <button type="button" class="btn btn-success btn-sm" id="btnAddDeliveryAddressEdit">Add</button>
                                              </td>
                                         </tr>
                                `;
                        $("#deliveryAddressContainer").append(row);
                    });


                    let addressCount = 1;
                    document.getElementById('btnAddDeliveryAddressEdit').addEventListener('click', function () {
                        const newRow = document.createElement('tr');
                        newRow.classList.add('deliveryAddressRow');
                        newRow.id = `deliveryAddressRow_${addressCount}`;
                        newRow.innerHTML = `
                     <td><input type="text" name="DeliveryAddresses[${addressCount}].Address" class="form-control" required /></td>
                     <td><input type="text" name="DeliveryAddresses[${addressCount}].ContactPerson" class="form-control" required /></td>
                     <td><input type="text" name="DeliveryAddresses[${addressCount}].Phone" class="form-control" required /></td>
                      <td>
                         <button type="button" class="btn btn-danger btn-sm btnRemoveDeliveryAddress" >Delete</button>
                      </td>
                 `;
                        document.getElementById('deliveryAddressContainer').appendChild(newRow);
                        addressCount++;
                    });


                    $("#btnSave").hide();
                    $("#btnEdit").show();
                }
            }
        })
    }

    $(document).on("click", ".btnRemoveDeliveryAddress", function () {
        $(this).closest('tr').remove();
    })

    document.getElementById("btnDelete").addEventListener("click", async () => {
        const customerId = document.getElementById("customerId").value;
        if (!customerId || customerId == 0) return alert("Please select a valid customer to delete!!");

        if (confirm("Are you sure to delete this customer?")) {
            try {
                const response = await fetch(`/Customers/Delete/${customerId}`, { method: "POST" });
                if (!response.ok) throw new Error("Failed to delete customer!!");

                alert("Customer deleted!!!");
                window.location.href = "/Customers/Index";
            } catch (err) {
                alert(err.message);
            }
        }
    })

</script>

}