/*
Theme Name: Flatsome Child 02
Theme URI: http://flatsome.uxthemes.com
Template: flatsome
Author: UX-Themes
Author URI: https://uxthemes.com
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.16.1.1743404890
Updated: 2025-03-31 07:08:10

*/
function display_bang_hang_mts_shortcode() {
    $args = array(
        'post_type'      => 'bang_hang_mts',
        'posts_per_page' => -1,
        'orderby'        => 'title',
        'order'          => 'ASC',
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        $output = '<table class="bang-hang-table">';
        $output .= '<tr>
                        <th>Tòa</th>
                        <th>Mã Căn</th>
                        <th>View</th>
                        <th>Loại Căn</th>
                        <th>DT Thông Thủy</th>
                        <th>Hướng BC</th>
                        <th>Giá Bán chưa gồm VAT và KPBT</th>
                        <th>Giá Bán Gồm VAT và KPBT</th>
                        <th>Giá TTS</th>
                        <th>Giá TTTĐ</th>
                        <th>Giá HTLS</th>
                        <th>Phiếu Tính Giá</th>
                        <th>CSBH</th>
                    </tr>';

        while ($query->have_posts()) {
            $query->the_post();
            $view_image = get_field('view'); // Link hình ảnh
            $phieu_tinh_gia = get_field('phieu_tinh_gia'); // Link phiếu tính giá

            $output .= '<tr>
                            <td>' . get_field('toa') . '</td>
                            <td>' . get_field('ma_can') . '</td>
                            <td><a href="#" onclick="openPopup(\'' . esc_url($view_image) . '\'); return false;">Xem</a></td>
                            <td>' . get_field('loai_can_1') . '</td>
                            <td>' . get_field('dt_thong_thuy') . '</td>
                            <td>' . get_field('huong_bc') . '</td>
                            <td>' . number_format(get_field('gia_ban_chua_vat')) . '</td>
                            <td>' . number_format(get_field('gia_ban_gom_vat')) . '</td>
                            <td>' . number_format(get_field('gia_tts')) . '</td>
                            <td>' . number_format(get_field('gia_tttd')) . '</td>
                            <td>' . number_format(get_field('gia_htls')) . '</td>
                            <td><a href="' . esc_url($phieu_tinh_gia) . '" target="_blank">Xem</a></td>
                            <td>' . get_field('csbh') . '</td>
                        </tr>';
        }

        $output .= '</table>';

        // Thêm popup ngoài cùng của trang để không bị footer che
        $output .= '<div id="imagePopup" class="popup-overlay" style="display:none;">
                        <div class="popup-content">
                            <span class="close-btn" onclick="closePopup()">&times;</span>
                            <img id="popupImage" src="" style="max-width:100%; height:auto;"/>
                        </div>
                    </div>';

        // Thêm CSS để đảm bảo hiển thị đúng
        $output .= '<style>
                        .popup-overlay {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.7);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 9999;
                        }
                        .popup-content {
                            background: #fff;
                            padding: 15px;
                            border-radius: 5px;
                            position: relative;
                            max-width: 90%;
                            max-height: 90%;
                            overflow: auto;
                        }
                        .close-btn {
                            position: absolute;
                            top: 10px;
                            right: 15px;
                            font-size: 20px;
                            cursor: pointer;
                            color: #000;
                        }
                    </style>';

        // Thêm JavaScript xử lý sự kiện
        $output .= '<script>
                        function openPopup(imageUrl) {
                            document.getElementById("popupImage").src = imageUrl;
                            document.getElementById("imagePopup").style.display = "flex";
                        }
                        function closePopup() {
                            document.getElementById("imagePopup").style.display = "none";
                        }
                        document.getElementById("imagePopup").addEventListener("click", function(event) {
                            if (event.target === this) {
                                closePopup();
                            }
                        });
                    </script>';

        wp_reset_postdata();
    } else {
        $output = '<p>Không có căn hộ nào.</p>';
    }

    return $output;
}
add_shortcode('bang_hang_mts', 'display_bang_hang_mts_shortcode');