<style>
  .error-text {
    color: red;
    font-size: 13px;
    margin-top: 4px;
    display: none;
  }
  .is-invalid {
    border-color: red !important;
  }
</style>
<div class="w-full bg-white rounded-lg shadow-md p-6" style="padding: 20px !important;">
  <div class="border-b pb-3 mb-6 flex items-center justify-between">
    <h4 class="text-lg font-semibold text-gray-700">
      Additional Extra Details
    </h4>
  </div>

  <!-- Upload Form Section -->
  <div class="card shadow-sm border-0 p-4 mb-4 bg-light" style="padding-inline: 15px !important;"> 
    <div class=" mt-1">
        <div class="  bg-white shadow-md rounded-lg" style="padding: 15px;">
            <form id="addExtraOptionForm" enctype="multipart/form-data">
                <input type="hidden" id="car_id" name="car_id" value="<%= driver.car_id %>">
                <div class="row">
                    <!-- Left Column -->
                    <% if (translatedExtraOptions && translatedExtraOptions.length > 0) { %>
                        <% translatedExtraOptions.forEach(extraOption => { 
                            const isChecked =
                                selectedExtraOptionIds &&
                                selectedExtraOptionIds.map(String).includes(String(extraOption.extra_option_id))
                                ? 'checked'
                                : '';
                        %>
                            <div class="col-md-12 mb-3">
                                <h4 class="text-lg font-semibold"><%= extraOption.type %></h4>
                                <hr / style="margin-top: 10px;margin-bottom: 10px;">

                                <div class="form-check">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        id="extra_option_id<%= extraOption.extra_option_id %>"
                                        name="extra_option_id[]"
                                        value="<%= extraOption.extra_option_id %>"
                                        <%= isChecked %>
                                        style="margin-top: 2px; margin-right: 5px;"
                                    >
                                    <label class="form-check-label" for="extra_option_id<%= extraOption.extra_option_id %>" > 
                                        <%= extraOption.title %>  - <%= cityCurrency %><%= extraOption.fare %>
                                    </label>
                                </div>
                                <span class="imageInfo" style="color:#0d6efd;"><%= extraOption.short_desc %></span>
                            </div>
                        <% }) %>
                    <% } else { %>
                        <p class="text-gray-500 text-sm">No data yet.</p>
                    <% } %>
                </div>
                <div id="checkboxError" style="color: red; font-size: 14px; margin-top: 8px;"></div>
                <!-- Buttons (bottom-right) -->
                <div style="display: flex; justify-content: end; align-items: center;">
                   <button class="btn   btn-primary mt-2">Save</button>
                </div>
            </form>
        </div>
    </div>    
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  function validateCheckboxes() {
    //const errorDiv = document.getElementById("checkboxError");

    const checkedBoxes = document.querySelectorAll(
      'input[name="extra_option_id[]"]:checked'
    );

    if (checkedBoxes.length === 0) {
      //errorDiv.textContent = "Please select at least one extra option.";
      Swal.fire('Error', 'Please select at least one extra option.', 'error');
      return false;
    }

    //errorDiv.textContent = "";
    return true;
  }
</script>

<script>
  document.getElementById('addExtraOptionForm').addEventListener('submit', async function (e) {
    e.preventDefault();

    // Checkbox validation
    if (!validateCheckboxes()) return;

    const form = e.target;

    // HTML5 validation
    if (!form.checkValidity()) {
      Swal.fire('Error', 'Please fill all required fields.', 'error');
      return;
    }

    $("#loader").show();

    const formData = new FormData();

    // ✅ add car_id ONCE
    formData.append('car_id', form.car_id.value);

    // ✅ collect checked options
    const checkedOptions = Array.from(
      form.querySelectorAll('input[name="extra_option_id[]"]:checked')
    ).map(cb => cb.value);

    // ✅ comma-separated
    formData.append('extra_option_id', checkedOptions.join(','));

    // // 🔍 DEBUG (this should be CLEAN)
    // console.log('===== CLEAN PAYLOAD =====');
    // for (const [key, value] of formData.entries()) {
    //   console.log(key, value);
    // }

    const data = {
      car_id: form.car_id.value,
      extra_option_id: checkedOptions.join(',')
    };

    try {
      const response = await fetch('/admin/addDriverCarExtraOption/', {
        method: 'POST',
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams(data)
      });

      $("#loader").hide();

      const result = await response.json();

      if (result.success) {
        Swal.fire('Saved!', result.message, 'success');
      } else {
        Swal.fire('Error', result.message || 'Save failed.', 'error');
      }

    } catch (error) {
      $("#loader").hide();
      console.error(error);
      Swal.fire('Error', 'Network error occurred.', 'error');
    }
  });
</script>
