<?php

defined( 'ABSPATH' ) or die( 'Please don&rsquo;t call the plugin directly. Thanks :)' );

echo '<div id="seopress-page-speed-results" class="metabox-holder">';

    echo '<div id="postbox-container-1" class="postbox-container">';

        if ( get_transient( 'seopress_results_page_speed' ) !='' ) {
            //Init
            $seopress_page_speed_results = array();

            $seopress_page_speed_results = json_decode(get_transient( 'seopress_results_page_speed' ), true);
           
            if (isset($seopress_page_speed_results['responseCode']) && $seopress_page_speed_results['responseCode'] =='200') { //If Google Page Speed OK
                //Color Score
                if ($seopress_page_speed_results['ruleGroups']['SPEED']['score'] < '70') { //Low score
                    $seopress_page_speed_bar = '#F05050';
                } elseif ($seopress_page_speed_results['ruleGroups']['SPEED']['score'] >= '90') { //High scrore
                    $seopress_page_speed_bar = '#27C24C';
                } else {
                    $seopress_page_speed_bar = '#FAD733'; //Intermediate score
                }

                echo '<div class="wrap-seopress-score postbox">';

                    echo '<h2 class="hndle ui-sortable-handle"><span>'.__('Google Page Speed Score','wp-seopress-pro').'</span></h2>';

                    echo '<div class="inside">
                            <div class="main">';
                            echo '<div class="wrap-chart">';
                                echo '<div class="chart" data-percent="'.$seopress_page_speed_results['ruleGroups']['SPEED']['score'].'" data-scale-color="#CCC"><span>'.$seopress_page_speed_results['ruleGroups']['SPEED']['score'].'%</span></div>';

                                echo "<script>
                                        jQuery(function() {
                                            jQuery('.chart').easyPieChart({
                                                barColor: '".$seopress_page_speed_bar."',
                                                lineCap: 'square',
                                                lineWidth: '12',
                                                size: '200',
                                            });
                                        });
                                    </script>";
                            echo '</div>';
                            echo '<div class="wrap-info">';
                                echo '<div class="your-id"><span>'.__('URL: ','wp-seopress-pro').'</span>'.$seopress_page_speed_results['id'].'</div>';
                                echo '<div class="your-title"><span>'.__('Title: ','wp-seopress-pro').'</span>'.$seopress_page_speed_results['title'].'</div>';
                            echo '</div>';
                            echo '<div class="clearfix"></div>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
            echo '</div>';

            echo '<div id="postbox-container-2" class="postbox-container">';
                echo '<div class="wrap-seopress-score postbox">';

                    echo '<h2 class="hndle ui-sortable-handle"><span>'.__('Screenshot','wp-seopress-pro').'</span></h2>';
                    echo '<div class="inside">
                            <div class="main">';
                                echo '<div class="your-screenshot"><img width="'.$seopress_page_speed_results['screenshot']['width'].'" height="'.$seopress_page_speed_results['screenshot']['height'].'" src="data:'.$seopress_page_speed_results['screenshot']['mime_type'].';base64,'.str_replace(array('-', '_'), array('+', '/'), $seopress_page_speed_results['screenshot']['data']).'"/></div>';
                            echo '</div>';
                        echo '</div>';
                    echo '</div>';
            echo '</div>';

            echo '<div id="postbox-container-3" class="postbox-container">';
            
                echo '<div class="wrap-seopress-score postbox">';

                    echo '<h2 class="hndle ui-sortable-handle"><span>'.__('Suggestions','wp-seopress-pro').'</span></h2>';

                    echo '<div class="inside">
                            <div class="main">';
                                echo '<ul>';
                                    $seopress_page_speed_rules_order = array();
                                    foreach ($seopress_page_speed_results['formattedResults']['ruleResults'] as $key => $value) {
                                        array_push($seopress_page_speed_rules_order, $value['ruleImpact']);
                                    }
                                    array_multisort($seopress_page_speed_rules_order, SORT_DESC, $seopress_page_speed_results['formattedResults']['ruleResults']);

                                    foreach ($seopress_page_speed_results['formattedResults']['ruleResults'] as $key => $value) {
                                        $seopress_page_speed_replace_array = '';
                                        $seopress_page_speed_variables_array = array(
                                            '{{BEGIN_LINK}}', 
                                            '{{END_LINK}}',
                                            '{{NUM_SCRIPTS}}',
                                            '{{NUM_CSS}}',
                                        );

                                        if (isset($value['summary']['args'])) {
                                            $seopress_page_speed_replace_array = array(
                                                '<a href="'.$value['summary']['args'][0]['value'].'" target="_blank">',
                                                '</a>',
                                                isset($value['summary']['args'][0]['value']),
                                                isset($value['summary']['args'][1]['value']),
                                            );
                                        }

                                        echo '<li>';
                                            if ($value['ruleImpact']=='0') {
                                                echo '<h3><span class="dashicons dashicons-yes"></span>'.$value['localizedRuleName'].'</h3>';
                                            } else {
                                                echo '<h3><span class="dashicons dashicons-warning"></span>'.$value['localizedRuleName'].'</h3>';
                                            }
                                           
                                            //Summary
                                            if (isset($value['summary']['format'])) {
                                                $seopress_page_speed_results_summary = str_replace($seopress_page_speed_variables_array, $seopress_page_speed_replace_array, $value['summary']['format']);
                                            }
                                            
                                            echo '<ul>';
                                                echo '<li>'.$seopress_page_speed_results_summary.'</li>';
                                            echo '</ul>';

                                            //URLS
                                            if (isset($value['urlBlocks'][0]['urls'])) {
                                                echo '<ul>';
                                                    foreach ($value['urlBlocks'][0]['urls'] as $key => $value) {
                                                        echo '<ul class="advice-details">';
                                                            foreach ($value['result']['args'] as $_key => $_value) {
                                                                echo '<li>';
                                                                    echo $_value['value'];
                                                                echo '</li>';
                                                            }
                                                        echo '</ul>';
                                                    }
                                                echo '</ul>';
                                            }
                                        echo '</li>';
                                    }
                                echo '</ul>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
            echo '</div>';

            echo '<div id="postbox-container-4" class="postbox-container">';
            
                echo '<div class="wrap-seopress-score postbox">';

                    echo '<h2 class="hndle ui-sortable-handle"><span>'.__('Ressources stats (beta)','wp-seopress-pro').'</span></h2>';

                    echo '<div class="inside">
                            <div class="main">';
                                $seopress_page_speed_ressources_all = $seopress_page_speed_results['pageStats']['htmlResponseBytes'] + $seopress_page_speed_results['pageStats']['cssResponseBytes'] + $seopress_page_speed_results['pageStats']['imageResponseBytes'] + $seopress_page_speed_results['pageStats']['javascriptResponseBytes'] + $seopress_page_speed_results['pageStats']['otherResponseBytes'];

    $seopress_page_speed_html   = round($seopress_page_speed_results['pageStats']['htmlResponseBytes'] / $seopress_page_speed_ressources_all, 2);
    $seopress_page_speed_css    = round($seopress_page_speed_results['pageStats']['cssResponseBytes'] / $seopress_page_speed_ressources_all, 2);
    $seopress_page_speed_img    = round($seopress_page_speed_results['pageStats']['imageResponseBytes'] / $seopress_page_speed_ressources_all, 2);
    $seopress_page_speed_js     = round($seopress_page_speed_results['pageStats']['javascriptResponseBytes'] / $seopress_page_speed_ressources_all, 2);
    $seopress_page_speed_others = round($seopress_page_speed_results['pageStats']['otherResponseBytes'] / $seopress_page_speed_ressources_all, 2);

    echo '<ul>';
    echo '<li><strong>'.__('Total (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_ressources_all / (1000).'</li>';
    echo '<li><strong>'.__('HTML (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_html * (10000).'</li>';
    echo '<li><strong>'.__('CSS (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_css * (1000).'</li>';
    echo '<li><strong>'.__('Images (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_img * (1000).'</li>';
    echo '<li><strong>'.__('JS (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_js * (1000).'</li>';
    echo '<li><strong>'.__('Others (in Kbytes): ','wp-seopress-pro').'</strong>'.$seopress_page_speed_others * (1000).'</li>';
    echo '</ul>';

                                echo "<script type='text/javascript'>
                                    google.charts.load('current', {'packages':['corechart']});
                                    google.charts.setOnLoadCallback(drawChart);
                                    function drawChart() {

                                    var data = google.visualization.arrayToDataTable([
                                        ['".__("Types","wp-seopress-pro")."', '".__("%","wp-seopress-pro")."'],
                                        ['".__("HTML","wp-seopress-pro")."', ".$seopress_page_speed_html."],
                                        ['".__('CSS','wp-seopress-pro')."', ".$seopress_page_speed_css."],
                                        ['".__('Images','wp-seopress-pro')."', ".$seopress_page_speed_img."],
                                        ['".__('JS','wp-seopress-pro')."', ".$seopress_page_speed_js."],
                                        ['".__('Others','wp-seopress-pro')."', ".$seopress_page_speed_others."]
                                    ]);

                                    var options = {
                                        is3D: true,
                                    };

                                    var chart = new google.visualization.PieChart(document.getElementById('seopress-piechart'));

                                    chart.draw(data, options);
                                    }
                                </script>";
                            echo '<div id="seopress-piechart" style="width: 100%; height: 500px;"></div>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
        } else {
            echo '<p>'.__('We can\'t retrieve your Google Page Speed. Make sure your site is accessible from everyone, and try again.','wp-seopress-pro').'</p>';
        }
    }
    echo '</div>';
echo '</div>';
echo "<div style='clear:both'></div>";