{% extends 'base.html' %}

{% block title %}Marketing Analytics Dashboard - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
    .analytics-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin-bottom: 2rem;
    }

    .metric-card {
        background: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 1rem;
        transition: transform 0.2s;
    }

    .metric-card:hover {
        transform: translateY(-2px);
    }

    .metric-value {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .metric-label {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .chart-container {
        height: 300px;
        margin: 1rem 0;
    }

    .performer-card {
        background: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 0.5rem;
        border-left: 4px solid #007bff;
    }

    .interaction-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        margin: 0.25rem;
        border-radius: 0.25rem;
        font-size: 0.8rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="analytics-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-2">
                    <i class="bi bi-graph-up"></i> Marketing Analytics Dashboard
                </h1>
                <p class="mb-0 opacity-75">Performance insights and trends analysis</p>
            </div>
            <div class="col-auto">
                <span class="badge bg-light text-dark fs-6">{{ date_range }}</span>
            </div>
        </div>
    </div>

    <!-- Key Metrics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-value text-primary">{{ total_reports }}</div>
                <div class="metric-label">Total Reports</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-value text-success">{{ metrics.total_leads_generated|default:0 }}</div>
                <div class="metric-label">Total Leads Generated</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-value text-info">{{ metrics.total_conversions|default:0 }}</div>
                <div class="metric-label">Total Conversions</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-value text-warning">{{ metrics.avg_conversion_rate|floatformat:1 }}%</div>
                <div class="metric-label">Avg Conversion Rate</div>
            </div>
        </div>
    </div>

    <!-- Additional Metrics -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="metric-card text-center">
                <div class="metric-value text-secondary">{{ metrics.total_customers_contacted|default:0 }}</div>
                <div class="metric-label">Customers Contacted</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="metric-card text-center">
                <div class="metric-value text-secondary">{{ metrics.total_site_visits|default:0 }}</div>
                <div class="metric-label">Site Visits</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="metric-card text-center">
                <div class="metric-value text-secondary">{{ metrics.total_demos|default:0 }}</div>
                <div class="metric-label">Demos Conducted</div>
            </div>
        </div>
    </div>

    <!-- Charts and Analysis -->
    <div class="row">
        <!-- Weekly Performance Trend -->
        <div class="col-md-8 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-graph-up-arrow"></i> Weekly Performance Trend
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="performanceChart" class="chart-container"></canvas>
                </div>
            </div>
        </div>

        <!-- Lead Interaction Analysis -->
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-person-check"></i> Lead Interactions
                    </h5>
                </div>
                <div class="card-body">
                    {% if interactions %}
                        {% for interaction in interactions %}
                            <div class="interaction-badge bg-light border">
                                <strong>{{ interaction.interaction_type|title }}</strong><br>
                                <small>{{ interaction.count }} total</small><br>
                                <small class="text-success">{{ interaction.positive_outcomes }} positive</small><br>
                                <small class="text-primary">{{ interaction.conversions }} converted</small>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-muted text-center">No interaction data available</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Top Performers -->
    {% if top_performers %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-trophy"></i> Top Performers
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for performer in top_performers %}
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="performer-card">
                                    <h6 class="mb-2">{{ performer.marketing_staff__first_name }} {{ performer.marketing_staff__last_name }}</h6>
                                    <div class="small">
                                        <div class="mb-1">
                                            <i class="bi bi-bullseye"></i> 
                                            <strong>{{ performer.total_leads|default:0 }}</strong> leads generated
                                        </div>
                                        <div class="mb-1">
                                            <i class="bi bi-check-circle"></i> 
                                            <strong>{{ performer.total_conversions|default:0 }}</strong> conversions
                                        </div>
                                        <div>
                                            <i class="bi bi-percent"></i> 
                                            <strong>{{ performer.avg_conversion_rate|floatformat:1 }}%</strong> conversion rate
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Navigation -->
    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-primary me-2">
                <i class="bi bi-list"></i> View All Reports
            </a>
            <a href="{% url 'customers:marketing_report_create' %}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Create New Report
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Performance Chart
const performanceCtx = document.getElementById('performanceChart');
if (performanceCtx && {{ weekly_performance|length }} > 0) {
    new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: [
                {% for week in weekly_performance %}
                    '{{ week.week_starting|date:"M d" }}'{% if not forloop.last %},{% endif %}
                {% endfor %}
            ],
            datasets: [{
                label: 'Leads Generated',
                data: [
                    {% for week in weekly_performance %}
                        {{ week.leads|default:0 }}{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }, {
                label: 'Conversions',
                data: [
                    {% for week in weekly_performance %}
                        {{ week.conversions|default:0 }}{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ],
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1
            }, {
                label: 'Site Visits',
                data: [
                    {% for week in weekly_performance %}
                        {{ week.site_visits|default:0 }}{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ],
                borderColor: 'rgb(54, 162, 235)',
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                }
            }
        }
    });
} else {
    // Show message if no data
    if (performanceCtx) {
        performanceCtx.parentElement.innerHTML = '<p class="text-muted text-center">No performance data available for the selected period</p>';
    }
}
</script>
{% endblock %}