<?php
/* Template Name: Detail List Page */
get_header();
?>

<section class="banner dtl-bnr">
    <div class="container">
        <div class="bnr-cont">
            <div class="breadcrumb-wrp">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item" aria-current="page"><a href="#">Home</a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="#">Search</a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="#"><?php echo esc_html(get_post_meta(get_the_ID(), '_property_location', true)); ?></a></li>
                        <li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="bnr-btm"></div>
</section>
<?php $price = get_post_meta(get_the_ID(), '_property_price', true); ?>
<section class="detail-sec-wrp">
    <div class="container">
        <div class="property-dtl-top">
            <div class="btn-blk">
                <button class="btn overview active">Overview</button>
            </div>
            <div class="price-enq-blk">
                <div class="price-wrp">
                    <span class="price"><?php echo '$' . number_format(esc_html($price)) . '/mo'; ?></span>
                    <span class="price end">- <?php echo esc_html(get_post_meta(get_the_ID(), '_property_sqft', true)); ?>/sq ft</span>
                </div>
                <a href="#" class="btn btn-primary enquire-now btn-enquire"   
                            data-title="<?php echo the_title(); ?>"
                            data-post-id="<?php echo get_the_ID(); ?>"
                            data-location="<?php echo esc_html(get_post_meta(get_the_ID(), '_property_location', true)); ?>"
                            data-type="<?php echo esc_html(get_post_meta(get_the_ID(), '_property_residence_type', true)); ?>"
                            data-additionalinfo="<?php echo esc_html(get_post_meta(get_the_ID(), '_property_additional_info', true)); ?>">Inquire Now</a>
                <!-- <button class="btn btn-primary enquire-now">Enquire now</button> -->
            </div>
        </div>
        
        <div class="overview-blk">
            <div class="overview-info-top">
                <div class="property-title-dtl">
                    <div class="prop-title">
                        <span><?php the_title(); ?></span>
                        <p><?php echo esc_html(get_post_meta(get_the_ID(), '_property_residence_type', true)); ?></p>
                        <span class="location"><?php echo esc_html(get_post_meta(get_the_ID(), '_property_location', true)); ?></span>
                    </div>
                </div>
            </div>
            
            <div class="prop-img-blks">
                <div class="view-img-wrp">
                    <div class="large-thumb">
                        <div class="btn-text">
                            <span><img src="<?php echo get_template_directory_uri(); ?>/img/calendar.svg"></span>
                            <?php 
                                // Get the date when the post was published
                                $post_date = get_the_date('U'); 
                                $current_time = current_time('U');
                                $time_diff = human_time_diff($post_date, $current_time);
                                ?>
                            <span class="loc"><?php echo 'Listed ' . $time_diff . ' ago' ?></span>
                        </div>
                        <img src="<?php echo esc_url(get_post_meta(get_the_ID(), '_property_images', true)[0]); ?>" alt="">
                    </div>
                    <div class="side-thumb">
                    <?php
                        $images = get_post_meta(get_the_ID(), '_property_images', true);
                        if (is_array($images) && count($images) > 1) {
                            // Start the loop from the second image
                            $max_images = min(count($images) - 1, 3);
                            for ($i = 1; $i < $max_images; $i++) {
                                echo '<div class="img-wrp"><img src="' . esc_url($images[$i]) . '" alt=""></div>';
                            }
                        }
                        ?>
                    </div>
                </div>
                <div class="image-tag-blk">
                    <button class="btn tags active open-gallery">+<?php echo count($images); ?> Images</button>
                    <button class="btn tags"><?php echo esc_html(get_post_meta(get_the_ID(), '_property_residence_type', true)); ?></button>
                    <button class="btn tags"><?php echo esc_html(get_post_meta(get_the_ID(), '_property_term', true)); ?></button>
                </div>
                <!-- Full image gallery (hidden initially) -->
                <div class="image-gallery" style="display:none;">
                    <?php
                    if (is_array($images)) {
                        foreach ($images as $image) {
                            echo '<a href="' . esc_url($image) . '" data-fancybox="gallery"><img src="' . esc_url($image) . '" alt=""></a>';
                        }
                    }
                    ?>
                </div>
            </div>
        </div>
        
        <div class="overview-cont-sec">
            <div class="sec-title-sub">PROPERTY OVERVIEW</div>
            <p class="content">
                <?php echo esc_html(get_post_meta(get_the_ID(), '_property_additional_info', true)); ?>
            </p>
        </div>
        
        <div class="overview-cont-sec">
            <div class="sec-title-sub">ROOM DETAILS</div>
            <div class="amenities-listing room">
                <!-- <div class="amenity-col">
                    <div class="amenities">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/room-icon-1.svg" alt=""></span>Area : <?php echo esc_html(get_post_meta(get_the_ID(), '_property_area', true)); ?> m²
                    </div>
                </div> -->
                <div class="amenity-col">
                    <div class="amenities">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/room-icon-2.svg" alt=""></span>Beds : <?php echo esc_html(get_post_meta(get_the_ID(), '_property_bedrooms', true)); ?>
                    </div>
                </div>
                <div class="amenity-col">
                    <div class="amenities">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/room-icon-3.svg" alt=""></span>Baths : <?php echo esc_html(get_post_meta(get_the_ID(), '_property_bathrooms', true)); ?>
                    </div>
                </div>
                <!-- <div class="amenity-col">
                    <div class="amenities">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/room-icon-4.svg" alt=""></span>Garages : <?php echo esc_html(get_post_meta(get_the_ID(), '_property_garages', true)); ?>
                    </div>
                </div> -->
                <!-- <div class="amenity-col">
                    <div class="amenities">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/room-icon-5.svg" alt=""></span>Storage : <?php echo esc_html(get_post_meta(get_the_ID(), '_property_storage', true)); ?>
                    </div>
                </div> -->
            </div>
        </div>
        
        <!-- <div class="overview-cont-sec no-border">
            <div class="sec-title-sub">AMENITIES</div>
            <div class="amenities-listing info">
                <?php
                // $amenities = get_post_meta(get_the_ID(), '_property_amenities', true);
                // if (is_array($amenities)) {
                //     foreach ($amenities as $amenity) {
                //         echo '<div class="amenity-col"><div class="amenities list-only">' . esc_html($amenity) . '</div></div>';
                //     }
                // }
                ?>
                <div class="amenity-col">
                    <a class="view">
                        <span> View more</span>
                        <span><img src="<?php echo get_template_directory_uri(); ?>/img/more-right-arrow.svg" alt="arrow-right"></span>
                    </a>
                </div>
            </div>
        </div> -->
    </div>
</section>

<section class="news-sec">
    <div class="container">
        <div class="newsletter-section">
            <h2 class="newsletter-heading">SUBSCRIBE TO OUR NEWSLETTER</h2>
            <p class="newsletter-content">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
                Lorem Ipsum has been.
            </p>

            <form class="newsletter-form" id="newsletter-form">
                <input type="email" id="newsletter-email" class="newsletter-input" placeholder="Enter Your Email Here" />
                <button type="submit" class="newsletter-button">Subscribe</button>
            </form>

            <div id="newsletter-message" style="display:none;"></div>
        </div>
    </div>
</section>


<?php get_footer(); ?>
<script>
jQuery(document).ready(function($) {
    $('.open-gallery').on('click', function() {
        // Trigger the Fancybox gallery popup
        Fancybox.show([
            <?php
            if (is_array($images)) {
                foreach ($images as $image) {
                    echo "{ src: '" . esc_url($image) . "', type: 'image' },";
                }
            }
            ?>
        ], {
            loop: true,
            buttons: [
                "zoom",
                "close"
            ]
        });
    });
});



</script>