{% extends 'base.html' %}
{% load static %}

{% block title %}Analytics Dashboard - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Apexchart css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" />

<!-- INTERNAL Morris Charts css -->
<link href="{% static 'plugins/morris/morris.css' %}" rel="stylesheet" />

<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />

<!-- INTERNAL Daterangepicker css -->
<link href="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Analytics Dashboard</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Analytics</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 - Date Range Filter -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Analytics Filters</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Date Range</label>
                            <input type="text" class="form-control" id="daterange" value="{{ date_range }}">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Channel</label>
                            <select class="form-control" id="channel-filter">
                                <option value="">All Channels</option>
                                {% for channel in channels %}
                                <option value="{{ channel.id }}">{{ channel.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Advertiser</label>
                            <select class="form-control" id="advertiser-filter">
                                <option value="">All Advertisers</option>
                                {% for advertiser in advertisers %}
                                <option value="{{ advertiser.id }}">{{ advertiser.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-primary" id="apply-filters">Apply Filters</button>
                                <button type="button" class="btn btn-secondary" id="export-data">Export</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - Key Metrics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Impressions</h6>
                        <h2 class="mb-0 number-font" id="total-impressions">{{ metrics.total_impressions|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-eye fa-3x text-primary"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-secondary"><i class="fe fe-arrow-up-circle text-secondary"></i> {{ metrics.impressions_growth|default:0 }}%</span> vs last period</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Click-Through Rate</h6>
                        <h2 class="mb-0 number-font" id="ctr">{{ metrics.ctr|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-mouse-pointer fa-3x text-success"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-green"><i class="fe fe-arrow-up-circle text-green"></i> {{ metrics.ctr_growth|default:0 }}%</span> vs last period</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Completion Rate</h6>
                        <h2 class="mb-0 number-font" id="completion-rate">{{ metrics.completion_rate|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-check-circle fa-3x text-warning"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-warning"><i class="fe fe-arrow-up-circle text-warning"></i> {{ metrics.completion_growth|default:0 }}%</span> vs last period</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Revenue</h6>
                        <h2 class="mb-0 number-font" id="revenue">${{ metrics.revenue|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-dollar-sign fa-3x text-info"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-info"><i class="fe fe-arrow-up-circle text-info"></i> {{ metrics.revenue_growth|default:0 }}%</span> vs last period</span>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- ROW-3 - Charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Impressions Over Time</h3>
                <div class="card-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary active" data-period="daily">Daily</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="weekly">Weekly</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="monthly">Monthly</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="impressions-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Top Performing Campaigns</h3>
            </div>
            <div class="card-body">
                <div id="campaigns-chart"></div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-3 END -->

<!-- ROW-4 - Performance Tables -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channel Performance</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="channel-performance">
                        <thead>
                            <tr>
                                <th>Channel</th>
                                <th>Impressions</th>
                                <th>CTR</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in channel_performance %}
                            <tr>
                                <td>{{ channel.name }}</td>
                                <td>{{ channel.impressions|default:0 }}</td>
                                <td>{{ channel.ctr|default:0 }}%</td>
                                <td>${{ channel.revenue|default:0 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No data available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Advertiser Performance</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="advertiser-performance">
                        <thead>
                            <tr>
                                <th>Advertiser</th>
                                <th>Impressions</th>
                                <th>CTR</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for advertiser in advertiser_performance %}
                            <tr>
                                <td>{{ advertiser.name }}</td>
                                <td>{{ advertiser.impressions|default:0 }}</td>
                                <td>{{ advertiser.ctr|default:0 }}%</td>
                                <td>${{ advertiser.revenue|default:0 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No data available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-4 END -->

<!-- ROW-5 - Detailed Analytics -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Detailed Analytics</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="detailed-analytics">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Channel</th>
                                <th>Campaign</th>
                                <th>Advertiser</th>
                                <th>Impressions</th>
                                <th>Clicks</th>
                                <th>CTR</th>
                                <th>Completions</th>
                                <th>Completion Rate</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in detailed_analytics %}
                            <tr>
                                <td>{{ record.date|date:"M d, Y" }}</td>
                                <td>{{ record.channel_name }}</td>
                                <td>{{ record.campaign_name }}</td>
                                <td>{{ record.advertiser_name }}</td>
                                <td>{{ record.impressions|default:0 }}</td>
                                <td>{{ record.clicks|default:0 }}</td>
                                <td>{{ record.ctr|default:0 }}%</td>
                                <td>{{ record.completions|default:0 }}</td>
                                <td>{{ record.completion_rate|default:0 }}%</td>
                                <td>${{ record.revenue|default:0 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="10" class="text-center">No data available for the selected period</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-5 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Apexchart js -->
<script src="{% static 'js/apexcharts.js' %}"></script>

<!-- INTERNAL Morris Charts js -->
<script src="{% static 'plugins/morris/morris.js' %}"></script>
<script src="{% static 'plugins/morris/raphael-min.js' %}"></script>

<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>

<!-- INTERNAL Daterangepicker js -->
<script src="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize date range picker
    $('#daterange').daterangepicker({
        startDate: moment().subtract(29, 'days'),
        endDate: moment(),
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });
    
    // Initialize DataTables
    $('#channel-performance').DataTable({
        "pageLength": 10,
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    $('#advertiser-performance').DataTable({
        "pageLength": 10,
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    $('#detailed-analytics').DataTable({
        "pageLength": 25,
        "order": [[ 0, "desc" ]]
    });
    
    // Initialize charts
    initializeCharts();
    
    // Event handlers
    $('#apply-filters').on('click', function() {
        applyFilters();
    });
    
    $('#export-data').on('click', function() {
        exportData();
    });
    
    $('.btn-group button').on('click', function() {
        $('.btn-group button').removeClass('active');
        $(this).addClass('active');
        updateImpressionsChart($(this).data('period'));
    });
});

function initializeCharts() {
    // Impressions over time chart
    var impressionsOptions = {
        chart: {
            height: 350,
            type: 'area',
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Impressions',
            data: {{ chart_data.impressions|default:"[]" }}
        }],
        xaxis: {
            categories: {{ chart_data.dates|default:"[]" }}
        },
        colors: ['#6259ca'],
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.3
            }
        }
    };
    
    var impressionsChart = new ApexCharts(document.querySelector("#impressions-chart"), impressionsOptions);
    impressionsChart.render();
    
    // Top campaigns donut chart
    var campaignsOptions = {
        chart: {
            type: 'donut',
            height: 300
        },
        series: {{ chart_data.campaign_impressions|default:"[]" }},
        labels: {{ chart_data.campaign_names|default:"[]" }},
        colors: ['#6259ca', '#17a2b8', '#28a745', '#ffc107', '#dc3545']
    };
    
    var campaignsChart = new ApexCharts(document.querySelector("#campaigns-chart"), campaignsOptions);
    campaignsChart.render();
}

function applyFilters() {
    var dateRange = $('#daterange').val();
    var channel = $('#channel-filter').val();
    var advertiser = $('#advertiser-filter').val();
    
    // Reload page with filters
    var params = new URLSearchParams();
    if (dateRange) params.append('date_range', dateRange);
    if (channel) params.append('channel', channel);
    if (advertiser) params.append('advertiser', advertiser);
    
    window.location.href = '?' + params.toString();
}

function exportData() {
    var dateRange = $('#daterange').val();
    var channel = $('#channel-filter').val();
    var advertiser = $('#advertiser-filter').val();
    
    var params = new URLSearchParams();
    params.append('export', 'csv');
    if (dateRange) params.append('date_range', dateRange);
    if (channel) params.append('channel', channel);
    if (advertiser) params.append('advertiser', advertiser);
    
    window.open('/analytics/export/?' + params.toString(), '_blank');
}

function updateImpressionsChart(period) {
    // AJAX call to get data for the selected period
    $.ajax({
        url: '/analytics/chart-data/',
        data: {
            'period': period,
            'date_range': $('#daterange').val(),
            'channel': $('#channel-filter').val(),
            'advertiser': $('#advertiser-filter').val()
        },
        success: function(data) {
            // Update chart with new data
            impressionsChart.updateSeries([{
                name: 'Impressions',
                data: data.impressions
            }]);
            impressionsChart.updateOptions({
                xaxis: {
                    categories: data.dates
                }
            });
        }
    });
}
</script>
{% endblock %}