{% extends 'base.html' %}
{% load static %}

{% block title %}Campaigns - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Data table css -->
<link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatable/css/buttons.bootstrap5.min.css' %}" rel="stylesheet">

<!-- INTERNAL Sweet-Alert css -->
<link href="{% static 'assets/plugins/sweet-alert/sweetalert.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Campaigns</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Campaigns</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Campaign Management</h3>
                <div class="card-options">
                    <a href="{% url 'campaigns:campaign_create' %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Add New Campaign
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Filter Section -->
                <div class="row mb-4">
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Status Filter</label>
                            <select class="form-control" id="status-filter">
                                <option value="">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="scheduled">Scheduled</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Advertiser Filter</label>
                            <select class="form-control" id="advertiser-filter">
                                <option value="">All Advertisers</option>
                                {% for advertiser in advertisers %}
                                <option value="{{ advertiser.id }}">{{ advertiser.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">Date Range</label>
                            <input type="text" class="form-control" id="date-range" placeholder="Select date range">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="form-group">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-secondary" id="clear-filters">Clear Filters</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="campaigns-table">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Campaign</th>
                                <th class="wd-15p border-bottom-0">Advertiser</th>
                                <th class="wd-10p border-bottom-0">Status</th>
                                <th class="wd-15p border-bottom-0">Start Date</th>
                                <th class="wd-15p border-bottom-0">End Date</th>
                                <th class="wd-10p border-bottom-0">Budget</th>
                                <th class="wd-10p border-bottom-0">Impressions</th>
                                <th class="wd-10p border-bottom-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for campaign in campaigns %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            {% if campaign.advertiser.logo %}
                                                <span class="avatar avatar-md brround" style="background-image: url({{ campaign.advertiser.logo.url }})"></span>
                                            {% else %}
                                                <span class="avatar avatar-md brround bg-primary">{{ campaign.name|first|upper }}</span>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ campaign.name }}</h6>
                                            <small class="text-muted">ID: {{ campaign.id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="{% url 'advertisers:advertiser_detail' campaign.advertiser.pk %}" class="text-primary">
                                        {{ campaign.advertiser.name }}
                                    </a>
                                </td>
                                <td>
                                    {% if campaign.is_active %}
                                        {% if campaign.start_date <= today and campaign.end_date >= today %}
                                            <span class="badge bg-success">Active</span>
                                        {% elif campaign.start_date > today %}
                                            <span class="badge bg-warning">Scheduled</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Completed</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-danger">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ campaign.start_date|date:"M d, Y" }}</td>
                                <td>{{ campaign.end_date|date:"M d, Y" }}</td>
                                <td>${{ campaign.budget|floatformat:2 }}</td>
                                <td>
                                    <span class="badge bg-info">{{ campaign.impressions_count|default:0 }}</span>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'campaigns:campaign_detail' campaign.pk %}" class="btn btn-sm btn-info" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'campaigns:campaign_update' campaign.pk %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        {% if campaign.is_active %}
                                            <button type="button" class="btn btn-sm btn-secondary" title="Pause" onclick="toggleCampaign({{ campaign.pk }}, false)">
                                                <i class="fa fa-pause"></i>
                                            </button>
                                        {% else %}
                                            <button type="button" class="btn btn-sm btn-success" title="Activate" onclick="toggleCampaign({{ campaign.pk }}, true)">
                                                <i class="fa fa-play"></i>
                                            </button>
                                        {% endif %}
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" onclick="deleteCampaign({{ campaign.pk }})">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center">No campaigns found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Data tables js-->
<script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/buttons.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/jszip.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatable/js/buttons.print.min.js' %}"></script>

<!-- INTERNAL Date Range Picker js -->
<script src="{% static 'assets/plugins/date-picker/date-picker.js' %}"></script>
<script src="{% static 'assets/plugins/date-picker/jquery-ui.js' %}"></script>
<script src="{% static 'assets/plugins/input-mask/jquery.maskedinput.js' %}"></script>

<!-- Sweet Alert -->
<script src="{% static 'assets/plugins/sweet-alert/sweetalert.min.js' %}"></script>

<script>
var campaignsTable;

$(document).ready(function() {
    // Initialize DataTable
    campaignsTable = $('#campaigns-table').DataTable({
        "responsive": true,
        "pageLength": 25,
        "order": [[ 3, "desc" ]],
        "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "columnDefs": [
            { "orderable": false, "targets": 7 }
        ]
    });
    
    // Initialize date range picker
    $('#date-range').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });
    
    $('#date-range').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        filterTable();
    });
    
    $('#date-range').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        filterTable();
    });
    
    // Filter event handlers
    $('#status-filter, #advertiser-filter').on('change', function() {
        filterTable();
    });
    
    // Clear filters
    $('#clear-filters').on('click', function() {
        $('#status-filter').val('');
        $('#advertiser-filter').val('');
        $('#date-range').val('');
        campaignsTable.search('').columns().search('').draw();
    });
});

function filterTable() {
    var statusFilter = $('#status-filter').val();
    var advertiserFilter = $('#advertiser-filter').val();
    var dateRange = $('#date-range').val();
    
    // Apply filters (this is a simplified version - in production you'd want server-side filtering)
    campaignsTable.draw();
}

function toggleCampaign(campaignId, activate) {
    var action = activate ? 'activate' : 'pause';
    var title = activate ? 'Activate Campaign' : 'Pause Campaign';
    var text = activate ? 'This will activate the campaign.' : 'This will pause the campaign.';
    
    swal({
        title: title,
        text: text,
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: activate ? "#28a745" : "#ffc107",
        confirmButtonText: "Yes, " + action + " it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            // AJAX call to toggle campaign status
            $.ajax({
                url: '/campaigns/' + campaignId + '/toggle/',
                type: 'POST',
                data: {
                    'is_active': activate,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        swal("Error!", response.message || "Something went wrong.", "error");
                    }
                },
                error: function() {
                    swal("Error!", "Failed to " + action + " campaign.", "error");
                }
            });
        }
    });
}

function deleteCampaign(campaignId) {
    swal({
        title: "Are you sure?",
        text: "This action cannot be undone!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            // Create a form and submit it
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/campaigns/' + campaignId + '/delete/';
            
            var csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrfmiddlewaretoken';
            csrfToken.value = '{{ csrf_token }}';
            form.appendChild(csrfToken);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>
{% endblock %}