<?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-red-500/20 tw-border tw-border-red-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">
            SİZİN İÇİN SEÇTİKLERİNİZ
        </span>
        <h1 class="tw-text-3xl md:tw-text-5xl tw-font-black tw-mb-3 tw-tracking-tight tw-drop-shadow-lg">
            Favori İlanlarım
        </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">
            Beğendiğiniz ve takip etmek istediğiniz gayrimenkulleri buradan kolayca yönetin.
        </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">Kaydedilen İlanlar</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($favorites ?? []); ?></span> favori ilanınız bulunuyor.
                </p>
            </div>
            <?php if (!empty($favorites)): ?>
                <a href="<?php echo BASE_URL; ?>/favorites/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> Tümünü Temizle
                </a>
            <?php endif; ?>
        </div>

        <?php if (empty($favorites)): ?>
            <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-red-50 tw-rounded-full d-flex align-items-center justify-content-center tw-mx-auto tw-mb-6">
                        <i class="fa-solid fa-heart-crack tw-text-5xl tw-text-red-400"></i>
                    </div>
                    <h3 class="tw-text-gray-900 tw-font-black tw-text-2xl tw-mb-2">Favori ilanınız bulunmuyor</h3>
                    <p class="tw-text-gray-500 tw-text-lg tw-mb-6">İlanları incelerken kalp ikonuna tıklayarak favorilerinize 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="row g-4 md:g-5">
                <?php foreach ($favorites as $prop): 
                    $isSale = ($prop->category == 'sale');
                    $catColor = $isSale ? 'tw-bg-red-500' : 'tw-bg-blue-600';
                    $catText  = $isSale ? 'SATILIK' : 'KİRALIK';
                    $imagePath = !empty($prop->image) ? BASE_URL . '/' . $prop->image : 'https://placehold.co/600x400?text=Gorsel+Yok';
                ?>
                    <div class="col-md-6 col-lg-4">
                        <div class="card property-card h-100 tw-bg-white border-0 tw-rounded-[1.5rem] tw-shadow-sm hover:tw-shadow-2xl tw-transition-all tw-duration-300 hover:tw--translate-y-2 tw-overflow-hidden tw-group">
                            
                            <div class="position-relative img-wrapper tw-h-64 tw-overflow-hidden tw-p-2 tw-pb-0">
                                <div class="tw-relative tw-w-full tw-h-full tw-rounded-[1rem] tw-overflow-hidden">
                                    <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $prop->slug; ?>" class="tw-block tw-h-full tw-w-full">
                                        <img src="<?php echo $imagePath; ?>" class="tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-700 group-hover:tw-scale-110" alt="<?php echo htmlspecialchars($prop->title); ?>">
                                        <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-gray-900/80 tw-via-transparent tw-to-transparent"></div>
                                    </a>
                                    
                                    <span class="tw-absolute tw-top-3 tw-left-3 tw-z-10 <?php echo $catColor; ?> tw-text-white tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest tw-px-3 tw-py-1.5 tw-rounded-lg tw-shadow-lg">
                                        <?php echo $catText; ?>
                                    </span>

                                    <span class="tw-absolute tw-top-3 tw-right-3 tw-z-10 tw-bg-white/90 backdrop-blur-sm tw-text-red-500 tw-w-8 tw-h-8 d-flex align-items-center justify-content-center tw-rounded-full tw-shadow-sm">
                                        <i class="fa-solid fa-heart"></i>
                                    </span>
                                    
                                    <div class="tw-absolute tw-bottom-3 tw-left-4 tw-z-10">
                                        <h4 class="tw-text-white tw-font-black tw-mb-0 tw-text-2xl tw-drop-shadow-md">
                                            <?php echo number_format($prop->price ?? 0, 0, ',', '.'); ?> ₺
                                        </h4>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body tw-p-5 d-flex flex-column">
                                <h5 class="card-title tw-font-extrabold tw-text-lg tw-mb-2 tw-leading-snug tw-line-clamp-2 tw-flex-grow-1">
                                    <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $prop->slug; ?>" class="text-decoration-none text-dark hover:tw-text-blue-600 tw-transition-colors">
                                        <?php echo htmlspecialchars($prop->title); ?>
                                    </a>
                                </h5>
                                
                                <div class="tw-flex tw-items-center tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-4">
                                    <i class="fa-solid fa-location-dot tw-mr-2 tw-text-gray-400"></i>
                                    <?php echo htmlspecialchars($prop->location); ?>
                                </div>

                                <div class="d-flex justify-content-between align-items-center tw-pt-4 tw-border-t tw-border-gray-100 tw-mt-auto">
                                    <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $prop->slug; ?>" class="tw-text-sm tw-font-bold tw-text-blue-600 hover:tw-text-blue-800 text-decoration-none tw-flex tw-items-center tw-transition-colors">
                                        İncele <i class="fa-solid fa-arrow-right tw-ml-1.5"></i>
                                    </a>
                                    <a href="<?php echo BASE_URL; ?>/favorites/toggle/<?php echo $prop->id; ?>" class="tw-bg-red-50 hover:tw-bg-red-100 tw-text-red-500 tw-w-8 tw-h-8 tw-rounded-lg d-flex align-items-center justify-content-center tw-transition-colors" title="Favorilerden Kaldır">
                                        <i class="fa-solid fa-trash-can tw-text-sm"></i>
                                    </a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        
    </div>
</section>

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