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

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

{% block extra_css %}
<!-- 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 Apexchart css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" />

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

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Dashboard</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xl-12">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="mt-2">
                                <h6 class="">Total Channels</h6>
                                <h2 class="mb-0 number-font">{{ stats.total_channels|default:0 }}</h2>
                            </div>
                            <div class="ms-auto">
                                <div class="chart-wrapper mt-1">
                                    <canvas id="saleschart" class="h-8 w-9 chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                        <span class="text-muted fs-12"><span class="text-secondary"><i class="fe fe-arrow-up-circle  text-secondary"></i> {{ stats.channels_growth|default:0 }}%</span> last month</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="mt-2">
                                <h6 class="">Active Campaigns</h6>
                                <h2 class="mb-0 number-font">{{ stats.active_campaigns|default:0 }}</h2>
                            </div>
                            <div class="ms-auto">
                                <div class="chart-wrapper mt-1">
                                    <canvas id="leadschart" class="h-8 w-9 chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                        <span class="text-muted fs-12"><span class="text-pink"><i class="fe fe-arrow-down-circle text-pink"></i> {{ stats.campaigns_change|default:0 }}%</span> last month</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                <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">{{ stats.total_impressions|default:0 }}</h2>
                            </div>
                            <div class="ms-auto">
                                <div class="chart-wrapper mt-1">
                                    <canvas id="profitchart" class="h-8 w-9 chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                        <span class="text-muted fs-12"><span class="text-green"><i class="fe fe-arrow-up-circle text-green"></i> {{ stats.impressions_growth|default:0 }}%</span> last month</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                <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">${{ stats.total_revenue|default:0 }}</h2>
                            </div>
                            <div class="ms-auto">
                                <div class="chart-wrapper mt-1">
                                    <canvas id="costchart" class="h-8 w-9 chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                        <span class="text-muted fs-12"><span class="text-warning"><i class="fe fe-arrow-up-circle text-warning"></i> {{ stats.revenue_growth|default:0 }}%</span> last month</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 -->
<div class="row">
    <div class="col-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">Impressions Overview</h3>
            </div>
            <div class="card-body pt-4">
                <div class="grid-margin">
                    <div class="">
                        <div class="panel panel-primary">
                            <div class="tab-menu-heading border-0 p-0">
                                <div class="tabs-menu1">
                                    <!-- Tabs -->
                                    <ul class="nav panel-tabs">
                                        <li><a href="#tab5" class="active" data-bs-toggle="tab">Daily</a></li>
                                        <li><a href="#tab6" data-bs-toggle="tab">Weekly</a></li>
                                        <li><a href="#tab7" data-bs-toggle="tab">Monthly</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-body tabs-menu-body border-0 pt-0">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab5">
                                        <div class="d-flex mb-4 mt-3">
                                            <div class="me-auto">
                                                <h5 class="card-title mb-0">Daily Impressions</h5>
                                            </div>
                                        </div>
                                        <div id="impressions-chart" class="chart-donut"></div>
                                    </div>
                                    <div class="tab-pane" id="tab6">
                                        <div class="d-flex mb-4 mt-3">
                                            <div class="me-auto">
                                                <h5 class="card-title mb-0">Weekly Impressions</h5>
                                            </div>
                                        </div>
                                        <div id="weekly-chart" class="chart-donut"></div>
                                    </div>
                                    <div class="tab-pane" id="tab7">
                                        <div class="d-flex mb-4 mt-3">
                                            <div class="me-auto">
                                                <h5 class="card-title mb-0">Monthly Impressions</h5>
                                            </div>
                                        </div>
                                        <div id="monthly-chart" class="chart-donut"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- ROW-3 -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Campaigns</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="recent-campaigns">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Campaign</th>
                                <th class="wd-15p border-bottom-0">Status</th>
                                <th class="wd-20p border-bottom-0">Impressions</th>
                                <th class="wd-15p border-bottom-0">Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for campaign in recent_campaigns %}
                            <tr>
                                <td>{{ campaign.name }}</td>
                                <td>
                                    {% if campaign.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ campaign.impressions_count|default:0 }}</td>
                                <td>${{ campaign.revenue|default:0 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No campaigns found</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">Top Performing Channels</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="top-channels">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Channel</th>
                                <th class="wd-20p border-bottom-0">Impressions</th>
                                <th class="wd-15p border-bottom-0">Revenue</th>
                                <th class="wd-15p border-bottom-0">Performance</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in top_channels %}
                            <tr>
                                <td>{{ channel.name }}</td>
                                <td>{{ channel.impressions_count|default:0 }}</td>
                                <td>${{ channel.revenue|default:0 }}</td>
                                <td>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-primary" style="width: {{ channel.performance|default:0 }}%"></div>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No channels found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-3 END -->

<!-- ROW-4 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Activity</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="activity-logs">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Time</th>
                                <th class="wd-20p border-bottom-0">User</th>
                                <th class="wd-15p border-bottom-0">Action</th>
                                <th class="wd-20p border-bottom-0">Object</th>
                                <th class="wd-30p border-bottom-0">Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in activity_logs %}
                            <tr>
                                <td>{{ log.timestamp|date:"M d, Y H:i" }}</td>
                                <td>{{ log.user.username|default:"System" }}</td>
                                <td>
                                    <span class="badge bg-info">{{ log.action }}</span>
                                </td>
                                <td>{{ log.object_type }}</td>
                                <td>{{ log.details|truncatechars:50 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">No recent activity</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-4 END -->
{% endblock %}

{% block extra_js %}
<!-- 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 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>

<!-- Dashboard js -->
<script>
$(document).ready(function() {
    // Initialize DataTables
    $('#recent-campaigns').DataTable({
        "pageLength": 5,
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    $('#top-channels').DataTable({
        "pageLength": 5,
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    $('#activity-logs').DataTable({
        "pageLength": 10,
        "order": [[ 0, "desc" ]]
    });
    
    // Chart configurations
    var impressionsChart = {
        chart: {
            height: 300,
            type: 'line',
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Impressions',
            data: {{ chart_data.impressions|default:"[]" }}
        }],
        xaxis: {
            categories: {{ chart_data.dates|default:"[]" }}
        },
        colors: ['#6259ca']
    };
    
    var chart = new ApexCharts(document.querySelector("#impressions-chart"), impressionsChart);
    chart.render();
});
</script>
{% endblock %}