<h4>Acc</h4>
<hr>
<div class="card">
  <div class="card-body">
    <div class="col-6 col-lg-6">
      <label for="customRange1" class="form-label h6">Shutdown Voltage</label>
      <input type="range" class="form-range shutVol" value="<?= $obj['System']['Acc']['ShutVol'] ?>" min="9" max="24" id="customRange1" oninput="this.nextElementSibling.value = this.value"><output><?= $obj['System']['Acc']['ShutVol'] ?></output><span> V</span><br><br>
    </div>

    <div class="row mb-3">
      <label class="col-sm-5 col-form-label">ACC Duration (sec)</label>
      <div class="col-sm-5">
        <input type="text" class="form-control accDelay" value="<?= $obj['System']['Acc']['AccDelay'] ?>">
      </div>
    </div>

    <div style="text-align: right;">
      <button class="btn btn-primary px-4 saveSystem saving">Save</button>
      <div class="result"></div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    var delay = 2000;
    var DeviceId = '<?= htmlspecialchars($_POST['DeviceId'] ?? '', ENT_QUOTES) ?>';

    $('.saveSystem').click(function () {
      var shutVol = $('.shutVol').val();
      var accDelay = $('.accDelay').val();

      //console.log(shutVol, accDelay, DeviceId); // fixed accDelay in console

      $.ajax({
        url: '/updatedvrsettings',
        type: 'POST',
        data: {
          shutVol: shutVol,
          accDelay: accDelay,
          DeviceId: DeviceId
        },
        beforeSend: function () {
          $('.saving').html(
            '<div class="spinner-border" role="status"></div>'
          );
        },
        success: function (response) {
          $('.result').html(response);
          $('.saving').html('Save');
        },
        error: function () {
          $('.result').html('Error occurred while saving.');
          $('.saving').html('Save');
        }
      });
    });
  });
</script>