<?php
/* Prohibit direct script loading */
defined('ABSPATH') || die('No direct script access allowed!');
if (!class_exists('WpmsProDashboard')) {
    require_once(WPMETASEO_ADDON_PLUGIN_DIR . '/inc/class.metaseo-dashboard.php');
}
$site_name              = preg_replace('/(^(http|https):\/\/[w]*\.*)/', '', get_site_url());
$pieces                 = explode('/', $site_name);
$url                    = 'http://www.alexa.com/siteinfo/' . $pieces[0];
$dashboard              = new WpmsProDashboard();
$options_dashboard      = get_option('options_dashboard');
wp_enqueue_style('wpms-tippy-style');
wp_enqueue_style('wpms-mytippy-style');
wp_enqueue_script('wpms-tippy-core');
wp_enqueue_script('wpms-tippy');
wp_enqueue_script('wpms-my-tippy');


// get web screenshot
$upload_dir = wp_upload_dir();
$server_check = parse_url(home_url());
if (isset($server_check['host']) && $server_check['host'] === 'localhost') {
    $web_screenshot = WPMETASEO_ADDON_PLUGIN_URL . 'assets/images/wpms-web-screenshot.jpg';
} else {
    if (!file_exists($upload_dir['basedir'] . '/wpms-web-screenshot.jpg')) {
        $urlboxUrl = $dashboard::thumbalizr();
        if ($urlboxUrl === 'https://ps.w.org/wp-meta-seo/assets/banner-772x250.png') {
            $web_screenshot = 'https://ps.w.org/wp-meta-seo/assets/banner-772x250.png';
        } else {
            // phpcs:ignore Generic.PHP.NoSilencedErrors.Discouraged -- Fix warning in some case
            $content = @file_get_contents($urlboxUrl);
            if ($content) {
                file_put_contents($upload_dir['basedir'] . '/wpms-web-screenshot.jpg', $content);
                $web_screenshot = $upload_dir['baseurl'] . '/wpms-web-screenshot.jpg';
            } else {
                $web_screenshot = 'https://ps.w.org/wp-meta-seo/assets/banner-772x250.png';
            }
        }
    } else {
        $web_screenshot = $upload_dir['baseurl'] . '/wpms-web-screenshot.jpg';
    }
}
?>
<div class="min-h-screen p-8 bg-base-200">
  <div class="max-w-7xl mx-auto space-y-4">
      <h1 class="text-3xl font-bold"><?php esc_html_e('SEO Dashboard', 'wpmsPro'); ?></h1>
    <div class="grid grid-cols-1 md:grid-cols-5 md:gap-x-4 gap-y-4 ">
        <div class="flex flex-col gap-y-4 md:col-span-2">
            <div class="rdju-card bg-base-100 shadow-sm w-full">
              <div class="rdju-card-body p-3">
                  <div class="">
                    <a href="<?php echo esc_url(home_url()) ?>" target="_blank" class="flex flex-cold justify-between ">
                        <span class="rdju-link rdju-link-primary font-bold"><?php echo esc_url(home_url()) ?></span>
                        <i class="material-icons text-primary-500">open_in_new</i>
                    </a>
                    
                  </div>
              </div>
            </div>
            <div class="rdju-card h-full bg-base-100 shadow-sm justify-center items-center max-w-3xl">
              <div class="rdju-card-body justify-center">
                  <div class="relative">
                      <img class="max-w-full h-auto site_img" src="<?php echo esc_url($web_screenshot) ?>">
                    <button class="wpms-reload-web-btn rdju-btn rdju-btn-primary font-semibold absolute right-4 bottom-4" >
                        <span><?php esc_html_e('Reload', 'wpmsPro'); ?></span>
                        <i class="material-icons">refresh</i>
                    </button>
                  </div>
                  <img width="30px" class="page-loader wpms-no-maxheight" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>">
              </div>
            </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm wpms-seo-health md:col-span-3">
          <div class="rdju-card-body flex flex-col items-center">
              <div class="rdju-radial-progress"  aria-valuenow="70" role="rdju-progressbar">
                <div class="flex flex-col rdju-radial-content">
                    <div class="flex justify-center items-end text-neutral-950">
                        <span class="text-3xl lg:!text-5xl font-bold wpms-overall-progress">0</span>
                        <span class="text-lg lg:!text-2xlfont-bold">%</span>
                    </div>
                    <div class="flex flex-col justify-center items-center wpms-overall-text">
                        <span class="text-sm lg:!text-2xl font-bold"><?php esc_html_e('SEO Health :', 'wpmsPro') ?></span>
                        <span class="text-sm lg:!text-2xl font-bold wpms-seo-health-text"><?php esc_html_e('Bad', 'wpmsPro') ?></span>
                    </div>
                </div>
              </div>
            <div class="w-full md:max-w-lg lg:max-w-xl md:min-w-2xs lg:min-w-xs flex flex-col gap-y-2 text-xs lg:!text-lg">
                <h3 class="mb-0 !text-xl lg:!text-2xl font-semibold"><?php esc_html_e('Breakdown', 'wpmsPro') ?></h3>
                <span class="flex justify-between items-center">
                    <span class="flex gap-x-2 items-center">
                        <i class="material-icons wpms-url-structure-icon">sync</i>
                        <span class="max-w-36 md:max-w-full"><?php esc_html_e('URL Structure & Sitemap', 'wpmsPro') ?></span>
                    </span>
                    <span class="wpms-url-structure-progress">0%</span>
                </span>
                <span class="flex justify-between items-center">
                    <span class="flex gap-x-2 items-center">
                        <i class="material-icons wpms-content-optimization-icon">sync</i>
                        <span class="max-w-36 md:max-w-full"><?php esc_html_e('Content Optimization', 'wpmsPro') ?></span>
                    </span>
                    <span class="wpms-content-optimization-progress">0%</span>
                </span>
                <span class="flex justify-between items-center">
                    <span class="flex gap-x-2 items-center">
                        <i class="material-icons wpms-img-seo-accessability-icon">sync</i>
                        <span class="max-w-36 md:max-w-full"><?php esc_html_e('Image SEO & Accessibility', 'wpmsPro') ?></span>
                    </span>
                    <span class="wpms-img-seo-accessability-progress">0%</span>
                </span>
                <span class="flex justify-between items-center">
                    <span class="flex gap-x-2 items-center">
                        <i class="material-icons wpms-duplicate-category-icon">sync</i>
                        <span class="max-w-36 md:max-w-full"><?php esc_html_e('Duplicate Content & Category SEO', 'wpmsPro') ?></span>
                    </span>
                    <span class="wpms-duplicate-category-progress">0%</span>
                </span>
            </div>
          </div>
        </div>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('options-permalink.php')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-primary-20">
                    <i class="material-icons text-primary-400">link</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('URL Rewrite', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('It’s better using a permalink structure that is adding in your URL the category name and content title. This parameter can be changed in Settings > Permalinks WordPress menu. Tag recommended is %category%/%postname%', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-url-rewrite">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Optimized at: ', 'wpmsPro'); ?><span class="wpms-progress-text">0%</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_content_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-red-20">
                    <span class="text-red-500 font-bold text-xl">T</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Content Page Titles', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Content Page Titles are displayed in search engine results
                  as a page title. It’s a good thing for SEO to have some custom and attractive ones.
                   Be sure to fill at least the met information on your most popular pages', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-meta-title">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Meta title filled: ', 'wpmsPro'); ?><span class="wpms-progress-text">0/0 = 0%</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_content_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-green-20 ">
                    <i class="material-icons-outlined text-green-500">subtitles</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Meta Description', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Meta descriptions are displayed in search
                  engine results as a page description. It’s a good thing for SEO to have some
                   custom and attractive ones. Be sure to fill at least the meta information on
                    your most popular pages.', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-meta-desc">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Meta description filled: ', 'wpmsPro'); ?><span class="wpms-progress-text">0/0 = 0%</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('edit.php')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-yellow-10 ">
                    <i class="material-icons-outlined text-yellow-600">article</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Fresh Content', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('It is highly recommended to update or add new content on
                  your website quite frequently. At least 3 updated or new
                   content per month would be great :)', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-fresh-content">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Last month new or updated content: ', 'wpmsPro'); ?><span class="wpms-progress-text">0</span><?php esc_html_e(' elements', 'wpmsPro'); ?>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_image_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-blue-10 ">
                    <i class="material-icons text-blue-500">image_search</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Image Alt and Titles', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('We recommend to use both alt and title text. The main advantage is that it helps search engines discover and index your website images. Plus, those tags improve the accessibility of your website by giving more information about your images. Use our bulk image tool to quickly check and fix that', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-img-alt-title">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Image data filled (in content): ', 'wpmsPro'); ?><span class="wpms-progress-text">0/0 = 0%</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_image_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-primary-20 ">
                    <i class="material-icons text-primary-400">photo_size_select_large</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('HTML, Image Resizing', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Display image at its natural size, do not use HTML resize.
                  It happens usually when you use handles to resize an image. You have a bulk
                   edition tool to fix that.', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-img-resize">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('HTML image resized (using handles) count: ', 'wpmsPro'); ?><span class="wpms-progress-text">0</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_content_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-red-10 ">
                    <i class="material-icons text-red-500">dynamic_feed</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Duplicate meta titles', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Check for duplicate meta titles in your content. Make sure your meta titles are unique in each content.', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-duplicate-title">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Duplicate Meta Titles: ', 'wpmsPro'); ?><span class="wpms-progress-text">0</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_content_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-yellow-10 ">
                    <i class="material-icons text-yellow-600">dynamic_feed</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Duplicate meta description', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Check for duplicate meta descriptions in your content. Make sure your meta descriptions are unique in each content.', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-duplicate-desc">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <?php esc_html_e('Duplicate Meta Descriptions: ', 'wpmsPro'); ?><span class="wpms-progress-text">0</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_google_sitemap')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-primary-20 ">
                    <i class="material-icons text-primary-500">code</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('XML Sitemap', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
              <div class="flex justify-center items-center h-6 w-6 ">
              <i class="material-icons -rotate-45 text-primary-500">link</i>
              </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('It is recommended to generate a XML sitemap and submit it to the Google Search Console', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-xml-sitemap <?php (get_option('wpms_sitemap_submit', false)) ? esc_html_e('text-green-600', 'wpmsPro') : esc_html_e('text-red-600', 'wpmsPro') ?>">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <?php if (get_option('wpms_sitemap_submit', false)) : ?>
                            <i class="material-icons">check_circle</i>
                      <?php else : ?>
                            <i class="material-icons">cancel</i>
                      <?php endif; ?>
                  </span>
                  <div class="text-xs font-semibold">
                      <span class="wpms-progress-text <?php (get_option('wpms_sitemap_submit', false)) ? esc_html_e('text-green-600', 'wpmsPro') : esc_html_e('text-red-600', 'wpmsPro') ?>">
                          <?php
                            if (get_option('wpms_sitemap_submit', false)) {
                                  esc_html_e('Sitemap submited', 'wpmsPro');
                            } else {
                                  esc_html_e('Sitemap not submit', 'wpmsPro');
                            }
                            ?>
                      </span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1 <?php (get_option('wpms_sitemap_submit', false)) ? esc_html_e('text-green-600', 'wpmsPro') : esc_html_e('text-red-600', 'wpmsPro') ?>"
                value="<?php echo (get_option('wpms_sitemap_submit', false)) ? 100 : 0 ?>"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center justify-between rdju-dashboard-title cursor-pointer" data-redirect-link="<?php echo esc_url(admin_url('admin.php?page=metaseo_category_meta')); ?>">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded  bg-blue-20 ">
                    <i class="material-icons-outlined text-blue-500">folder</i>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Categories Meta', 'wpmsPro'); ?></h2>
              </div>
              <div class="items-center rdju-card-link">
                  <div class="flex justify-center items-center h-6 w-6 ">
                    <i class="material-icons -rotate-45 text-primary-500">link</i>
                  </div>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Edit meta titles and descriptions for all category types (posts, products, custom) to enhance category page SEO.', 'wpmsPro'); ?>
            </p>
            <div class="mt-4 space-y-2 wpms-category-meta">
                <div class="text-sm font-medium flex gap-x-2 mb-0 items-center">
                  <span class="wpms-progress-icon flex items-center">
                      <img style="width:24px;height:min-content;" src="<?php echo esc_url(WPMETASEO_ADDON_PLUGIN_URL . '/assets/images/loading.gif') ?>" />
                  </span>
                  <div class="text-xs font-semibold">
                      <span class="wpms-progress-text"><?php esc_html_e('Meta title filled: ', 'wpmsPro'); ?>0/16 = 0%;<br><?php esc_html_e('Meta description filled: ', 'wpmsPro'); ?>0/16 = 0%;</span>
                  </div>
              </div>
              <progress
                class="rdju-progress wpms-progress-bar w-full h-1"
                value="0"
                max="100"
              ></progress>
            </div>
          </div>
        </div>
        
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-blue-10">
                    <span class="text-primary-400 font-bold text-xl">G</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Google search console', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Connect WP Meta SEO and the Google Search Console to get Google keywords recommendation while writing your content!', 'wpmsPro'); ?>
            </p>
            <div class="w-24">
                <a target="__blank" href="<?php echo esc_url(admin_url('admin.php?page=metaseo_settings&tab=web#search_console')); ?>" class="!rdju-btn !rdju-btn-outline !rdju-btn-primary">
                    <?php esc_html_e('Settings', 'wpmsPro'); ?>
                </a>
            </div>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-red-10">
                    <span class="text-red-500 font-bold text-xl">G</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Google local business', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Google My Business is a free and easy-to-use tool for businesses and organizations to manage their online presence across Google, including Search and Maps', 'wpmsPro'); ?>
            </p>
            <div class="w-24">
                <a target="__blank" href="<?php echo esc_url(admin_url('admin.php?page=metaseo_settings&tab=web#local_business')); ?>" class="!rdju-btn !rdju-btn-outline !rdju-btn-primary">
                    <?php esc_html_e('Settings', 'wpmsPro'); ?>
                </a>
            </div>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-blue-10">
                    <span class="text-blue-500 font-bold text-xl">A</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('404 Automatic Index', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Activate the 404 error automatic index to record all internal and external 404 errors along with hits, source, text...', 'wpmsPro'); ?>
            </p>
            <div class="w-24">
                <a target="__blank" href="<?php echo esc_url(admin_url('admin.php?page=metaseo_settings&tab=web#redirections_404')); ?>" class="!rdju-btn !rdju-btn-outline !rdju-btn-primary">
                    <?php esc_html_e('Settings', 'wpmsPro'); ?>
                </a>
            </div>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-yellow-10">
                    <span class="text-yellow-600 font-bold text-xl">W</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('WPML', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Manage your page SEO directly from the WordPress block editor, check at the bottom of your pages.WPML multilingual plugin optimized. Filter your content by language in the meta and image bulk edition. Generate sitemap by WPML languages', 'wpmsPro'); ?>
            </p>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-red-10">
                    <span class="text-red-500 font-bold text-xl">E</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('Elementor SEO', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Manage your page SEO directly from the Elementor builder in the left column of the editor.', 'wpmsPro'); ?>
            </p>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-green-10">
                    <span class="text-green-500 font-bold text-xl">W</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('WooCommerce', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Edit the meta information for the WooCommerce products category listing', 'wpmsPro'); ?>
            </p>
          </div>
        </div>
        
        <div class="rdju-card bg-base-100 shadow-sm">
          <div class="rdju-card-body">
            <div class="flex items-center">
              <div class="flex items-center gap-x-3">
                <div class="flex justify-center items-center h-12 w-12 rounded bg-yellow-10">
                    <span class="text-yellow-600 font-bold text-xl">D</span>
                </div>
                <h2 class="rdju-card-title !text-base !my-0"><?php esc_html_e('DIVI SEO', 'wpmsPro'); ?></h2>
              </div>
            </div>
            <p class="text-sm opacity-75 mt-2">
              <?php esc_html_e('Manage your page SEO directly from the DIVI admin builder, check at the bottom of your pages.', 'wpmsPro'); ?>
            </p>
          </div>
        </div>
    </div>
  </div>
  <span class="hidden text-yellow-600 text-red-600 text-green-600"></span>
</div>
