<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$fooconvert_demos_created = fooconvert_get_setting( 'demo_content' ) === 'on';

if ( fooconvert_is_dashboard_panel_hidden( 'getting-started' ) ) {
    return;
}
?>
<div class="fooconvert-panel" data-panel="getting-started">
    <div class="fooconvert-panel-section fooconvert-panel-section-flex">
        <h2>🚀 <?php esc_html_e( 'Getting Started with Popups!', 'fooconvert' ); ?></h2>
        <div class="fooconvert-panel-section-right">
            <a class="fooconvert-hide-panel" data-panel="getting-started" href="#hide"
               title="<?php esc_html_e( 'Hide Panel', 'fooconvert' ); ?>">
                <span class="dashicons dashicons-no-alt"></span>
            </a>
        </div>
    </div>
    <?php if ( !$fooconvert_demos_created ) : ?>
        <div class="fooconvert-panel-section">
            <p>
                <?php esc_html_e( 'The easiest way to get started is by creating demo content, which will create 7 draft popups: 2 bars, 3 flyouts, and 2 overlays.', 'fooconvert' ); ?>
                <strong><?php esc_html_e( 'It\'s also the best way to see the top performers in action!', 'fooconvert' ); ?> </strong>
            </p>
            <p class="fooconvert-flex fooconvert-create-demo-container">
                <button class="button button-primary button-large fooconvert-create-demo-popups">
                    <?php esc_html_e( 'Create Demo Content', 'fooconvert' ); ?>
                </button>
                <span class="spinner fooconvert-create-demo-popups-spinner"></span>
            </p>
            <p>
                <strong><?php esc_html_e( 'Do not worry', 'fooconvert' ); ?></strong> -
                <?php esc_html_e( 'the demo content will NOT be visible to your site visitors :)', 'fooconvert' ); ?>
            </p>
        </div>
    <?php else : ?>
        <div class="fooconvert-panel-section">
            <p>
                <?php esc_html_e( 'Awesome, you have already created the demo content!', 'fooconvert' ); ?> </strong>
            </p>
            <p class="fooconvert-flex fooconvert-delete-demo-container">
                <button class="button button-secondary button-large fooconvert-delete-demo-popups">
                    <?php esc_html_e( 'Delete Demo Content', 'fooconvert' ); ?>
                </button>
                <span class="spinner fooconvert-delete-demo-popups-spinner"></span>
            </p>
            <p>
                <?php esc_html_e( 'Deleting the demo content will also delete all stats.', 'fooconvert' ); ?>
            </p>
        </div>
    <?php endif; ?>
    <div class="fooconvert-panel-section">
        <h3 class="fooconvert-center"><?php esc_html_e( 'OR', 'fooconvert' ); ?></h3>
        <p>
            <?php esc_html_e( 'Create your own unique popup by following these simple steps:', 'fooconvert' ); ?>
        </p>
        <ol class="fooconvert-ordered-list">
            <li>
                <a href="<?php echo esc_url( fooconvert_admin_url_popup_new() ); ?>"
                    target="_blank"><?php esc_html_e( 'Create a new popup!', 'fooconvert' ); ?></a>
            </li>
            <li>
                <?php esc_html_e( 'Select a pre-made template.', 'fooconvert' ); ?>
            </li>
            <li>
                <?php esc_html_e( 'Customize the look and feel &amp; update the content!', 'fooconvert' ); ?>
            </li>
            <li>
                <?php esc_html_e( 'Set the Display Rules.', 'fooconvert' ); ?>
                (<?php esc_html_e( 'e.g. "Entire Site" or "Front Page"', 'fooconvert' ); ?>)
            </li>
            <li>
                <?php esc_html_e( 'Select an Open Trigger.', 'fooconvert' ); ?>
                (<?php esc_html_e( 'e.g. on scroll or exit intent', 'fooconvert' ); ?>)
            </li>
            <li>
                <?php esc_html_e( 'Publish and you\'re done!', 'fooconvert' ); ?>
            </li>
        </ol>
    </div>
</div>
