/**
 * SELECT2 AJAX - EXPECTED API RESPONSE FORMAT
 * 
 * File ini untuk dokumentasi dan testing.
 * Pastikan backend API mengembalikan format ini.
 */

// ===================================================================
// EXPECTED RESPONSE FORMAT
// ===================================================================

/**
 * GET /api/destinations?origin_id=1
 * 
 * Response (Array format):
 */
[
  {
    "id": 1,
    "name": "Jakarta"
  },
  {
    "id": 2,
    "name": "Bandung"
  },
  {
    "id": 3,
    "name": "Surabaya"
  }
]

/**
 * GET /api/destinations?origin_id=1
 * 
 * Response (Object with data property):
 */
{
  "data": [
    {
      "id": 1,
      "name": "Jakarta"
    },
    {
      "id": 2,
      "name": "Bandung"
    }
  ]
}

/**
 * GET /api/districts/1
 * Response:
 */
[
  {
    "id": 1,
    "name": "Kecamatan Jakarta Pusat"
  },
  {
    "id": 2,
    "name": "Kecamatan Jakarta Timur"
  }
]

/**
 * GET /api/villages/1
 * Response:
 */
[
  {
    "id": 1,
    "name": "Kelurahan Gambir"
  },
  {
    "id": 2,
    "name": "Kelurahan Menteng"
  }
]

// ===================================================================
// IMPORTANT REQUIREMENTS
// ===================================================================

/*
✓ REQUIRED:
  - Response harus JSON
  - Setiap item HARUS punya "id" dan "name"
  - Bisa array langsung: [...]
  - Atau object dengan "data" property: { data: [...] }

✓ ID type:
  - Number (lebih baik)
  - String (juga OK)

✓ NAME type:
  - String (harus ada)
  - Tidak boleh null atau undefined

✓ HTTP Status:
  - 200 OK (success)
  - 404 atau 500 (error) - script akan handle dengan toast notification

✓ CORS:
  - Jika AJAX dari domain berbeda, pastikan backend setup CORS
  - Untuk same-domain (localhost), tidak perlu CORS
*/

// ===================================================================
// EXAMPLE: How script handles response
// ===================================================================

// Raw response dari API:
const apiResponse = [
  { "id": 1, "name": "Jakarta" },
  { "id": 2, "name": "Bandung" }
];

// Script transform ke Select2 format:
const select2Data = apiResponse.map(item => ({
  id: item.id,
  text: item.name    // Select2 menggunakan "text", bukan "name"
}));

// Result:
[
  { "id": 1, "text": "Jakarta" },
  { "id": 2, "text": "Bandung" }
]

// Then update Select2:
jQuery(destinationSelect).select2({
  data: select2Data
});

// ===================================================================
// TESTING AJAX REQUESTS
// ===================================================================

// 1. Open DevTools (F12)
// 2. Go to Network tab
// 3. Select dari dropdown origin
// 4. Lihat request ke /api/destinations?origin_id=X
// 5. Click request, lihat Response tab
// 6. Response harus seperti format di atas

// Atau test manual di console:
jQuery.ajax({
  url: '/api/destinations?origin_id=1',
  type: 'GET',
  dataType: 'json',
  success: function(response) {
    console.log('Response:', response);
  },
  error: function(xhr) {
    console.error('Error:', xhr.status, xhr.responseText);
  }
});

// ===================================================================
// COMMON ISSUES
// ===================================================================

/*
ISSUE: Dropdown tidak load data
SOLUTION:
  - Check console untuk error
  - Check Network tab untuk AJAX request
  - Verifikasi API endpoint URL benar
  - Verifikasi response format sesuai spec di atas

ISSUE: Data muncul tapi nama tidak jelas
SOLUTION:
  - API harus return "name" field (tidak "title" atau "label")
  - Jangan pakai nested object: { "id": 1, "data": { "name": "..." } }
  - Harus flat: { "id": 1, "name": "..." }

ISSUE: Dropdown selectedValue tidak cleared
SOLUTION:
  - Ini normal, gunakan allowClear: true
  - User bisa clear dengan click X button

ISSUE: Performance lambat ketika scroll/search
SOLUTION:
  - Pastikan data tidak terlalu banyak (< 1000 items ok)
  - Jika > 1000 items, implementasi pagination di AJAX
  - Lihat Select2 docs untuk data function dengan pagination
*/
