<div class="d-flex justify-content-between align-items-center tw-mb-8 flex-wrap tw-gap-4">
    <div>
        <h3 class="tw-font-black tw-text-2xl tw-text-gray-900 tw-mb-1 tw-tracking-tight">Proje Yönetimi</h3>
        <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0">Tüm inşaat ve konut projelerinizi tek merkezden kontrol edin.</p>
    </div>
    <div>
        <a href="<?php echo BASE_URL; ?>/admin/project_add" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded-xl tw-font-bold tw-shadow-lg tw-shadow-blue-500/30 tw-transition-all hover:tw--translate-y-0.5 tw-px-6 tw-py-2.5 d-flex align-items-center">
            <i class="fa-solid fa-plus tw-mr-2"></i> Yeni Proje Ekle
        </a>
    </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-px-8 tw-border-b tw-border-gray-50 d-flex flex-wrap justify-content-between align-items-center tw-gap-4">
        <div class="d-flex align-items-center">
            <div class="tw-w-10 tw-h-10 tw-bg-blue-50 tw-text-blue-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-mr-4">
                <i class="fa-solid fa-city"></i>
            </div>
            <div>
                <h6 class="tw-font-black tw-text-lg tw-text-gray-800 mb-0">Aktif Projeler</h6>
                <p class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-0">Toplam <?php echo count($projects); ?> Kayıt</p>
            </div>
        </div>
        
        <div class="tw-relative tw-w-full md:tw-w-72">
            <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-magnifying-glass tw-text-sm"></i>
            </span>
            <input type="text" class="form-control tw-bg-gray-50 tw-border-0 tw-pl-11 tw-py-2.5 tw-rounded-xl tw-text-sm tw-font-medium focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 tw-transition-all" placeholder="Proje adıyla ara...">
        </div>
    </div>

    <div class="table-responsive">
        <table class="table align-middle tw-mb-0 tw-border-transparent">
            <thead>
                <tr>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-pl-8 tw-border-b-2 tw-border-gray-50">Proje Künyesi</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50">Konum</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50">Kategori</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50 text-center">Durum</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-pr-8 tw-border-b-2 tw-border-gray-50 text-end">İşlemler</th>
                </tr>
            </thead>
            <tbody class="tw-divide-y tw-divide-gray-50">
                <?php if (!empty($projects)): ?>
                    <?php foreach ($projects as $project): ?>
                        <tr class="hover:tw-bg-gray-50/50 tw-transition-colors">
                            <td class="tw-pl-8 tw-py-4">
                                <div class="d-flex align-items-center">
                                    <div class="tw-w-16 tw-h-12 tw-rounded-xl tw-overflow-hidden tw-flex-shrink-0 tw-mr-4 tw-shadow-sm tw-border tw-border-gray-100">
                                        <img src="<?php echo !empty($project->image) ? BASE_URL . '/' . $project->image : 'https://placehold.co/100?text=Yok'; ?>" 
                                             class="tw-w-full tw-h-full tw-object-cover" 
                                             alt="Proje Resmi">
                                    </div>
                                    <div class="tw-overflow-hidden">
                                        <div class="tw-font-black tw-text-gray-900 tw-text-base tw-mb-0.5 tw-truncate" style="max-width: 220px;"><?php echo htmlspecialchars($project->title); ?></div>
                                        <div class="tw-text-[11px] tw-font-bold tw-text-blue-500 tw-uppercase tw-tracking-widest">ID: #<?php echo $project->id; ?></div>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <div class="tw-text-gray-600 tw-text-sm tw-font-bold d-flex align-items-center">
                                    <i class="fa-solid fa-location-dot tw-text-blue-500 tw-mr-2 tw-opacity-50"></i> 
                                    <?php echo htmlspecialchars($project->location); ?>
                                </div>
                            </td>

                            <td>
                                <span class="tw-bg-gray-100 tw-text-gray-600 tw-px-3 tw-py-1.5 tw-rounded-lg tw-text-[11px] tw-font-black tw-uppercase tw-tracking-wider">
                                    <?php echo htmlspecialchars($project->type); ?>
                                </span>
                            </td>

                            <td class="text-center">
                                <?php 
                                    $statusData = match($project->status) {
                                        'active', 'devam-ediyor' => ['bg' => 'tw-bg-orange-50', 'text' => 'tw-text-orange-600', 'label' => 'DEVAM EDİYOR'],
                                        'completed', 'tamamlandi' => ['bg' => 'tw-bg-emerald-50', 'text' => 'tw-text-emerald-600', 'label' => 'TAMAMLANDI'],
                                        'planned', 'planlanan' => ['bg' => 'tw-bg-slate-50', 'text' => 'tw-text-slate-600', 'label' => 'PLANLANIYOR'],
                                        default => ['bg' => 'tw-bg-blue-50', 'text' => 'tw-text-blue-600', 'label' => 'SATIŞTA']
                                    };
                                ?>
                                <span class="<?php echo $statusData['bg']; ?> <?php echo $statusData['text']; ?> tw-px-4 tw-py-1.5 tw-rounded-full tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest tw-border tw-border-current tw-border-opacity-10">
                                    <?php echo $statusData['label']; ?>
                                </span>
                            </td>

                            <td class="text-end tw-pr-8">
                                <div class="d-flex justify-content-end tw-gap-2">
                                    <a href="<?php echo BASE_URL; ?>/projects/detail?slug=<?php echo $project->slug; ?>" target="_blank" class="tw-w-9 tw-h-9 tw-bg-gray-50 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-transition-all" title="Sitede Gör">
                                        <i class="fa-solid fa-eye tw-text-sm"></i>
                                    </a>
                                    <a href="<?php echo BASE_URL; ?>/admin/project_edit/<?php echo $project->id; ?>" class="tw-w-9 tw-h-9 tw-bg-gray-50 tw-text-gray-400 hover:tw-bg-orange-50 hover:tw-text-orange-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-transition-all" title="Düzenle">
                                        <i class="fa-solid fa-pen-to-square tw-text-sm"></i>
                                    </a>
                                    <a href="<?php echo BASE_URL; ?>/admin/project_delete/<?php echo $project->id; ?>" onclick="return confirm('Bu projeyi silmek istediğinize emin misiniz?')" class="tw-w-9 tw-h-9 tw-bg-gray-50 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-transition-all" title="Sil">
                                        <i class="fa-solid fa-trash-can tw-text-sm"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5" class="text-center tw-py-24">
                            <div class="tw-w-20 tw-h-20 tw-bg-gray-50 tw-rounded-full d-flex align-items-center justify-content-center tw-mx-auto tw-mb-4">
                                <i class="fa-solid fa-layer-group tw-text-3xl tw-text-gray-300"></i>
                            </div>
                            <h6 class="tw-font-black tw-text-gray-800 tw-text-lg">Henüz proje eklenmemiş.</h6>
                            <p class="tw-text-gray-400 tw-font-medium tw-text-sm">Yeni bir gayrimenkul projesi ekleyerek portföyünüzü genişletin.</p>
                            <a href="<?php echo BASE_URL; ?>/admin/project_add" class="btn tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-600 hover:tw-text-white tw-rounded-xl tw-font-bold tw-px-6 tw-py-2.5 tw-mt-4 tw-transition-all">
                                İlk Projeyi Ekle
                            </a>
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
    
    <div class="tw-p-6 tw-px-8 tw-bg-gray-50/50 tw-border-t tw-border-gray-100">
        <p class="tw-text-[11px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-0">
            Sistemde kayıtlı toplam <span class="tw-text-gray-900"><?php echo count($projects); ?></span> proje listeleniyor.
        </p>
    </div>
</div>

<script>
    // Arama fonksiyonu için basit bir filtreleyici
    document.querySelector('input[placeholder="Proje adıyla ara..."]').addEventListener('keyup', function(e) {
        let value = e.target.value.toLowerCase();
        let rows = document.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            let title = row.querySelector('.tw-font-black').innerText.toLowerCase();
            if (title.indexOf(value) > -1) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    });
</script>