<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">Projeyi Düzenle</h3>
        <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0 d-flex align-items-center">
            <span class="tw-bg-blue-600 tw-text-white tw-px-2 tw-py-0.5 tw-rounded tw-text-[10px] tw-font-black tw-uppercase tw-mr-2">ID: #<?php echo $project->id; ?></span>
            <span class="tw-truncate tw-max-w-[300px]"><?php echo htmlspecialchars($project->title); ?></span>
        </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_edit_save/<?php echo $project->id; ?>" 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-pen-to-square tw-mr-2"></i>İÇERİK 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">Proje Adı</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" value="<?php echo htmlspecialchars($project->title); ?>" required>
                    </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">Proje Açıklaması</label>
                        <textarea name="description" rows="12" 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"><?php echo htmlspecialchars($project->description); ?></textarea>
                    </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</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" value="<?php echo htmlspecialchars($project->location); ?>" required>
                            </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">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-check tw-text-emerald-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" value="<?php echo htmlspecialchars($project->delivery_date); ?>">
                            </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>YAPILANDIRMA
                    </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">
                            <?php 
                                $types = ['Konut', 'Villa', 'Rezidans', 'Ofis', 'Karma', 'Arsa'];
                                foreach($types as $t) {
                                    $selected = ($project->type == $t) ? 'selected' : '';
                                    echo "<option value='$t' $selected>$t</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" <?php echo ($project->status == 'active') ? 'selected' : ''; ?>>🟢 Satışta / Devam Ediyor</option>
                            <option value="completed" <?php echo ($project->status == 'completed') ? 'selected' : ''; ?>>🔵 Tamamlandı</option>
                            <option value="planned" <?php echo ($project->status == 'planned') ? 'selected' : ''; ?>>🟡 Planlanıyor</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>KAPAK GÖRSELİ
                    </h6>
                </div>
                <div class="tw-p-8 text-center">
                    
                    <div class="tw-relative tw-aspect-video tw-rounded-2xl tw-overflow-hidden tw-border tw-border-gray-100 tw-mb-4 tw-group tw-bg-gray-50">
                        <img id="previewImage" 
                             src="<?php echo !empty($project->image) ? BASE_URL . '/' . $project->image : 'https://placehold.co/600x400?text=Gorsel+Yok'; ?>" 
                             class="tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-500 group-hover:tw-scale-110">
                        
                        <div class="tw-absolute tw-inset-0 tw-bg-[#0f172a]/60 tw-flex tw-items-center tw-justify-center tw-opacity-0 group-hover:tw-opacity-100 tw-transition-all tw-backdrop-blur-sm cursor-pointer" onclick="document.getElementById('imageInput').click()">
                            <span class="tw-text-white tw-font-black tw-text-xs tw-uppercase tw-tracking-widest tw-border-2 tw-border-white/50 tw-px-6 tw-py-2.5 tw-rounded-xl hover:tw-bg-white hover:tw-text-blue-900 tw-transition-all">
                                <i class="fa-solid fa-camera tw-mr-2"></i> Değiştir
                            </span>
                        </div>
                    </div>

                    <input type="file" name="image" id="imageInput" class="tw-hidden" accept="image/*" onchange="previewFile()">
                    
                    <div class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider">Değiştirmek için görselin üzerine tıklayın</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">
                    <div class="tw-w-2 tw-h-2 tw-bg-blue-600 tw-rounded-full tw-mr-2 tw-animate-pulse"></div>
                    Şu an düzenleme modundasınız
                </div>
                <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-px-10 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-floppy-disk tw-mr-2"></i> DEĞİŞİKLİKLERİ KAYDET
                </button>
            </div>
        </div>

    </div>
</form>

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

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    }
</script>