<div class="d-flex justify-content-between align-items-center tw-mb-10 flex-wrap tw-gap-4">
    <div>
        <h3 class="tw-font-black tw-text-2xl tw-text-gray-900 tw-mb-1 tw-tracking-tight">Yeni İlan Oluştur</h3>
        <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0">Portföyünüze yeni ve ilgi çekici bir gayrimenkul ekleyin.</p>
    </div>
    <a href="<?php echo BASE_URL; ?>/admin/properties" class="btn tw-bg-white tw-border tw-border-gray-200 tw-text-gray-600 tw-rounded-xl tw-px-5 tw-py-2.5 tw-font-bold tw-text-sm hover:tw-bg-gray-50 tw-transition-all d-flex align-items-center shadow-sm">
        <i class="fa-solid fa-arrow-left tw-mr-2"></i> Vazgeç ve Dön
    </a>
</div>

<form action="<?php echo BASE_URL; ?>/admin/property_save" method="POST" enctype="multipart/form-data">
    
    <div class="row g-5">
        
        <div class="col-lg-8">
            <div class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[2rem] tw-shadow-sm tw-overflow-hidden">
                <div class="tw-p-6 tw-px-8 tw-bg-gray-50/50 tw-border-b tw-border-gray-100">
                    <h6 class="tw-font-black tw-text-sm tw-text-blue-600 tw-mb-0 tw-uppercase tw-tracking-widest">
                        <i class="fa-solid fa-circle-info tw-mr-2"></i>TEMEL BİLGİLER
                    </h6>
                </div>
                <div class="tw-p-8 md:tw-p-10">
                    
                    <div class="tw-mb-8">
                        <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">İlan Başlığı <span class="tw-text-red-500">*</span></label>
                        <input type="text" name="title" class="form-control tw-bg-gray-50 tw-border-0 focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-py-4 tw-rounded-2xl tw-text-lg tw-font-black tw-text-gray-800 shadow-none transition-all" required placeholder="Örn: Boğaz Manzaralı 3+1 Lüks Daire">
                    </div>

                    <div class="row g-4 tw-mb-8">
                        <div class="col-md-4">
                            <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">Fiyat (TL) <span class="tw-text-red-500">*</span></label>
                            <div class="tw-relative">
                                <input type="number" name="price" class="tw-w-full tw-pl-4 tw-pr-12 tw-py-3.5 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-xl focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-text-sm tw-font-black tw-text-emerald-600 shadow-none" required placeholder="0">
                                <span class="tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-pr-4 tw-font-black tw-text-gray-300 tw-text-xs">TL</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">İşlem Tipi</label>
                            <select name="category" class="form-select tw-bg-gray-50 tw-border-0 tw-py-3.5 tw-rounded-xl tw-text-sm tw-font-bold tw-text-gray-700 focus:tw-ring-4 focus:tw-ring-blue-50 cursor-pointer">
                                <option value="sale">Satılık</option>
                                <option value="rent">Kiralık</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">Emlak Tipi</label>
                            <select name="type" class="form-select tw-bg-gray-50 tw-border-0 tw-py-3.5 tw-rounded-xl tw-text-sm tw-font-bold tw-text-gray-700 focus:tw-ring-4 focus:tw-ring-blue-50 cursor-pointer" required>
                                <?php if(!empty($categories)): ?>
                                    <?php foreach($categories as $cat): ?>
                                        <option value="<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></option>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <option value="">Kategori Bulunamadı</option>
                                <?php endif; ?>
                            </select>
                        </div>
                    </div>

                    <div class="tw-mb-8">
                        <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">Konum / Adres <span class="tw-text-red-500">*</span></label>
                        <div class="tw-relative">
                            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-4 tw-text-gray-400">
                                <i class="fa-solid fa-location-dot tw-text-blue-500"></i>
                            </span>
                            <input type="text" name="location" class="tw-w-full tw-pl-11 tw-pr-4 tw-py-3.5 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-xl focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-text-sm tw-font-bold tw-text-gray-800 shadow-none" required placeholder="İlçe, İl (Örn: Kadıköy, İstanbul)">
                        </div>
                    </div>

                    <div class="tw-mb-0">
                        <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">İlan Açıklaması</label>
                        <textarea name="description" rows="10" class="form-control tw-bg-gray-50 tw-border-0 focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-p-6 tw-rounded-2xl tw-text-sm tw-font-medium tw-text-gray-600 shadow-none transition-all" placeholder="Gayrimenkulün tüm detaylarını buraya yazın..."></textarea>
                    </div>

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

        <div class="col-lg-4">
            
            <div class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[2rem] tw-shadow-sm tw-overflow-hidden tw-mb-6">
                <div class="tw-p-6 tw-bg-gray-50/50 tw-border-b tw-border-gray-100">
                    <h6 class="tw-font-black tw-text-sm tw-text-blue-600 tw-mb-0 tw-uppercase tw-tracking-widest">
                        <i class="fa-solid fa-sliders tw-mr-2"></i>ÖZELLİKLER
                    </h6>
                </div>
                <div class="tw-p-8">
                    <div class="row g-4">
                        <div class="col-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block">Oda Sayısı</label>
                            <select name="features[oda]" class="form-select tw-bg-gray-50 tw-border-0 tw-py-2.5 tw-rounded-lg tw-text-xs tw-font-bold">
                                <option value="1+0">1+0</option>
                                <option value="1+1">1+1</option>
                                <option value="2+1" selected>2+1</option>
                                <option value="3+1">3+1</option>
                                <option value="4+1">4+1</option>
                                <option value="Villa">Villa</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block">Banyo</label>
                            <input type="number" name="features[banyo]" class="form-control tw-bg-gray-50 tw-border-0 tw-py-2.5 tw-rounded-lg tw-text-xs tw-font-bold" value="1">
                        </div>
                        <div class="col-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block">Net m²</label>
                            <input type="number" name="features[m2]" class="form-control tw-bg-gray-50 tw-border-0 tw-py-2.5 tw-rounded-lg tw-text-xs tw-font-bold" placeholder="100">
                        </div>
                        <div class="col-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block">Bina Yaşı</label>
                            <input type="number" name="features[yas]" class="form-control tw-bg-gray-50 tw-border-0 tw-py-2.5 tw-rounded-lg tw-text-xs tw-font-bold" placeholder="0">
                        </div>
                    </div>
                </div>
            </div>

            <div class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[2rem] tw-shadow-sm tw-overflow-hidden">
                <div class="tw-p-6 tw-bg-gray-50/50 tw-border-b tw-border-gray-100">
                    <h6 class="tw-font-black tw-text-sm tw-text-blue-600 tw-mb-0 tw-uppercase tw-tracking-widest">
                        <i class="fa-regular fa-images tw-mr-2"></i>GALERİ
                    </h6>
                </div>
                <div class="tw-p-8">
                    <div id="uploadBox" onclick="document.getElementById('imageInput').click()" class="tw-border-2 tw-border-dashed tw-border-gray-200 tw-bg-gray-50 tw-rounded-2xl tw-p-8 tw-text-center hover:tw-border-blue-400 hover:tw-bg-blue-50/30 tw-transition-all tw-cursor-pointer tw-relative group">
                        <input type="file" name="images[]" id="imageInput" multiple class="tw-hidden" accept="image/*" required>
                        <div class="tw-text-gray-400 group-hover:tw-scale-110 tw-transition-transform">
                            <i class="fa-solid fa-cloud-arrow-up tw-text-4xl tw-mb-3 tw-text-blue-500"></i>
                            <p class="tw-font-black tw-text-xs tw-text-gray-600 tw-uppercase tw-tracking-widest">Resimleri Seçin</p>
                            <p class="tw-text-[9px] tw-font-bold tw-mt-1">İlk resim kapak olacaktır.</p>
                        </div>
                    </div>

                    <div id="previewArea" class="tw-grid tw-grid-cols-3 tw-gap-2 tw-mt-6"></div>
                </div>
            </div>

        </div>

        <div class="col-12 tw-sticky tw-bottom-6 tw-z-50 tw-mt-8">
            <div class="tw-bg-white/80 tw-backdrop-blur-xl tw-p-5 tw-px-8 tw-rounded-[1.5rem] tw-shadow-2xl tw-border tw-border-white tw-flex justify-content-between align-items-center">
                <div class="tw-flex tw-items-center tw-text-gray-500 tw-font-bold tw-text-xs tw-uppercase tw-tracking-widest d-none d-md-flex">
                    <i class="fa-regular fa-clock tw-mr-2 tw-text-blue-500"></i> İlan anında yayına alınacaktır.
                </div>
                <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-px-12 tw-py-3.5 tw-rounded-xl tw-font-black tw-text-sm tw-tracking-widest tw-shadow-xl tw-shadow-blue-500/30 tw-transition-all hover:tw--translate-y-1">
                    <i class="fa-solid fa-check tw-mr-2"></i> İLANI YAYINLA
                </button>
            </div>
        </div>

    </div>
</form>

<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
    const previewArea = document.getElementById('previewArea');
    previewArea.innerHTML = ''; 
    const files = event.target.files;
    
    if (files.length > 0) {
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            if (!file.type.match('image.*')) continue;

            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'tw-relative tw-aspect-square tw-rounded-xl tw-overflow-hidden tw-border tw-border-gray-100 tw-shadow-sm tw-group';
                const badge = i === 0 ? '<span class="tw-absolute tw-top-1 tw-left-1 tw-bg-blue-600 tw-text-white tw-text-[8px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-black tw-uppercase tw-z-10">Kapak</span>' : '';
                
                div.innerHTML = `
                    <img src="${e.target.result}" class="tw-w-full tw-h-full tw-object-cover tw-transition tw-duration-500 group-hover:tw-scale-110">
                    ${badge}
                    <div class="tw-absolute tw-inset-0 tw-bg-blue-900/20 tw-opacity-0 group-hover:tw-opacity-100 tw-transition"></div>
                `;
                previewArea.appendChild(div);
            }
            reader.readAsDataURL(file);
        }
    }
});
</script>