```php
<?php

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

/**
 * Total Images
 */
$rizwan_attachment_counts =
wp_count_posts(
'attachment'
);

$rizwan_total_images =
isset(
$rizwan_attachment_counts->inherit
)
? absint(
$rizwan_attachment_counts->inherit
)
: 0;

/**
 * Get All Image IDs
 */
$rizwan_image_posts = get_posts([

    'post_type'      => 'attachment',

    'post_mime_type' => 'image',

    'post_status'    => 'inherit',

    'posts_per_page' => 500,

    'fields'         => 'ids'

]);

/**
 * SEO Score Calculation
 */
$rizwan_total_score = 0;

$rizwan_total_score_images = 0;

/**
 * Missing Alt Counter
 */
$rizwan_missing_alt = 0;

/**
 * WebP Savings
 */
$rizwan_webp_saved = 0;

/**
 * Loop Images
 */
foreach ($rizwan_image_posts as $rizwan_image_id) {

    /**
     * SEO Score
     */
    $rizwan_score = get_post_meta(
        $rizwan_image_id,
        'rizwan_image_alt_text_webp_optimizer_score',
        true
    );

    if ($rizwan_score !== '') {

        $rizwan_total_score += absint($rizwan_score);

        $rizwan_total_score_images++;
    }

    /**
     * Missing Alt Text
     */
    $rizwan_alt_text = get_post_meta(
        $rizwan_image_id,
        '_wp_attachment_image_alt',
        true
    );

    if (
trim(
(string)
$rizwan_alt_text
) === ''
) {

        $rizwan_missing_alt++;
    }

    /**
     * Get File Path
     */
    $rizwan_file_path = get_attached_file(
        $rizwan_image_id
    );

    if (!$rizwan_file_path) {
        continue;
    }

    /**
     * Skip WebP Originals
     */
    $rizwan_extension = strtolower(
        pathinfo(
            $rizwan_file_path,
            PATHINFO_EXTENSION
        )
    );

    if ($rizwan_extension === 'webp') {
    continue;
}

    /**
     * WebP Path
     */
    $rizwan_webp_path = preg_replace(
        '/\.(jpg|jpeg|png)$/i',
        '.webp',
        $rizwan_file_path
    );

    /**
     * Calculate WebP Saved Size
     */
    if (
        file_exists($rizwan_file_path) &&
        file_exists($rizwan_webp_path)
    ) {

        $rizwan_original_size = filesize(
            $rizwan_file_path
        );

        $rizwan_webp_size = filesize(
            $rizwan_webp_path
        );

        $rizwan_saved = (
            $rizwan_original_size -
            $rizwan_webp_size
        );

        if ($rizwan_saved > 0) {

            $rizwan_webp_saved += $rizwan_saved;
        }
    }
}
    


/**
 * Average SEO Score
 */
$rizwan_average_score = 0;

if ($rizwan_total_score_images > 0) {

    $rizwan_average_score = round(
        $rizwan_total_score / $rizwan_total_score_images
    );
}

$rizwan_average_score = min(
100,
max(
0,
$rizwan_average_score
)
);

/**
 * Convert To MB
 */
$rizwan_webp_saved_mb = round(
    $rizwan_webp_saved / 1024 / 1024,
    2
);

?>

<div class="rizora-wrap">

    <div class="rizora-header">

        <h1>
        🚀 Rizwan Image Alt Text and WebP Optimizer
        </h1>

        <p>
            AI-powered image optimization for WordPress with Alt Text, WebP conversion, SEO scoring, and lazy loading.
        </p>

    </div>

    <div class="rizora-card-grid">

        <!-- Images Optimized -->
        <div class="rizora-card">

            <h2>
                Images Optimized
            </h2>

            <span>
                <?php echo esc_html($rizwan_total_images); ?>
            </span>

        </div>

        <!-- SEO Score -->
        <div class="rizora-card">

            <h2>
                SEO Score
            </h2>

            <span>

                <?php
                    echo esc_html(
$rizwan_average_score
);
                ?>%

            </span>

            <div class="rizora-progress">

                <div
                    class="rizora-progress-bar"
                    data-score="<?php
echo esc_attr(
absint(
$rizwan_average_score
)
);
?>">
                </div>

            </div>

        </div>

        <!-- WebP Saved -->
        <div class="rizora-card">

            <h2>
                WebP Saved
            </h2>

            <span>

                <?php
                    echo esc_html($rizwan_webp_saved_mb);
                ?> MB

            </span>

        </div>

        <!-- Missing Alt -->
        <div class="rizora-card">

            <h2>
                Missing Alt Tags
            </h2>

            <span>

                <?php
                    echo esc_html($rizwan_missing_alt);
                ?>

            </span>

        </div>

    </div>

</div>



<div class="rizora-chart-card">

    <h2>
        📊 SEO Analytics
    </h2>


<div class="rizora-chart-container">

    <canvas id="rizoraImageSeoAnalyticsChart"></canvas>

</div>

</div>

<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        const canvas =
        document.getElementById(
            'rizoraImageSeoAnalyticsChart'
        );

        if (!canvas) {
            return;
        }

        new Chart(
            canvas,
            {
                type: 'bar',

                data: {

                    labels: [
                        'Images',
                        'SEO Score',
                        'WebP Saved',
                        'Missing Alt'
                    ],

                    datasets: [

                        {
                            label: 'SEO Analytics',

                            data: [
                                <?php echo absint($rizwan_total_images); ?>,
                                <?php echo absint($rizwan_average_score); ?>,
                                <?php echo esc_js( round( $rizwan_webp_saved_mb * 10 ) ); ?>,
                                <?php echo absint($rizwan_missing_alt); ?>
                            ],

                            borderColor: '#2563eb',

                            backgroundColor:
                            'rgba(37,99,235,0.1)',

                            borderWidth: 3,

                            tension: 0.4,

                            fill: true
                        }
                    ]
                },

                options: {

                    responsive: true,

                    maintainAspectRatio: false,

                    plugins: {

                        legend: {
                            display: true
                        }
                    }
                }
            }
        );

    }
);

</script>