<?php
/**
 * Property Import Wizard Template - Exact Design
 *
 * @package Havenlytics
 * @since 2.0.0
 */

if (!defined('ABSPATH')) {
    exit;
}

$hvnly_demo_imported = get_option('hvnly_demo_properties_imported', false);
$hvnly_demo_import_count = get_option('hvnly_demo_properties_count', 0);

// Check if video tutorial has been dismissed for this user
$hvnly_video_dismissed = get_user_meta(get_current_user_id(), 'hvnly_video_tutorial_dismissed', true);
$hvnly_show_video_popup = !$hvnly_video_dismissed;
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo esc_html__('Property Import Wizard | Havenlytics', 'havenlytics'); ?></title>
    <?php wp_head(); ?>
</head>

<body>
    <!-- CSRF Token -->
    <input type="hidden" id="hvnly_csrf_token" value="<?php echo esc_attr(wp_create_nonce('hvnly_import_csrf')); ?>">

    <canvas id="confetti-canvas"></canvas>

    <!-- Video Tutorial Popup -->
    <?php if ($hvnly_show_video_popup) : ?>
    <div id="hvnly-video-tutorial-popup" class="hvnly-video-tutorial-overlay">
        <div class="hvnly-video-tutorial-container">
            <div class="hvnly-video-tutorial-header">
                <div class="hvnly-video-tutorial-header-icon">
                    <i class="fas fa-play-circle"></i>
                </div>
                <h3 class="hvnly-video-tutorial-title"><?php echo esc_html__('Quick Tutorial', 'havenlytics'); ?></h3>
                <button type="button" class="hvnly-video-tutorial-close" id="hvnlyVideoTutorialClose">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="hvnly-video-tutorial-body">
                <div class="hvnly-video-tutorial-player-wrapper">
                    <div class="hvnly-video-tutorial-player" id="hvnlyVideoPlayer">
                        <iframe id="hvnlyTutorialIframe" width="100%" height="100%"
                            src="https://www.youtube.com/embed/kLe3GFtoL-8?autoplay=1&enablejsapi=1&rel=0&modestbranding=1"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                        </iframe>
                    </div>
                </div>
                <p class="hvnly-video-tutorial-description">
                    <?php echo esc_html__('Watch this quick tutorial to learn how to import properties using the Property Setup Wizard.', 'havenlytics'); ?>
                    <br>
                    <a href="https://havenlytics.com/documentation/" target="_blank" rel="noopener noreferrer"
                        class="hvnly-video-tutorial-doc-link">
                        <i class="fas fa-book-open"></i>
                        <?php echo esc_html__('Need more details? Visit our documentation.', 'havenlytics'); ?>
                    </a>
                </p>
            </div>
            <div class="hvnly-video-tutorial-footer">
                <button type="button" class="hvnly-video-tutorial-dont-show" id="hvnlyVideoTutorialDontShow">
                    <i class="fas fa-eye-slash"></i>
                    <?php echo esc_html__("Don't show again", 'havenlytics'); ?>
                </button>
                <button type="button" class="hvnly-video-tutorial-get-started" id="hvnlyVideoTutorialGetStarted">
                    <i class="fas fa-arrow-right"></i>
                    <?php echo esc_html__('Get Started', 'havenlytics'); ?>
                </button>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <div class="hvnly--property--import-celebration" id="celebrationModal">
        <div class="hvnly--property--import-celebration-content">
            <h2 class="hvnly--property--import-celebration-title">
                <?php echo esc_html__('Import Complete! 🎉', 'havenlytics'); ?></h2>
            <p class="hvnly--property--import-celebration-description">
                <?php echo esc_html__('Your properties have been successfully imported! The import process is now complete.', 'havenlytics'); ?>
            </p>
            <div class="hvnly--property--import-celebration-actions">
                <button class="hvnly--property--import-completion-button primary" id="celebration-close">
                    <i class="fas fa-check"></i>
                    <?php echo esc_html__('Awesome!', 'havenlytics'); ?>
                </button>
            </div>
        </div>
    </div>

    <div class="hvnly--property--import-navbar">
        <div class="hvnly--property--import-navbar-left">
            <h1 class="hvnly--property--import-navbar-title">
                <?php echo esc_html__('Quick Property Setup', 'havenlytics'); ?></h1>
        </div>
        <div class="hvnly--property--import-navbar-right">
            <a href="#" class="hvnly--property--import-doc-button">
                <i class="fas fa-book"></i>
                <?php echo esc_html__('Documentation', 'havenlytics'); ?>
            </a>
            <a href="<?php echo esc_url(admin_url('edit.php?post_type=hvnly_property')); ?>"
                class="hvnly--property--import-close-button">
                <i class="fas fa-times"></i>
                <?php echo esc_html__('Close Wizard', 'havenlytics'); ?>
            </a>
        </div>
    </div>

    <div class="hvnly--property--import-wrapper">
        <div class="hvnly--property--import-step-progress-container">
            <div class="hvnly--property--import-step-progress">
                <div class="hvnly--property--import-step-progress-bar" id="stepProgressBar"></div>
                <div class="hvnly--property--import-step-item active" data-step="1">
                    <div class="hvnly--property--import-step-icon">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div class="hvnly--property--import-step-title">
                        <?php echo esc_html__('Department & Taxonomies', 'havenlytics'); ?></div>
                </div>
                <div class="hvnly--property--import-step-item" data-step="2">
                    <div class="hvnly--property--import-step-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="hvnly--property--import-step-title"><?php echo esc_html__('Location', 'havenlytics'); ?>
                    </div>
                </div>
                <div class="hvnly--property--import-step-item" data-step="3">
                    <div class="hvnly--property--import-step-icon">
                        <i class="fas fa-image"></i>
                    </div>
                    <div class="hvnly--property--import-step-title"><?php echo esc_html__('Media', 'havenlytics'); ?>
                    </div>
                </div>
                <div class="hvnly--property--import-step-item" data-step="4">
                    <div class="hvnly--property--import-step-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="hvnly--property--import-step-title">
                        <?php echo esc_html__('Preferences', 'havenlytics'); ?></div>
                </div>
            </div>
        </div>

        <div class="hvnly--property--import-content-card">
            <div class="hvnly--property--import-step-content" id="step-content"></div>
        </div>

        <div class="hvnly--property--import-navigation">
            <button class="hvnly--property--import-nav-button prev" id="prevStep">
                <i class="fas fa-arrow-left"></i>
                <?php echo esc_html__('Previous', 'havenlytics'); ?>
            </button>
            <button class="hvnly--property--import-nav-button skip" id="skipStep">
                <i class="fas fa-forward"></i>
                <?php echo esc_html__('Skip Now', 'havenlytics'); ?>
            </button>
            <button class="hvnly--property--import-nav-button next" id="nextStep">
                <?php echo esc_html__('Next', 'havenlytics'); ?>
                <i class="fas fa-arrow-right"></i>
            </button>
        </div>
    </div>

    <?php wp_footer(); ?>
</body>

</html>