<?php
global $hb_room;
$post_id = get_the_ID();
$room_size = get_post_meta(get_the_ID(), 'framework-room-size', true);
$room_price = get_post_meta(get_the_ID(), 'framework-room-price', true);
$room_sleeps = get_post_meta(get_the_ID(), 'framework-room-sleeps', true);
$room_bed_size = get_post_meta(get_the_ID(), 'framework-room-bed', true);
$room_bathroom = get_post_meta(get_the_ID(), 'framework-room-bathroom', true);
$room_know_more = get_post_meta(get_the_ID(), 'framework-room-know-more', true);
?>
<div class="col-sm-6 col-md-6 col-lg-4">
    <div class="room-card">
        <div class="room-card-photo">
            <?php echo get_the_post_thumbnail($post_id, 'bestel-rooms-thumb', array('class' => 'img-fluid')); ?></a>
            <div class="flex-wrap-center">
                <a href="<?php the_permalink(); ?>" data-id="<?php echo esc_attr( $post_id ) ?>" data-name="<?php echo esc_attr( the_title() ) ?>" class="btn btn-primary room-qview searchroom">
                    <?php echo esc_html__('BOOK NOW2', 'bestel') ?>
                </a>


            </div>
        </div>
        <div class="room-card-info">
            <div class="row">
                <div class="col">
                    <h3 class="room-type"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                </div>
                <div class="col-auto ml-auto">
                    <div class="room-card-attr">
                        <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="<?php echo esc_attr($room_sleeps, 'bestel') ?>"><i class="icon-two-man"></i></span>
                        <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="<?php echo esc_attr($room_bed_size, 'bestel') ?>"><i class="icon-double-size-bed"></i></span>
                        <span data-toggle="popover" data-trigger="hover" data-placement="top" data-content="<?php echo esc_attr($room_bathroom, 'bestel') ?>"><i class="icon-bathtub"></i></span>
                    </div>
                </div>
            </div>
            <div class="room-size mt-0"><?php echo esc_html__('Room size:', 'bestel') ?> <?php echo esc_html($room_size,'bestel') ?> <?php echo esc_html__('m', 'bestel'); ?><sup><?php echo esc_html__('2', 'bestel'); ?></sup></div>
            <div class="row">
                <div class="col">
                    <div class="room-price"><span><?php bestel_conver_Currency_To_Symble(bestel_get_option('bestel_currency_select')); ?></span><?php echo wp_kses_post($room_price, 'bestel') ?></div>
                </div>
                <div class="col-auto ml-auto">
                    <a href="<?php the_permalink(); ?>" class="room-information" data-toggle="popover" data-trigger="hover" data-placement="bottom"><i class="icon-information"></i><?php echo esc_html__('Know more', 'bestel') ?></a>
                    <div class="popover-content d-none">
                        <?php
                        echo wp_kses($room_know_more, 
                            array(
                                        'ul' => array(''),
                                        'li' => array(''),
                                        'a' =>  array('href'),
                                    ) 
                            );
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>