<?php

defined( 'ABSPATH' ) || exit;
if ( !smp_fs()->is_premium() && !smp_fs()->is_registered() && smp_fs()->is_activation_page() && !smp_fs()->is_anonymous_site() ) {
    smp_fs()->_connect_page_render();
}
?>

<div class="smp-dashboard-wrap">
    <div class="smp-dashboard-header">
        <div class="header-logo">
            <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS . '/images/multimedia-player-logo.png';
?>">
            <span><?php 
esc_html_e( 'Multimedia Player', 'soft-multimedia-player' );
?></span>
        </div>
        <p><?php 
esc_html_e( 'Most useful audio, video, and podcast player for WordPress. Supports major media sources, including local files, direct URLs, YouTube, and more.', 'soft-multimedia-player' );
?></p>

        <div class="smp-dashboard-menu">
            <div class="menu-item active" data-target="introduction">
                <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS;
?>/images/dashboard/getting-started/icon/introduction.svg" />
                <span><?php 
esc_html_e( 'Introduction', 'soft-multimedia-player' );
?></span>
            </div>

            <!-- Basic Usage -->
            <div class="menu-item" data-target="basic-usage">
                <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS;
?>/images/dashboard/getting-started/icon/basic_usage.svg" />
                <span><?php 
esc_html_e( 'Basic Usage', 'soft-multimedia-player' );
?></span>
            </div>

            <!-- Changelog -->
            <div class="menu-item" data-target="what-new">
                <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS;
?>/images/dashboard/getting-started/icon/changelog.svg" />
                <span><?php 
esc_html_e( 'Changelog', 'soft-multimedia-player' );
?></span>
            </div>

            <!-- help -->
            <div class="menu-item" data-target="help">
                <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS;
?>/images/dashboard/getting-started/icon/help.svg" />
                <span><?php 
esc_html_e( 'Help', 'soft-multimedia-player' );
?></span>
            </div>

            <!-- GET PRO -->
            <?php 
?>
                <div class="menu-item" data-target="get-pro">
                    <img src="<?php 
echo SOFT_MULTIMEDIA_PLAYER_ASSETS;
?>/images/dashboard/getting-started/icon/get_pro.svg" />

                    <span><?php 
esc_html_e( 'Get Pro', 'soft-multimedia-player' );
?></span>
                </div>
            <?php 
?>
        </div>
    </div>

    <div class="smp-dashboard-main">

        <?php 
include_once SOFT_MULTIMEDIA_PLAYER_INCLUDES . '/views/getting-started/introduction.php';
?>
        <?php 
include_once SOFT_MULTIMEDIA_PLAYER_INCLUDES . '/views/getting-started/basic-usage.php';
?>
        <?php 
include_once SOFT_MULTIMEDIA_PLAYER_INCLUDES . '/views/getting-started/what-new.php';
?>
        <?php 
include_once SOFT_MULTIMEDIA_PLAYER_INCLUDES . '/views/getting-started/help.php';
?>
        <?php 
include_once SOFT_MULTIMEDIA_PLAYER_INCLUDES . '/views/getting-started/get-pro.php';
?>

    </div>

</div>

<script>
    jQuery(document).on('ready', function() {
        jQuery('.smp-dashboard-menu .menu-item').on('click', function() {
            const target = jQuery(this).data('target');

            jQuery('.menu-item').removeClass('active');
            jQuery('.getting-started-content').removeClass('active');

            jQuery(this).addClass('active');
            jQuery('#' + target).addClass('active');
        });
    });
</script>