<?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 Structure', '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="current">
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/structure.svg');?>" alt="Structure Logo">
                </div>
                <div>
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/brush_grey.svg');?>" alt="Style Logo">
                </div>
                <div>
                    <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/template_grey.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="structure-form"> 
        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
            <div id="structure-block"> 
                <?php wp_nonce_field('swpanel_ai_structure'); ?>
                <input type="hidden" name="action" value="swpanel_ai_structure_form">
                <p><?php esc_html_e("Decide how you want your website to be organized. You can choose a simple one-page structure or a more complete site with several separate sections. Recommended for presentation pages, events, portfolios, or small businesses that don't need much content.", 'swpanel-ai'); ?></p>
                
                <div class="structure-options">
                    <label class="structure-card <?php echo ($structure_type == 'single') ? 'selected' : ''; ?>">
                        <input type="radio" name="page_type" value="single" <?php echo ($structure_type == 'single') ? 'checked' : ''; ?>>
                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/single.svg'); ?>" alt="Single Page">
                        <span class="title"><?php esc_html_e('Single Page', 'swpanel-ai'); ?></span>
                        <span><?php esc_html_e('Ideal for simple sites or personal projects. All content is displayed on a single page with sections such as "Home," "Services," and "Contact".', 'swpanel-ai'); ?></span>
                        <span><?php esc_html_e('Your visitors can easily scroll and view all the information without changing pages.', 'swpanel-ai'); ?></span>
                    </label>

                    <label class="structure-card <?php echo ($structure_type == 'multi') ? 'selected' : ''; ?>">
                        <input type="radio" name="page_type" value="multi" <?php echo ($structure_type == 'multi') ? 'checked' : ''; ?>>
                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../assets/img/multiple.svg'); ?>" alt="Multi Page">
                        <span class="title"><?php esc_html_e('Multi-Page', 'swpanel-ai'); ?></span>
                        <span><?php esc_html_e('Perfect for more complete and professional websites. Each section (Home, About Us, Services, Blog, Contact, etc.) is created on a separate page, allowing for better content organization.', 'swpanel-ai'); ?></span>
                        <span><?php esc_html_e('Recommended for businesses, online stores, or projects that need to display different types of information or services.', 'swpanel-ai'); ?></span>
                    </label>
                </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('9 steps remaining out of 9', 'swpanel-ai'); ?></div>
        </div>
        <div id="progress-bar">
            <div class="progress-step">
                <div class="circle">
                    <i class="fa fa-spinner fa-pulse"></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">
                    <i class="fa fa-times"></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-times"></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_structure_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>
