<?php
// add_action('admin_init', 'flexyconsent_settings_paymentPage');
// function flexyconsent_settings_paymentPage()
// {
//     global $flexyconsentSettings;
//     $pageNameMain = 'paymentPage';
//     $pageName = flexyconsent_getPageName($pageNameMain);
//     $sectionName = flexyconsent_getSectionName($pageNameMain);
// }

function flexyconsent_paymentPage()
{
    global $flexyconsent_plugin_dir_url;
    $pageNameMain = 'paymentPage'; ?>
    <div class="container py-3 flexyconsent-container">
        <div class="row">
            <div class="col-12 text-center">
                <?php flexyconsent_get_top_section(); ?>
            </div>
            <div class="col-12 my-3" id="<?php echo esc_attr($pageNameMain); ?>">

                <div class="container">
                    <div class="row justify-content-center">
                        <div id="flexyconsent_payment" class="col">
                            <h3 id="flexyconsent_title" class="my-3"><?php esc_html_e('Choose a payment method', 'flexyconsent'); ?></h3>

                            <div class="card payment-card mb-4 px-4 py-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div class="pe-3">
                                            <h5 id="flexyconsent_package_name" class="card-title display-6"></h5>
                                            <p id="flexyconsent_description" class="card-subtitle mb-3 text-muted"></p>
                                            <h6 id="flexyconsent_msg" class="card-subtitle mb-3"></h6>
                                        </div>

                                        <div>
                                            <span id="flexyconsent_price" class="payment-price"></span> <span id="flexyconsent_currency"></span>
                                        </div>
                                    </div>

                                    <div class="mt-5">
                                        <button id="flexyconsent_paypal" class="btn payment paypal d-none">
                                            <img src="<?php echo esc_url($flexyconsent_plugin_dir_url) . 'images/paypal.svg' ?>" alt="PayPal" />
                                        </button>

                                        <button id="flexyconsent_credit_card" class="btn payment credit-card mt-3 d-none">
                                            <img class="me-1" src="<?php echo esc_url($flexyconsent_plugin_dir_url) . 'images/credit_card.svg' ?>" alt="Credit Card" />
                                            <?php esc_html_e('Debit or Credit Card', 'flexyconsent'); ?>
                                        </button>

                                        <button id="flexyconsent_btn_free" class="btn payment free d-none">
                                            <?php esc_html_e('Downgrade to free package', 'flexyconsent'); ?>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- <span><i class="fa-solid fa-chevron-left fa-xs"></i> <a id="flexyconsent_go_back" href="subscriptions.jsp">Go to the Subscription</a></span> -->
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-12 my-3">
                <a class="button button-back" href="<?php echo esc_url(flexyconsent_generateGoPage('subscriptionPage')); ?>"><?php esc_html_e('Cancel', 'flexyconsent'); ?></a>
            </div>
            <div class="col-12 text-center">
                <?php flexyconsent_get_bottom_section(); ?>
            </div>
        </div>
    </div>

<?php
}
