<x-app-layout>
  <div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
      <div class="card px-4 pb-4 sm:px-5">

        <form id="postbackForm" action="/admin/postback-save" method="POST">
          @csrf
          <div id="postback-generator" class="space-y-4">
            <!-- Offerwall Name -->
            <div> 
              <label class="block text-sm font-medium">Offerwall Name</label>
              <input id="offerwall_name" name="offerwall_name" type="text" placeholder="" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>

            <!-- Add/Remove Parameters -->
            <div>
              <label class="block text-sm font-medium">Parameters</label>
              <div id="params" class="space-y-2 pb-4">
                <div class="param flex space-x-2">
                  <input type="text" name="params[0][name]" placeholder="Parameter Name" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                  <input type="text" name="params[0][value]" placeholder="Default Value" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                </div>
                <div class="param flex space-x-2">
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_uid]" />
                    <span>Is UID</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_status]" />
                    <span>Is Status</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_reward]" />
                    <span>Is Reward</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_ip]" />
                    <span>Is IP</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_country]" />
                    <span>Is Country</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_secret]" />
                    <span>Is Secret Key</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_tx]" />
                    <span>Is TXID</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_oid]" />
                    <span>Is OID</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_oname]" />
                    <span>Is ONAME</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][is_signature]" />
                    <span>Is SIGNATURE</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input type="checkbox" name="params[0][includeInHash]" />
                    <span>Include in Hash</span>
                  </label>
                  <button type="button" onclick="removeParam(this)" class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">Remove</button>
                </div>
              </div>
              <button type="button" onclick="addParam()" class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Add Parameter</button>
            </div>

            <!-- Request Method -->
            <div>
              <label class="block text-sm font-medium">Request Method</label>
              <select id="method" name="method" class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                <option value="POST">POST</option>
                <option value="GET">GET</option>
              </select>
            </div>
            
            <!-- IP -->
            <div>
              <label class="block text-sm font-medium">Whitelisted IPS</label>
              <input id="whitelisted_ips" name="whitelisted_ips" type="text" vaue="" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>
            
            <div>
              <label class="block text-sm font-medium">Rewarded Status</label>
              <input id="rewarded_status" name="rewarded_status" type="text" placeholder="1" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>
            
            <div>
              <label class="block text-sm font-medium">Denied Status</label>
              <input id="denied_status" name="denied_status" type="text" placeholder="2" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>
            
            <!-- Response Text -->
            <div>
              <label class="block text-sm font-medium">Response Text</label>
              <input id="responseText" name="response_text" type="text" placeholder="SUCCESS" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>

            <!-- Response Code -->
            <div>
              <label class="block text-sm font-medium">Response Code</label>
              <input id="responseCode" name="response_code" type="number" value="200" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>

            <!-- Hash Type -->
            <div>
              <label class="block text-sm font-medium">Hash Type</label>
              <select id="hashType" name="hash_type" class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                <option value="md5">MD5</option>
                <option value="sha256">SHA-256</option>
              </select>
            </div>

            <!-- Hash Prefix -->
            <div>
              <label class="block text-sm font-medium">Hash Prefix</label>
              <input id="hashPrefix" name="hash_prefix" type="text" placeholder="-" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>

            <div id="responseMessage"></div>
            <button type="submit" class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Save</button>
          </div>
        </form>

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

    <script>
document.getElementById('postbackForm').addEventListener('submit', function (e) {
    e.preventDefault(); // Prevent default form submission

    const form = e.target;
    const formData = new FormData(form);

    // Convert whitelisted_ips from comma-separated to an array
    const ips = formData.get('whitelisted_ips');
    if (ips) {
        formData.set('whitelisted_ips', JSON.stringify(ips.split(',').map(ip => ip.trim())));
    }

    const xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('input[name="_token"]').value);
    xhr.setRequestHeader('Accept', 'application/json');

    xhr.onload = function () {
        const responseMessage = document.getElementById('responseMessage');
        if (xhr.status === 201) {
            responseMessage.textContent = 'Configuration saved successfully!';
            responseMessage.style.color = 'green';
        } else {
            responseMessage.textContent = 'Error: ' + xhr.responseText;
            responseMessage.style.color = 'red';
        }
    };

    xhr.onerror = function () {
        alert('An error occurred while sending the request.');
    };

    xhr.send(formData);
});
let paramIndex = 0;

// Fungsi untuk menambahkan parameter baru
function addParam() {
  paramIndex++; // Tambah indeks parameter
  const paramsContainer = document.getElementById("params");
  
  // Elemen baru untuk nama dan nilai parameter
  const paramGroup = document.createElement("div");
  paramGroup.className = "param flex space-x-2";

  paramGroup.innerHTML = `
    <input type="text" name="params[${paramIndex}][name]" placeholder="Parameter Name" 
           class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
    <input type="text" name="params[${paramIndex}][value]" placeholder="Default Value" 
           class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
  `;

  paramsContainer.appendChild(paramGroup);

  // Elemen untuk pengaturan checkbox
  const checkboxGroup = document.createElement("div");
  checkboxGroup.className = "param flex space-x-2";

  checkboxGroup.innerHTML = `
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][is_uid]" />
      <span>Is UID</span>
    </label>
    <label class="flex items-center space-x-2">
       <input type="checkbox" name="params[${paramIndex}][is_status]" />
       <span>Is Status</span>
    </label>
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][is_reward]" />
      <span>Is Reward</span>
    </label>
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][is_ip]" />
      <span>Is IP</span>
    </label>
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][is_country]" />
      <span>Is Country</span>
    </label>
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][is_secret]" />
      <span>Is Secret Key</span>
    </label>
    <label class="flex items-center space-x-2">
        <input type="checkbox" name="params[${paramIndex}][is_tx]" />
        <span>Is TXID</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" name="params[${paramIndex}][is_oid]" />
        <span>Is OID</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" name="params[${paramIndex}][is_oname]" />
        <span>Is ONAME</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" name="params[${paramIndex}][is_signature]" />
        <span>Is SIGNATURE</span>
    </label>
    <label class="flex items-center space-x-2">
      <input type="checkbox" name="params[${paramIndex}][includeInHash]" />
      <span>Include in Hash</span>
    </label>
    <button type="button" onclick="removeParam(this)" 
            class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
      Remove
    </button>
  `;

  paramsContainer.appendChild(checkboxGroup);
}

// Fungsi untuk menghapus parameter
function removeParam(button) {
  const paramDiv = button.parentNode; // Group checkbox
  const previousParamDiv = paramDiv.previousElementSibling; // Group input

  // Hapus kedua elemen div
  paramDiv.remove();
  previousParamDiv.remove();
}

    </script>
</x-app-layout>