{% extends "layouts/base.html" %}

{% load static %} 

{% block title %} All Advertisers {% endblock %}


{% block extra_css %}
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .advertiser-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .advertiser-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .advertiser-card.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    .bulk-actions {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: none;
    }
    
    .bulk-actions.show {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 500;
    }
    
    .active-badge {
        background-color: #28a745;
        color: #fff;
    }
    
    .inactive-badge {
        background-color: #dc3545;
        color: #fff;
    }
    
    .category-badge {
        background-color: #17a2b8;
        color: #fff;
        font-size: 0.7rem;
        padding: 3px 6px;
        border-radius: 4px;
    }
    
    .advertiser-logo {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #dee2e6;
    }
    
    .logo-placeholder {
        width: 60px;
        height: 60px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px dashed #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
    }
    
    .empty-state i {
        font-size: 4rem;
        color: #dee2e6;
        margin-bottom: 20px;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> List Advertisers </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Advertiser</a></li>
            <li class="breadcrumb-item active" aria-current="page">All</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-users fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="total-advertisers">{{ stats.total_advertisers|default:0 }}</h2>
                        <p class="mb-0">Total Advertisers</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-check-circle fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="active-advertisers">{{ stats.active_advertisers|default:0 }}</h2>
                        <p class="mb-0">Active</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-star fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="featured-advertisers">{{ stats.featured_advertisers|default:0 }}</h2>
                        <p class="mb-0">Featured</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-briefcase fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="total-campaigns">{{ stats.total_campaigns|default:0 }}</h2>
                        <p class="mb-0">Campaigns</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Filters Card -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-filter me-2"></i>Filters & Search
                </h5>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <!-- Search Input -->
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>Search
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query|default:'' }}" 
                               placeholder="Search advertisers...">
                    </div>
                    
                    <!-- Category Filter -->
                    <div class="col-md-4">
                        <label for="category" class="form-label fw-semibold">
                            <i class="fe fe-tag me-1"></i>Category
                        </label>
                        <select class="form-select" id="category" name="category">
                            <option value="">All Categories</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" 
                                        {% if selected_category == category.id %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-4">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-activity me-1"></i>Status
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="1" {% if selected_status == "1" %}selected{% endif %}>Active</option>
                            <option value="0" {% if selected_status == "0" %}selected{% endif %}>Inactive</option>
                        </select>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="fe fe-search me-1"></i>Apply Filters
                        </button>
                        <a href="{% url 'advertiser_list' %}" class="btn btn-secondary">
                            <i class="fe fe-refresh-cw me-1"></i>Clear Filters
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Advertisers List</h3>
                <div class="card-options">
                    <a href="{% url 'add_advertiser' %}" class="btn btn-primary">
                        <i class="fe fe-plus me-1"></i>Add Advertiser
                    </a>
                </div>
            </div>
            <div class="card-body">
                <table id="data-table321" class="table table-bordered text-nowrap mb-0">
                    <thead class="border-top">
                        <tr>
                            <th class="bg-transparent border-bottom-0 text-center">Logo</th>
                            <th class="bg-transparent border-bottom-0 text-center">Name</th>
                            <th class="bg-transparent border-bottom-0 text-center">Description</th>
                            <th class="bg-transparent border-bottom-0 text-center">Category</th>
                            <th class="bg-transparent border-bottom-0 text-center">Status</th>
                            <th class="bg-transparent border-bottom-0 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for brand in brands %}
                        <tr class="border-bottom">
                            <td class="text-center">
                                <div class="d-flex justify-content-center">
                                    {% if brand.logo %}
                                        <img class="advertiser-logo" src="/{{ brand.logo }}" alt="{{ brand.brand_name }} Logo">
                                    {% else %}
                                        <div class="logo-placeholder">
                                            <i class="fe fe-image"></i>
                                        </div>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-flex align-items-center justify-content-center">
                                    <div>
                                        <h6 class="mb-0 fw-semibold">{{ brand.brand_name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="text-muted">{{ brand.description|truncatechars:50 }}</span>
                            </td>
                            <td class="text-center">
                                <span class="category-badge">{{ brand.category }}</span>
                            </td>
                            <td class="text-center">
                                {% if brand.status == "1" %}
                                    <span class="status-badge active-badge">Active</span>
                                {% else %}
                                    <span class="status-badge inactive-badge">Inactive</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <div class="action-buttons">
                                    <form action="{% url 'edit_advertiser' id_brands=brand.id_brand %}" method="post" class="d-inline">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" title="Edit">
                                            <i class="fe fe-edit-2"></i>
                                        </button>
                                    </form>
                                    <a href="{% url 'disable_advertiser' id_brands=brand.id_brand %}" class="btn btn-warning btn-sm" data-bs-toggle="tooltip" title="Disable">
                                        <i class="fe fe-slash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="empty-state">
                                    <i class="fe fe-users"></i>
                                    <h5>No Advertisers Found</h5>
                                    <p class="text-muted">No advertisers match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
{% endblock %}
 

{% block extra_js %}   
<script type="text/javascript">
    var input_channel = document.getElementById("channel-search");
    var input_region = document.getElementById("region-search");
    var input_day = document.getElementById("day-search");
    var input_version = document.getElementById("version-search");
    var table = document.getElementById("data-table321");

    function search() {
        let filter_channel = input_channel.value.toUpperCase();
        let filter_region = input_region.value.toUpperCase();
        let filter_day = input_day.value.toUpperCase();
        let filter_version = input_version.value.toUpperCase();
        let tr = table.rows;
        for (let i = 0; i < tr.length; i++) {
        td = tr[i].cells;
        td_channel = td[0].innerText;
        td_region = td[1].innerText;
        td_day = td[2].innerText;
        td_version = td[3].innerText;
        if (td_channel.toUpperCase().indexOf(filter_channel) > -1 && td_region.toUpperCase().indexOf(filter_region) > -1 && td_day.toUpperCase().indexOf(filter_day) > -1  && td_version.toUpperCase().indexOf(filter_version) > -1) {
            tr[i].style.display = "";
        } else
            tr[i].style.display = "none";
        }
    }

</script> 
{% endblock extra_js %}