/*
Theme Name: Web Design
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
add_action('woocommerce_after_single_product_summary', 'custom_flatsome_product_demo', 6);

function custom_flatsome_product_demo() {
    global $post;

    // Lấy URL từ ACF
    $demo_url = get_field('demo_url', $post->ID);

    if (!$demo_url) return;

    ?>
    <style>
        .custom-demo-wrapper {
            display: flex;
            flex-wrap: wrap;
            margin-top: 40px;
            gap: 20px;
        }

        .custom-demo-left {
            flex: 1 1 65%;
        }

        .custom-demo-right {
            flex: 1 1 30%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .device-buttons {
            margin-bottom: 10px;
        }

        .device-buttons button {
            margin-right: 8px;
            padding: 8px 16px;
            background: #eee;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #demo-iframe {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
        }

        .btn-buy-now {
            background: #0073aa;
            color: #fff;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
        }
    </style>

    <div class="custom-demo-wrapper">
        <div class="custom-demo-left">
            <div class="device-buttons">
                <button onclick="setDevice('pc')">PC</button>
                <button onclick="setDevice('laptop')">Laptop</button>
                <button onclick="setDevice('mobile')">Mobile</button>
            </div>
            <iframe id="demo-iframe" src="<?php echo esc_url($demo_url); ?>"></iframe>
        </div>
        <div class="custom-demo-right">
            <a href="?add-to-cart=<?php echo get_the_ID(); ?>" class="btn-buy-now">Mua Ngay</a>
        </div>
    </div>

    <script>
        function setDevice(device) {
            const iframe = document.getElementById('demo-iframe');
            if (device === 'pc') {
                iframe.style.width = '100%';
                iframe.style.height = '600px';
            } else if (device === 'laptop') {
                iframe.style.width = '1024px';
                iframe.style.height = '600px';
            } else if (device === 'mobile') {
                iframe.style.width = '375px';
                iframe.style.height = '667px';
            }
        }
    </script>
    <?php
}


/*Thêm trường link_demo trong tab General */
add_action( 'woocommerce_product_options_general_product_data', function() {
    woocommerce_wp_text_input( array(
        'id'          => '_link_demo',
        'label'       => __( 'Link Demo', 'woocommerce' ),
        'placeholder' => 'https://example.com/demo',
        'desc_tip'    => true,
        'description' => __( 'Nhập link demo để hiển thị nút "Xem Demo"', 'woocommerce' ),
    ));
});

/* Lưu trường link_demo */
add_action( 'woocommerce_process_product_meta', function( $post_id ) {
    $link_demo = isset($_POST['_link_demo']) ? esc_url_raw($_POST['_link_demo']) : '';
    update_post_meta( $post_id, '_link_demo', $link_demo );
});

/* Hiển thị 2 nút khi hover sản phẩm */
add_action( 'woocommerce_after_shop_loop_item', function() {
    global $product;
    $link_demo = get_post_meta( $product->get_id(), '_link_demo', true );

    echo '<div class="custom-product-buttons">';
    echo '<a href="' . esc_url( get_permalink( $product->get_id() ) ) . '" class="btn-view-details">Xem chi tiết</a>';
    if ( $link_demo ) {
        echo '<a href="' . esc_url( site_url('/product-demo/?id=' . $product->get_id() ) ) . '" class="btn-view-demo">Xem demo</a>';
    }
    echo '</div>';
});