<?php

defined( 'ABSPATH' ) || exit;
?>

<div class="wrap">
    <h1 class="wp-heading-inline">
		<?php
		esc_html_e( 'Cost Of Goods Dashboard', 'cost-of-goods-for-woocommerce' ); ?>
    </h1>
    <hr>

    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
        <!-- Upgrade Section -->
        <div style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); flex: 1; min-width: 300px;">
            <h2 style="color: #0073aa;">Upgrade to Premium</h2>
            <p><strong>Get more features with our premium version:</strong></p>
            <ul style="margin-left: 20px;">
                <li>✔ Add COG price for variation products</li>
                <li>✔ Track and view profit reports</li>
            </ul>
            <p>
                <a href="#"
                   style="display: inline-block; background: #0073aa; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;"
                   id="purchase_business_single">1 website
                </a>
                <a href="#"
                   style="display: inline-block; background: #0073aa; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;"
                   id="purchase_agency_twenty">20 websites
                </a>
                <a href="#"
                   style="display: inline-block; background: #0073aa; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;"
                   id="lifetime_one">Lifetime 1 website
                </a>
                <a href="#"
                   style="display: inline-block; background: #0073aa; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;"
                   id="lifetime_twenty">Lifetime 20 website
                </a>
            </p>
        </div>

        <!-- Review Section -->
        <div style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); flex: 1; min-width: 300px; text-align: center;">
            <h2 style="color: #f39c12;">⭐ Rate Us 5 Stars!</h2>
            <p>Enjoying our plugin? Please consider leaving a 5-star review to help us improve and stay motivated!</p>
            <a href="https://wordpress.org/support/plugin/cost-of-goods/reviews/#new-post" target="_blank"
               style="display: inline-block; background: #f39c12; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;">
                Leave a Review
            </a>
        </div>
    </div>

    <hr>

    <div style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 0px;">
        <h2 style="color: #0073aa;">How to Use This Plugin?</h2>
        <ol>
            <li>Go to your existing product OR create a new one</li>
            <li>Navigate to <strong>PRODUCT DATA</strong></li>
            <li>Enter regular price</li>
            <li>Enter COG price to see your profit margin</li>
        </ol>
    </div>

    <hr>

    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
        <!-- Upgrade Section -->
        <div style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); flex: 1; min-width: 300px;">
            <h2 style="color: #0073aa;">Variation Changes</h2>
            <img style="width: 100%; border-radius: 8px;" src="<?php
			echo plugin_dir_url( __FILE__ ); ?>img/cog-variations.png" alt="Profit and Cost Report">
        </div>

        <!-- Review Section -->
        <div style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); flex: 1; min-width: 300px;">
            <h2 style="color: #0073aa;">Dashboard of your sales and counting COG</h2>
            <img style="width: 100%; border-radius: 8px;" src="<?php
			echo plugin_dir_url( __FILE__ ); ?>img/dashboard.png" alt="Profit and Cost Report">
        </div>
    </div>

</div>

<script type="text/javascript" src="https://checkout.freemius.com/js/v1/"></script>
<script type="text/javascript">
    const handler = new FS.Checkout({
        product_id: '11242',
        plan_id: '19095',
        public_key: 'pk_177dd05e074ba273fa0e39265abfe'
    });

    document.getElementById('purchase_business_single').addEventListener('click', (e) => {
        e.preventDefault();

        handler.open({
            name: 'Cost Of Goods For WooCommerce',
            licenses: 1,
            purchaseCompleted: (response) => {
            },
            success: (response) => {
            }
        });
    });

    const handler_agency = new FS.Checkout({
        product_id: '11242',
        plan_id: '19096',
        public_key: 'pk_177dd05e074ba273fa0e39265abfe'
    });

    document.getElementById('purchase_agency_twenty').addEventListener('click', (e) => {
        e.preventDefault();

        handler_agency.open({
            name: 'Cost Of Goods For WooCommerce',
            licenses: 20,
            purchaseCompleted: (response) => {
            },
            success: (response) => {
            }
        });
    });

    const handle_lifetime_single = new FS.Checkout({
        product_id: '11242',
        plan_id: '19097',
        public_key: 'pk_177dd05e074ba273fa0e39265abfe'
    });

    document.getElementById('lifetime_one').addEventListener('click', (e) => {
        e.preventDefault();

        handle_lifetime_single.open({
            name: 'Cost Of Goods For WooCommerce',
            licenses: 1,
            purchaseCompleted: (response) => {
            },
            success: (response) => {
            }
        });
    });


    const handler_lifetime_twenty = new FS.Checkout({
        product_id: '11242',
        plan_id: '19098',
        public_key: 'pk_177dd05e074ba273fa0e39265abfe'
    });

    document.getElementById('lifetime_twenty').addEventListener('click', (e) => {
        e.preventDefault();

        handler_lifetime_twenty.open({
            name: 'Cost Of Goods For WooCommerce',
            licenses: 20,
            purchaseCompleted: (response) => {
            },
            success: (response) => {
            }
        });
    });

</script>