<?php
  defined('ABSPATH') || die('No direct access.');
?>

<div class="swpanel-full-body">
    <div class="swpanel-header-full">
        <img class="image_full" src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/logo.svg');?>" alt="SWPanel Logo">
        <img class="image_mobile" src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/logo_symbol.svg');?>" alt="SWPanel Logo">
        <h1><?php esc_html_e('Choose Your Website Patterns', 'swpanel-ai');?></h1>
        <div id="right-header">
            <div id="steps">
                <div id="completed">
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/concept.svg');?>" alt="Concept Logo">
                </div>
                <div id="completed">
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/structure.svg');?>" alt="Structure Logo">
                </div>
                <div id="completed">
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/brush.svg');?>" alt="Style Logo">
                </div>
                <div id="current">
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/template.svg');?>" alt="Template Logo">
                </div>
            </div>
            <?php if ( get_option('swpanel_ai_redirect', 0 ) >= 1 ) : ?>
                <a href="<?php echo esc_url(admin_url()); ?>">
                    <div id="exit">
                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/x.svg');?>" alt="Exit Logo">
                    </div>
                </a>
            <?php endif; ?>
        </div>
    </div>

    <div id="template-form">
        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
            <div id="template-block">
                <?php wp_nonce_field('swpanel_ai_template'); ?>
                <input type="hidden" name="action" value="swpanel_ai_template_form">
                <div id="iframe-grid-flex">
                    <p><?php esc_html_e('Explore the different design options available. Each template offers a unique style for how your website will look. Click on any pattern to preview it in real time.', 'swpanel-ai');?></p>
                    <div id="iframe-grid">
                    </div>
                </div>
                <div id="iframe-preview-container">
                    <h1><?php esc_html_e('See how it looks in the preview', 'swpanel-ai');?></h1>
                    <?php if ( $structure !== 'single' ) : ?>
                        <p><?php esc_html_e('The preview is fully interactive. You can scroll, click menus, and navigate between pages as if you were browsing the final website.', 'swpanel-ai');?></p>
                    <?php else : ?>
                        <p><?php esc_html_e('This preview shows a visual example of how your one-page website will look. You can scroll to see all sections.', 'swpanel-ai');?></p>
                    <?php endif; ?>
                    <iframe id="iframe-preview" src=""></iframe>
                </div>
            </div>

            <div class="form-buttons">
                <div class="left">
                    <button type="submit" name="form_action" id="back-button" class="blue-button" value="back">
                            <?php esc_html_e('Back', 'swpanel-ai'); ?>
                    </button>
                </div>
                <div class="right">
                    <button type="submit" name="form_action" id="continue-button" class="green-button" value="continue">
                        <?php esc_html_e('Continue', 'swpanel-ai'); ?>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div id='loading'>
        <div id="chart-block">
            <div id="chart-container"></div>
            <div id="chart-text"><?php esc_html_e('7 steps remaining out of 9', 'swpanel-ai'); ?></div>
        </div>
        <div id="progress-bar">
            <div class="progress-step">
                <div class="circle completed">
                    <i class="fa fa-check"></i>
                </div>
                <div class="label"><?php esc_html_e('Generating a unique description and selecting relevant keywords', 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle completed">
                    <i class="fa fa-check"></i>
                </div>
                <div class="label"><?php esc_html_e("Looking for the best ideas for your site's titles and images", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-spinner fa-pulse"></i>
                </div>
                <div class="label"><?php esc_html_e('Building preview pages', 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Waiting for the process to start", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Retrieving the selected page structure", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Removing previously created pages", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Building the header, footer, and navigation menu", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Generating content for each section", 'swpanel-ai'); ?></div>
            </div>
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-times"></i>
                </div>
                <div class="label"><?php esc_html_e("Creating the pages and sections", 'swpanel-ai'); ?></div>
            </div>
        </div>
    </div>

    <div id="load-error">
        <div class="icon-message">
            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/box_error.svg');?>">
        </div>
        <div class="content-message">
            <h1><?php esc_html_e('Error', 'swpanel-ai'); ?></h1>
            <p id="message-error"></p>
        </div>
        <div class="form-buttons">
            <div class="left">
                <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
                    <?php wp_nonce_field( 'swpanel_ai_back' ); ?>
                    <input type="hidden" name="action" value="swpanel_ai_template_back">
                    <button type="submit" class="blue-button">
                        <?php esc_html_e( 'Back', 'swpanel-ai' ); ?>
                    </button>
                </form>
            </div>
            <div class="right">
                <button id="retry-load" class="green-button"><?php esc_html_e('Retry', 'swpanel-ai'); ?></button>
            </div>
        </div>
    </div>

</div>
