{# templates/_shared/document/_drop_zone_upload.html.twig #}

{% set isImage = targetType ends with '_IMG' %}
{% set cleanTargetType = targetType|replace({'_DOC': '', '_IMG': ''}) %}

{# Définition des restrictions strictement basées sur le type #}
{% set acceptedFiles = isImage ? 'image/*' : '.pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png' %}

<div class="modal-header bg-light border-bottom-0">
    <h5 class="modal-title fw-bold text-dark">
        <i class="fas fa-folder-open text-primary me-2"></i>Gestion des Documents
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
    {# En-tête contextuel dynamique #}
    <div class="mb-4 bg-soft-primary p-3 rounded border-start border-4 {{ isImage ? 'border-info' : 'border-success' }}">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div class="flex-grow-1">
                <div class="small text-muted text-uppercase fw-bold mb-2" style="font-size: 0.7rem; letter-spacing: 1px;">
                    Cible du document
                </div>
                
                <div class="d-flex flex-wrap gap-2 align-items-center">
                    {# Affichage Projet #}
                    {% if projet is defined and projet is not empty %}
                        <span class="badge bg-white text-dark border shadow-sm py-2 px-3">
                            <i class="fas fa-city text-primary me-1"></i> {{ projet }}
                        </span>
                        <i class="fas fa-chevron-right text-muted small opacity-50"></i>
                    {% endif %}

                    {# Affichage Lot #}
                    {% if lot is defined and lot is not empty %}
                        <span class="badge bg-white text-dark border shadow-sm py-2 px-3">
                            <i class="fas fa-cube text-info me-1"></i> {{ lot }}
                        </span>
                        <i class="fas fa-chevron-right text-muted small opacity-50"></i>
                    {% endif %}

                    {# Affichage Etape #}
                    {% if etape is defined and etape is not empty %}
                        <span class="badge bg-white text-dark border shadow-sm py-2 px-3">
                            <i class="fas fa-layer-group text-warning me-1"></i> {{ etape }}
                        </span>
                        <i class="fas fa-chevron-right text-muted small opacity-50"></i>
                    {% endif %}

                    {# Badge Type Final #}
                    <span class="badge {{ isImage ? 'bg-info' : 'bg-success' }} py-2 px-3 shadow-sm">
                        <i class="fas {{ isImage ? 'fa-camera' : 'fa-file-alt' }} me-1"></i>
                        {{ isImage ? 'PHOTOS UNIQUEMENT' : 'DOCUMENTS TECHNIQUES' }}
                    </span>
                </div>
            </div>
            
            {# Sélecteur de visibilité #}
            <div style="min-width: 250px;">
                <label class="small fw-bold text-muted mb-1 d-block">
                    <i class="fas fa-eye me-1"></i> Visibilité par défaut :
                </label>
                <select id="visibilitySelector" class="form-select form-select-sm shadow-sm">
                    {% for niveau in niveauxAccess %}
                        <option value="{{ niveau.id }}" {{ loop.first ? 'selected' : '' }}>
                            Autoriser : {{ niveau.libelle }}
                        </option>
                    {% else %}
                        <option value="">Aucun niveau configuré</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    
    {# Zone Dropzone avec restrictions injectées #}
    <div class="mb-4">
        <label class="small fw-bold text-muted mb-2">
            Ajouter {{ isImage ? 'des images' : 'des documents' }}
        </label>
        
        <form action="#" class="dropzone" id="mediaDropzone" 
              data-accepted-files="{{ acceptedFiles }}"
              data-target-type="{{ targetType }}"
              data-target-id="{{ targetId }}">
              
            <div class="dz-message py-3" >
                <i class="fas {{ isImage ? 'fa-images' : 'fa-file-medical' }} fa-3x text-primary mb-3"></i>
                <h5 class="fw-bold">Glissez-déposez vos fichiers ici</h5>
                <p class="text-muted small mb-0">
                    {% if isImage %}
                        <span class="text-info fw-bold">Images autorisées :</span> JPG, PNG, GIF ou WEBP
                    {% else %}
                        <span class="text-success fw-bold">Documents autorisés :</span> PDF, DOCX, XLSX, JPG
                    {% endif %}
                    <br>(Taille max : 50Mo)
                </p>
                <button type="button" class="btn btn-sm btn-primary mt-3 px-4 shadow-sm">Parcourir les fichiers</button>
            </div>
        </form>
    </div>

    <hr class="my-4 text-muted opacity-25">
    
    {# Section Liste #}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0">
            <i class="fas fa-list me-2"></i>Fichiers déjà présents
        </h6>
        <button type="button" class="btn btn-sm btn-outline-secondary border shadow-sm bg-white" onclick="refreshMediaList()">
            <i class="fas fa-sync-alt me-1"></i> Actualiser la liste
        </button>
    </div>

    {# Container AJAX #}
    <div id="existingMediasContainer" class="min-vh-25 rounded border bg-light-subtle">
        <div class="text-center py-5">
            <div class="spinner-border text-primary opacity-50" role="status">
                <span class="visually-hidden">Chargement...</span>
            </div>
            <p class="text-muted small mt-2">Synchronisation des documents...</p>
        </div>
    </div>
</div>

<div class="modal-footer bg-light border-top-0">
    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Fermer</button>
</div>

<style>
    .bg-soft-primary { background-color: rgba(13, 110, 253, 0.05); }
    .min-vh-25 { min-height: 200px; }
    
    #mediaDropzone {
        border: 2px dashed #0d6efd !important;
        background: #f8fbff !important;
        border-radius: 12px;
        transition: all 0.2s ease;
    }

    #mediaDropzone:hover {
        background: #f0f7ff !important;
        border-color: #0056b3 !important;
    }

    /* Style pour les fichiers invalides dans Dropzone */
    #mediaDropzone .dz-error-message {
        background: #dc3545 !important;
        color: white !important;
        border-radius: 4px;
    }

    #existingMediasContainer {
        max-height: 400px;
        overflow-y: auto;
    }

    .badge.bg-white {
        color: #444 !important;
        font-weight: 500;
    }
</style>