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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components.css' %}">
<style>
    .campaigns-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .campaigns-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    
    .campaigns-actions {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .filter-section {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius-lg);
        margin-bottom: 2rem;
        box-shadow: var(--shadow-sm);
    }
    
    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        align-items: end;
    }
    
    .bulk-actions {
        background: var(--primary-color);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
        display: none;
        align-items: center;
        justify-content: space-between;
    }
    
    .bulk-actions.show {
        display: flex;
    }
    
    .bulk-actions-text {
        font-weight: 600;
    }
    
    .bulk-actions-buttons {
        display: flex;
        gap: 0.5rem;
    }
    
    .bulk-actions-buttons .btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .bulk-actions-buttons .btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    
    .campaign-card {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    
    .campaign-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .campaign-card.active {
        border-left-color: var(--success-color);
    }
    
    .campaign-card.paused {
        border-left-color: var(--warning-color);
    }
    
    .campaign-card.stopped {
        border-left-color: var(--danger-color);
    }
    
    .campaign-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .campaign-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .campaign-meta {
        display: flex;
        gap: 1rem;
        color: var(--text-muted);
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .campaign-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .campaign-stat {
        text-align: center;
        padding: 0.75rem;
        background: var(--gray-50);
        border-radius: var(--border-radius);
    }
    
    .campaign-stat-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.25rem;
    }
    
    .campaign-stat-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .campaign-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .campaign-progress {
        margin-bottom: 1rem;
    }
    
    .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    
    .view-toggle {
        display: flex;
        background: var(--gray-100);
        border-radius: var(--border-radius);
        padding: 0.25rem;
        margin-left: auto;
    }
    
    .view-toggle button {
        background: none;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius-sm);
        color: var(--text-muted);
        transition: all 0.3s ease;
    }
    
    .view-toggle button.active {
        background: white;
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }
    
    .campaigns-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 1.5rem;
    }
    
    .campaigns-list .campaign-card {
        margin-bottom: 1rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted);
    }
    
    .empty-state-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .empty-state-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .empty-state-text {
        margin-bottom: 2rem;
    }
    
    @media (max-width: 768px) {
        .campaigns-header {
            flex-direction: column;
            align-items: stretch;
        }
        
        .campaigns-actions {
            justify-content: center;
        }
        
        .filter-grid {
            grid-template-columns: 1fr;
        }
        
        .campaigns-grid {
            grid-template-columns: 1fr;
        }
        
        .campaign-header {
            flex-direction: column;
            align-items: stretch;
        }
        
        .campaign-actions {
            margin-top: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="campaigns-container">
    <!-- Header -->
    <div class="campaigns-header">
        <h1 class="campaigns-title">Campaigns</h1>
        <div class="campaigns-actions">
            <div class="view-toggle">
                <button class="view-btn active" data-view="list">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" data-view="grid">
                    <i class="fas fa-th-large"></i>
                </button>
            </div>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="fas fa-upload me-2"></i>Import
            </button>
            <button class="btn btn-primary" onclick="window.location.href='{% url 'campaigns:create' %}'">
                <i class="fas fa-plus me-2"></i>New Campaign
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="filter-section">
        <form id="filterForm" class="filter-grid">
            <div class="form-group">
                <label for="searchInput">Search</label>
                <input type="text" id="searchInput" class="form-control" placeholder="Search campaigns...">
            </div>
            
            <div class="form-group">
                <label for="statusFilter">Status</label>
                <select id="statusFilter" class="form-control">
                    <option value="">All Statuses</option>
                    <option value="active">Active</option>
                    <option value="paused">Paused</option>
                    <option value="stopped">Stopped</option>
                    <option value="draft">Draft</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="advertiserFilter">Advertiser</label>
                <select id="advertiserFilter" class="form-control">
                    <option value="">All Advertisers</option>
                    <option value="advertiser1">ABC Corporation</option>
                    <option value="advertiser2">XYZ Industries</option>
                    <option value="advertiser3">Tech Solutions Inc</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="dateRange">Date Range</label>
                <select id="dateRange" class="form-control">
                    <option value="">All Time</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                    <option value="quarter">This Quarter</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                    <button type="reset" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Clear
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Bulk Actions -->
    <div class="bulk-actions" id="bulkActions">
        <div class="bulk-actions-text">
            <span class="selected-count">0</span> campaigns selected
        </div>
        <div class="bulk-actions-buttons">
            <button class="btn" onclick="ADTLAS.bulkAction('activate')">
                <i class="fas fa-play me-1"></i>Activate
            </button>
            <button class="btn" onclick="ADTLAS.bulkAction('pause')">
                <i class="fas fa-pause me-1"></i>Pause
            </button>
            <button class="btn" onclick="ADTLAS.bulkAction('stop')">
                <i class="fas fa-stop me-1"></i>Stop
            </button>
            <button class="btn" onclick="ADTLAS.bulkAction('delete')">
                <i class="fas fa-trash me-1"></i>Delete
            </button>
        </div>
    </div>

    <!-- Campaigns List/Grid -->
    <div class="campaigns-content">
        <div class="campaigns-list" id="campaignsList">
            <!-- Sample Campaign Cards -->
            <div class="campaign-card active" data-campaign-id="1">
                <div class="campaign-header">
                    <div>
                        <div class="form-check">
                            <input class="form-check-input campaign-checkbox" type="checkbox" value="1" id="campaign1">
                            <label class="form-check-label campaign-title" for="campaign1">
                                Summer Sale 2024
                            </label>
                        </div>
                        <div class="campaign-meta">
                            <span><i class="fas fa-building me-1"></i>ABC Corporation</span>
                            <span><i class="fas fa-calendar me-1"></i>Started: Jun 1, 2024</span>
                            <span><i class="fas fa-clock me-1"></i>Ends: Aug 31, 2024</span>
                        </div>
                    </div>
                    <span class="badge badge-success">Active</span>
                </div>
                
                <div class="campaign-progress">
                    <div class="progress-info">
                        <span>Budget Progress</span>
                        <span>$1,245 / $5,000</span>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" data-progress="25"></div>
                    </div>
                </div>
                
                <div class="campaign-stats">
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">125.4K</div>
                        <div class="campaign-stat-label">Impressions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">3.2K</div>
                        <div class="campaign-stat-label">Clicks</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">2.56%</div>
                        <div class="campaign-stat-label">CTR</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">$0.39</div>
                        <div class="campaign-stat-label">CPC</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">156</div>
                        <div class="campaign-stat-label">Conversions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">4.86%</div>
                        <div class="campaign-stat-label">Conv. Rate</div>
                    </div>
                </div>
                
                <div class="campaign-actions">
                    <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                        <i class="fas fa-chart-line"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-warning" data-tooltip="Pause Campaign">
                        <i class="fas fa-pause"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" data-tooltip="Duplicate Campaign">
                        <i class="fas fa-copy"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-download me-2"></i>Export Data</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-history me-2"></i>View History</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="campaign-card paused" data-campaign-id="2">
                <div class="campaign-header">
                    <div>
                        <div class="form-check">
                            <input class="form-check-input campaign-checkbox" type="checkbox" value="2" id="campaign2">
                            <label class="form-check-label campaign-title" for="campaign2">
                                Back to School Promotion
                            </label>
                        </div>
                        <div class="campaign-meta">
                            <span><i class="fas fa-building me-1"></i>XYZ Industries</span>
                            <span><i class="fas fa-calendar me-1"></i>Started: Jul 15, 2024</span>
                            <span><i class="fas fa-clock me-1"></i>Ends: Sep 15, 2024</span>
                        </div>
                    </div>
                    <span class="badge badge-warning">Paused</span>
                </div>
                
                <div class="campaign-progress">
                    <div class="progress-info">
                        <span>Budget Progress</span>
                        <span>$892 / $3,000</span>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" data-progress="30"></div>
                    </div>
                </div>
                
                <div class="campaign-stats">
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">89.1K</div>
                        <div class="campaign-stat-label">Impressions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">2.1K</div>
                        <div class="campaign-stat-label">Clicks</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">2.41%</div>
                        <div class="campaign-stat-label">CTR</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">$0.42</div>
                        <div class="campaign-stat-label">CPC</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">98</div>
                        <div class="campaign-stat-label">Conversions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">4.67%</div>
                        <div class="campaign-stat-label">Conv. Rate</div>
                    </div>
                </div>
                
                <div class="campaign-actions">
                    <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                        <i class="fas fa-chart-line"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" data-tooltip="Resume Campaign">
                        <i class="fas fa-play"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" data-tooltip="Duplicate Campaign">
                        <i class="fas fa-copy"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-download me-2"></i>Export Data</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-history me-2"></i>View History</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="campaign-card active" data-campaign-id="3">
                <div class="campaign-header">
                    <div>
                        <div class="form-check">
                            <input class="form-check-input campaign-checkbox" type="checkbox" value="3" id="campaign3">
                            <label class="form-check-label campaign-title" for="campaign3">
                                Holiday Special Offers
                            </label>
                        </div>
                        <div class="campaign-meta">
                            <span><i class="fas fa-building me-1"></i>Tech Solutions Inc</span>
                            <span><i class="fas fa-calendar me-1"></i>Started: Nov 1, 2024</span>
                            <span><i class="fas fa-clock me-1"></i>Ends: Dec 31, 2024</span>
                        </div>
                    </div>
                    <span class="badge badge-success">Active</span>
                </div>
                
                <div class="campaign-progress">
                    <div class="progress-info">
                        <span>Budget Progress</span>
                        <span>$2,134 / $8,000</span>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" data-progress="27"></div>
                    </div>
                </div>
                
                <div class="campaign-stats">
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">156.9K</div>
                        <div class="campaign-stat-label">Impressions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">4.6K</div>
                        <div class="campaign-stat-label">Clicks</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">2.91%</div>
                        <div class="campaign-stat-label">CTR</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">$0.47</div>
                        <div class="campaign-stat-label">CPC</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">234</div>
                        <div class="campaign-stat-label">Conversions</div>
                    </div>
                    <div class="campaign-stat">
                        <div class="campaign-stat-value">5.12%</div>
                        <div class="campaign-stat-label">Conv. Rate</div>
                    </div>
                </div>
                
                <div class="campaign-actions">
                    <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                        <i class="fas fa-chart-line"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-warning" data-tooltip="Pause Campaign">
                        <i class="fas fa-pause"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" data-tooltip="Duplicate Campaign">
                        <i class="fas fa-copy"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-download me-2"></i>Export Data</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-history me-2"></i>View History</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal-overlay" id="importModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3 class="modal-title">Import Campaigns</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <div class="file-upload">
                <div class="file-upload-area">
                    <input type="file" id="importFile" accept=".csv,.xlsx" multiple>
                    <div class="file-upload-content">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <h4>Drop files here or click to browse</h4>
                        <p>Supported formats: CSV, Excel (.xlsx)</p>
                    </div>
                </div>
            </div>
            
            <div class="form-group mt-3">
                <label for="importOptions">Import Options</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                    <label class="form-check-label" for="skipDuplicates">
                        Skip duplicate campaigns
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="validateData" checked>
                    <label class="form-check-label" for="validateData">
                        Validate data before import
                    </label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="ADTLAS.closeModal(document.getElementById('importModal'))">Cancel</button>
            <button class="btn btn-primary" onclick="ADTLAS.importCampaigns()">Import Campaigns</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/advanced.js' %}"></script>
<script>
// Campaigns page specific JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Initialize progress bars
    ADTLAS.initProgressBars();
    
    // View toggle functionality
    const viewButtons = document.querySelectorAll('.view-btn');
    const campaignsList = document.getElementById('campaignsList');
    
    viewButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            viewButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            const view = this.getAttribute('data-view');
            if (view === 'grid') {
                campaignsList.className = 'campaigns-grid';
            } else {
                campaignsList.className = 'campaigns-list';
            }
        });
    });
    
    // Campaign checkbox handling
    const campaignCheckboxes = document.querySelectorAll('.campaign-checkbox');
    const bulkActions = document.getElementById('bulkActions');
    const selectedCount = bulkActions.querySelector('.selected-count');
    
    function updateBulkActions() {
        const checkedBoxes = document.querySelectorAll('.campaign-checkbox:checked');
        if (checkedBoxes.length > 0) {
            bulkActions.classList.add('show');
            selectedCount.textContent = checkedBoxes.length;
        } else {
            bulkActions.classList.remove('show');
        }
    }
    
    campaignCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });
    
    // Filter form handling
    const filterForm = document.getElementById('filterForm');
    filterForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const filters = {};
        for (let [key, value] of formData.entries()) {
            if (value) filters[key] = value;
        }
        
        ADTLAS.filterCampaigns(filters);
    });
    
    filterForm.addEventListener('reset', function() {
        setTimeout(() => {
            ADTLAS.filterCampaigns({});
        }, 10);
    });
    
    // Search input handling
    const searchInput = document.getElementById('searchInput');
    let searchTimeout;
    
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            ADTLAS.searchCampaigns(this.value);
        }, 300);
    });
    
    // File upload handling
    const importFile = document.getElementById('importFile');
    if (importFile) {
        importFile.addEventListener('change', function() {
            ADTLAS.handleFileSelection(this);
        });
    }
});

// Campaign-specific functions
ADTLAS.filterCampaigns = function(filters) {
    const campaigns = document.querySelectorAll('.campaign-card');
    
    campaigns.forEach(campaign => {
        let show = true;
        
        // Apply filters
        if (filters.searchInput) {
            const title = campaign.querySelector('.campaign-title').textContent.toLowerCase();
            if (!title.includes(filters.searchInput.toLowerCase())) {
                show = false;
            }
        }
        
        if (filters.statusFilter) {
            const badge = campaign.querySelector('.badge');
            const status = badge.textContent.toLowerCase();
            if (status !== filters.statusFilter) {
                show = false;
            }
        }
        
        campaign.style.display = show ? 'block' : 'none';
    });
    
    ADTLAS.showNotification('Filters applied', 'info');
};

ADTLAS.searchCampaigns = function(query) {
    const campaigns = document.querySelectorAll('.campaign-card');
    
    campaigns.forEach(campaign => {
        const title = campaign.querySelector('.campaign-title').textContent.toLowerCase();
        const meta = campaign.querySelector('.campaign-meta').textContent.toLowerCase();
        
        if (title.includes(query.toLowerCase()) || meta.includes(query.toLowerCase())) {
            campaign.style.display = 'block';
        } else {
            campaign.style.display = 'none';
        }
    });
};

ADTLAS.bulkAction = function(action) {
    const checkedBoxes = document.querySelectorAll('.campaign-checkbox:checked');
    const campaignIds = Array.from(checkedBoxes).map(cb => cb.value);
    
    if (campaignIds.length === 0) {
        ADTLAS.showNotification('No campaigns selected', 'warning');
        return;
    }
    
    // Simulate API call
    ADTLAS.showNotification(`${action} action applied to ${campaignIds.length} campaigns`, 'success');
    
    // Update UI based on action
    checkedBoxes.forEach(checkbox => {
        const campaign = checkbox.closest('.campaign-card');
        const badge = campaign.querySelector('.badge');
        
        switch (action) {
            case 'activate':
                badge.className = 'badge badge-success';
                badge.textContent = 'Active';
                campaign.className = 'campaign-card active';
                break;
            case 'pause':
                badge.className = 'badge badge-warning';
                badge.textContent = 'Paused';
                campaign.className = 'campaign-card paused';
                break;
            case 'stop':
                badge.className = 'badge badge-danger';
                badge.textContent = 'Stopped';
                campaign.className = 'campaign-card stopped';
                break;
            case 'delete':
                campaign.style.display = 'none';
                break;
        }
        
        checkbox.checked = false;
    });
    
    // Hide bulk actions
    document.getElementById('bulkActions').classList.remove('show');
};

ADTLAS.importCampaigns = function() {
    const fileInput = document.getElementById('importFile');
    const files = fileInput.files;
    
    if (files.length === 0) {
        ADTLAS.showNotification('Please select files to import', 'warning');
        return;
    }
    
    // Simulate import process
    ADTLAS.showNotification('Import started...', 'info');
    
    setTimeout(() => {
        ADTLAS.showNotification(`Successfully imported ${files.length} file(s)`, 'success');
        ADTLAS.closeModal(document.getElementById('importModal'));
    }, 2000);
};
</script>
{% endblock %}