{% extends 'base.html' %}

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

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

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

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

    .btn-outline-purple {
        border-color: #6f42c1;
        color: #6f42c1;
    }

    .btn-outline-purple:hover {
        background-color: #6f42c1;
        border-color: #6f42c1;
        color: white;
    }

    .growth-chart {
        height: 200px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% include 'customers/marketing_nav.html' %}
    
    <!-- Breadcrumb Navigation -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item active">Marketing Analytics</li>
        </ol>
    </nav>
    
    <div class="marketing-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-2">
                    <i class="bi bi-graph-up-arrow"></i> Marketing Analytics
                </h1>
                <p class="mb-0 opacity-75">Customer acquisition metrics and marketing performance</p>
            </div>
            <div class="col-auto">
                <span class="badge bg-light text-dark fs-6">{{ current_month }}</span>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-primary mb-1">{{ total_customers }}</h3>
                        <p class="text-muted mb-0">Total Customers</p>
                    </div>
                    <i class="bi bi-people text-primary" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-success mb-1">{{ customers_this_month }}</h3>
                        <p class="text-muted mb-0">New This Month</p>
                    </div>
                    <i class="bi bi-person-plus text-success" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-info mb-1">{{ my_customers_count }}</h3>
                        <p class="text-muted mb-0">My Acquisitions</p>
                    </div>
                    <i class="bi bi-trophy text-info" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-warning mb-1">{{ my_tickets_count }}</h3>
                        <p class="text-muted mb-0">Tickets Created</p>
                    </div>
                    <i class="bi bi-ticket-perforated text-warning" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-purple mb-1">{{ my_reports_count|default:0 }}</h3>
                        <p class="text-muted mb-0">Reports Submitted</p>
                    </div>
                    <i class="bi bi-file-text text-purple" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="text-success mb-1">{{ conversion_rate|floatformat:1|default:0 }}%</h3>
                        <p class="text-muted mb-0">Conversion Rate</p>
                    </div>
                    <i class="bi bi-graph-up text-success" style="font-size: 2.5rem;"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white py-2">
                    <h6 class="mb-0">
                        <i class="bi bi-lightning-charge"></i> Quick Actions
                    </h6>
                </div>
                <div class="card-body py-3">
                    <div class="row g-2">
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:customer_add' %}" class="btn btn-outline-primary w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-person-plus fs-5"></i>
                                <small class="mt-1">Add Customer</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'tickets:ticket_create' %}" class="btn btn-outline-success w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-plus-circle fs-5"></i>
                                <small class="mt-1">Create Ticket</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:dashboard' %}" class="btn btn-outline-info w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-list-ul fs-5"></i>
                                <small class="mt-1">Customers</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_tickets' %}" class="btn btn-outline-warning w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-ticket-perforated fs-5"></i>
                                <small class="mt-1">My Tickets</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'expenditure:expense_create' %}" class="btn btn-outline-danger w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-receipt-cutoff fs-5"></i>
                                <small class="mt-1">New Expense</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-purple w-100 d-flex flex-column align-items-center py-2" onclick="openReportModal()">
                                <i class="bi bi-plus-square fs-5"></i>
                                <small class="mt-1">Quick Report</small>
                            </button>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-list-check fs-5"></i>
                                <small class="mt-1">All Reports</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Growth Chart and Recent Activity -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-graph-up"></i> Weekly Customer Growth
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="growthChart" class="growth-chart"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-clock-history"></i> My Recent Customers
                    </h5>
                </div>
                <div class="card-body">
                    {% if my_customers_this_month %}
                        <div class="list-group list-group-flush">
                            {% for customer in my_customers_this_month %}
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>{{ customer.full_name }}</strong>
                                        <br>
                                        <small class="text-muted">{{ customer.phone }}</small>
                                    </div>
                                    <div class="text-end">
                                        <small class="text-muted">{{ customer.created_at|date:"M d" }}</small>
                                        <br>
                                        <a href="{% url 'customers:customer_detail' customer.customer_id %}" class="btn btn-sm btn-outline-primary">
                                            View
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        {% if my_customers_this_month|length > 5 %}
                            <div class="text-center mt-3">
                                <a href="{% url 'customers:dashboard' %}" class="btn btn-outline-primary">
                                    View All My Customers
                                </a>
                            </div>
                        {% endif %}
                    {% else %}
                        <p class="text-muted text-center">No customers added this month yet.</p>
                        <div class="text-center">
                            <a href="{% url 'customers:customer_add' %}" class="btn btn-primary">
                                Add Your First Customer
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Tickets -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-ticket-perforated"></i> My Recent Tickets
                    </h5>
                    <a href="{% url 'tickets:ticket_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if recent_tickets %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Ticket ID</th>
                                        <th>Title</th>
                                        <th>Customer</th>
                                        <th>Priority</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in recent_tickets %}
                                        <tr>
                                            <td>{{ ticket.ticket_id }}</td>
                                            <td>{{ ticket.title|truncatechars:30 }}</td>
                                            <td>{{ ticket.customer_name }}</td>
                                            <td>
                                                <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% else %}secondary{% endif %}">
                                                    {{ ticket.get_priority_display }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge bg-{% if ticket.status == 'open' %}primary{% elif ticket.status == 'in_progress' %}info{% elif ticket.status == 'resolved' %}success{% else %}secondary{% endif %}">
                                                    {{ ticket.get_status_display }}
                                                </span>
                                            </td>
                                            <td>{{ ticket.created_at|date:"M d, Y" }}</td>
                                            <td>
                                                <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted text-center">No tickets created this month yet.</p>
                        <div class="text-center">
                            <a href="{% url 'tickets:ticket_create' %}" class="btn btn-success">
                                Create Your First Ticket
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Report Modal -->
<div class="modal fade" id="quickReportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-plus-circle"></i> Quick Weekly Report
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="quickReportForm" method="post" action="{% url 'customers:marketing_report_create' %}">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Week Starting (Monday)</label>
                            <input type="date" class="form-control" name="week_starting" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Week Ending (Sunday)</label>
                            <input type="date" class="form-control" name="week_ending" readonly>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Customers Contacted</label>
                            <input type="number" class="form-control" name="customers_contacted" min="0" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Site Visits</label>
                            <input type="number" class="form-control" name="site_visits_conducted" min="0" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Demos Conducted</label>
                            <input type="number" class="form-control" name="demos_conducted" min="0" value="0">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">New Leads</label>
                            <input type="number" class="form-control" name="new_leads_generated" min="0" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Qualified Leads</label>
                            <input type="number" class="form-control" name="qualified_leads" min="0" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Conversions</label>
                            <input type="number" class="form-control" name="leads_converted" min="0" value="0">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Key Highlights</label>
                        <textarea class="form-control" name="customer_feedback_summary" rows="3" placeholder="Brief summary of the week's key achievements and feedback..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" form="quickReportForm">Create Report</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Growth Chart
const growthCtx = document.getElementById('growthChart');
if (growthCtx) {
    new Chart(growthCtx, {
        type: 'bar',
        data: {
            labels: [{% for item in weekly_growth %}'{{ item.week }}'{% if not forloop.last %},{% endif %}{% endfor %}],
            datasets: [{
                label: 'New Customers',
                data: [{% for item in weekly_growth %}{{ item.count }}{% if not forloop.last %},{% endif %}{% endfor %}],
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

// Quick Report Modal
function openReportModal() {
    const modal = new bootstrap.Modal(document.getElementById('quickReportModal'));

    // Set current week dates
    const today = new Date();
    const monday = new Date(today);
    monday.setDate(today.getDay() === 0 ? today.getDate() - 6 : today.getDate() - (today.getDay() - 1));


    const weekStartInput = document.querySelector('[name="week_starting"]');
    const weekEndInput = document.querySelector('[name="week_ending"]');

    weekStartInput.value = monday.toISOString().split('T')[0];

    // Auto-calculate week ending
    weekStartInput.addEventListener('change', function() {
        const startDate = new Date(this.value);
        const endDate = new Date(startDate);
        endDate.setDate(startDate.getDate() + 6);
        weekEndInput.value = endDate.toISOString().split('T')[0];
    });

    // Trigger the calculation for initial load
    weekStartInput.dispatchEvent(new Event('change'));

    modal.show();
}
</script>
{% endblock %}