{% extends "advertisers/base.html" %}
{% load static %}
{% load advertiser_tags %}

{% block title %}Advertisers & Brands - Adtlas{% endblock %}

{% block extra_css %}
<link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Advertisers & Brands</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Advertisers</li>
        </ol>
    </div>
    <div class="ms-auto pageheader-btn">
        <a href="{% url 'advertisers:create_agency' %}" class="btn btn-primary btn-icon text-white me-3">
            <span>
                <i class="fe fe-plus"></i>
            </span> Add Agency
        </a>
        <a href="{% url 'advertisers:create_brand' %}" class="btn btn-success btn-icon text-white">
            <span>
                <i class="fe fe-plus"></i>
            </span> Add Brand
        </a>
    </div>
</div>

<!-- Row -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Agencies & Brands Overview</h3>
                <div class="card-options">
                    <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                    <a href="#" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
                </div>
            </div>
            <div class="card-body">
                <!-- Filter Section -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <label class="form-label">Filter by Agency</label>
                        <select class="form-control select2" id="agency-filter">
                            <option value="">All Agencies</option>
                            {% for agency in agencies %}
                            <option value="{{ agency.id }}">{{ agency.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Filter by Category</label>
                        <select class="form-control select2" id="category-filter">
                            <option value="">All Categories</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select class="form-control" id="status-filter">
                            <option value="">All Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" id="apply-filters">Apply Filters</button>
                            <button class="btn btn-secondary" id="reset-filters">Reset</button>
                        </div>
                    </div>
                </div>

                <!-- Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="card overflow-hidden">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="mt-2">
                                        <h6 class="">Total Agencies</h6>
                                        <h2 class="mb-0 number-font">{{ total_agencies }}</h2>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="chart-wrapper mt-1">
                                            <i class="fe fe-briefcase text-primary fs-30"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="card overflow-hidden">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="mt-2">
                                        <h6 class="">Total Brands</h6>
                                        <h2 class="mb-0 number-font">{{ total_brands }}</h2>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="chart-wrapper mt-1">
                                            <i class="fe fe-tag text-success fs-30"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="card overflow-hidden">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="mt-2">
                                        <h6 class="">Active Campaigns</h6>
                                        <h2 class="mb-0 number-font">{{ active_campaigns }}</h2>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="chart-wrapper mt-1">
                                            <i class="fe fe-trending-up text-warning fs-30"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="card overflow-hidden">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="mt-2">
                                        <h6 class="">Total Budget</h6>
                                        <h2 class="mb-0 number-font">{{ total_budget|format_currency }}</h2>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="chart-wrapper mt-1">
                                            <i class="fe fe-dollar-sign text-info fs-30"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Brands Table -->
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="brands-table">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Brand</th>
                                <th class="wd-15p border-bottom-0">Agency</th>
                                <th class="wd-10p border-bottom-0">Category</th>
                                <th class="wd-10p border-bottom-0">Campaigns</th>
                                <th class="wd-10p border-bottom-0">Budget</th>
                                <th class="wd-10p border-bottom-0">Status</th>
                                <th class="wd-10p border-bottom-0">Created</th>
                                <th class="wd-10p border-bottom-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for brand in brands %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if brand.logo %}
                                        <img src="{{ brand.logo.url }}" alt="{{ brand.name }}" class="avatar avatar-sm me-2">
                                        {% else %}
                                        <div class="avatar avatar-sm me-2 bg-primary-transparent">
                                            <i class="fe fe-tag"></i>
                                        </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-0">{{ brand.name }}</h6>
                                            {% if brand.industry %}
                                            <small class="text-muted">{{ brand.industry }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if brand.agency.logo %}
                                        <img src="{{ brand.agency.logo.url }}" alt="{{ brand.agency.name }}" class="avatar avatar-xs me-2">
                                        {% endif %}
                                        <span>{{ brand.agency.name }}</span>
                                    </div>
                                </td>
                                <td>
                                    {% if brand.category %}
                                    <span class="badge bg-light text-dark">{{ brand.category.name }}</span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-primary">{{ brand.total_campaigns }}</span>
                                </td>
                                <td>
                                    {% if brand.annual_budget %}
                                    <span class="fw-semibold">{{ brand.annual_budget|format_currency }}</span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ brand.status|status_badge }}
                                </td>
                                <td>
                                    <span class="text-muted">{{ brand.created_at|date:"M d, Y" }}</span>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'advertisers:brand_detail' brand.id %}" class="btn btn-sm btn-primary" title="View Details">
                                            <i class="fe fe-eye"></i>
                                        </a>
                                        <a href="{% url 'advertisers:brand_edit' brand.id %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fe fe-edit"></i>
                                        </a>
                                        <button class="btn btn-sm btn-danger" onclick="deleteBrand({{ brand.id }})" title="Delete">
                                            <i class="fe fe-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <div class="empty">
                                        <div class="empty-img"><i class="fe fe-tag" style="font-size: 3rem; opacity: 0.3;"></i></div>
                                        <p class="empty-title">No brands found</p>
                                        <p class="empty-subtitle text-muted">Get started by creating your first brand.</p>
                                        <div class="empty-action">
                                            <a href="{% url 'advertisers:create_brand' %}" class="btn btn-primary">
                                                <i class="fe fe-plus"></i> Add Brand
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Row -->
{% endblock %}

{% block extra_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/select2/select2.full.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#brands-table').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[6, 'desc']], // Sort by created date
        columnDefs: [
            { orderable: false, targets: [7] } // Disable sorting for actions column
        ]
    });
    
    // Initialize Select2
    $('.select2').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
    
    // Apply filters
    $('#apply-filters').click(function() {
        var agency = $('#agency-filter').val();
        var category = $('#category-filter').val();
        var status = $('#status-filter').val();
        
        // Apply filters to DataTable
        table.columns(1).search(agency).draw();
        table.columns(2).search(category).draw();
        table.columns(5).search(status).draw();
    });
    
    // Reset filters
    $('#reset-filters').click(function() {
        $('#agency-filter, #category-filter, #status-filter').val('').trigger('change');
        table.search('').columns().search('').draw();
    });
});

// Delete brand function
function deleteBrand(brandId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // Perform delete action
            window.location.href = `/advertisers/brands/${brandId}/delete/`;
        }
    });
}
</script>
{% endblock %}