{# templates/Admin/Messages/dashboard_report.html.twig #}
{% extends base_template %}

{% block title %}SMS Transmission Metrics Dashboard{% endblock %}

{% block content %}
<div class="row">
    {# 1. TODAY REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-aqua">
            <span class="info-box-icon"><i class="fa fa-clock-o"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">TODAY'S REPORT</span>
                <span class="info-box-number">Contacts: {{ reportCards.today.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.today.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>

    {# 2. THIS WEEK REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-green">
            <span class="info-box-icon"><i class="fa fa-calendar-check-o"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">THIS WEEK'S REPORT</span>
                <span class="info-box-number">Contacts: {{ reportCards.this_week.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.this_week.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>

    {# 3. LAST WEEK REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-yellow">
            <span class="info-box-icon"><i class="fa fa-history"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">LAST WEEK'S REPORT</span>
                <span class="info-box-number">Contacts: {{ reportCards.last_week.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.last_week.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>

    {# 4. FORTNIGHT REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-purple">
            <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">FORTNIGHT REPORT (14d)</span>
                <span class="info-box-number">Contacts: {{ reportCards.fortnight.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.fortnight.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>

    {# 5. LAST TWO MONTHS REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-blue">
            <span class="info-box-icon"><i class="fa fa-cubes"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">LAST TWO MONTHS</span>
                <span class="info-box-number">Contacts: {{ reportCards.two_months.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.two_months.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>

    {# 6. YEAR REPORT CARD #}
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="info-box bg-maroon">
            <span class="info-box-icon"><i class="fa fa-line-chart"></i></span>
            <div class="info-box-content">
                <span class="info-box-text" style="font-weight: bold; letter-spacing: 0.5px;">YEAR REPORT</span>
                <span class="info-box-number">Contacts: {{ reportCards.this_year.total_contacts|number_format }}</span>
                <div class="progress"><div class="progress-bar" style="width: 100%"></div></div>
                <span class="progress-description">Units/Parts Dispatched: <b>{{ reportCards.this_year.total_units|number_format }}</b></span>
            </div>
        </div>
    </div>
</div>

{# --- GRAPHICAL REPORTING CONTAINER BLOCK --- #}
<div class="row" style="margin-top: 15px;">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-bar-chart"></i> Monthly Traffic Analysis Comparison</h3>
                
                {# Year Filtering Form Dropdown Box #}
                <div class="box-tools pull-right" style="top: 4px;">
                    <form method="GET" action="{{ admin.generateUrl('dashboardReport') }}" class="form-inline" id="yearFilterForm">
                        <label for="yearSelect" style="margin-right: 5px; font-size: 12px;">Select Reporting Year: </label>
                        <select name="year" id="yearSelect" class="form-control input-sm" onchange="document.getElementById('yearFilterForm').submit();">
                            {% for yr in availableYears %}
                                <option value="{{ yr }}" {% if yr == selectedYear %}selected{% endif %}>{{ yr }}</option>
                            {% endfor %}
                        </select>
                    </form>
                </div>
            </div>
            
            <div class="box-body">
                <div class="chart-container" style="position: relative; height:380px; width:100%">
                    <canvas id="trafficMonthlyChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

{# LOAD EXTERNAL CHART JS LIBRARIES FROM FORWARD COMPATIBLE CDNS #}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('trafficMonthlyChart').getContext('2d');
        
        // Map data safely out of our Twig structural context matrix vectors
        const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        const contactsData = [
            {% for m in 1..12 %}{{ chartMonths[m].contacts }}, {% endfor %}
        ];
        const unitsData = [
            {% for m in 1..12 %}{{ chartMonths[m].units }}, {% endfor %}
        ];

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Total Contacts Addressed (Destinations)',
                        data: contactsData,
                        backgroundColor: 'rgba(54, 162, 235, 0.65)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        barPercentage: 0.6
                    },
                    {
                        label: 'Total SMS Pages/Units Billed',
                        data: unitsData,
                        backgroundColor: 'rgba(255, 99, 132, 0.65)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                        barPercentage: 0.6
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) { return value.toLocaleString(); }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) { label += ': '; }
                                if (context.parsed.y !== null) { label += context.parsed.y.toLocaleString(); }
                                return label;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}