
<style>
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 100px;
}

/* The popup chat - hidden by default */
.chat-popup {
  position: fixed;
  bottom: -500px;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  transition: 1s;    
}

/* Add styles to the form container */
.form-container {
  /* max-width: 500px; */
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>

<button class="open-button" onclick="openForm()">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z" />
    </svg>
  </button>

<div class="chat-popup" id="myForm">
  <form class="form-container">
    <h1>Calculator</h1>

    <label for="calcamaun"><b>Amaun Pelanggan</b></label>
    <input id="calcamaun" class="form-control" placeholder="Amaun" name="calcamaun" required/>
    <label for="calcbayar"><b>Amaun Dibayar</b></label>
    <input id="calcbayar" class="form-control" placeholder="Amaun" name="calcbayar" disabled value="0.00"/>
    <label for="calcbaki"><b>Baki</b></label>
    <input id="calcbaki" class="form-control" name="calcbaki" disabled value="0.00"/>

    <button type="button" class="btn" onclick="kirafunc()">Kira</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Tutup</button>
  </form>
</div>

<script>
    function kirafunc(){
        let amaun = $('#calcamaun').val();
        let bayar = $('#calcbayar').val();
        let total = 0;

        total = amaun - bayar;

        $('#calcbaki').val(formatter.format(total));
        
    }

    function openForm() {
        document.getElementById("myForm").style.bottom = "0";
        // document.getElementById("myForm").style.display = "block";
    }

    function closeForm() {
        $('#calcamaun').val('');
        $('#calcbaki').val('0.00');
        document.getElementById("myForm").style.bottom = "-500px";
        // document.getElementById("myForm").style.display = "none";
    }
</script>