@extends('Layout.admindashboard')
@section('css')
<style>
  /* Optional: smaller padding on small devices */
  @media (max-width: 575.98px) {
    .form-row > .col {
      margin-bottom: 1rem;
    }
  }
</style>
@endsection

@section('content')
<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">
        <span class="page-title-icon bg-gradient-primary text-white me-2">
          <i class="mdi mdi-home"></i>
        </span> Amount setup Rule
      </h3>
    </div>

    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Plan Crashed Time Set</h4>

            <form id="crashRuleUpdateForm" class="needs-validation" novalidate>
              @csrf
              <input type="hidden" name="id" value="14">
              <input type="hidden" name="settingname" value="game_between_time_end">

              <div class="mb-3 row align-items-center">
                <label for="value" class="col-sm-4 col-form-label fw-semibold">Setting Name</label>
                <div class="col-sm-8">
                  <input type="text" readonly class="form-control-plaintext" value="game_between_time_end">
                </div>
              </div>

              <div class="mb-3 row align-items-center">
                <label for="value" class="col-sm-4 col-form-label fw-semibold">Value</label>
                <div class="col-sm-8">
                  <input
                    type="text"
                    class="form-control"
                    id="value"
                    name="value"
                    value="{{ $specificdata->value }}"
                    required
                    placeholder="Enter value"
                  >
                  <div class="invalid-feedback">
                    Please enter a valid value.
                  </div>
                </div>
              </div>

              <div class="text-end">
                <button type="submit" class="btn btn-warning px-4">Update</button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>

    <div class="mt-4">
      <p><strong>Rule 1.-</strong> Set Value <span class="badge bg-primary">Any</span> means <em>Any</em></p>
      <p><strong>Rule 2.-</strong> Set Value <span class="badge bg-primary">100</span> means <em>1.0 to 10.0</em></p>
    </div>
  </div>
</div>

<div class="position-fixed top-3 end-0 p-3" style="z-index: 1080;">
  <div id="toastMessage" class="toast align-items-center bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body text-white" id="toastBody">
        <!-- Toast message will go here -->
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>
@endsection

@section('js')
<script>
  (function () {
    'use strict';
    // Bootstrap validation
    const forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();

  $(document).ready(function(){
    const toastElement = document.getElementById('toastMessage');
    const toastBody = document.getElementById('toastBody');
    const toast = new bootstrap.Toast(toastElement);

    $("#crashRuleUpdateForm").on('submit', function(e) {
      e.preventDefault();

      const form = this;
      const formData = new FormData(form);
      const url = "{{ url('admin/api/editamountsetup') }}";

      $.ajax({
        method: "POST",
        url: url,
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          toastBody.textContent = "Update successful.";
          toast.show();
          setTimeout(() => window.location.reload(), 1500);
        },
        error: function(xhr) {
          toastBody.textContent = "Update failed.";
          toastElement.classList.remove('text-bg-success');
          toastElement.classList.add('text-bg-danger');
          toast.show();
          console.error(xhr.responseText);
        }
      });
    });
  });
</script>
@endsection
