<?php require_once __DIR__ . '/../layouts/header.php'; ?>

<section class="tw-relative tw-h-[30vh] tw-min-h-[300px] d-flex align-items-center justify-content-center tw-mt-[-80px] tw-pt-[80px] tw-overflow-hidden">
    <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-r tw-from-[#0f172a] tw-via-[#1e293b] tw-to-blue-900 tw-z-0"></div>
    <div class="tw-absolute tw-inset-0 tw-opacity-10 tw-bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] tw-z-0"></div>

    <div class="container tw-relative tw-z-10 text-center text-white">
        <span class="tw-inline-block tw-bg-blue-500/20 tw-border tw-border-blue-400/30 tw-backdrop-blur-md tw-px-5 tw-py-1.5 tw-rounded-full tw-text-xs tw-font-black tw-uppercase tw-tracking-widest tw-mb-4">
            DETAYLI ANALİZ
        </span>
        <h1 class="tw-text-3xl md:tw-text-5xl tw-font-black tw-mb-3 tw-tracking-tight tw-drop-shadow-lg">
            İlan Karşılaştırma
        </h1>
        <p class="tw-text-blue-100 tw-text-base md:tw-text-lg tw-font-medium tw-max-w-xl tw-mx-auto tw-opacity-90">
            Seçtiğiniz gayrimenkulleri yan yana koyarak sizin için en doğru kararı verin.
        </p>
    </div>
</section>

<section class="tw-py-16 tw-bg-[#f8fafc] tw-min-h-[50vh]">
    <div class="container">
        
        <div class="d-flex justify-content-between align-items-end tw-mb-8">
            <div>
                <h2 class="tw-text-2xl tw-font-black tw-text-gray-900 tw-mb-1">Karşılaştırma Listesi</h2>
                <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0">
                    Toplam <span class="tw-text-blue-600 tw-font-bold"><?php echo count($compares ?? []); ?></span> ilan karşılaştırılıyor.
                </p>
            </div>
            <?php if (!empty($compares)): ?>
                <a href="<?php echo BASE_URL; ?>/compare/clear" class="btn tw-bg-red-50 hover:tw-bg-red-500 tw-text-red-600 hover:tw-text-white tw-rounded-xl tw-font-bold tw-text-sm tw-px-5 tw-py-2.5 tw-transition-colors d-flex align-items-center">
                    <i class="fa-solid fa-trash-can tw-mr-2"></i> Listeyi Temizle
                </a>
            <?php endif; ?>
        </div>

        <?php if (empty($compares)): ?>
            <div class="text-center tw-py-20">
                <div class="tw-bg-white tw-rounded-[2rem] tw-p-12 tw-shadow-sm tw-border tw-border-gray-100 tw-max-w-2xl tw-mx-auto">
                    <div class="tw-w-24 tw-h-24 tw-bg-blue-50 tw-rounded-full d-flex align-items-center justify-content-center tw-mx-auto tw-mb-6">
                        <i class="fa-solid fa-scale-balanced tw-text-5xl tw-text-blue-500"></i>
                    </div>
                    <h3 class="tw-text-gray-900 tw-font-black tw-text-2xl tw-mb-2">Karşılaştırma listesi boş</h3>
                    <p class="tw-text-gray-500 tw-text-lg tw-mb-6">İlanları incelerken "Karşılaştır" butonuna tıklayarak listeye ekleyebilirsiniz.</p>
                    <a href="<?php echo BASE_URL; ?>/properties" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded-xl tw-font-bold tw-px-8 tw-py-3 tw-shadow-lg tw-shadow-blue-500/30 tw-transition-all hover:tw--translate-y-1">
                        Hemen İlanları İncele
                    </a>
                </div>
            </div>
        <?php else: ?>
            <div class="tw-bg-white tw-rounded-[2rem] tw-shadow-xl tw-shadow-slate-200/50 tw-border tw-border-gray-100 tw-overflow-hidden">
                <div class="table-responsive tw-p-4 md:tw-p-6">
                    <table class="table tw-min-w-[800px] tw-mb-0 align-middle">
                        <thead>
                            <tr class="tw-border-b-2 tw-border-gray-100">
                                <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-pb-4 tw-px-4">İlan Görseli & Başlık</th>
                                <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-pb-4 tw-px-4">Fiyat</th>
                                <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-pb-4 tw-px-4 text-center">Özellikler</th>
                                <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-pb-4 tw-px-4">Durum / Tip</th>
                                <th class="tw-bg-transparent tw-pb-4 tw-px-4 text-end">İşlem</th>
                            </tr>
                        </thead>
                        <tbody class="tw-divide-y tw-divide-gray-50">
                            <?php foreach ($compares as $prop): ?>
                                <?php 
                                    $feats = json_decode($prop->features ?? '{}'); 
                                    $imgUrl = !empty($prop->image) ? BASE_URL . '/' . $prop->image : 'https://placehold.co/300x200?text=Yok';
                                    $isSale = ($prop->category == 'sale');
                                ?>
                                <tr class="hover:tw-bg-gray-50/50 tw-transition-colors">
                                    
                                    <td class="tw-p-4">
                                        <div class="d-flex align-items-center tw-gap-4">
                                            <div class="tw-w-24 tw-h-16 tw-rounded-xl tw-overflow-hidden tw-flex-shrink-0 tw-shadow-sm">
                                                <img src="<?php echo $imgUrl; ?>" class="tw-w-full tw-h-full tw-object-cover" alt="İlan">
                                            </div>
                                            <div>
                                                <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $prop->slug; ?>" class="tw-text-gray-900 tw-font-bold hover:tw-text-blue-600 text-decoration-none tw-text-base tw-line-clamp-2 tw-mb-1 tw-transition-colors">
                                                    <?php echo htmlspecialchars($prop->title); ?>
                                                </a>
                                                <div class="tw-text-gray-500 tw-text-xs tw-font-medium d-flex align-items-center">
                                                    <i class="fa-solid fa-location-dot tw-text-gray-400 tw-mr-1.5"></i>
                                                    <?php echo htmlspecialchars($prop->location); ?>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    
                                    <td class="tw-p-4">
                                        <span class="tw-text-lg tw-font-black tw-text-blue-600">
                                            ₺<?php echo number_format($prop->price ?? 0, 0, ',', '.'); ?>
                                        </span>
                                    </td>
                                    
                                    <td class="tw-p-4 text-center">
                                        <div class="tw-inline-flex tw-items-center tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-lg tw-p-1 tw-gap-1">
                                            <div class="tw-flex tw-items-center tw-px-2 tw-py-1 tw-bg-white tw-rounded tw-shadow-sm" title="Oda Sayısı">
                                                <i class="fa-solid fa-bed tw-text-blue-500 tw-text-xs tw-mr-1.5"></i>
                                                <span class="tw-text-xs tw-font-bold tw-text-gray-700"><?php echo $feats->oda ?? '-'; ?></span>
                                            </div>
                                            <div class="tw-flex tw-items-center tw-px-2 tw-py-1 tw-bg-white tw-rounded tw-shadow-sm" title="Banyo">
                                                <i class="fa-solid fa-bath tw-text-blue-500 tw-text-xs tw-mr-1.5"></i>
                                                <span class="tw-text-xs tw-font-bold tw-text-gray-700"><?php echo $feats->banyo ?? '-'; ?></span>
                                            </div>
                                            <div class="tw-flex tw-items-center tw-px-2 tw-py-1 tw-bg-white tw-rounded tw-shadow-sm" title="Metrekare">
                                                <i class="fa-solid fa-ruler-combined tw-text-blue-500 tw-text-xs tw-mr-1.5"></i>
                                                <span class="tw-text-xs tw-font-bold tw-text-gray-700"><?php echo $feats->m2 ?? '-'; ?> m²</span>
                                            </div>
                                        </div>
                                    </td>
                                    
                                    <td class="tw-p-4">
                                        <div class="tw-flex tw-flex-col tw-items-start tw-gap-1.5">
                                            <span class="<?php echo $isSale ? 'tw-bg-red-100 tw-text-red-700' : 'tw-bg-blue-100 tw-text-blue-700'; ?> tw-px-2.5 tw-py-1 tw-rounded-md tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest">
                                                <?php echo $isSale ? 'Satılık' : 'Kiralık'; ?>
                                            </span>
                                            <span class="tw-bg-gray-100 tw-text-gray-600 tw-px-2.5 tw-py-1 tw-rounded-md tw-text-[10px] tw-font-bold tw-uppercase tw-tracking-widest">
                                                <?php echo htmlspecialchars($prop->type ?? '-'); ?>
                                            </span>
                                        </div>
                                    </td>
                                    
                                    <td class="tw-p-4 text-end">
                                        <a href="<?php echo BASE_URL; ?>/compare/toggle/<?php echo $prop->id; ?>" class="btn tw-bg-white hover:tw-bg-red-50 tw-border tw-border-gray-200 hover:tw-border-red-200 tw-text-gray-400 hover:tw-text-red-500 tw-rounded-xl tw-p-2.5 tw-transition-colors" title="Listeden Çıkar">
                                            <i class="fa-solid fa-xmark tw-text-lg"></i>
                                        </a>
                                    </td>
                                    
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endif; ?>
        
    </div>
</section>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>