{% extends "admin/change_form.html" %}
{% load static %}

{% block extrahead %}
{{ block.super }}
<style>
    /* Styles spécifiques pour le formulaire des projets */
    .field-main_image_preview {
        text-align: center;
        background: #f8f8f8;
        padding: 20px;
        border-radius: 8px;
        margin: 15px 0;
    }
    
    .inline-group .tabular {
        overflow-x: auto;
    }
    
    .project-form-header {
        background: linear-gradient(135deg, #1e1810, #2d2318);
        color: #d4af37;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .project-form-header h1 {
        color: #d4af37;
        margin: 0;
        font-size: 28px;
        font-weight: 700;
    }
    
    .project-form-header p {
        color: #c7a876;
        margin: 5px 0 0 0;
        font-size: 16px;
    }
    
    .inline-group h2[data-type="videos"]:after {
        content: " - Ajoutez des vidéos pour enrichir la présentation (facultatif)";
        font-size: 12px;
        font-weight: normal;
        color: #666;
        margin-left: 10px;
    }
    
    /* Simplification des inlines pour images et vidéos */
    .inline-related {
        background: #fafafa;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        margin: 15px;
        padding: 15px;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .inline-related:hover {
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
        border-color: #d4af37;
    }
    
    /* Masquer les fieldsets complexes pour une interface simple */
    .inline-related .fieldset {
        border: none;
        background: transparent;
        margin: 0;
    }
    
    .inline-related .fieldset h2 {
        display: none;
    }
    
    /* Style simple pour les champs de fichier */
    input[type="file"] {
        background: #fff;
        border: 2px dashed #d4af37;
        border-radius: 8px;
        padding: 20px;
        width: 100%;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    input[type="file"]:hover {
        border-color: #c7a876;
        background: #fefef9;
    }
    
    /* Style pour les champs URL */
    input[type="url"] {
        background: #f8f8f8;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        padding: 12px;
        width: 100%;
        font-size: 14px;
    }
    
    input[type="url"]:focus {
        border-color: #2196F3;
        background: #fff;
        outline: none;
    }
    
    /* Messages d'aide simplifiés */
    .help {
        font-size: 12px;
        color: #666;
        font-style: italic;
        margin-top: 5px;
    }
    
    /* Boutons de suppression plus visibles */
    .delete-row {
        background: #f44336 !important;
        color: white !important;
        border: none !important;
        padding: 8px 15px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        float: right !important;
        margin-top: -40px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .delete-row:hover {
        background: #d32f2f !important;
    }
    
    .inline-group {
        background: #fff;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        margin: 25px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .inline-group h2 {
        background: linear-gradient(135deg, #d4af37, #c7a876);
        color: #1e1810;
        padding: 15px 25px;
        margin: 0;
        border-radius: 12px 12px 0 0;
        font-weight: 700;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .inline-group h2:before {
        content: "📁";
        font-size: 20px;
    }
    
    .inline-group h2[data-type="images"]:before {
        content: "🖼️";
    }
    
    .inline-group h2[data-type="videos"]:before {
        content: "🎥";
    }
    
    .inline-related {
        background: #fafafa;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        margin: 15px;
        padding: 20px;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .inline-related:hover {
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
        border-color: #d4af37;
    }
    
    .inline-related h3 {
        background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
        color: #333;
        padding: 10px 15px;
        margin: -20px -20px 15px -20px;
        border-radius: 8px 8px 0 0;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .inline-related .delete {
        background: #f44336;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
    }
    
    .form-row .field-box {
        margin-bottom: 15px;
    }
    
    .form-row label {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
        display: block;
    }
    
    .add-row {
        text-align: center;
        padding: 20px;
    }
    
    .add-row a {
        background: linear-gradient(135deg, #4CAF50, #45a049);
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }
    
    .add-row a:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
    
    .add-row a:before {
        content: "➕";
        font-size: 16px;
    }
    
    /* Amélioration des aperçus */
    .field-image_preview img,
    .field-video_preview video,
    .field-thumbnail_preview img {
        border: 3px solid #d4af37;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transition: transform 0.3s ease;
    }
    
    .field-image_preview img:hover,
    .field-thumbnail_preview img:hover {
        transform: scale(1.05);
    }
    
    /* Messages de statut */
    .status-message {
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        border-left: 4px solid #2196F3;
        padding: 15px;
        margin: 15px 0;
        border-radius: 0 8px 8px 0;
    }
    
    .success-message {
        background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
        border-left: 4px solid #4CAF50;
    }
    
    .warning-message {
        background: linear-gradient(135deg, #fff3e0, #ffcc02);
        border-left: 4px solid #FF9800;
    }
</style>
{% endblock %}

{% block content %}
<div class="project-form-header">
    <h1>
        {% if original %}
            Modification du projet : {{ original.title }}
        {% else %}
            Nouveau projet ECOLUX
        {% endif %}
    </h1>
    <p>
        {% if original %}
            Créé le {{ original.created_at|date:"d/m/Y à H:i" }}
        {% else %}
            Création d'un nouveau projet de construction
        {% endif %}
    </p>
</div>

{% if messages %}
    {% for message in messages %}
        <div class="status-message {% if message.level_tag == 'success' %}success-message{% elif message.level_tag == 'warning' %}warning-message{% endif %}">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

{{ block.super }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Ajouter des attributs data pour les icônes
    const imageInlineGroup = document.querySelector('#projectimage_set-group h2');
    if (imageInlineGroup) {
        imageInlineGroup.setAttribute('data-type', 'images');
        imageInlineGroup.innerHTML = '🖼️ Images du projet <span style="font-size: 14px; font-weight: normal; color: #666;">(glisser-déposer vos images)</span>';
    }
    
    const videoInlineGroup = document.querySelector('#projectvideo_set-group h2');
    if (videoInlineGroup) {
        videoInlineGroup.setAttribute('data-type', 'videos');
        videoInlineGroup.innerHTML = '🎥 Vidéos du projet <span style="font-size: 14px; font-weight: normal; color: #666;">(optionnel - fichier ou URL)</span>';
    }
    
    // Amélioration de l'ordre des éléments
    function updateOrderNumbers() {
        const imageOrderInputs = document.querySelectorAll('#projectimage_set-group input[name*="order"]');
        const videoOrderInputs = document.querySelectorAll('#projectvideo_set-group input[name*="order"]');
        
        imageOrderInputs.forEach((input, index) => {
            if (!input.value || input.value == '0') {
                input.value = index + 1;
            }
        });
        
        videoOrderInputs.forEach((input, index) => {
            if (!input.value || input.value == '0') {
                input.value = index + 1;
            }
        });
    }
    
    // Auto-update des numéros d'ordre
    setTimeout(updateOrderNumbers, 500);
    
    // Amélioration de la section vidéo pour montrer qu'elle est optionnelle
    const videoSection = document.querySelector('#projectvideo_set-group');
    if (videoSection) {
        const videoForms = videoSection.querySelectorAll('.inline-related');
        const addVideoButton = videoSection.querySelector('.add-row a');
        
        if (addVideoButton) {
            addVideoButton.innerHTML = '🎬 Ajouter une vidéo';
            addVideoButton.style.background = 'linear-gradient(135deg, #2196F3, #1976D2)';
        }
        
        // Si aucune vidéo, ajouter un message informatif simple
        if (videoForms.length === 0) {
            const infoDiv = document.createElement('div');
            infoDiv.className = 'video-optional-info';
            infoDiv.innerHTML = `
                <div style="text-align: center; padding: 15px; background: #f0f8ff; border: 1px solid #2196F3; border-radius: 8px; margin: 15px; color: #333;">
                    <p style="margin: 5px 0; font-size: 14px; color: #666;">
                        📁 Uploadez un fichier vidéo ou 🔗 collez une URL YouTube/Vimeo
                    </p>
                </div>
            `;
            
            const addButton = videoSection.querySelector('.add-row');
            if (addButton) {
                addButton.parentNode.insertBefore(infoDiv, addButton);
            }
        }
    }
    
    // Amélioration de la section images
    const imageSection = document.querySelector('#projectimage_set-group');
    if (imageSection) {
        const addImageButton = imageSection.querySelector('.add-row a');
        if (addImageButton) {
            addImageButton.innerHTML = '📸 Ajouter une image';
            addImageButton.style.background = 'linear-gradient(135deg, #4CAF50, #45a049)';
        }
    }
    
    // Simplifier les labels des champs
    setTimeout(() => {
        // Masquer les labels inutiles et ajouter des placeholders
        const fileInputs = document.querySelectorAll('input[type="file"]');
        fileInputs.forEach(input => {
            const label = input.parentNode.querySelector('label');
            if (label) {
                label.style.display = 'none';
            }
            input.placeholder = 'Choisir un fichier...';
        });
        
        const urlInputs = document.querySelectorAll('input[type="url"]');
        urlInputs.forEach(input => {
            const label = input.parentNode.querySelector('label');
            if (label) {
                label.innerHTML = 'URL vidéo (YouTube, Vimeo, etc.)';
                label.style.fontSize = '14px';
                label.style.color = '#666';
            }
            input.placeholder = 'https://www.youtube.com/watch?v=...';
        });
    }, 100);
    
    // Mise à jour lors de l'ajout de nouveaux éléments
    const addButtons = document.querySelectorAll('.add-row a');
    addButtons.forEach(button => {
        button.addEventListener('click', function() {
            setTimeout(updateOrderNumbers, 200);
        });
    });
});
</script>
{% endblock %}