<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<div class="wrap">
    <h1><?php echo get_admin_page_title(); ?></h1>
    <p><?php _e( 'This is a simple GA4 widget for WordPress. It shows the current month and year pageviews, visits, and popular posts.', 'sig-ga4-widget' ); ?></p>
</div>

<div class="container-fluid">
    <div class="row">

        <!-- Current month charts -->
        <div class="col-md-6" style="margin-bottom: 30px;">

            <?php
                $theMonth = siga4w_get_data(
                    [
                        'dateRange' => [ date("Y-m-01"), date("Y-m-t") ]
                    ],
                    'sig4w_charts_month',
                    apply_filters( 'siga4w/chart_month_cache_time', 60 * 60 * 24 ) // cache for 1 day
                );
            ?>
            <h3><?php _e( 'Current month', 'sig-ga4-widget' ) ?></h3>
            <div id="ga4_daily_chart"><?php
                if( !empty($theMonth['message']) ) echo esc_html($theMonth['message']);
            ?></div>
            <i><?php
                /* translators: %1$s is start date, %2$s is end date. */
                echo sprintf( __( 'Date range: %1$s ~ %2$s', 'sig-ga4-widget' ), date("Y-m-01"), date("Y-m-t") );
            ?></i>

        </div>

        <!-- Current year charts -->
        <div class="col-md-6" style="margin-bottom: 30px;">

            <?php
                $theYear = siga4w_get_data(
                    [
                        'dateRange' => [ date("Y-01-01"), date("Y-m-t") ],
                        'dimensions' => ['month'],
                    ],
                    'sig4w_charts_year',
                    apply_filters( 'siga4w/chart_year_cache_time', 60 * 60 * 24 ) // cache for 1 day
                );
            ?>
            <h3><?php _e( 'Current year' , 'sig-ga4-widget' ) ?></h3>
            <div id="ga4_month_chart"><?php
                if( !empty($theYear['message']) ) echo esc_html($theYear['message']);
            ?></div>
            <i><?php
                /* translators: %1$s is start date, %2$s is end date. */
                echo sprintf( __( 'Date range: %1$s ~ %2$s', 'sig-ga4-widget' ), date("Y-01-01"), date("Y-12-31") );
            ?></i>

        </div>

        <!-- Popular posts today -->
        <div class="col-md-6" style="margin-bottom: 30px;">
            <?php
                $theHot = siga4w_get_data(
                    [
                        'dateRange' => [ '1daysAgo', 'today' ],
                        'dimensions' => ['pageTitle', 'fullPageUrl'],
                        'metrics' => ['screenPageViews'],
                        'limit' => apply_filters( 'siga4w/chart_post_show', 10)
                    ],
                    'sig4w_hot_posts_today',
                    apply_filters( 'siga4w/chart_post_cache_time', 60 * 60 * 4) // cache for 4 hours
                );
            ?>
            <h3><?php _e( 'Popular Posts (today)', 'sig-ga4-widget' ) ?></h3>
            <?php
            if( !empty($theHot['message']) ) {
                echo esc_html($theHot['message']);
            }else{
            ?>
            <table class="wp-list-table widefat striped table-view-list">
            <thead>
                <tr>
                    <th width="10%" style="text-align:center">No.</th>
                    <th width="75%"><?php _e( 'Page title', 'sig-ga4-widget' )?></th>
                    <th width="15%" style="text-align:center"><?php _e( 'Pageviews', 'sig-ga4-widget' )?></th>
                </tr>
            </thead>
            <tbody>
            <?php
                if( is_array($theHot) && count($theHot)>0 ){
                    foreach( $theHot as $k => $rs) {
                        echo '<tr><td align="center">'.esc_html($k+1).'</td><td><a href="'.esc_url($rs['fullPageUrl']).'" target="_blank">'.esc_attr($rs['pageTitle']).'</a></td><td align="center">'.esc_attr($rs['screenPageViews']).'</td></tr>';
                    }
                }
            ?>
            </tbody>
            </table>
            <?php } ?>
        </div>

        <!-- Popular posts in last 7 days -->
        <div class="col-md-6" style="margin-bottom: 30px;">
            <?php
                $theHot7 = siga4w_get_data(
                    [
                        'dateRange' => [ '7daysAgo', 'today' ],
                        'dimensions' => ['pageTitle', 'fullPageUrl'],
                        'metrics' => ['screenPageViews'],
                        'limit' => apply_filters( 'siga4w/chart_post7_show', 10)
                    ],
                    'sig4w_hot_posts_week',
                    apply_filters( 'siga4w/chart_post7_cache_time', 60 * 60 * 24) // cache for 1 day
                );
            ?>
            <h3><?php _e( 'Popular Posts (last 7 days)', 'sig-ga4-widget' ) ?></h3>
            <?php
            if( !empty($theHot7['message']) ) {
                echo esc_html($theHot7['message']);
            }else{
            ?>
            <table class="wp-list-table widefat striped table-view-list">
            <thead>
                <tr>
                    <th width="10%" style="text-align:center">No.</th>
                    <th width="75%"><?php _e( 'Page title', 'sig-ga4-widget' )?></th>
                    <th width="15%" style="text-align:center"><?php _e( 'Pageviews', 'sig-ga4-widget' )?></th>
                </tr>
            </thead>
            <tbody>
            <?php
                if( is_array($theHot7) && count($theHot7)>0 ){
                    foreach( $theHot7 as $k => $rs) {
                        echo '<tr><td align="center">'.esc_html($k+1).'</td><td><a href="'.esc_url($rs['fullPageUrl']).'" target="_blank">'.esc_attr($rs['pageTitle']).'</a></td><td align="center">'.esc_attr($rs['screenPageViews']).'</td></tr>';
                    }
                }
            ?>
            </tbody>
            </table>
            <?php } ?>
        </div>

    </div>
</div>

<style type="text/css">
#ga4_daily_chart, #ga4_month_chart{ width:100%;height: 250px;background-color: #fff;border:1px solid #c3c4c7;margin-bottom: 10px; }
</style>

<script type="text/javascript">
<?php if( !isset($theMonth['message']) ):

    $day_loop = siga4w_day_loop('1 day', [date("Y-m-01"),date("Y-m-t")]);
    $days = [];
    foreach( $day_loop as $d){
        $day = str_replace("-","",$d);
        $days[] = [
            'x' => $d,
            'a' => ( !empty($theMonth[$day]['screenPageViews']) ) ? $theMonth[$day]['screenPageViews'] : 0,
            'b' => ( !empty($theMonth[$day]['totalUsers']) ) ? $theMonth[$day]['totalUsers'] : 0,
        ];
    }
?>
    new Morris.Area({
        element: 'ga4_daily_chart',
        data: <?php echo json_encode($days); ?>,
        behaveLikeLine: true,
        xkey: 'x',
        xLabels: 'day',
        xLabelFormat: function(x) {
            return (x.getMonth()+1) + '/' + x.getDate();
        },
        ykeys: ['a','b'],
        labels: ['<?php _e( 'pageviews', 'sig-ga4-widget' )?>','<?php _e( 'visits', 'sig-ga4-widget' )?>'],
        fillOpacity: 0.6,
        lineColors: ['#7be3f3','#17a2b8'],
        resize: true
    });
<?php endif; ?>

<?php if( !isset($theYear['message']) ):

    $month_loop = siga4w_day_loop('1 month', [date("Y-01-01"),date("Y-12-31")], 'm');
    $months = [];
    foreach( $month_loop as $m){

        $months[] = [
            'x' => date('Y')."-".$m,
            'a' => ( !empty($theYear[$m]['screenPageViews']) ) ? $theYear[$m]['screenPageViews'] : 0,
            'b' => ( !empty($theYear[$m]['totalUsers']) ) ? $theYear[$m]['totalUsers'] : 0,
        ];
    }

?>
    new Morris.Area({
        element: 'ga4_month_chart',
        data: <?php echo json_encode($months); ?>,
        behaveLikeLine: true,
        xkey: 'x',
        xLabels: 'month',
        xLabelFormat: function(x) {
            return x.getFullYear() + '/' + (x.getMonth()+1);
        },
        ykeys: ['a','b'],
        labels: ['<?php _e( 'pageviews', 'sig-ga4-widget' )?>','<?php _e( 'visits', 'sig-ga4-widget' )?>'],
        fillOpacity: 0.6,
        lineColors: ['#7be3f3','#17a2b8'],
        resize: true
    });
<?php endif; ?>
</script>