{% extends "layouts/base.html" %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Campaigns" %} - {{ block.super }}{% endblock %}

{% block extra_css %}
<link href="{% static 'css/campaigns.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{% trans "Campaigns" %}</h1>
            <p class="mb-0 text-muted">{% trans "Manage your advertising campaigns" %}</p>
        </div>
        <div>
            <a href="{% url 'campaigns:create' %}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>{% trans "New Campaign" %}
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {% trans "Total Campaigns" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_campaigns }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-bullhorn fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {% trans "Active Campaigns" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ active_campaigns }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-play fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {% trans "Total Budget" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">${{ total_budget|floatformat:2 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {% trans "Completion Rate" %}
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                                        {% if total_campaigns > 0 %}
                                            {{ active_campaigns|mul:100|div:total_campaigns|floatformat:0 }}%
                                        {% else %}
                                            0%
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-pie fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{% trans "Filter Campaigns" %}</h6>
        </div>
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">{% trans "Search" %}</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ current_search }}" placeholder="{% trans 'Search campaigns...' %}">
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">{% trans "Status" %}</label>
                    <select class="form-control" id="status" name="status">
                        <option value="">{% trans "All Statuses" %}</option>
                        {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if value == current_status %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="type" class="form-label">{% trans "Type" %}</label>
                    <select class="form-control" id="type" name="type">
                        <option value="">{% trans "All Types" %}</option>
                        {% for value, label in type_choices %}
                            <option value="{{ value }}" {% if value == current_type %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="advertiser" class="form-label">{% trans "Advertiser" %}</label>
                    <select class="form-control" id="advertiser" name="advertiser">
                        <option value="">{% trans "All Advertisers" %}</option>
                        <!-- Add advertiser options here -->
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-search me-1"></i>{% trans "Filter" %}
                        </button>
                        <a href="{% url 'campaigns:list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>{% trans "Clear" %}
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Campaigns Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{% trans "Campaign List" %}</h6>
        </div>
        <div class="card-body">
            {% if campaigns %}
                <div class="table-responsive">
                    <table class="table table-bordered" id="campaignsTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{% trans "Name" %}</th>
                                <th>{% trans "Advertiser" %}</th>
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Start Date" %}</th>
                                <th>{% trans "End Date" %}</th>
                                <th>{% trans "Budget" %}</th>
                                <th>{% trans "Spend" %}</th>
                                <th>{% trans "Impressions" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for campaign in campaigns %}
                                <tr>
                                    <td>
                                        <a href="{% url 'campaigns:detail' campaign.pk %}" class="text-decoration-none">
                                            <strong>{{ campaign.name }}</strong>
                                        </a>
                                        {% if campaign.description %}
                                            <br><small class="text-muted">{{ campaign.description|truncatechars:50 }}</small>
                                        {% endif %}
                                    </td>
                                    <td>{{ campaign.advertiser.name }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ campaign.get_campaign_type_display }}</span>
                                    </td>
                                    <td>
                                        {% if campaign.status == 'active' %}
                                            <span class="badge badge-success">{{ campaign.get_status_display }}</span>
                                        {% elif campaign.status == 'paused' %}
                                            <span class="badge badge-warning">{{ campaign.get_status_display }}</span>
                                        {% elif campaign.status == 'completed' %}
                                            <span class="badge badge-secondary">{{ campaign.get_status_display }}</span>
                                        {% else %}
                                            <span class="badge badge-light">{{ campaign.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ campaign.start_date|date:"M d, Y" }}</td>
                                    <td>{{ campaign.end_date|date:"M d, Y" }}</td>
                                    <td>${{ campaign.total_budget|floatformat:2 }}</td>
                                    <td>
                                        ${{ campaign.total_spend|floatformat:2 }}
                                        <br><small class="text-muted">
                                            {{ campaign.budget_utilization|floatformat:1 }}% {% trans "used" %}
                                        </small>
                                    </td>
                                    <td>{{ campaign.total_impressions|default:"0" }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{% url 'campaigns:detail' campaign.pk %}" 
                                               class="btn btn-sm btn-outline-primary" title="{% trans 'View Details' %}">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{% url 'campaigns:edit' campaign.pk %}" 
                                               class="btn btn-sm btn-outline-secondary" title="{% trans 'Edit' %}">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {% if campaign.status == 'draft' or campaign.status == 'paused' %}
                                                <a href="{% url 'campaigns:activate' campaign.pk %}" 
                                                   class="btn btn-sm btn-outline-success" title="{% trans 'Activate' %}">
                                                    <i class="fas fa-play"></i>
                                                </a>
                                            {% elif campaign.status == 'active' %}
                                                <a href="{% url 'campaigns:pause' campaign.pk %}" 
                                                   class="btn btn-sm btn-outline-warning" title="{% trans 'Pause' %}">
                                                    <i class="fas fa-pause"></i>
                                                </a>
                                            {% endif %}
                                            <a href="{% url 'campaigns:clone' campaign.pk %}" 
                                               class="btn btn-sm btn-outline-info" title="{% trans 'Clone' %}">
                                                <i class="fas fa-copy"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <nav aria-label="{% trans 'Campaigns pagination' %}">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}">
                                        {% trans "First" %}
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}">
                                        {% trans "Previous" %}
                                    </a>
                                </li>
                            {% endif %}

                            <li class="page-item active">
                                <span class="page-link">
                                    {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
                                </span>
                            </li>

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}">
                                        {% trans "Next" %}
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.type %}&type={{ request.GET.type }}{% endif %}">
                                        {% trans "Last" %}
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-bullhorn fa-3x text-gray-300 mb-3"></i>
                    <h5 class="text-gray-600">{% trans "No campaigns found" %}</h5>
                    <p class="text-muted">{% trans "Create your first campaign to get started." %}</p>
                    <a href="{% url 'campaigns:create' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>{% trans "Create Campaign" %}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/campaigns.js' %}"></script>
<script>
$(document).ready(function() {
    $('#campaignsTable').DataTable({
        "pageLength": 25,
        "order": [[ 4, "desc" ]],
        "columnDefs": [
            { "orderable": false, "targets": [9] }
        ]
    });
});
</script>
{% endblock %}