{% extends 'base.html' %}

{% block title %}Submit Marketing Report - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
    .confirmation-card {
        background: white;
        border-radius: 0.5rem;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .report-info {
        background: #f8f9fa;
        border-radius: 0.375rem;
        padding: 1.5rem;
        margin: 1.5rem 0;
        text-align: left;
    }
    
    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    
    .info-row:last-child {
        margin-bottom: 0;
    }
    
    .info-label {
        font-weight: 600;
        color: #495057;
    }
    
    .info-value {
        color: #6c757d;
    }
    
    .warning-box {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 0.375rem;
        padding: 1rem;
        margin: 1.5rem 0;
        color: #856404;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-2">Submit Marketing Report</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"><a href="{% url 'customers:marketing_report_detail' report.pk %}">Report Detail</a></li>
                    <li class="breadcrumb-item active">Submit</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="confirmation-card">
                <div class="mb-4">
                    <i class="bi bi-question-circle-fill text-warning" style="font-size: 3rem;"></i>
                </div>
                
                <h3 class="h4 mb-3">Confirm Report Submission</h3>
                <p class="text-muted mb-4">
                    Are you sure you want to submit this marketing report for management review?
                    Once submitted, you will not be able to edit the report until it's reviewed.
                </p>

                <!-- Report Information -->
                <div class="report-info">
                    <h5 class="mb-3">
                        <i class="bi bi-file-text"></i> Report Details
                    </h5>
                    <div class="info-row">
                        <span class="info-label">Report Period:</span>
                        <span class="info-value">{{ report.week_starting }} - {{ report.week_ending }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Marketing Staff:</span>
                        <span class="info-value">{{ report.marketing_staff.get_full_name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Current Status:</span>
                        <span class="info-value">
                            <span class="badge bg-secondary">{{ report.get_status_display }}</span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">New Leads Generated:</span>
                        <span class="info-value">{{ report.new_leads_generated }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Leads Converted:</span>
                        <span class="info-value">{{ report.leads_converted }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Customers Contacted:</span>
                        <span class="info-value">{{ report.customers_contacted }}</span>
                    </div>
                </div>

                <!-- Warning -->
                <div class="warning-box">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <div class="text-start">
                            <strong>Important:</strong> Once submitted, this report will be locked for editing 
                            until management completes their review process. Please ensure all information 
                            is accurate and complete before proceeding.
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <form method="post" class="d-inline">
                    {% csrf_token %}
                    <div class="d-flex gap-3 justify-content-center">
                        <button type="submit" class="btn btn-warning">
                            <i class="bi bi-send"></i> Yes, Submit Report
                        </button>
                        <a href="{% url 'customers:marketing_report_detail' report.pk %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add confirmation dialog on form submission
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const confirmed = confirm(
                'Are you absolutely sure you want to submit this report? ' +
                'You will not be able to make changes until it is reviewed by management.'
            );
            if (!confirmed) {
                e.preventDefault();
            }
        });
    }
});
</script>
{% endblock %}