<?php

$query = http_build_query($_GET);

$response = file_get_contents("https://chakrarealty.com/app/api/wp/properties?$query");

$properties = json_decode($response, true);

?>

<style>
.single-property {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.property-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 40px;
}

.property-filter select,
.property-filter input {
    height: 45px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
}

.property-filter button {
    height: 45px;
    padding: 0 20px;
    background: #1a4fa3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.property-filter button {
    height: 45px;
    padding: 0 20px;
    background: #1a4fa3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.property-list .item {
    height: 100%;
}

.property-list .single-property {
    height: 100%;
}

.property-img {
    height: 220px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.property-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
</style>

<div class="breadcrumbs overlay-black">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumbs-inner">
                    <div class="breadcrumbs-title text-center">
                        <h1>Properties</h1>
                    </div>
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="index.html">Home /</a></li>
                            <li>Properties</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="property-area fadeInUp wow ptb-130" data-wow-delay="0.2s">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <form method="GET" class="property-filter">

                    <select name="type" id="proptype">
                        <option value="">Property Type</option>
                    </select>

                    <select name="usage" id="usageSelect">
                        <option value="">Property Usage</option>
                    </select>

                    <select name="state" id="stateSelect">
                        <option value="">Select State</option>
                    </select>

                    <select name="city" id="citySelect">
                        <option value="">Select City</option>
                    </select>

                    <input type="number" name="min_price" placeholder="Min Price">
                    <input type="number" name="max_price" placeholder="Max Price">

                    <button type="submit">Filter</button>

                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="tab-content" id="property-tab-content">
                    <div role="tabpanel" class="tab-pane active" id="sale" aria-labelledby="property-sale-tab">
                        <div class="property-list owl-carousel">

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

                            <div class="item" href="property.php?code=<?php echo $property['code']; ?>">
                                <div class="single-property">

                                    <div class="property-img">
                                        <a href="property.php?code=<?php echo $property['code']; ?>">
                                            <img src="<?php echo $property['image']; ?>"
                                                alt="<?php echo $property['title']; ?>" class="property-card-img">
                                        </a>
                                    </div>

                                    <div class="property-desc">

                                        <div class="property-desc-top">

                                            <h6>
                                                <a href="property.php?code=<?php echo $property['code']; ?>">
                                                    <?php echo $property['title']; ?>
                                                </a>
                                            </h6>

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

                                            <div class="property-location">
                                                <p>
                                                    <img src="img/property/icon-5.png" alt="">
                                                    <?php echo $property['city']; ?>
                                                </p>
                                            </div>

                                        </div>

                                        <div class="property-desc-bottom">

                                            <div class="property-bottom-list">
                                                <ul>

                                                    <?php if (!empty($property['area'])): ?>
                                                    <li>
                                                        <img src="img/property/icon-1.png" alt="">
                                                        <span>
                                                            <?php echo $property['area']; ?>
                                                            <?php echo $property['area_unit']; ?>
                                                        </span>
                                                    </li>
                                                    <?php endif; ?>

                                                    <?php if (!empty($property['bhk'])): ?>
                                                    <li>
                                                        <img src="img/property/icon-2.png" alt="">
                                                        <span><?php echo $property['bhk']; ?> BHK</span>
                                                    </li>
                                                    <?php endif; ?>

                                                    <?php if (!empty($property['usage'])): ?>
                                                    <li>
                                                        <img src="img/property/icon-3.png" alt="">
                                                        <span><?php echo $property['usage']; ?></span>
                                                    </li>
                                                    <?php endif; ?>

                                                    <?php if (!empty($property['type'])): ?>
                                                    <li>
                                                        <img src="img/property/icon-4.png" alt="">
                                                        <span><?php echo $property['type']; ?></span>
                                                    </li>
                                                    <?php endif; ?>

                                                </ul>
                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <?php endforeach; ?>
                            <?php else: ?>

                            <p>No properties available.</p>

                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php

$totalPages = $properties['last_page'] ?? 1;
$current = $properties['current_page'] ?? 1;

$queryParams = $_GET;

?>

<div class="pagination">

    <?php if ($current > 1):
        $queryParams['page'] = $current - 1;
    ?>

    <a href="?<?= http_build_query($queryParams) ?>">« Prev</a>

    <?php endif; ?>

    <?php for ($i = 1; $i <= $totalPages; $i++):
        $queryParams['page'] = $i;
    ?>

    <a href="?<?= http_build_query($queryParams) ?>" class="<?= $i == $current ? 'active' : '' ?>">
        <?= $i ?>
    </a>

    <?php endfor; ?>

    <?php if ($current < $totalPages):
        $queryParams['page'] = $current + 1;
    ?>

    <a href="?<?= http_build_query($queryParams) ?>">Next »</a>

    <?php endif; ?>

</div>


<script>
document.addEventListener("DOMContentLoaded", function() {

    fetch("https://chakrarealty.com/app/api/wp/filter-data")
        .then(res => res.json())
        .then(data => {

            let proptype = document.getElementById("proptype");
            data.types.forEach(u => {
                proptype.innerHTML +=
                    `<option value="${u.name}">${u.name}</option>`;
            });

            let usageSelect = document.getElementById("usageSelect");
            data.usages.forEach(u => {
                usageSelect.innerHTML +=
                    `<option value="${u.name}">${u.name}</option>`;
            });

            let stateSelect = document.getElementById("stateSelect");
            data.states.forEach(s => {
                stateSelect.innerHTML +=
                    `<option value="${s.id}">${s.name}</option>`;
            });

        });

});
</script>

<script>
document.getElementById("stateSelect").addEventListener("change", function() {

    let stateId = this.value;
    let citySelect = document.getElementById("citySelect");

    citySelect.innerHTML = '<option value="">Select City</option>';

    if (!stateId) return;

    fetch(`https://chakrarealty.com/app/api/wp/cities/${stateId}`)
        .then(res => res.json())
        .then(cities => {
            cities.forEach(city => {
                citySelect.innerHTML +=
                    `<option value="${city.city}">${city.city}</option>`;
            });
        });

});
</script>