{% extends 'base.html.twig' %}

{% block title %}Détails Chantier{% endblock %}
{% block head %} 
    {{ parent() }}
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" integrity="sha256-e47xOkXs1JXFbjjpoRr1/LhVcqSzRmGmPqsrUQeVs+g=" crossorigin="anonymous" />
    <style>
        .ri-upload-cloud-2-line {
            font-size: 7rem;
            display: block;
            margin-left: 45%;
            margin-right: 45%;
        }
    </style>
{% endblock %}
{% block body %}
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1>Télécharger des fichiers pour le chantier {{ chantier.adresse1 }} {{ chantier.ville }}</h1> 
                    </div>
                </div>
            </div>
            <div class="row">
               <div class="col-sm-12">
                    {{ form_start(form) }}
                        <div class="col-sm-12">
                            <div id="template-container"></div> <!-- Conteneur pour les prévisualisations -->
                            {{ form_widget(form.files, {'attr': { 'enctype':'multipart/form-data', 'class':'dropzone'}}) }}
                        </div>
                    </div>
                <div class="col-12 text-center"> 
                    <button type="submit">Ajouter PDF</button>
                    {{ form_end(form) }}
                    <button class="retour-custom" onclick="retourPage(event);">
                        <i class="ri-reply-line font-14"></i> Retour
                    </button>
                </div>
            </div>    
        </div>   
    </div>
</div> 
</div>
</div>   
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js" integrity="sha256-cs4thShDfjkqFGk5s2Lxj35sgSRr4MRcyccmi0WKqCM=" crossorigin="anonymous"></script>
    <script>
        Dropzone.autoDiscover = false;
        $(document).ready(function() {
            var myDropzone = new Dropzone('#dropzone-preview', {
                url: "{{ path('upload_pdf_chantier', {id: chantier.id}) }}",
                maxThumbnailFilesize: 10, // En MB
                thumbnailWidth: 120,
                thumbnailHeight: 120,
                thumbnailMethod: 'crop',
                createImageThumbnails: true,
                autoProcessQueue: false,
                init: function() {
                    this.on("addedfile", function(file) {
                        var previewElement = document.createElement('div');
                        previewElement.classList.add('dz-preview');
                        var previewTemplate = document.querySelector('#template-container').innerHTML;
                        previewElement.innerHTML = previewTemplate;
                        previewElement.querySelector('[data-dz-name]').textContent = file.name;
                        previewElement.querySelector('[data-dz-size]').textContent = Dropzone.formatSize(file.size);
                        file.previewElement = previewElement;
                        this.previewsContainer.appendChild(previewElement);
                    });
                    this.on("uploadprogress", function(file, progress, bytesSent) {
                        file.previewElement.querySelector('[data-dz-uploadprogress]').style.width = progress + "%";
                    });
                },
                success: function(file, response) {
                    // Gérer le succès de l'envoi du fichier si nécessaire
                },
                error: function(file, response) {
                    // Gérer les erreurs d'envoi du fichier si nécessaire
                }
            });

            // Fonction pour démarrer manuellement le traitement de la file d'attente
            $('#start-upload-btn').on('click', function() {
                myDropzone.processQueue();
            });
        });
    </script>
{% endblock %}