{# templates/admin/website_projet/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Visibilité Site Web</h1>
            <p class="text-muted small mb-0">Gestion des contenus pour le niveau d'accès <strong>"Visiteur"</strong>.</p>
        </div>
        <div class="badge bg-primary text-wrap p-2" style="width: 12rem;">
            <i class="fas fa-info-circle me-1"></i> Cliquez sur les images ou les switches pour piloter le site.
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="bg-dark text-white">
                        <tr>
                            <th style="width: 45%;">Structure (Projet > Lot) & Images</th>
                            <th class="text-center">Visible sur Site</th>
                            <th class="text-center">Mis en Vedette</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for projet in projets %}
                        {# --- LIGNE PROJET --- #}
                        <tr class="table-primary border-bottom-0">
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="me-3">
                                        <i class="fas fa-city fa-2x text-primary"></i>
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-center flex-wrap gap-2">
                                            <h5 class="mb-0">{{ projet.nom }}</h5>
                                            {# Affichage du Type de Business (Enum) #}
                                            {% if projet.typeBusiness %}
                                                <span class="badge bg-info text-dark small" style="font-size: 0.7rem;">
                                                    <i class="fas fa-briefcase me-1"></i>{{ projet.typeBusiness.value }}
                                                </span>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">{{ projet.localisationVille }} ({{ projet.localisationCommune }})</small>
                                    </div>
                                </div>
                                
                                <div class="mt-2 d-flex flex-wrap gap-2 ps-5">
                                    {% set projetImages = docs['PROJET_IMG'][projet.id] ?? docs['PROJET'][projet.id] ?? [] %}
                                    {% if projetImages is not empty %}
                                        {% for img in projetImages %}
                                            {{ _self.render_media_vignette(img) }}
                                        {% endfor %}
                                    {% else %}
                                        <span class="text-muted small fst-italic"><i class="fas fa-image-slash me-1"></i>Aucune image projet</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-center">
                                {{ _self.make_switch(projet.id, 'PROJET', 'visibility', projet.websiteVisibility) }}
                            </td>
                            <td class="text-center">
                                {{ _self.make_switch(projet.id, 'PROJET', 'vedette', projet.websiteVedette) }}
                            </td>
                        </tr>

                        {# --- LIGNES LOTS (Uniquement si images présentes) --- #}
                        {% for lot in projet.lots %}
                            {% set lotImages = docs['LOT_IMG'][lot.id] ?? docs['LOT'][lot.id] ?? [] %}
                            
                            {% if lotImages is not empty %}
                                <tr class="border-start border-primary border-4">
                                    <td class="ps-5">
                                        <div class="fw-bold text-dark">
                                            <i class="fas fa-home me-2 text-secondary"></i>{{ lot.nomBien }} 
                                            <span class="badge bg-light text-dark border">{{ lot.numeroLot }}</span>
                                        </div>
                                        
                                        <div class="mt-2 d-flex flex-wrap gap-2">
                                            {% for img in lotImages %}
                                                {{ _self.render_media_vignette(img) }}
                                            {% endfor %}
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        {{ _self.make_switch(lot.id, 'LOT', 'visibility', lot.websiteVisibility) }}
                                    </td>
                                    <td class="text-center">
                                        {{ _self.make_switch(lot.id, 'LOT', 'vedette', lot.websiteVedette) }}
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{# --- MACROS --- #}

{% macro make_switch(id, type, field, value) %}
    <div class="form-check form-switch d-inline-block">
        <input class="form-check-input ajax-toggle" type="checkbox" 
               data-id="{{ id }}" data-type="{{ type }}" data-field="{{ field }}"
               {{ value ? 'checked' : '' }} style="transform: scale(1.2); cursor: pointer;">
    </div>
{% endmacro %}

{% macro render_media_vignette(img) %}
    <div class="media-box position-relative shadow-sm border rounded p-1 bg-white">
        <img src="{{ asset(img.fichierUrl) }}" 
             class="img-fluid rounded {{ img.websiteVisibility ? '' : 'is-hidden' }}" 
             style="width: 60px; height: 45px; object-fit: cover; cursor: pointer;"
             onclick="handleMediaClick(this, {{ img.id }}, 'visibility')"
             title="Visibilité: {{ img.websiteVisibility ? 'Visible' : 'Masqué' }}">
        
        <i class="fas fa-star star-btn {{ img.websiteVedette ? 'text-warning' : 'text-muted' }}" 
           onclick="handleMediaClick(this, {{ img.id }}, 'vedette')"
           style="cursor:pointer; position: absolute; top: -5px; right: -5px; font-size: 12px; background: white; border-radius: 50%; padding: 3px; border: 1px solid #eee;"></i>
    </div>
{% endmacro %}
{% endblock %}

{% block javascripts %}
<script>
    // Gestion des Switches
    document.querySelectorAll('.ajax-toggle').forEach(el => {
        el.addEventListener('change', function() {
            updateData({
                id: this.dataset.id,
                type: this.dataset.type,
                field: this.dataset.field,
                value: this.checked ? 1 : 0
            });
        });
    });

    // Gestion des Médias
    function handleMediaClick(element, id, field) {
        let value;
        const isStar = element.classList.contains('fa-star');
        const targetImg = isStar ? element.previousElementSibling : element;

        if (field === 'visibility') {
            value = targetImg.classList.contains('is-hidden') ? 1 : 0;
            updateData({ id, type: 'DOCUMENT', field: 'visibility', value }).then((success) => {
                if(success) targetImg.classList.toggle('is-hidden');
            });
        } else {
            value = element.classList.contains('text-warning') ? 0 : 1;
            updateData({ id, type: 'DOCUMENT', field: 'vedette', value }).then((success) => {
                if(success) {
                    element.classList.toggle('text-warning');
                    element.classList.toggle('text-muted');
                }
            });
        }
    }

    function updateData(payload) {
        return fetch('{{ path("admin_ajax_update_visibility") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(response => response.json())
        .then(data => {
            if(data.status === 'success') return true;
            alert('Erreur : ' + (data.message || 'Echec de la sauvegarde'));
            return false;
        })
        .catch(err => {
            alert('Erreur réseau');
            return false;
        });
    }
</script>

<style>
    .is-hidden { opacity: 0.25; filter: grayscale(1) blur(0.5px); }
    .media-box { transition: all 0.2s; }
    .media-box:hover { border-color: #4e73df !important; transform: translateY(-2px); z-index: 10; }
    .table-primary { background-color: #f8f9fc !important; border-top: 2px solid #4e73df !important; }
    .star-btn:hover { transform: scale(1.3); transition: transform 0.1s; }
</style>
{% endblock %}