{% extends 'base.html' %}

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

{% block extra_css %}
{% include 'customers/marketing_nav.html' %}
<style>
    .report-section {
        background: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .section-title {
        color: #495057;
        border-bottom: 2px solid #007bff;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .metric-input {
        background: #f8f9fa;
        border-radius: 0.375rem;
        padding: 1rem;
    }
    
    .form-floating label {
        color: #6c757d;
        font-weight: 500;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% include 'customers/marketing_nav.html' %}
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-2">{{ title }}</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'customers:marketing_dashboard' %}">Marketing</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'customers:marketing_report_list' %}">Reports</a></li>
                    <li class="breadcrumb-item active">{{ title }}</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Reports
            </a>
        </div>
    </div>

    <form method="post">
        {% csrf_token %}
        
        <!-- Report Period -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-calendar3"></i> Report Period
            </h4>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-floating mb-3">
                        {{ form.week_starting }}
                        <label for="{{ form.week_starting.id_for_label }}">Week Starting (Monday)</label>
                        {% if form.week_starting.errors %}
                            <div class="text-danger small mt-1">{{ form.week_starting.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-floating mb-3">
                        {{ form.week_ending }}
                        <label for="{{ form.week_ending.id_for_label }}">Week Ending (Sunday)</label>
                        {% if form.week_ending.errors %}
                            <div class="text-danger small mt-1">{{ form.week_ending.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Field Activity Metrics -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-graph-up"></i> Field Activity Metrics
            </h4>
            <div class="metrics-grid">
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.customers_contacted }}
                        <label for="{{ form.customers_contacted.id_for_label }}">Customers Contacted</label>
                    </div>
                </div>
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.site_visits_conducted }}
                        <label for="{{ form.site_visits_conducted.id_for_label }}">Site Visits</label>
                    </div>
                </div>
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.demos_conducted }}
                        <label for="{{ form.demos_conducted.id_for_label }}">Demos Conducted</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lead Generation -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-people"></i> Lead Generation
            </h4>
            <div class="metrics-grid">
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.new_leads_generated }}
                        <label for="{{ form.new_leads_generated.id_for_label }}">New Leads Generated</label>
                    </div>
                </div>
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.qualified_leads }}
                        <label for="{{ form.qualified_leads.id_for_label }}">Qualified Leads</label>
                    </div>
                </div>
                <div class="metric-input">
                    <div class="form-floating">
                        {{ form.leads_converted }}
                        <label for="{{ form.leads_converted.id_for_label }}">Leads Converted</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Market Intelligence -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-eye"></i> Market Intelligence
            </h4>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.customer_feedback_summary }}
                        <label for="{{ form.customer_feedback_summary.id_for_label }}">Customer Feedback Summary</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.competitor_activities }}
                        <label for="{{ form.competitor_activities.id_for_label }}">Competitor Activities</label>
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="form-floating">
                        {{ form.market_trends_observed }}
                        <label for="{{ form.market_trends_observed.id_for_label }}">Market Trends Observed</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recommendations -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-lightbulb"></i> Strategic Recommendations
            </h4>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.service_improvement_recommendations }}
                        <label for="{{ form.service_improvement_recommendations.id_for_label }}">Service Improvements</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.pricing_recommendations }}
                        <label for="{{ form.pricing_recommendations.id_for_label }}">Pricing Strategy</label>
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="form-floating">
                        {{ form.marketing_strategy_recommendations }}
                        <label for="{{ form.marketing_strategy_recommendations.id_for_label }}">Marketing Strategy</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Challenges & Solutions -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-exclamation-triangle"></i> Challenges & Solutions
            </h4>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.challenges_faced }}
                        <label for="{{ form.challenges_faced.id_for_label }}">Challenges Faced</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.solutions_implemented }}
                        <label for="{{ form.solutions_implemented.id_for_label }}">Solutions Implemented</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Planning -->
        <div class="report-section">
            <h4 class="section-title">
                <i class="bi bi-calendar-check"></i> Forward Planning
            </h4>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.next_week_targets }}
                        <label for="{{ form.next_week_targets.id_for_label }}">Next Week Targets</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        {{ form.support_needed }}
                        <label for="{{ form.support_needed.id_for_label }}">Support Needed</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="d-flex gap-3 mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle"></i> Save Report
            </button>
            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle"></i> Cancel
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-calculate week ending date
document.addEventListener('DOMContentLoaded', function() {
    const weekStartingInput = document.getElementById('{{ form.week_starting.id_for_label }}');
    const weekEndingInput = document.getElementById('{{ form.week_ending.id_for_label }}');
    
    weekStartingInput.addEventListener('change', function() {
        const startDate = new Date(this.value);
        if (startDate) {
            const endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + 6);
            weekEndingInput.value = endDate.toISOString().split('T')[0];
        }
    });
});
</script>
{% endblock %}