{% extends 'base.html' %}

{% block title %}Marketing Report Details - {{ report.marketing_staff.get_full_name }} - Optinet Global Links{% endblock %}

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

    .status-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
    }

    .status-draft { background-color: #6c757d; }
    .status-submitted { background-color: #ffc107; color: #000; }
    .status-reviewed { background-color: #17a2b8; }
    .status-approved { background-color: #28a745; }

    .metrics-card {
        border: none;
        border-left: 4px solid #007bff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: #495057;
    }

    .metric-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .section-card {
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .section-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 1.5rem;
        font-weight: 600;
    }

    .interaction-item {
        border-left: 3px solid #007bff;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: #f8f9fa;
        border-radius: 0.25rem;
    }

    .outcome-positive { border-left-color: #28a745; }
    .outcome-negative { border-left-color: #dc3545; }
    .outcome-neutral { border-left-color: #ffc107; }
    .outcome-converted { border-left-color: #007bff; }
    .outcome-lost { border-left-color: #6c757d; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Report Header -->
    <div class="report-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h1 class="h2 mb-2">Marketing Weekly Report</h1>
                <h2 class="h4 mb-3">{{ report.marketing_staff.get_full_name }}</h2>
                <p class="mb-1">
                    <i class="bi bi-calendar3"></i>
                    Week of {{ report.week_starting|date:"M d" }} - {{ report.week_ending|date:"M d, Y" }}
                </p>
                <p class="mb-0">
                    <i class="bi bi-clock"></i>
                    Created {{ report.created_at|date:"M d, Y \a\t g:i A" }}
                    {% if report.updated_at != report.created_at %}
                        • Updated {{ report.updated_at|date:"M d, Y \a\t g:i A" }}
                    {% endif %}
                </p>
            </div>
            <div class="text-end">
                <span class="status-badge status-{{ report.status }}">
                    {{ report.get_status_display }}
                </span>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex gap-2 mb-4 flex-wrap">
        <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Reports
        </a>
        <a href="{% url 'customers:marketing_dashboard' %}" class="btn btn-outline-info">
            <i class="bi bi-speedometer2"></i> Dashboard
        </a>

        {% if can_edit %}
            <a href="{% url 'customers:marketing_report_edit' report.pk %}" class="btn btn-primary">
                <i class="bi bi-pencil"></i> Edit Report
            </a>
            <a href="{% url 'customers:marketing_report_submit' report.pk %}" class="btn btn-success">
                <i class="bi bi-send"></i> Submit for Review
            </a>
        {% endif %}

        {% if can_review %}
            <a href="{% url 'customers:marketing_report_review' report.pk %}" class="btn btn-warning">
                <i class="bi bi-eye"></i> Review Report
            </a>
        {% endif %}
        
        <a href="{% url 'customers:marketing_report_create' %}" class="btn btn-outline-primary">
            <i class="bi bi-plus-circle"></i> New Report
        </a>
    </div>

    <!-- Key Metrics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card metrics-card">
                <div class="card-body text-center">
                    <div class="metric-value">{{ report.new_leads_generated }}</div>
                    <div class="metric-label">New Leads</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card metrics-card">
                <div class="card-body text-center">
                    <div class="metric-value">{{ report.leads_converted }}</div>
                    <div class="metric-label">Converted</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card metrics-card">
                <div class="card-body text-center">
                    <div class="metric-value">{{ report.conversion_rate }}%</div>
                    <div class="metric-label">Conversion Rate</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card metrics-card">
                <div class="card-body text-center">
                    <div class="metric-value">{{ report.site_visits_conducted }}</div>
                    <div class="metric-label">Site Visits</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Field Activity -->
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-graph-up"></i> Field Activity Metrics
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center p-3">
                                <h4 class="text-primary">{{ report.customers_contacted }}</h4>
                                <small class="text-muted">Customers Contacted</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3">
                                <h4 class="text-info">{{ report.demos_conducted }}</h4>
                                <small class="text-muted">Demos Conducted</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3">
                                <h4 class="text-success">{{ report.qualified_leads }}</h4>
                                <small class="text-muted">Qualified Leads</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Feedback -->
            {% if report.customer_feedback_summary %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-chat-dots"></i> Customer Feedback Summary
                </div>
                <div class="card-body">
                    <p class="mb-0">{{ report.customer_feedback_summary|linebreaks }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Market Intelligence -->
            {% if report.competitor_activities or report.market_trends_observed %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-bar-chart"></i> Market Intelligence
                </div>
                <div class="card-body">
                    {% if report.competitor_activities %}
                        <h6>Competitor Activities</h6>
                        <p>{{ report.competitor_activities|linebreaks }}</p>
                    {% endif %}

                    {% if report.market_trends_observed %}
                        <h6>Market Trends Observed</h6>
                        <p>{{ report.market_trends_observed|linebreaks }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Recommendations -->
            {% if report.service_improvement_recommendations or report.pricing_recommendations or report.marketing_strategy_recommendations %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-lightbulb"></i> Recommendations
                </div>
                <div class="card-body">
                    {% if report.service_improvement_recommendations %}
                        <h6>Service Improvements</h6>
                        <p>{{ report.service_improvement_recommendations|linebreaks }}</p>
                    {% endif %}

                    {% if report.pricing_recommendations %}
                        <h6>Pricing Strategy</h6>
                        <p>{{ report.pricing_recommendations|linebreaks }}</p>
                    {% endif %}

                    {% if report.marketing_strategy_recommendations %}
                        <h6>Marketing Strategy</h6>
                        <p>{{ report.marketing_strategy_recommendations|linebreaks }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Challenges and Solutions -->
            {% if report.challenges_faced or report.solutions_implemented %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-exclamation-triangle"></i> Challenges & Solutions
                </div>
                <div class="card-body">
                    {% if report.challenges_faced %}
                        <h6>Challenges Faced</h6>
                        <p>{{ report.challenges_faced|linebreaks }}</p>
                    {% endif %}

                    {% if report.solutions_implemented %}
                        <h6>Solutions Implemented</h6>
                        <p>{{ report.solutions_implemented|linebreaks }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Planning -->
            {% if report.next_week_targets or report.support_needed %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-calendar-check"></i> Planning & Support
                </div>
                <div class="card-body">
                    {% if report.next_week_targets %}
                        <h6>Next Week Targets</h6>
                        <p>{{ report.next_week_targets|linebreaks }}</p>
                    {% endif %}

                    {% if report.support_needed %}
                        <h6>Support Needed</h6>
                        <p>{{ report.support_needed|linebreaks }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Lead Interactions -->
            {% if interactions %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-people"></i> Lead Interactions ({{ interactions.count }})
                </div>
                <div class="card-body">
                    {% for interaction in interactions %}
                        <div class="interaction-item outcome-{{ interaction.outcome }}">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <strong>{{ interaction.lead_name }}</strong>
                                <small class="text-muted">{{ interaction.interaction_date|date:"M d" }}</small>
                            </div>
                            <div class="mb-2">
                                <span class="badge bg-secondary">{{ interaction.get_interaction_type_display }}</span>
                                <span class="badge bg-{% if interaction.outcome == 'positive' %}success{% elif interaction.outcome == 'negative' %}danger{% elif interaction.outcome == 'converted' %}primary{% elif interaction.outcome == 'lost' %}dark{% else %}warning{% endif %}">
                                    {{ interaction.get_outcome_display }}
                                </span>
                            </div>
                            <p class="small mb-1">{{ interaction.notes|truncatewords:20 }}</p>
                            {% if interaction.service_interested %}
                                <small class="text-info">
                                    <i class="bi bi-wifi"></i> Interested in: {{ interaction.service_interested.name }}
                                </small>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Review Status -->
            {% if report.status != 'draft' %}
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-clipboard-check"></i> Review Status
                </div>
                <div class="card-body">
                    <p><strong>Status:</strong> {{ report.get_status_display }}</p>
                    {% if report.reviewed_by %}
                        <p><strong>Reviewed by:</strong> {{ report.reviewed_by.get_full_name }}</p>
                        <p><strong>Reviewed on:</strong> {{ report.reviewed_at|date:"M d, Y \a\t g:i A" }}</p>
                    {% endif %}
                    {% if report.review_comments %}
                        <h6>Review Comments:</h6>
                        <p class="text-muted">{{ report.review_comments|linebreaks }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Report Statistics -->
            <div class="card section-card">
                <div class="section-header">
                    <i class="bi bi-graph-up"></i> Performance Rates
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Qualification Rate:</span>
                            <strong>{{ report.qualification_rate }}%</strong>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-info" style="width: {{ report.qualification_rate }}%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Conversion Rate:</span>
                            <strong>{{ report.conversion_rate }}%</strong>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-success" style="width: {{ report.conversion_rate }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add any interactive features here if needed
});
</script>
{% endblock %}