<?php

$code = $_GET['code'] ?? null;

if (!$code) {
    echo "<p>Property not found.</p>";
    return;
}

$apiUrl = "https://chakrarealty.com/app/api/wp/property/" . $code;

$response = file_get_contents($apiUrl);

$data = json_decode($response, true);

if (!$data) {
    echo "<p>Property not found.</p>";
    return;
}

$property = $data;

?>
<style>
.thumb-img.active {
    border: 3px solid #0d6efd;
}
</style>
<div class="container py-5">
    <div class="row">
        <!-- LEFT -->
        <div class="col-lg-8">

            <div class="property-detail">

                <h1 class="mb-3">
                    <?php echo htmlspecialchars($property['title']); ?>
                </h1>

                <h4 class="text-primary mb-2">
                    ₹ <?php echo number_format($property['price']); ?>
                </h4>

                <p class="text-muted mb-4">
                    <?php echo htmlspecialchars($property['location']['city']); ?>,
                    <?php echo htmlspecialchars($property['location']['state']); ?>
                </p>


                <!-- GALLERY -->
                <div class="property-gallery mb-4">

                    <div class="mb-3 text-center" id="galleryMain">

                        <?php if (!empty($property['images'])): ?>
                        <img src="<?php echo $property['images'][0]['file_path']; ?>" class="img-fluid rounded shadow"
                            style="max-height:400px;object-fit:cover;width:100%;">
                        <?php endif; ?>

                    </div>


                    <div class="row g-2" style="row-gap: 15px;">

                        <?php if (!empty($property['images'])): ?>
                        <?php foreach ($property['images'] as $img): ?>

                        <div class=" col-3">
                            <img class="img-fluid rounded thumb-img"
                                src="<?php echo htmlspecialchars($img['file_path']); ?>" class="img-fluid rounded"
                                style="cursor:pointer;height:80px;object-fit:cover;width:100%;"
                                onclick="setMainMedia('image','<?php echo htmlspecialchars($img['file_path']); ?>',this)">
                        </div>

                        <?php endforeach; ?>
                        <?php endif; ?>


                        <?php if (!empty($property['videos'])): ?>
                        <?php foreach ($property['videos'] as $video):

                                $embed = str_replace(
                                    ['youtu.be/', 'watch?v='],
                                    ['www.youtube.com/embed/', ''],
                                    $video['file_path']
                                );
                            ?>

                        <div class="col-3">
                            <div class="img-fluid rounded thumb-img"
                                style="height:80px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;"
                                onclick="setMainMedia('video','<?php echo htmlspecialchars($embed); ?>',this)">
                                ▶
                            </div>
                        </div>

                        <?php endforeach; ?>
                        <?php endif; ?>

                    </div>

                </div>


                <!-- PROPERTY INFO -->
                <div class="card mb-4">
                    <div class="card-body">

                        <div class="row text-center">

                            <?php if (!empty($property['bhk'])): ?>
                            <div class="col">
                                <strong><?php echo $property['bhk']; ?> BHK</strong>
                            </div>
                            <?php endif; ?>

                            <div class="col">
                                <?php echo htmlspecialchars($property['usage']); ?>
                            </div>

                            <div class="col">
                                <?php echo htmlspecialchars($property['area']); ?>
                                <?php echo htmlspecialchars($property['area_unit']); ?>
                            </div>

                            <div class="col">
                                <?php echo htmlspecialchars($property['type']); ?>
                            </div>

                        </div>

                    </div>
                </div>


                <!-- DESCRIPTION -->
                <div class="card mb-4">
                    <div class="card-body">

                        <h5>Description</h5>

                        <p>
                            <?php echo nl2br(htmlspecialchars($property['description'])); ?>
                        </p>

                    </div>
                </div>


                <!-- AMENITIES -->
                <?php if (!empty($property['amenities'])): ?>

                <div class="card mb-4">
                    <div class="card-body">

                        <h5>Amenities</h5>

                        <ul class="row">

                            <?php foreach ($property['amenities'] as $a): ?>

                            <li class="col-md-4 mb-2">
                                <?php echo htmlspecialchars($a); ?>
                            </li>

                            <?php endforeach; ?>

                        </ul>

                    </div>
                </div>

                <?php endif; ?>


                <!-- OWNER -->
                <?php if (!empty($property['owner'])): ?>

                <div class="card mb-4">
                    <div class="card-body">

                        <h5>Owner Details</h5>

                        <p><strong>Name:</strong> <?php echo htmlspecialchars($property['owner']['name']); ?></p>

                        <p><strong>Ownership:</strong>
                            <?php echo htmlspecialchars($property['owner']['ownership_type']); ?></p>

                        <p>
                            <strong>Contact:</strong>
                            <a href="tel:7305544993">7305544993</a>
                        </p>

                    </div>
                </div>

                <?php endif; ?>

            </div>
        </div>

        <!-- RIGHT -->
        <div class="col-lg-4">

            <h5 class="mb-3">Related Properties</h5>

            <?php
            $relatedUrl = "https://chakrarealty.com/app/api/wp/property-related/" . $code;
            $relResponse = file_get_contents($relatedUrl);
            $related = json_decode($relResponse, true);

            if (!empty($related)):
                foreach (array_slice($related, 0, 5) as $r):
            ?>

            <a href="property.php?code=<?php echo $r['code']; ?>" class="text-decoration-none">

                <div class="card mb-3 shadow-sm">

                    <img src="<?php echo $r['primaryimg']; ?>" class="card-img-top"
                        style="height:180px;object-fit:cover;">

                    <div class="card-body p-2">

                        <h6 class="mb-1">
                            <?php echo htmlspecialchars($r['title']); ?>
                        </h6>

                    </div>

                </div>

            </a>

            <?php endforeach;
            endif; ?>

        </div>

    </div>
</div>

<script>
function setMainMedia(type, src, el) {

    const container = document.getElementById('galleryMain');

    document.querySelectorAll('.thumb-img').forEach(function(item) {
        item.classList.remove('active');
    });

    el.classList.add('active');

    if (type === 'image') {

        container.innerHTML =
            `<img src="${src}" 
            class="img-fluid rounded shadow"
            style="max-height:400px;object-fit:cover;width:100%;">`;

    } else {

        let videoSrc = src + "?autoplay=1&mute=1";

        container.innerHTML =
            `<iframe src="${videoSrc}"
            width="100%" 
            height="400" 
            frameborder="0" 
            allow="autoplay; encrypted-media"
            allowfullscreen></iframe>`;
    }
}
</script>