<?php

defined( 'ABSPATH' ) or exit;

?>
<div style="display: inline-block;">
    <form id="pwlpara-welcome-form" method="post" data-action="save_welcome_wizard">
        <div id="pwlpara-welcome">
            <div id="pwlpara-welcome-header-container">
                <div>
                    <img id="pwlpara-welcome-heading-logo" src="<?php echo esc_attr( pwlpar_logo_url_default() ); ?>" alt="<?php echo esc_attr( pwlpar_program_name() ); ?>">
                </div>
                <div>
                    <div class="pwlpara-welcome-heading pwlpara-heading">
                        <?php esc_html_e( 'Welcome!', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>
                    </div>
                    <div class="pwlpara-welcome-subheading">
                        <?php
                            /* translators: %s: Plugin name */
                            printf( esc_html__( '%s helps you create a loyalty program for your WooCommerce store.', 'pw-loyalty-points-and-rewards-for-woocommerce' ), esc_html( PWLPAR_PLUGIN_SHORT_NAME ) );
                        ?>
                    </div>
                </div>
            </div>
            <div id="pwlpara-welcome-contents">
                <div class="pwlpara-stepper-wrapper">
                    <div class="pwlpara-stepper-item active" data-step="1">
                        <div class="pwlpara-step-counter">1</div>
                        <div class="pwlpara-step-name"><?php esc_html_e( 'Rewards program', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></div>
                    </div>
                    <div class="pwlpara-stepper-item" data-step="2">
                        <div class="pwlpara-step-counter">2</div>
                        <div class="pwlpara-step-name"><?php esc_html_e( 'Bonus points', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></div>
                    </div>
                    <div class="pwlpara-stepper-item" data-step="3">
                        <div class="pwlpara-step-counter">4</div>
                        <div class="pwlpara-step-name"><?php esc_html_e( 'Offers', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></div>
                    </div>
                </div>

                <div class="pwlpara-welcome-step" data-step="1">
                    <fieldset>
                        <div class="pwlpara-fieldset">
                            <div class="pwlpara-welcome-instructions">
                                <?php
                                    esc_html_e( 'This wizard will guide you through the initial set up process. Settings can be changed at any time.', 'pw-loyalty-points-and-rewards-for-woocommerce' );
                                ?>
                            </div>
                            <span class="pwlpara-fieldset-title">
                                <?php esc_html_e( 'Program name', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>
                            </span>
                            <div class="pwlpara-form-field">
                                <input type="text" id="pwlpara-program-name" name="program_name" value="<?php echo esc_attr( pwlpar_program_name() ); ?>" style="width: 250px;" required>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="pwlpara-fieldset">
                            <span class="pwlpara-fieldset-title">
                                <?php esc_html_e( 'Earning points', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>
                            </span>
                            <?php echo wp_kses_post( wc_help_tip( esc_html__( 'These amounts can be overridden by Category or by Product in the Pro version.', 'pw-loyalty-points-and-rewards-for-woocommerce' ) ) ); ?>
                            <div class="pwlpara-form-field">
                                <?php echo wp_kses_post( get_woocommerce_currency_symbol() ); ?><input type="text" id="pwlpara-welcome-reward-value" name="reward_value" class="pwlpara-reward-number wc_input_price" value="<?php echo esc_attr( pwlpar_format_price( pwlpar_reward_value() ) ); ?>">
                                <span>=</span>
                                <input type="number" id="pwlpara-welcome-reward-points" name="reward_points" class="pwlpara-reward-number" min="1" value="<?php echo esc_attr( pwlpar_format_points( pwlpar_reward_points() ) ); ?>">
                                <span><?php esc_html_e( 'points', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></span>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="pwlpara-welcome-step" data-step="2" style="display: none;">
                    <fieldset>
                        <div class="pwlpara-fieldset">
                            <div class="pwlpara-welcome-instructions">
                                <?php
                                    esc_html_e( 'Incentivize customers to join your loyalty program by offering bonus points upon enrollment.', 'pw-loyalty-points-and-rewards-for-woocommerce' );
                                ?>
                            </div>
                            <span class="pwlpara-fieldset-title">
                                <?php esc_html_e( 'Sign up bonus', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>
                            </span>
                            <?php echo wp_kses_post( wc_help_tip( esc_html__( 'Points that are awarded to the customer when they initially sign up.', 'pw-loyalty-points-and-rewards-for-woocommerce' ) ) ); ?>
                            <div class="pwlpara-form-field">
                                <input type="number" name="signup_bonus_points" class="pwlpara-reward-number" min="0" value="<?php echo esc_attr( pwlpar_signup_bonus_points() ); ?>">
                                <span><?php esc_html_e( 'points', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></span>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="pwlpara-welcome-step" data-step="3" style="display: none;">
                    <fieldset>
                        <div class="pwlpara-fieldset">
                            <div class="pwlpara-welcome-instructions">
                                <?php
                                    esc_html_e( 'Here are a few sample offers to get you started. Unselect any you don’t want—you can always edit or delete them later. More offer types are available in the Pro version, including percentage discounts, bonus points, and free products.', 'pw-loyalty-points-and-rewards-for-woocommerce' );
                                ?>
                            </div>
                            <div id="pwlpara-welcome-offers-list">
                                <?php
                                    $offers = pwlpara_get_welcome_offers();
                                    foreach ( $offers as $index => $offer ) {
                                        ?>
                                        <label for="pwlpara-welcome-offer-<?php echo esc_attr( $index ); ?>" class="pwlpara-welcome-offer pwlpar-noselect" data-point-multiplier="<?php echo esc_attr( $offer->get_points( 'edit' ) / pwlpar_reward_points() ); ?>">
                                            <div>
                                                <input type="checkbox" id="pwlpara-welcome-offer-<?php echo esc_attr( $index ); ?>" class="pwlpara-welcome-offer-checkbox" name="welcome_offers[]" value="<?php echo esc_attr( $index ); ?>" checked>
                                            </div>
                                            <div>
                                                <div class="pwlpara-welcome-offer-title"><?php echo wp_kses_post( $offer->get_title() ); ?></div>
                                                <div><?php echo wp_kses_post( $offer->get_description() ); ?></div>
                                            </div>
                                            <div style="flex-grow: 1; text-align: right;">
                                                <?php echo wp_kses_post( $offer->get_button_title() ); ?> <?php esc_html_e( 'Points', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>
                                            </div>
                                        </label>
                                        <?php
                                    }
                                ?>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div id="pwlpara-welcome-footer-container">
                <div id="pwlpara-welcome-form-message"></div>
                <div id="pwlpara-welcome-form-buttons-container">
                    <div id="pwlpara-welcome-skip">
                        <a href="<?php echo esc_url( pwlpara_admin_url( 'settings', array( 'skip_setup' => true ) ) ); ?>" id="pwlpara-welcome-skip-button"><?php esc_html_e( 'Skip', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></a>
                    </div>
                    <div id="pwlpara-welcome-buttons" class="pwlpar-noselect">
                        <a href="#" id="pwlpara-welcome-prev" class="button button-secondary" style="display: none;"><?php esc_html_e( 'Previous', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></a>
                        <a href="#" id="pwlpara-welcome-next" class="button button-primary"><?php esc_html_e( 'Next', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?></a>
                        <input type="submit" id="pwlpara-welcome-done" class="button button-primary" style="display: none;" value="<?php echo esc_attr( 'Finish', 'pw-loyalty-points-and-rewards-for-woocommerce' ); ?>">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<?php
