<?php get_header(); ?>

<!-- CSS AYNI KALIYOR (Sadece gerekli görünen kısım) -->
<style>
  /* ... Mevcut CSS kodların buraya aynen gelecek ... */
  
  /* Mahalle Paneli için ek stil */
  #neighborhood-panel {
      display: none; position: absolute; top: 100%; left: 0; width: 100%;
      background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 50;
      padding: 1rem; margin-top: 0.5rem;
  }
  .mh-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; max-height: 200px; overflow-y: auto; }
  .mh-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
</style>

<script src="https://cdn.tailwindcss.com"></script>

<section class="hero-bg min-h-[500px] flex items-center justify-center relative">
  <div class="bg-white p-6 rounded-xl shadow-2xl w-full max-w-5xl mx-4 relative">
      
      <!-- FORM BAŞLANGICI -->
      <form id="searchForm" onsubmit="performSearch(); return false;" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
        
        <!-- İşlem Tipi -->
        <select id="islemSelect" class="w-full p-3 border rounded-lg bg-white">
            <option value="satilik">Satılık</option>
            <option value="kiralik">Kiralık</option>
        </select>

        <!-- Kategori -->
        <select id="mainCategory" class="w-full p-3 border rounded-lg bg-white">
            <option value="konut">Konut</option>
            <option value="isyeri">İş Yeri</option>
            <option value="arsa">Arsa</option>
        </select>

        <!-- Alt Kategori (Dinamik Dolacak) -->
        <select id="subCategory" class="w-full p-3 border rounded-lg bg-white">
            <option value="">Seçiniz</option>
        </select>

        <!-- Bölge -->
        <select id="bolgeSelect" class="w-full p-3 border rounded-lg bg-white">
            <option value="istanbul_tumu">İstanbul (Tümü)</option>
            <option value="istanbul_anadolu">Anadolu Yakası</option>
            <option value="istanbul_avrupa">Avrupa Yakası</option>
        </select>

        <!-- İlçe -->
        <div class="relative">
            <select id="ilceSelect" class="w-full p-3 border rounded-lg bg-white appearance-none">
                <option value="">Önce Bölge Seçiniz</option>
            </select>
            
            <!-- Mahalle Paneli -->
            <div id="neighborhood-panel">
                <div class="flex justify-between mb-2 border-b pb-2">
                    <b id="panelTitle">Mahalle Seçimi</b>
                    <button type="button" onclick="closePanel()" class="text-red-500">✕</button>
                </div>
                <div id="mh-list-container" class="mh-items"></div>
                <div class="mt-2 text-right">
                    <button type="button" onclick="closePanel()" class="bg-blue-600 text-white px-3 py-1 rounded text-xs">Tamam</button>
                </div>
            </div>
        </div>

        <button type="submit" class="bg-blue-600 text-white p-3 rounded-lg font-bold">ARA</button>
      </form>
  </div>
</section>

<script>
    // AJAX URL'sini PHP'den alalım
    const ajaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>";

    // --- DAVRANIŞ BİÇİMİ FONKSİYONLARI (Aynı Mantık) ---

    function normalizeTr(str) {
        if (!str) return '';
        return str.toLowerCase().replace(/ı/g, 'i').replace(/ğ/g, 'g').replace(/ü/g, 'u')
            .replace(/ş/g, 's').replace(/ö/g, 'o').replace(/ç/g, 'c').replace(/[^a-z0-9]/g, '');
    }

    function closePanel() { document.getElementById('neighborhood-panel').style.display = 'none'; }

    // 1. ALT KATEGORİLERİ ÇEK (AJAX)
    document.getElementById('mainCategory').addEventListener('change', function() {
        const parent = this.value;
        const subSelect = document.getElementById('subCategory');
        subSelect.innerHTML = '<option>Yükleniyor...</option>';
        
        const formData = new FormData();
        formData.append('action', 'fme_get_subcats');
        formData.append('parent', parent);

        fetch(ajaxUrl, { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            subSelect.innerHTML = '<option value="">Seçiniz</option>';
            if(data.success) {
                data.data.forEach(item => {
                    let opt = document.createElement('option');
                    opt.value = normalizeTr(item);
                    opt.textContent = item;
                    subSelect.appendChild(opt);
                });
            }
        });
    });

    // 2. İLÇELERİ ÇEK (AJAX)
    document.getElementById('bolgeSelect').addEventListener('change', function() {
        const region = this.value;
        const ilceSelect = document.getElementById('ilceSelect');
        ilceSelect.innerHTML = '<option>Yükleniyor...</option>';
        closePanel(); // Paneli kapat

        const formData = new FormData();
        formData.append('action', 'fme_get_districts');
        formData.append('region', region);

        fetch(ajaxUrl, { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            ilceSelect.innerHTML = '<option value="">İlçe Seçiniz</option>';
            if(data.success) {
                data.data.forEach(d => {
                    let opt = document.createElement('option');
                    opt.value = d.slug;
                    opt.textContent = d.name;
                    ilceSelect.appendChild(opt);
                });
            }
        });
    });

    // 3. MAHALLELERİ ÇEK VE PANELİ AÇ (AJAX)
    document.getElementById('ilceSelect').addEventListener('change', function() {
        const district = this.value;
        if(!district) { closePanel(); return; }

        const container = document.getElementById('mh-list-container');
        container.innerHTML = 'Yükleniyor...';
        document.getElementById('neighborhood-panel').style.display = 'block';

        const formData = new FormData();
        formData.append('action', 'fme_get_neighborhoods');
        formData.append('district', district);

        fetch(ajaxUrl, { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            container.innerHTML = '';
            if(data.success) {
                data.data.forEach(mah => {
                    let div = document.createElement('div');
                    div.className = 'mh-option';
                    div.innerHTML = `<input type="checkbox" class="mh-check" value="${mah}"> <label>${mah}</label>`;
                    container.appendChild(div);
                });
            } else {
                container.innerHTML = 'Mahalle bulunamadı.';
            }
        });
    });

    // ARAMA İŞLEMİ
    function performSearch() {
        // Değerleri topla ve yönlendir
        const params = new URLSearchParams();
        params.append('islem', document.getElementById('islemSelect').value);
        // ... diğer alanları ekle
        
        // Mahalleleri topla
        let selectedMh = [];
        document.querySelectorAll('.mh-check:checked').forEach(cb => selectedMh.push(cb.value));
        if(selectedMh.length) params.append('mahalleler', selectedMh.join(','));

        window.location.href = '/ilanlar/?' + params.toString();
    }
</script>