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

{% block title %}Busca Avançada - Allure{% endblock %}

{% block extra_css %}
<style>
    /* Layout principal */
    .search-container {
        display: flex;
        min-height: calc(100vh - 80px);
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    
    /* Sidebar de filtros */
    .filters-sidebar {
        width: 380px;
        background: white;
        border-right: 1px solid #e9ecef;
        overflow-y: auto;
        position: sticky;
        top: 0;
        height: calc(100vh - 80px);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .filters-header {
        padding: 2rem 1.5rem 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .filters-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .filters-subtitle {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .filters-content {
        padding: 1.5rem;
    }
    
    /* Grupos de filtros */
    .filter-group {
        margin-bottom: 1.5rem;
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.25rem;
        border: 1px solid #e9ecef;
        position: relative;
    }
    
    .filter-group-title {
        font-size: 1rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
    }
    
    .filter-group-title i {
        color: #667eea;
    }
    
    /* Campos de formulário */
    .form-group {
        margin-bottom: 1rem;
        position: relative;
    }
    
    .form-group:last-child {
        margin-bottom: 0;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
        font-size: 0.85rem;
    }
    
    .form-control, .form-select {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 0.6rem;
        transition: all 0.3s ease;
        width: 100%;
        font-size: 0.85rem;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        outline: none;
    }
    
    /* Checkboxes simples */
    .checkbox-group {
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 0.75rem;
        background: white;
        margin-top: 0.5rem;
    }
    
    .checkbox-group > div {
        margin-bottom: 0.75rem;
    }
    
    .checkbox-group > div:last-child {
        margin-bottom: 0;
    }
    
    .checkbox-group > div > div {
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        border-radius: 4px;
        background: #f8f9fa;
    }
    
    .checkbox-group > div > div:last-child {
        margin-bottom: 0;
    }
    
    .checkbox-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #495057;
        cursor: pointer;
        width: 100%;
        min-height: 1.5rem;
        margin: 0;
        padding: 0;
    }
    
    .checkbox-group input[type="checkbox"] {
        margin-right: 0.75rem;
        width: 1.2rem;
        height: 1.2rem;
        flex-shrink: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* Grid para campos lado a lado */
    .row {
        display: flex;
        margin: 0 -0.5rem;
        flex-wrap: wrap;
    }
    
    .col-6 {
        flex: 0 0 50%;
        padding: 0 0.5rem;
        max-width: 50%;
    }
    

    
    /* Melhorar espaçamento do sidebar */
    .filters-content {
        padding: 1.25rem;
        padding-bottom: 1.5rem;
    }
    
    /* Botões */
    .btn-search {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        font-weight: 600;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    .btn-search:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    .btn-clear {
        background: #6c757d;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        width: 100%;
        margin-top: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .btn-clear:hover {
        background: #5a6268;
    }
    
    /* Conteúdo principal */
    .main-content {
        flex: 1;
        padding: 2rem;
        overflow-y: auto;
    }
    
    /* Header dos resultados */
    .results-header {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .results-count {
        font-size: 1.2rem;
        font-weight: 600;
        color: #495057;
    }
    
    .results-stats {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .stat-item {
        background: #f8f9fa;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    /* Ordenação */
    .sort-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .sort-label {
        font-weight: 600;
        color: #495057;
    }
    
    /* Grid de resultados */
    .results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .model-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        position: relative;
    }
    
    .model-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .model-image {
        height: 250px;
        position: relative;
        overflow: hidden;
    }
    
    .model-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .model-card:hover .model-image img {
        transform: scale(1.05);
    }
    
    .model-badges {
        position: absolute;
        top: 1rem;
        left: 1rem;
        display: flex;
        gap: 0.5rem;
    }
    
    .badge {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .badge-premium {
        background: #ffc107;
        color: #212529;
    }
    
    .badge-boost {
        background: #28a745;
        color: white;
    }
    
    .badge-online {
        background: #dc3545;
        color: white;
    }
    
    .model-info {
        padding: 1.5rem;
    }
    
    .model-name {
        font-size: 1.2rem;
        font-weight: 700;
        color: #212529;
        margin-bottom: 0.5rem;
    }
    
    .model-details {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    .model-location {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .model-rating {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        color: #ffc107;
    }
    
    .model-description {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .model-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .btn-view {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none;
        flex: 1;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .btn-view:hover {
        color: white;
        transform: translateY(-1px);
    }
    
    .btn-favorite {
        background: #dc3545;
        color: white;
        border: none;
        padding: 0.75rem;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .btn-favorite:hover {
        background: #c82333;
    }
    
    /* Paginação */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }
    
    .page-link {
        padding: 0.75rem 1rem;
        background: white;
        border: 2px solid #e9ecef;
        color: #495057;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .page-link:hover,
    .page-link.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
    }
    
    /* Sem resultados */
    .no-results {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .no-results-icon {
        font-size: 4rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .no-results-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
    }
    
    .no-results-text {
        color: #6c757d;
        margin-bottom: 2rem;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        .search-container {
            flex-direction: column;
        }
        
        .filters-sidebar {
            width: 100%;
            height: auto;
            position: relative;
        }
        
        .results-grid {
            grid-template-columns: 1fr;
        }
        
        .results-header {
            flex-direction: column;
            align-items: stretch;
        }
        
        .sort-controls {
            justify-content: space-between;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="search-container">
    <!-- Sidebar de Filtros -->
    <div class="filters-sidebar">
        <div class="filters-header">
            <div class="filters-title">
                <i class="fas fa-filter"></i>
                Filtros Avançados
            </div>
            <div class="filters-subtitle">
                Refine sua busca com precisão
            </div>
        </div>
        
        <div class="filters-content">
            <form method="get" id="search-form">
                <!-- Busca por texto -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-search"></i>
                        Busca por Texto
                    </div>
                    <div class="form-group">
                        {{ form.termo_busca }}
                        {% if form.termo_busca.help_text %}
                            <small class="form-text text-muted">{{ form.termo_busca.help_text }}</small>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Filtros básicos -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-list"></i>
                        Categorias
                    </div>
                    <div class="form-group">
                        <label class="form-label">Tipo de Serviço</label>
                        <div class="checkbox-group">
                            {{ form.categoria_servico }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Tipo de Anúncio</label>
                        <div class="checkbox-group">
                            {{ form.tipo_ensaio }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Etnia</label>
                        <div class="checkbox-group">
                            {{ form.etnia }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Local de Atendimento</label>
                        <div class="checkbox-group">
                            {{ form.local_atendimento }}
                        </div>
                    </div>
                </div>
                
                <!-- Localização -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-map-marker-alt"></i>
                        Localização
                    </div>
                    <div class="form-group">
                        <label class="form-label">Estado</label>
                        {{ form.estado }}
                    </div>
                    <div class="form-group">
                        <label class="form-label">Cidade</label>
                        {{ form.cidade }}
                    </div>
                </div>
                
                <!-- Idade -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-birthday-cake"></i>
                        Idade
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Mínima</label>
                                {{ form.idade_min }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Máxima</label>
                                {{ form.idade_max }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Preço -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-dollar-sign"></i>
                        Preço
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Mínimo</label>
                                {{ form.preco_min }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Máximo</label>
                                {{ form.preco_max }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Faixas de Preço</label>
                        <div class="checkbox-group">
                            {{ form.faixas_preco }}
                        </div>
                    </div>
                </div>
                
                <!-- Características físicas -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-ruler-vertical"></i>
                        Características
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Altura Mín (cm)</label>
                                {{ form.altura_min }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Altura Máx (cm)</label>
                                {{ form.altura_max }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Peso Mín (kg)</label>
                                {{ form.peso_min }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Peso Máx (kg)</label>
                                {{ form.peso_max }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Avaliações -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-star"></i>
                        Avaliações
                    </div>
                    <div class="form-group">
                        <label class="form-label">Nota Mínima</label>
                        {{ form.nota_min }}
                    </div>
                    <div class="form-check">
                        {{ form.com_avaliacoes }}
                        <label class="form-check-label" for="{{ form.com_avaliacoes.id_for_label }}">
                            Apenas com avaliações
                        </label>
                    </div>
                </div>
                
                <!-- Status -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-crown"></i>
                        Status
                    </div>
                    <div class="form-check">
                        {{ form.premium }}
                        <label class="form-check-label" for="{{ form.premium.id_for_label }}">
                            Apenas Premium
                        </label>
                    </div>
                    <div class="form-check">
                        {{ form.boost_ativo }}
                        <label class="form-check-label" for="{{ form.boost_ativo.id_for_label }}">
                            Com Boost Ativo
                        </label>
                    </div>
                    <div class="form-check">
                        {{ form.online }}
                        <label class="form-check-label" for="{{ form.online.id_for_label }}">
                            Online Agora
                        </label>
                    </div>
                    <div class="form-check">
                        {{ form.disponivel_agora }}
                        <label class="form-check-label" for="{{ form.disponivel_agora.id_for_label }}">
                            Disponível Agora
                        </label>
                    </div>
                </div>
                
                <!-- Ordenação -->
                <div class="filter-group">
                    <div class="filter-group-title">
                        <i class="fas fa-sort"></i>
                        Ordenação
                    </div>
                    <div class="form-group">
                        {{ form.ordenacao }}
                    </div>
                    <div class="form-group">
                        <label class="form-label">Resultados por página</label>
                        {{ form.por_pagina }}
                    </div>
                </div>
                
                <!-- Botões -->
                <button type="submit" class="btn-search">
                    <i class="fas fa-search"></i>
                    Buscar
                </button>
                <button type="button" class="btn-clear" onclick="clearFilters()">
                    <i class="fas fa-times"></i>
                    Limpar Filtros
                </button>
            </form>
        </div>
    </div>
    
    <!-- Conteúdo Principal -->
    <div class="main-content">
        <!-- Header dos Resultados -->
        <div class="results-header">
            <div class="results-count">
                {% if total_results > 0 %}
                    {{ total_results }} resultado{{ total_results|pluralize }} encontrado{{ total_results|pluralize }}
                {% else %}
                    Nenhum resultado encontrado
                {% endif %}
            </div>
            
            {% if search_stats %}
            <div class="results-stats">
                {% if search_stats.price_stats.min_price %}
                <div class="stat-item">
                    <i class="fas fa-dollar-sign"></i>
                    Preço: R$ {{ search_stats.price_stats.min_price|floatformat:0 }} - R$ {{ search_stats.price_stats.max_price|floatformat:0 }}
                </div>
                {% endif %}
                {% if search_stats.age_stats.min_age %}
                <div class="stat-item">
                    <i class="fas fa-birthday-cake"></i>
                    Idade: {{ search_stats.age_stats.min_age }} - {{ search_stats.age_stats.max_age }} anos
                </div>
                {% endif %}
            </div>
            {% endif %}
            
            {% if form.ordenacao.value %}
            <div class="sort-controls">
                <span class="sort-label">Ordenar por:</span>
                {{ form.ordenacao }}
            </div>
            {% endif %}
        </div>
        
        <!-- Grid de Resultados -->
        {% if page_obj %}
        <div class="results-grid">
            {% for modelo in page_obj %}
            <div class="model-card">
                <div class="model-image">
                    {% if modelo.foto_perfil %}
                        <img src="{{ modelo.foto_perfil.url }}" alt="{{ modelo.nome_exibicao }}">
                    {% else %}
                        <img src="{% static 'images/placeholder-model.jpg' %}" alt="{{ modelo.nome_exibicao }}">
                    {% endif %}
                    
                    <div class="model-badges">
                        {% if modelo.is_boost_ativo %}
                            <span class="badge badge-premium">⭐ Premium</span>
                        {% endif %}
                        {% if modelo.is_boost_ativo %}
                            <span class="badge badge-boost">🚀 Boost</span>
                        {% endif %}
                        {% if modelo.is_online == 1 %}
                            <span class="badge badge-online">🟢 Online</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="model-info">
                    <h3 class="model-name">{{ modelo.nome_exibicao }}</h3>
                    
                    <div class="model-details">
                        <div class="model-location">
                            <i class="fas fa-map-marker-alt"></i>
                            {{ modelo.cidade }}, {{ modelo.estado }}
                        </div>
                        <div class="model-rating">
                            <i class="fas fa-star"></i>
                            {{ modelo.avg_rating|default:"0.0"|floatformat:1 }}
                        </div>
                    </div>
                    
                    {% if modelo.sobre_mim %}
                    <p class="model-description">{{ modelo.sobre_mim|truncatewords:15 }}</p>
                    {% endif %}
                    
                    <div class="model-actions">
                        <a href="{% url 'core:modelo_detail' modelo.slug %}" class="btn-view">
                            Ver Perfil
                        </a>
                        <button class="btn-favorite" onclick="toggleFavorite({{ modelo.id }})">
                            <i class="fas fa-heart"></i>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Paginação -->
        {% if page_obj.has_other_pages %}
        <div class="pagination">
            {% if page_obj.has_previous %}
                <a href="?{{ request.GET.urlencode }}&page=1" class="page-link">
                    <i class="fas fa-angle-double-left"></i>
                </a>
                <a href="?{{ request.GET.urlencode }}&page={{ page_obj.previous_page_number }}" class="page-link">
                    <i class="fas fa-angle-left"></i>
                </a>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <span class="page-link active">{{ num }}</span>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a href="?{{ request.GET.urlencode }}&page={{ num }}" class="page-link">{{ num }}</a>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
                <a href="?{{ request.GET.urlencode }}&page={{ page_obj.next_page_number }}" class="page-link">
                    <i class="fas fa-angle-right"></i>
                </a>
                <a href="?{{ request.GET.urlencode }}&page={{ page_obj.paginator.num_pages }}" class="page-link">
                    <i class="fas fa-angle-double-right"></i>
                </a>
            {% endif %}
        </div>
        {% endif %}
        
        {% else %}
        <!-- Sem resultados -->
        <div class="no-results">
            <div class="no-results-icon">
                <i class="fas fa-search"></i>
            </div>
            <h3 class="no-results-title">Nenhum resultado encontrado</h3>
            <p class="no-results-text">
                Tente ajustar seus filtros de busca ou usar termos diferentes.
            </p>
            <button class="btn-search" onclick="clearFilters()">
                <i class="fas fa-times"></i>
                Limpar Filtros
            </button>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Função para limpar filtros
function clearFilters() {
    window.location.href = '{% url "search:advanced_search" %}';
}

// Função para alternar favorito
function toggleFavorite(modeloId) {
    fetch('{% url "core:toggle_favorito" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify({
            modelo_id: modeloId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Atualizar interface
            const btn = event.target.closest('.btn-favorite');
            if (data.is_favorite) {
                btn.style.background = '#dc3545';
            } else {
                btn.style.background = '#6c757d';
            }
        }
    })
    .catch(error => {
        console.error('Erro:', error);
    });
}

// Função para obter cookie CSRF
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Carregar cidades quando estado for selecionado
document.getElementById('{{ form.estado.id_for_label }}').addEventListener('change', function() {
    const estado = this.value;
    const cidadeInput = document.getElementById('{{ form.cidade.id_for_label }}');
    
    if (estado) {
        fetch(`{% url 'search:get_cities_by_state' 'SP' %}`.replace('SP', estado))
            .then(response => response.json())
            .then(data => {
                cidadeInput.value = '';
                // Aqui você pode implementar um autocomplete para as cidades
            });
    }
});

// Auto-submit do formulário quando filtros mudarem
document.querySelectorAll('#search-form input, #search-form select').forEach(element => {
    if (element.type !== 'submit' && element.type !== 'button') {
        element.addEventListener('change', function() {
            // Aguardar um pouco para evitar muitas requisições
            clearTimeout(window.searchTimeout);
            window.searchTimeout = setTimeout(() => {
                document.getElementById('search-form').submit();
            }, 500);
        });
    }
});
</script>
{% endblock %}