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

{% block title %}Editar Fotos - Allure{% endblock %}

{% block extra_css %}
<style>
    .photo-edit-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .photo-section {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
        color: var(--primary-color);
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .profile-photo-section {
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    
    .current-profile-photo {
        text-align: center;
        margin: 1rem 0;
    }
    
    .current-profile-photo img {
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        border-radius: 12px;
        border: 3px solid var(--primary-color);
    }
    
    .gallery-section {
        margin-top: 2rem;
    }
    
    .photo-upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f8f9fa;
        margin-bottom: 1rem;
    }
    
    .photo-upload-area:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
    }
    
    .photo-upload-icon {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }
    
    .photo-upload-text {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .photo-upload-hint {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .photo-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    .photo-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .photo-item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }
    
    .photo-info {
        padding: 0.5rem;
        background: white;
        border-top: 1px solid #dee2e6;
    }
    
    .photo-category {
        font-size: 0.8rem;
        color: #495057;
        margin-bottom: 0.25rem;
    }
    
    .photo-social-auth {
        font-size: 0.75rem;
        color: #28a745;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .foto-config-item {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background: #f8f9fa;
    }
    
    .foto-config-preview {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    
    .foto-config-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .foto-config-controls .form-group {
        margin-bottom: 0;
        min-width: 150px;
    }
    
    .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .photo-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .photo-item:hover .photo-overlay {
        opacity: 1;
    }
    
    .photo-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .btn-remove-photo {
        background: #dc3545;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background 0.3s ease;
    }
    
    .btn-remove-photo:hover {
        background: #c82333;
    }
    
    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid #f0f0f0;
    }
    
    .btn-back {
        background: #6c757d;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        transition: background 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-back:hover {
        background: #5a6268;
        color: white;
        text-decoration: none;
    }
    
    .btn-save {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        transition: background 0.3s ease;
    }
    
    .btn-save:hover {
        background: #0056b3;
    }
    
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .alert-success {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }
    
    .alert-danger {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
    }
</style>
{% endblock %}

{% block content %}
<div class="photo-edit-container">
    <!-- Header -->
    <div class="photo-section">
        <h1 class="section-title">
            <i class="fas fa-camera"></i>
            Editar Fotos
        </h1>
        <p class="text-muted">
            Gerencie suas fotos de perfil e galeria. Você pode adicionar, remover e organizar suas fotos.
        </p>
    </div>

    <!-- Mensagens -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <!-- Foto de Perfil -->
        <div class="photo-section profile-photo-section">
            <h2 class="section-title">
                <i class="fas fa-user-circle"></i>
                Foto de Perfil Principal
            </h2>
            
            <div class="form-group">
                <label for="foto_perfil" class="form-label">
                    Nova Foto de Perfil
                </label>
                <input type="file" 
                       id="foto_perfil" 
                       name="foto_perfil" 
                       accept="image/*" 
                       class="form-control">
                <div class="form-text">
                    Selecione uma nova foto para seu perfil (máximo 5MB)
                </div>
            </div>
            
            {% if modelo.foto_perfil %}
            <div class="current-profile-photo">
                <h6>Foto Atual:</h6>
                <img src="{{ modelo.foto_perfil.url }}" 
                     alt="Foto de perfil atual">
            </div>
            {% else %}
            <div class="current-profile-photo">
                <p class="text-muted">Nenhuma foto de perfil definida</p>
            </div>
            {% endif %}
        </div>
        
        <!-- Galeria de Fotos -->
        <div class="photo-section gallery-section">
            <h2 class="section-title">
                <i class="fas fa-images"></i>
                Galeria de Fotos
            </h2>
            
            <div class="form-group">
                <label for="fotos_galeria" class="form-label">
                    Adicionar Novas Fotos
                </label>
                <div class="photo-upload-area" onclick="document.getElementById('fotos_galeria').click()">
                    <i class="fas fa-cloud-upload-alt photo-upload-icon"></i>
                    <div class="photo-upload-text">Clique para adicionar fotos</div>
                    <div class="photo-upload-hint">Arraste e solte ou clique para selecionar (máximo 10 fotos)</div>
                    <input type="file" 
                           id="fotos_galeria" 
                           name="fotos_galeria" 
                           multiple 
                           accept="image/*" 
                           style="display: none;">
                </div>
            </div>
            
            <!-- Preview das fotos selecionadas com configurações -->
            <div id="fotos-preview" style="display: none;">
                <h4>Configurar Fotos Selecionadas</h4>
                <div id="fotos-config-container"></div>
            </div>
            
            <!-- Fotos Atuais -->
            {% if fotos_galeria %}
            <h4>Fotos da Galeria</h4>
            <div class="gallery-grid">
                {% for foto in fotos_galeria %}
                <div class="photo-item">
                    <img src="{{ foto.imagem.url }}" alt="Foto da galeria">
                    <div class="photo-info">
                        <div class="photo-category">
                            <strong>Categoria:</strong> {{ foto.get_categoria_display }}
                        </div>
                        {% if foto.autorizar_redes_sociais %}
                        <div class="photo-social-auth">
                            <i class="fas fa-share-alt text-success"></i> Autorizada para redes sociais
                        </div>
                        {% endif %}
                    </div>
                    <div class="photo-overlay">
                        <div class="photo-actions">
                            <button type="button" 
                                    class="btn-remove-photo" 
                                    onclick="removePhoto('{{ foto.id }}')">
                                <i class="fas fa-trash"></i> Remover
                            </button>
                        </div>
                    </div>
                    <input type="hidden" name="fotos_remover" value="{{ foto.id }}">
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center text-muted">
                <p>Nenhuma foto na galeria ainda</p>
            </div>
            {% endif %}
        </div>
        
        <!-- Ações -->
        <div class="form-actions">
            <a href="{% url 'accounts:painel_modelo' %}" class="btn-back">
                <i class="fas fa-arrow-left"></i>
                Voltar ao Painel
            </a>
            
            <button type="submit" class="btn-save">
                <i class="fas fa-save"></i>
                Salvar Alterações
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Drag and drop para área de upload
    const uploadArea = document.querySelector('.photo-upload-area');
    const fileInput = document.getElementById('fotos_galeria');
    
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = 'var(--primary-color)';
        uploadArea.style.background = 'rgba(74, 144, 226, 0.1)';
    });
    
    uploadArea.addEventListener('dragleave', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#dee2e6';
        uploadArea.style.background = '#f8f9fa';
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#dee2e6';
        uploadArea.style.background = '#f8f9fa';
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            // Simular mudança para mostrar preview
            const event = new Event('change');
            fileInput.dispatchEvent(event);
        }
    });
    
    // Preview das fotos selecionadas
    fileInput.addEventListener('change', function(e) {
        const files = e.target.files;
        if (files.length > 10) {
            alert('Máximo de 10 fotos permitido. Apenas as primeiras 10 serão processadas.');
        }
        
        // Mostrar preview e configurações
        showPhotosPreview(files);
    });
    
    function showPhotosPreview(files) {
        const previewContainer = document.getElementById('fotos-preview');
        const configContainer = document.getElementById('fotos-config-container');
        
        if (files.length === 0) {
            previewContainer.style.display = 'none';
            return;
        }
        
        previewContainer.style.display = 'block';
        configContainer.innerHTML = '';
        
        Array.from(files).slice(0, 10).forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const configItem = document.createElement('div');
                configItem.className = 'foto-config-item';
                configItem.innerHTML = `
                    <div style="display: flex; gap: 1rem; align-items: center;">
                        <img src="${e.target.result}" class="foto-config-preview" alt="Preview">
                        <div class="foto-config-controls">
                            <div class="form-group">
                                <label class="form-label">Categoria:</label>
                                <select name="categorias_galeria" class="form-select" required>
                                    <option value="galeria">Galeria</option>
                                    <option value="seios">Seios</option>
                                    <option value="frente">Frente</option>
                                    <option value="bumbum">Bumbum</option>
                                    <option value="rosto">Rosto</option>
                                </select>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" 
                                       name="autorizar_redes_sociais" 
                                       value="foto_${index}" 
                                       id="social_${index}"
                                       class="form-check-input">
                                <label for="social_${index}" class="form-check-label">
                                    Autorizar redes sociais
                                </label>
                            </div>
                        </div>
                    </div>
                `;
                configContainer.appendChild(configItem);
            };
            reader.readAsDataURL(file);
        });
    }
});

function removePhoto(fotoId) {
    if (confirm('Tem certeza que deseja remover esta foto?')) {
        // Marcar para remoção
        const hiddenInput = document.querySelector(`input[name="fotos_remover"][value="${fotoId}"]`);
        if (hiddenInput) {
            hiddenInput.closest('.photo-item').style.opacity = '0.5';
            hiddenInput.closest('.photo-item').style.pointerEvents = 'none';
        }
    }
}
</script>
{% endblock %}