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

{% block title %}{{ modelo.nome_exibicao }} - Allure{% endblock %}

{% block content %}
<div class="modelo-detail-page">
    <!-- Hero Section - Foto 100% da tela -->
    <section class="modelo-hero">
        <!-- Foto Principal - 100% da tela -->
        <div class="modelo-photo-fullscreen">
            {% if modelo.foto_perfil %}
                <img src="{{ modelo.foto_perfil.url }}" alt="{{ modelo.nome_exibicao }}" class="modelo-photo-full">
            {% else %}
                <img src="{% static 'images/placeholder-model.jpg' %}" alt="{{ modelo.nome_exibicao }}" class="modelo-photo-full">
            {% endif %}
        </div>
        
        <!-- Ações Rápidas - Grid abaixo da foto -->
        <div class="modelo-actions-grid">
            {% if modelo.whatsapp %}
                <a href="https://wa.me/55{{ modelo.whatsapp }}" target="_blank" class="action-square whatsapp">
                    <i class="fab fa-whatsapp"></i>
                </a>
            {% endif %}
            {% if modelo.telegram %}
                <a href="https://t.me/{{ modelo.telegram }}" target="_blank" class="action-square telegram">
                    <i class="fab fa-telegram"></i>
                </a>
            {% endif %}
            {% if modelo.email_contato %}
                <a href="mailto:{{ modelo.email_contato }}" class="action-square email">
                    <i class="fas fa-envelope"></i>
                </a>
            {% endif %}
            {% if user.is_authenticated %}
                <button class="action-square favorite {% if is_favorito %}active{% endif %}" onclick="toggleFavorite('{{ modelo.id }}')">
                    <i class="fas fa-heart"></i>
                </button>
            {% endif %}
            <button class="action-square share" onclick="shareProfile()">
                <i class="fas fa-share"></i>
            </button>
        </div>
        
        <!-- Informações da Modelo - Centralizadas abaixo das ações -->
        <div class="modelo-info-container">
            <div class="container">
                <div class="modelo-info">
                    <h1 class="modelo-name">{{ modelo.nome_exibicao }}</h1>
                    <p class="modelo-location">{{ modelo.cidade }}, {{ modelo.estado }}</p>
                    
                    {% if modelo.sobre_mim %}
                    <div class="modelo-description">
                        <p>{{ modelo.sobre_mim }}</p>
                    </div>
                    {% endif %}
                    
                    <!-- Badges simplificados -->
                    <div class="modelo-badges">
                        {% if modelo.is_boost_ativo %}
                            <span class="badge premium">Destaque</span>
                        {% endif %}
 
                        <span class="badge">{{ modelo.get_categoria_servico_display }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content - Layout 70/30 -->
    <div class="modelo-content">
        <div class="container-fluid">
            <div class="row">
                <!-- Galeria - 70% -->
                <div class="col-lg-8">
                    {% if fotos_galeria %}
                    <div class="gallery-section">
                        <div class="gallery-grid">
                            {% for foto in fotos_galeria %}
                            <div class="gallery-item" onclick="openGallery('{{ foto.imagem.url }}')">
                                <img src="{{ foto.imagem.url }}" alt="Foto de {{ modelo.nome_exibicao }}">
                                <div class="gallery-overlay">
                                    <i class="fas fa-expand"></i>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
                
                <!-- Sidebar - 30% -->
                <div class="col-lg-4">
                    <div class="modelo-sidebar">
                        <!-- Informações Essenciais -->
                        <div class="sidebar-card">
                            <h3>Informações</h3>
                            <div class="info-item">
                                <strong>Idade:</strong> {{ modelo.idade }} anos
                            </div>
                            <div class="info-item">
                                <strong>Localização:</strong> {{ modelo.cidade }}, {{ modelo.estado }}
                            </div>
                            {% if modelo.altura %}
                            <div class="info-item">
                                <strong>Altura:</strong> {{ modelo.altura }}cm
                            </div>
                            {% endif %}
                            <div class="info-item">
                                <strong>Membro desde:</strong> {{ modelo.data_cadastro|date:"M/Y" }}
                            </div>
                        </div>
                        
                        <!-- Contato -->
                        <div class="sidebar-card">
                            <h3>Contato</h3>
                            <div class="contact-buttons">
                                {% if modelo.whatsapp %}
                                    <a href="https://wa.me/55{{ modelo.whatsapp }}" target="_blank" class="contact-btn whatsapp">
                                        <i class="fab fa-whatsapp"></i>
                                        WhatsApp
                                    </a>
                                {% endif %}
                                {% if modelo.telegram %}
                                    <a href="https://t.me/{{ modelo.telegram }}" target="_blank" class="contact-btn telegram">
                                        <i class="fab fa-telegram"></i>
                                        Telegram
                                    </a>
                                {% endif %}
                                {% if modelo.email_contato %}
                                    <a href="mailto:{{ modelo.email_contato }}" class="contact-btn email">
                                        <i class="fas fa-envelope"></i>
                                        E-mail
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Serviços e Preços -->
                        {% if servicos %}
                        <div class="sidebar-card">
                            <h3>Serviços e Preços</h3>
                            <div class="services-list">
                                {% for servico in servicos %}
                                <div class="service-item">
                                    <div class="service-name">{{ servico.descricao }}</div>
                                    <div class="service-price">R$ {{ servico.preco }}</div>
                                    {% if servico.duracao %}
                                        <div class="service-duration">{{ servico.duracao }}</div>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Favorite Button -->
{% if user.is_authenticated %}
<button class="favorite-btn {% if is_favorito %}active{% endif %}" onclick="toggleFavorite('{{ modelo.id }}')">
    <i class="fas fa-heart"></i>
</button>
{% endif %}

<!-- Gallery Modal -->
<div class="gallery-modal" id="galleryModal">
    <button class="gallery-close" onclick="closeGallery()">
        <i class="fas fa-times"></i>
    </button>
    <img id="galleryImage" src="" alt="">
</div>
{% endblock %}

{% block extra_js %}
<script>
    function openGallery(imageUrl) {
        document.getElementById('galleryImage').src = imageUrl;
        document.getElementById('galleryModal').classList.add('show');
        document.body.style.overflow = 'hidden';
    }
    
    function closeGallery() {
        document.getElementById('galleryModal').classList.remove('show');
        document.body.style.overflow = 'auto';
    }
    
    // Close gallery with ESC key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeGallery();
        }
    });
    
    // Close gallery clicking outside image
    document.getElementById('galleryModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeGallery();
        }
    });
    
    {% if user.is_authenticated %}
    function toggleFavorite(modeloId) {
        fetch('{% url "core:toggle_favorito" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                'modelo_id': parseInt(modeloId)
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const btn = document.querySelector('.favorite-btn');
                if (data.is_favorito) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            }
        })
        .catch(error => {
            console.error('Erro:', error);
        });
    }
    {% endif %}
    
    function shareProfile() {
        if (navigator.share) {
            navigator.share({
                title: '{{ modelo.nome_exibicao }} - Allure',
                text: 'Confira o perfil de {{ modelo.nome_exibicao }} no Allure',
                url: window.location.href
            });
        } else {
            // Fallback para copiar link
            navigator.clipboard.writeText(window.location.href).then(function() {
                alert('Link copiado para a área de transferência!');
            });
        }
    }
</script>
{% endblock %}