<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 Proje Oluştur</h3>
        <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0">Portföyünüze yeni ve prestijli bir gayrimenkul projesi ekleyin.</p>
    </div>
    <a href="<?php echo BASE_URL; ?>/admin/projects" 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/project_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>PROJE DETAYLARI
                    </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">Proje 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: Vadi İstanbul Konutları">
                    </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">Açıklama Metni</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-5 tw-rounded-2xl tw-text-sm tw-font-medium tw-text-gray-600 shadow-none transition-all" placeholder="Projenin konumu, avantajları, sosyal olanakları vb. detaylı bilgi..."></textarea>
                        <div class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-mt-2 tw-px-1"><i class="fa-solid fa-lightbulb tw-mr-1 tw-text-blue-400"></i> MÜŞTERİLERİNİZİ ETKİLEMEK İÇİN DETAYLI BİR AÇIKLAMA YAZIN.</div>
                    </div>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <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 / Lokasyon <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, Şehir (Örn: Sarıyer, İstanbul)">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <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">Tahmini Teslim Tarihi</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-regular fa-calendar tw-text-blue-500"></i>
                                </span>
                                <input type="text" name="delivery_date" 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" placeholder="Örn: Aralık 2025">
                            </div>
                        </div>
                    </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>STATÜ
                    </h6>
                </div>
                <div class="tw-p-8">
                    <div class="tw-mb-5">
                        <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">Proje 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">
                            <option value="Konut">Konut / Daire</option>
                            <option value="Villa">Villa / Müstakil</option>
                            <option value="Rezidans">Rezidans</option>
                            <option value="Ofis">Ofis / Plaza</option>
                            <option value="Karma">Karma Proje</option>
                        </select>
                    </div>

                    <div>
                        <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">Proje Durumu</label>
                        <select name="status" 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="active">🟢 Satışta / Devam Ediyor</option>
                            <option value="planned">🟡 Planlanıyor / Lansman</option>
                            <option value="completed">🔵 Tamamlandı / Yaşam Başladı</option>
                        </select>
                    </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-image tw-mr-2"></i>VİTRİN GÖRSELİ
                    </h6>
                </div>
                <div class="tw-p-8 text-center">
                    
                    <div id="uploadContainer" onclick="document.getElementById('imageInput').click()" class="tw-bg-gray-50 tw-rounded-2xl tw-border-2 tw-border-dashed tw-border-gray-200 tw-h-56 tw-flex tw-items-center tw-justify-center tw-mb-4 tw-overflow-hidden tw-relative tw-group tw-cursor-pointer hover:tw-border-blue-300 hover:tw-bg-blue-50/30 tw-transition-all">
                        <img id="previewImage" src="#" class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-object-cover tw-hidden">
                        <div id="uploadPlaceholder" class="tw-text-center tw-transition-all group-hover:tw-scale-110">
                            <div class="tw-w-16 tw-h-16 tw-bg-white tw-rounded-full tw-shadow-sm d-flex align-items-center justify-content-center tw-mx-auto tw-mb-3">
                                <i class="fa-solid fa-cloud-arrow-up tw-text-2xl tw-text-blue-500"></i>
                            </div>
                            <p class="tw-text-[11px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest">Görsel Seç</p>
                        </div>
                    </div>

                    <input type="file" name="image" id="imageInput" class="tw-hidden" accept="image/*" required onchange="previewFile()">
                    <div class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider">Önerilen: 1200x800px (JPG/PNG)</div>

                </div>
            </div>

        </div>

        <div class="col-12 tw-mt-8">
            <div class="tw-bg-white tw-p-6 tw-rounded-[1.5rem] tw-border tw-border-gray-100 d-flex justify-content-end align-items-center tw-gap-4">
                <span class="tw-text-xs tw-font-bold tw-text-gray-400 d-none d-md-block">Lütfen tüm zorunlu alanları (*) doldurduğunuzdan emin olun.</span>
                <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-px-12 tw-py-4 tw-rounded-xl tw-font-black tw-text-sm tw-tracking-widest tw-shadow-xl tw-shadow-blue-500/25 tw-transition-all hover:tw--translate-y-1">
                    <i class="fa-solid fa-check tw-mr-2"></i> PROJEYİ KAYDET
                </button>
            </div>
        </div>

    </div>
</form>

<script>
    function previewFile() {
        const preview = document.getElementById('previewImage');
        const file = document.getElementById('imageInput').files[0];
        const placeholder = document.getElementById('uploadPlaceholder');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove('tw-hidden');
                placeholder.classList.add('tw-hidden');
            }
            reader.readAsDataURL(file);
        } else {
            preview.src = "#";
            preview.classList.add('tw-hidden');
            placeholder.classList.remove('tw-hidden');
        }
    }
</script>