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

{% block title %}Brands - {{ block.super }}{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .brand-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
    }
    
    .search-filters {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stats-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
    }
    
    .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }
    
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .btn-create {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        border: none;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(40,167,69,0.3);
        color: white;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .filter-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        gap: 1rem;
        align-items: end;
    }
    
    .category-filter {
        position: relative;
    }
    
    .category-tree {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background: white;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        display: none;
    }
    
    .category-item {
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .category-item:hover {
        background: #f8f9fa;
    }
    
    .category-item.selected {
        background: #007bff;
        color: white;
    }
    
    .brand-card {
        transition: all 0.3s ease;
    }
    
    .brand-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .quick-actions {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .quick-action-btn {
        padding: 0.5rem 1rem;
        border: 1px solid #dee2e6;
        background: white;
        border-radius: 20px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .quick-action-btn:hover,
    .quick-action-btn.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }
    
    @media (max-width: 768px) {
        .filter-row {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        
        .page-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        
        .brand-grid {
            grid-template-columns: 1fr;
        }
        
        .stats-cards {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .quick-actions {
            flex-wrap: wrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h1 class="h3 mb-0">Brands</h1>
            <p class="text-muted mb-0">Manage your brand portfolio</p>
        </div>
        <a href="{% url 'advertisers:brand_create' %}" class="btn btn-create">
            <i class="fas fa-plus me-2"></i>Create Brand
        </a>
    </div>
    
    <!-- Statistics Cards -->
    <div class="stats-cards">
        <div class="stat-card">
            <div class="stat-number">{{ total_brands }}</div>
            <div class="stat-label">Total Brands</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ active_brands }}</div>
            <div class="stat-label">Active Brands</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ total_campaigns }}</div>
            <div class="stat-label">Total Campaigns</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">${{ total_budget|format_currency|default:"0" }}</div>
            <div class="stat-label">Total Budget</div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="quick-actions">
        <button class="quick-action-btn active" data-filter="all">
            <i class="fas fa-list me-1"></i>All Brands
        </button>
        <button class="quick-action-btn" data-filter="active">
            <i class="fas fa-check-circle me-1"></i>Active
        </button>
        <button class="quick-action-btn" data-filter="inactive">
            <i class="fas fa-pause-circle me-1"></i>Inactive
        </button>
        <button class="quick-action-btn" data-filter="recent">
            <i class="fas fa-clock me-1"></i>Recent
        </button>
        <button class="quick-action-btn" data-filter="high-budget">
            <i class="fas fa-dollar-sign me-1"></i>High Budget
        </button>
    </div>
    
    <!-- Search and Filters -->
    <div class="search-filters">
        <form method="get" id="filterForm">
            <div class="filter-row">
                <div>
                    <label for="search" class="form-label">Search Brands</label>
                    {{ search_form.search|add_class:"form-control"|attr:"placeholder:Search by name, industry, or description..." }}
                </div>
                <div>
                    <label for="agency" class="form-label">Agency</label>
                    {{ search_form.agency|add_class:"form-select" }}
                </div>
                <div>
                    <label for="category" class="form-label">Category</label>
                    {{ search_form.category|add_class:"form-select" }}
                </div>
                <div>
                    <label for="status" class="form-label">Status</label>
                    {{ search_form.status|add_class:"form-select" }}
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                    <a href="{% url 'advertisers:brand_list' %}" class="btn btn-outline-secondary ms-2">
                        <i class="fas fa-times me-1"></i>Clear
                    </a>
                </div>
            </div>
            
            <!-- Advanced Filters (Collapsible) -->
            <div class="mt-3">
                <button type="button" class="btn btn-link p-0" data-bs-toggle="collapse" data-bs-target="#advancedFilters">
                    <i class="fas fa-sliders-h me-1"></i>Advanced Filters
                </button>
            </div>
            
            <div class="collapse mt-2" id="advancedFilters">
                <div class="row">
                    <div class="col-md-3">
                        <label for="industry" class="form-label">Industry</label>
                        {{ search_form.industry|add_class:"form-control" }}
                    </div>
                    <div class="col-md-3">
                        <label for="min_budget" class="form-label">Min Budget</label>
                        {{ search_form.min_budget|add_class:"form-control" }}
                    </div>
                    <div class="col-md-3">
                        <label for="max_budget" class="form-label">Max Budget</label>
                        {{ search_form.max_budget|add_class:"form-control" }}
                    </div>
                    <div class="col-md-3">
                        <label for="ordering" class="form-label">Sort By</label>
                        {{ search_form.ordering|add_class:"form-select" }}
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- Results Info -->
    {% if brands %}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <p class="text-muted mb-0">
                Showing {{ brands.start_index }}-{{ brands.end_index }} of {{ brands.paginator.count }} brands
            </p>
            <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check" name="view" id="grid-view" checked>
                <label class="btn btn-outline-secondary" for="grid-view">
                    <i class="fas fa-th"></i>
                </label>
                <input type="radio" class="btn-check" name="view" id="list-view">
                <label class="btn btn-outline-secondary" for="list-view">
                    <i class="fas fa-list"></i>
                </label>
            </div>
        </div>
    {% endif %}
    
    <!-- Brands Grid -->
    {% if brands %}
        <div class="brand-grid" id="brandGrid">
            {% for brand in brands %}
                {% brand_card brand %}
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if brands.has_other_pages %}
            <nav aria-label="Brand pagination" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if brands.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?{% query_string page=1 %}">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% query_string page=brands.previous_page_number %}">
                                <i class="fas fa-angle-left"></i>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for num in brands.paginator.page_range %}
                        {% if brands.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > brands.number|add:'-3' and num < brands.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?{% query_string page=num %}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if brands.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?{% query_string page=brands.next_page_number %}">
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% query_string page=brands.paginator.num_pages %}">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <!-- Empty State -->
        <div class="empty-state">
            <i class="fas fa-tags"></i>
            <h4>No Brands Found</h4>
            {% if request.GET.search or request.GET.agency or request.GET.category or request.GET.status %}
                <p>No brands match your current filters.</p>
                <a href="{% url 'advertisers:brand_list' %}" class="btn btn-outline-primary">
                    <i class="fas fa-times me-2"></i>Clear Filters
                </a>
            {% else %}
                <p>Get started by creating your first brand.</p>
                <a href="{% url 'advertisers:brand_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Create First Brand
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.form-select').select2({
        theme: 'bootstrap-5',
        width: '100%',
        allowClear: true
    });
    
    // Auto-submit form on filter change
    $('#filterForm select').on('change', function() {
        $('#filterForm').submit();
    });
    
    // Quick action filters
    $('.quick-action-btn').on('click', function() {
        $('.quick-action-btn').removeClass('active');
        $(this).addClass('active');
        
        const filter = $(this).data('filter');
        applyQuickFilter(filter);
    });
    
    function applyQuickFilter(filter) {
        const form = $('#filterForm');
        const statusField = form.find('[name="status"]');
        const orderingField = form.find('[name="ordering"]');
        
        // Reset filters
        statusField.val('').trigger('change');
        orderingField.val('').trigger('change');
        
        switch(filter) {
            case 'active':
                statusField.val('active').trigger('change');
                break;
            case 'inactive':
                statusField.val('inactive').trigger('change');
                break;
            case 'recent':
                orderingField.val('-created_at').trigger('change');
                break;
            case 'high-budget':
                orderingField.val('-annual_budget').trigger('change');
                break;
        }
        
        if (filter !== 'all') {
            form.submit();
        }
    }
    
    // View toggle functionality
    $('input[name="view"]').on('change', function() {
        const isGridView = $('#grid-view').is(':checked');
        const $grid = $('#brandGrid');
        
        if (isGridView) {
            $grid.removeClass('list-view').addClass('brand-grid');
        } else {
            $grid.removeClass('brand-grid').addClass('list-view');
        }
    });
    
    // Search input debounce
    let searchTimeout;
    $('#id_search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filterForm').submit();
        }, 500);
    });
    
    // Smooth scroll to top on pagination
    $('.pagination a').on('click', function(e) {
        $('html, body').animate({
            scrollTop: $('.page-header').offset().top - 20
        }, 300);
    });
    
    // Keyboard shortcuts
    $(document).on('keydown', function(e) {
        // Ctrl/Cmd + K to focus search
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            $('#id_search').focus();
        }
        
        // Ctrl/Cmd + N to create new brand
        if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
            e.preventDefault();
            window.location.href = "{% url 'advertisers:brand_create' %}";
        }
        
        // Number keys for quick filters
        if (e.key >= '1' && e.key <= '5' && !e.ctrlKey && !e.metaKey) {
            const filters = ['all', 'active', 'inactive', 'recent', 'high-budget'];
            const index = parseInt(e.key) - 1;
            if (index < filters.length) {
                e.preventDefault();
                $(`.quick-action-btn[data-filter="${filters[index]}"]`).click();
            }
        }
    });
    
    // Show keyboard shortcuts hint
    const $searchInput = $('#id_search');
    const originalPlaceholder = $searchInput.attr('placeholder');
    
    $searchInput.attr('placeholder', originalPlaceholder + ' (Ctrl+K)');
    
    // Bulk actions
    let selectedBrands = [];
    
    $('.brand-checkbox').on('change', function() {
        const brandId = $(this).val();
        if ($(this).is(':checked')) {
            selectedBrands.push(brandId);
        } else {
            selectedBrands = selectedBrands.filter(id => id !== brandId);
        }
        
        updateBulkActions();
    });
    
    function updateBulkActions() {
        const $bulkActions = $('.bulk-actions');
        if (selectedBrands.length > 0) {
            $bulkActions.show();
            $bulkActions.find('.selected-count').text(selectedBrands.length);
        } else {
            $bulkActions.hide();
        }
    }
    
    // Export functionality
    $('.export-btn').on('click', function() {
        const format = $(this).data('format');
        const currentUrl = new URL(window.location);
        currentUrl.searchParams.set('export', format);
        window.location.href = currentUrl.toString();
    });
});
</script>
{% endblock %}