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

// --- 1. DANIŞMAN VE VERİ HAZIRLIĞI ---
$agentName  = !empty($ilan->agent_name) ? $ilan->agent_name : ($globalSettings->site_title ?? 'Müşteri Temsilcisi');
$agentPhone = !empty($ilan->agent_phone) ? $ilan->agent_phone : ($globalSettings->phone ?? '');
$agentEmail = !empty($ilan->agent_email) ? $ilan->agent_email : ($globalSettings->email ?? '');
$agentImg   = !empty($ilan->agent_image) ? BASE_URL . '/' . $ilan->agent_image : 'https://ui-avatars.com/api/?name=' . urlencode($agentName) . '&background=2563eb&color=fff&size=128';

$cleanPhone = preg_replace('/[^0-9]/', '', $agentPhone);
$waPhone = (substr($cleanPhone, 0, 1) == '0') ? '9'.$cleanPhone : $cleanPhone;

$categoryText = ($ilan->category ?? '') === 'rent' ? 'Kiralık' : 'Satılık';
$categoryClass = ($ilan->category ?? '') === 'rent' ? 'tw-bg-blue-500' : 'tw-bg-red-500';

$feats = json_decode($ilan->features ?? '{}');
$cover = !empty($ilan->image) ? BASE_URL . '/' . $ilan->image : 'https://placehold.co/1920x800?text=Gorsel+Yok';
$gallery = $ilan->images ?? [];
$isFavorite = $isFavorite ?? false;
$isCompared = $isCompared ?? false;
$similarProperties = $similarProperties ?? [];
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

<style>
    /* Hero yüksekliği responsive */
    .hero-detail-bg {
        height: auto;
        min-height: 500px;
    }
    @media (min-width: 768px) {
        .hero-detail-bg { height: 65vh; min-height: 600px; }
    }
    /* Harita iframe mobilde taşmaması için */
    .map-container iframe {
        height: 300px;
    }
    @media (min-width: 768px) {
        .map-container iframe { height: 450px; }
    }
</style>

<div class="tw-relative hero-detail-bg tw-mt-[-80px] tw-pt-[80px] tw-overflow-hidden tw-flex tw-flex-col">
    
    <div class="tw-absolute tw-inset-0">
        <img src="<?php echo $cover; ?>" class="tw-w-full tw-h-full tw-object-cover" alt="<?php echo htmlspecialchars($ilan->title); ?>">
        <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-[#0f172a] tw-via-[#0f172a]/50 tw-to-transparent"></div>
    </div>

    <div class="container tw-relative tw-h-full tw-flex-1 d-flex flex-column tw-z-10 tw-py-12 md:tw-py-16">
        
        <div class="tw-mb-auto">
            <a href="<?php echo BASE_URL; ?>/properties" class="tw-inline-flex tw-items-center tw-bg-white/10 hover:tw-bg-white/20 tw-border tw-border-white/20 tw-text-white tw-backdrop-blur-md tw-px-5 tw-py-2.5 tw-rounded-xl tw-text-sm tw-font-bold tw-transition-all tw-no-underline shadow-lg">
                <i class="fa-solid fa-arrow-left tw-mr-2"></i> Tüm İlanlara Dön
            </a>
        </div>

        <div class="tw-mt-8">
            <div class="tw-flex tw-gap-2 tw-mb-4 flex-wrap">
                <span class="<?php echo $categoryClass; ?> tw-text-white tw-px-4 tw-py-1.5 tw-rounded-lg tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest tw-shadow-lg">
                    <?php echo $categoryText; ?>
                </span>
                <span class="tw-bg-blue-600 tw-text-white tw-px-4 tw-py-1.5 tw-rounded-lg tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest tw-shadow-lg">
                    <i class="fa-solid fa-layer-group tw-mr-1.5"></i><?php echo htmlspecialchars(mb_strtoupper($ilan->type ?? 'Emlak', 'UTF-8')); ?>
                </span>
                <a href="<?php echo $cover; ?>" class="glightbox tw-bg-white/10 hover:tw-bg-white/20 tw-border tw-border-white/20 tw-text-white tw-backdrop-blur-md tw-px-4 tw-py-1.5 tw-rounded-lg tw-text-[10px] tw-font-black tw-uppercase tw-tracking-widest tw-no-underline d-md-none" data-gallery="gallery">
                    <i class="fa-solid fa-images tw-mr-1.5"></i> Galeri
                </a>
            </div>

            <h1 class="tw-text-3xl md:tw-text-5xl lg:tw-text-6xl tw-font-black tw-text-white tw-mb-3 tw-tracking-tight tw-drop-shadow-lg tw-leading-tight">
                <?php echo htmlspecialchars($ilan->title); ?>
            </h1>
            
            <div class="tw-text-blue-50 tw-text-base md:tw-text-lg tw-flex align-items-center tw-font-medium tw-mb-4 tw-opacity-90">
                <i class="fa-solid fa-location-dot tw-text-blue-400 tw-mr-2.5 tw-text-xl"></i>
                <?php echo htmlspecialchars($ilan->location); ?>
            </div>
            
            <div class="d-flex flex-wrap align-items-center tw-gap-6">
                <div class="tw-text-white tw-text-3xl md:tw-text-5xl tw-font-black tw-drop-shadow-md">
                    ₺<?php echo number_format($ilan->price ?? 0, 0, ',', '.'); ?>
                </div>

                <div class="tw-flex tw-gap-3">
                    <a href="<?php echo BASE_URL; ?>/favorites/toggle/<?php echo $ilan->id; ?>" class="tw-w-12 tw-h-12 md:tw-w-14 md:tw-h-14 tw-bg-white/10 hover:tw-bg-white/20 tw-border tw-border-white/20 tw-text-white tw-backdrop-blur-md tw-rounded-2xl d-flex align-items-center justify-content-center tw-transition-all shadow-lg" title="Favoriye Ekle">
                        <i class="fa-solid fa-heart tw-text-xl <?php echo $isFavorite ? 'tw-text-red-500' : 'tw-text-white'; ?>"></i>
                    </a>
                    <a href="<?php echo BASE_URL; ?>/compare/toggle/<?php echo $ilan->id; ?>" class="tw-w-12 tw-h-12 md:tw-w-14 md:tw-h-14 tw-bg-white/10 hover:tw-bg-white/20 tw-border tw-border-white/20 tw-text-white tw-backdrop-blur-md tw-rounded-2xl d-flex align-items-center justify-content-center tw-transition-all shadow-lg" title="Karşılaştır">
                        <i class="fa-solid fa-scale-balanced tw-text-xl"></i>
                    </a>
                    <a href="<?php echo $cover; ?>" class="glightbox tw-hidden md:tw-flex tw-bg-white/10 hover:tw-bg-white/20 tw-border tw-border-white/20 tw-text-white tw-backdrop-blur-md tw-px-6 tw-py-3 tw-rounded-2xl tw-font-bold tw-transition-all tw-no-underline align-items-center shadow-lg cursor-pointer" data-gallery="gallery">
                        <i class="fa-solid fa-expand tw-mr-2"></i> Fotoğrafları Büyüt
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="tw-py-12 md:tw-py-20 tw-bg-[#f8fafc]">
    <div class="container">
        <div class="row g-4 md:g-5">
            
            <div class="col-lg-8">
                
                <div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-4 tw-mb-10">
                    <div class="tw-bg-white tw-p-6 tw-rounded-[2rem] tw-shadow-sm tw-border tw-border-gray-100 tw-text-center group">
                        <div class="tw-w-12 tw-h-12 tw-bg-blue-50 tw-text-blue-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-mx-auto tw-mb-3 group-hover:tw-scale-110 tw-transition-transform">
                            <i class="fa-solid fa-bed tw-text-xl"></i>
                        </div>
                        <div class="tw-text-[10px] tw-text-gray-400 tw-uppercase tw-font-black tw-tracking-widest tw-mb-1">Oda Sayısı</div>
                        <div class="tw-font-bold tw-text-gray-800"><?php echo $feats->oda ?? '-'; ?></div>
                    </div>
                    <div class="tw-bg-white tw-p-6 tw-rounded-[2rem] tw-shadow-sm tw-border tw-border-gray-100 tw-text-center group">
                        <div class="tw-w-12 tw-h-12 tw-bg-emerald-50 tw-text-emerald-500 tw-rounded-xl d-flex align-items-center justify-content-center tw-mx-auto tw-mb-3 group-hover:tw-scale-110 tw-transition-transform">
                            <i class="fa-solid fa-bath tw-text-xl"></i>
                        </div>
                        <div class="tw-text-[10px] tw-text-gray-400 tw-uppercase tw-font-black tw-tracking-widest tw-mb-1">Banyo</div>
                        <div class="tw-font-bold tw-text-gray-800"><?php echo $feats->banyo ?? '-'; ?></div>
                    </div>
                    <div class="tw-bg-white tw-p-6 tw-rounded-[2rem] tw-shadow-sm tw-border tw-border-gray-100 tw-text-center group">
                        <div class="tw-w-12 tw-h-12 tw-bg-orange-50 tw-text-orange-500 tw-rounded-xl d-flex align-items-center justify-content-center tw-mx-auto tw-mb-3 group-hover:tw-scale-110 tw-transition-transform">
                            <i class="fa-solid fa-ruler-combined tw-text-xl"></i>
                        </div>
                        <div class="tw-text-[10px] tw-text-gray-400 tw-uppercase tw-font-black tw-tracking-widest tw-mb-1">Büyüklük</div>
                        <div class="tw-font-bold tw-text-gray-800"><?php echo $feats->m2 ?? '-'; ?> m²</div>
                    </div>
                    <div class="tw-bg-white tw-p-6 tw-rounded-[2rem] tw-shadow-sm tw-border tw-border-gray-100 tw-text-center group">
                        <div class="tw-w-12 tw-h-12 tw-bg-purple-50 tw-text-purple-500 tw-rounded-xl d-flex align-items-center justify-content-center tw-mx-auto tw-mb-3 group-hover:tw-scale-110 tw-transition-transform">
                            <i class="fa-solid fa-hashtag tw-text-xl"></i>
                        </div>
                        <div class="tw-text-[10px] tw-text-gray-400 tw-uppercase tw-font-black tw-tracking-widest tw-mb-1">İlan No</div>
                        <div class="tw-font-bold tw-text-gray-800">#<?php echo $ilan->id; ?></div>
                    </div>
                </div>

                <div class="tw-bg-white tw-p-8 md:tw-p-12 tw-rounded-[2.5rem] tw-shadow-sm tw-mb-10 tw-border tw-border-gray-100">
                    <h3 class="tw-font-black tw-text-2xl tw-mb-8 tw-text-gray-900 d-flex align-items-center">
                        <span class="tw-w-2 tw-h-8 tw-bg-blue-600 tw-rounded-full tw-mr-4"></span>
                        İlan Açıklaması
                    </h3>
                    <div class="tw-text-gray-600 tw-leading-relaxed tw-text-base tw-whitespace-pre-line">
                        <?php echo htmlspecialchars($ilan->description ?? ''); ?>
                    </div>
                </div>

                <?php if (!empty($gallery)): ?>
                    <div class="tw-bg-white tw-p-8 md:tw-p-12 tw-rounded-[2.5rem] tw-shadow-sm tw-border tw-border-gray-100 tw-mb-10">
                        <h4 class="tw-font-black tw-text-2xl tw-mb-8 tw-text-gray-900 d-flex align-items-center">
                            <span class="tw-w-2 tw-h-8 tw-bg-emerald-500 tw-rounded-full tw-mr-4"></span>
                            Galeri
                        </h4>
                        <div class="row g-3">
                            <?php foreach ($gallery as $img): ?>
                                <?php $imgUrl = !empty($img->image_path) ? BASE_URL . '/' . $img->image_path : $cover; ?>
                                <div class="col-6 col-md-4">
                                    <a href="<?php echo $imgUrl; ?>" class="glightbox tw-block tw-relative tw-overflow-hidden tw-rounded-2xl tw-group cursor-pointer" data-gallery="gallery">
                                        <img src="<?php echo $imgUrl; ?>" class="tw-w-full tw-h-40 md:tw-h-56 tw-object-cover group-hover:tw-scale-110 tw-transition-transform tw-duration-700">
                                        <div class="tw-absolute tw-inset-0 tw-bg-[#0f172a]/20 tw-opacity-0 group-hover:tw-opacity-100 tw-transition-all d-flex align-items-center justify-content-center">
                                            <i class="fa-solid fa-magnifying-glass-plus tw-text-white tw-text-2xl"></i>
                                        </div>
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>

                <div class="tw-bg-white tw-p-3 tw-rounded-[2.5rem] tw-shadow-sm tw-border tw-border-gray-100 tw-mb-10 map-container">
                    <iframe src="https://maps.google.com/maps?q=<?php echo urlencode($ilan->location); ?>&t=&z=14&ie=UTF8&iwloc=&output=embed"
                        width="100%" frameborder="0" style="border:0; border-radius: 2rem;"></iframe>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="tw-sticky tw-top-24 tw-z-30 tw-space-y-6">
                    
                    <div class="tw-bg-white tw-rounded-[2.5rem] tw-shadow-xl tw-shadow-slate-200/60 tw-border tw-border-gray-100 tw-overflow-hidden">
                        <div class="tw-p-8 text-center">
                            <div class="tw-relative d-inline-block tw-mb-6">
                                <img src="<?php echo $agentImg; ?>"
                                     class="tw-w-24 tw-h-24 md:tw-w-32 md:tw-h-32 tw-rounded-full tw-object-cover tw-border-[6px] tw-border-gray-50 tw-shadow-md">
                                <span class="tw-absolute tw-bottom-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-emerald-500 tw-border-[4px] tw-border-white tw-rounded-full"></span>
                            </div>

                            <h5 class="tw-font-black tw-text-xl tw-mb-1 tw-text-gray-900"><?php echo htmlspecialchars($agentName); ?></h5>
                            <p class="tw-text-[11px] tw-text-blue-600 tw-font-black tw-uppercase tw-tracking-[0.2em] tw-mb-8">Yetkili Gayrimenkul Danışmanı</p>

                            <div class="tw-space-y-3">
                                <a href="tel:<?php echo $cleanPhone; ?>" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-w-full tw-py-4 tw-rounded-2xl tw-font-black tw-text-sm tw-transition-all tw-shadow-lg tw-shadow-blue-500/30 d-flex align-items-center justify-content-center">
                                    <i class="fa-solid fa-phone tw-mr-3"></i> HEMEN ARA
                                </a>

                                <a href="https://wa.me/<?php echo $waPhone; ?>?text=Merhaba, <?php echo urlencode($ilan->title); ?> ilanı hakkında bilgi alabilir miyim?"
                                   target="_blank"
                                   class="btn tw-bg-[#25D366] hover:tw-bg-[#1DA851] tw-text-white tw-w-full tw-py-4 tw-rounded-2xl tw-font-black tw-text-sm tw-border-0 tw-shadow-lg tw-shadow-emerald-500/20 tw-transition-all d-flex align-items-center justify-content-center">
                                    <i class="fa-brands fa-whatsapp tw-text-xl tw-mr-3"></i> WHATSAPP DESTEK
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="tw-bg-white tw-rounded-[2.5rem] tw-shadow-lg tw-p-8 tw-border tw-border-gray-100">
                        <h6 class="tw-font-black tw-text-lg tw-mb-6 tw-text-gray-900 d-flex align-items-center">
                            <i class="fa-solid fa-paper-plane tw-text-blue-500 tw-mr-3"></i> Teklif Al / Mesaj Gönder
                        </h6>
                        <form action="<?php echo BASE_URL; ?>/message/send" method="POST" class="tw-space-y-4">
                            <input type="hidden" name="property_id" value="<?php echo $ilan->id; ?>">
                            <input type="text" name="sender_name" class="form-control tw-bg-gray-50 tw-border-0 tw-py-4 tw-rounded-xl tw-text-sm tw-font-bold focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 transition-all" placeholder="Adınız Soyadınız" required>
                            <input type="tel" name="sender_phone" class="form-control tw-bg-gray-50 tw-border-0 tw-py-4 tw-rounded-xl tw-text-sm tw-font-bold focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 transition-all" placeholder="Telefon Numaranız" required>
                            <textarea name="message_content" rows="4" class="form-control tw-bg-gray-50 tw-border-0 tw-py-4 tw-rounded-xl tw-text-sm tw-font-bold focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 transition-all" placeholder="İlan hakkında detaylı bilgi almak istiyorum..." required></textarea>
                            <button type="submit" class="btn tw-bg-[#0f172a] hover:tw-bg-black tw-text-white w-100 tw-py-4 tw-rounded-2xl tw-font-black tw-text-xs tw-uppercase tw-tracking-widest transition-all">MESAJI GÖNDER</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <?php if (!empty($similarProperties)): ?>
            <div class="tw-mt-20">
                <h4 class="tw-font-black tw-text-3xl tw-mb-10 tw-text-gray-900 d-flex align-items-center">
                    <span class="tw-w-2 tw-h-10 tw-bg-orange-500 tw-rounded-full tw-mr-4"></span>
                    Benzer İlanlar
                </h4>
                <div class="row g-4">
                    <?php foreach ($similarProperties as $sim): ?>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="card tw-border-0 tw-shadow-sm hover:tw-shadow-xl tw-transition-all tw-rounded-[2rem] tw-overflow-hidden group">
                                <div class="tw-relative tw-h-60 tw-p-3 tw-pb-0">
                                    <div class="tw-relative tw-w-full tw-h-full tw-rounded-[1.5rem] tw-overflow-hidden">
                                        <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $sim->slug; ?>" class="tw-block tw-h-full">
                                            <img src="<?php echo !empty($sim->image) ? BASE_URL . '/' . $sim->image : 'https://placehold.co/800x600'; ?>"
                                                 class="tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-700 group-hover:tw-scale-110">
                                            <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/70 tw-via-transparent tw-to-transparent"></div>
                                        </a>
                                        <div class="tw-absolute tw-bottom-4 tw-left-4 tw-bg-white/90 tw-px-4 tw-py-2 tw-rounded-xl tw-text-blue-600 tw-font-black tw-text-sm shadow-sm">
                                            ₺<?php echo number_format($sim->price ?? 0, 0, ',', '.'); ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body tw-p-8">
                                    <h6 class="tw-font-black tw-text-lg tw-mb-2 line-clamp-1">
                                        <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $sim->slug; ?>" class="text-decoration-none tw-text-gray-800 hover:tw-text-blue-600 transition-colors">
                                            <?php echo htmlspecialchars($sim->title); ?>
                                        </a>
                                    </h6>
                                    <p class="tw-text-gray-400 tw-text-xs tw-mb-0 d-flex align-items-center tw-font-bold">
                                        <i class="fa-solid fa-location-dot tw-text-blue-500 tw-mr-2"></i>
                                        <?php echo htmlspecialchars($sim->location); ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const lightbox = GLightbox({
            selector: '.glightbox',
            touchNavigation: true,
            loop: true,
            zoomable: true
        });
    });
</script>

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