@if(session()->has('success'))
    <div class="text-green text-bebas">
        {{ session()->get('success') }}
    </div>
@else
    <form action="{{ route('workflow.send.document') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="option_id" value="{{ $option->id }}">
        {{-- <input type="hidden" name="id_vente_workflow_instance_tache" value="{{ $tache['id_vente_workflow_instance_tache'] }}"> --}}
        <div class="form-group">
            <div class="row">
                <div class="col-md-6 col-12 mx-auto">
                    <!-- Affichage des noms des documents sélectionnés -->
                    <div id="selected-files" class="mt-3" style="display: none;">
                        <h6 class="text-muted mb-2 text-bebas">Documents sélectionnés :</h6>
                        <div id="file-list" class="text-start">
                            <!-- Les noms des fichiers seront affichés ici -->
                        </div>
                        <div class="mt-2 mb-2 text-center">
                            <button type="button" class="btn btn-sm btn-outline-secondary text-white" onclick="clearAllFiles()">
                                <i class="fas fa-trash me-1 text-danger"></i>Vider la liste
                            </button>
                        </div>
                    </div>
                    <!-- Upload image input-->
                    <div class="mb-3 text-center">
                        <input id="upload" type="file" name="documents[]" multiple class="form-control border-0 d-none" onchange="change_upload_input($(this))" data-id="validate" data-color="color-upload" data-text="text-upload">
                        <div class="input-group-append">
                            <label for="upload" class="btn btn-secondary m-0 rounded-pill p-5 w-100 upload-area" id="upload-area" style="line-height: 1.2 !important;"> 
                                <i class="fa fa-2x fa-cloud-upload text-muted color-upload mb-2"></i><br>
                                <small class="text-muted text-upload">
                                    Ajouter ou glisser-déposer vos documents
                                </small>
                            </label>
                        </div>
                    </div>
                    
                    {{-- <div class="row">
                        <div class="col-12">
                            <p class="text-white">
                                photocopie de votre carte d'identité (recto verso) <br>
                                photocopie de votre justificatif de domicile (facture d'eau, d'électricité, de téléphone, de gaz, etc.) <br>
                                mettre également les photocopies de votre conjoint si vous achetez en commun <br>
                            </p>
                        </div>
                    </div> --}}
        
                    <!-- Uploaded image area-->
                    <p class="font-italic text-white text-center pb-0 mb-0" style="line-height: 1">
                        <small class="text-muted" style="font-size: 12px;">
                        Taille maximale 5 Mo <br>
                        Format : .pdf / .doc / .docx / .png /.jpg / .jpeg
                        </small>
                    </p>
                    <div class="image-area mt-4"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <div class="loading-document text-green text-center d-none" id="loading-document">
                    <div class="mx-auto lds-facebook d-block">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <small class="loading-document">Envoi des documents en cours ...</small>
                </div>
                <button type="submit" class="btn btn-primary btn-hover-primary disabled mt-4 mb-2" id="validate" onclick="if(!$(this).hasClass('disabled')){$(this).addClass('disabled')}; document.getElementById('loading-document').classList.remove('d-none')">Envoyer</button>
            </div>
        </div>
    </form>
@endif

@section('upload.document.css')
    <style>
        .upload-area {
            transition: all 0.3s ease;
            border: 2px dashed transparent;
        }
        
        .upload-area.drag-over {
            border-color: #007bff !important;
            background-color: rgba(0, 123, 255, 0.1) !important;
            transform: scale(1.02);
        }
        
        .cursor-pointer {
            cursor: pointer;
        }
        
        .file-item {
            transition: all 0.2s ease;
        }
        
        .file-item:hover {
            transform: translateX(5px);
        }
    </style>
@endsection

@section('upload.document.js')
    <script>
        // Variable globale pour stocker tous les fichiers sélectionnés
        let allSelectedFiles = [];
        
        function change_upload_input(e) {
            $('#' + $(e).data('id')).removeClass('disabled');
            $('.' + $(e).data('color')).removeClass('text-muted').addClass('text-light');
            $('.' + $(e).data('text')).html('Ajouter ou glisser-déposer vos documents de vente');
            
            // Ajouter les nouveaux fichiers à la liste existante
            const newFiles = Array.from(e[0].files);
            
            // Vérifier les doublons et ajouter seulement les nouveaux fichiers
            newFiles.forEach(newFile => {
                const isDuplicate = allSelectedFiles.some(existingFile => 
                    existingFile.name === newFile.name && existingFile.size === newFile.size
                );
                
                if (!isDuplicate) {
                    allSelectedFiles.push(newFile);
                }
            });
            
            // Mettre à jour l'affichage
            updateFileDisplay();
            
            // Créer un nouveau FileList pour l'input
            updateInputFiles();
            
            console.log("function");
        }
        
        function updateFileDisplay() {
            const fileList = $('#file-list');
            const selectedFiles = $('#selected-files');
            
            if (allSelectedFiles.length > 0) {
                fileList.empty();
                selectedFiles.show();
                
                allSelectedFiles.forEach((file, index) => {
                    const fileSize = (file.size / 1024 / 1024).toFixed(2); // Taille en MB
                    const fileItem = `
                        <div class="file-item mb-2 p-2 bg-blue rounded d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-check text-green me-2"></i>
                                <strong>${file.name}</strong>
                                <small class="text-muted ms-2">(${fileSize} MB)</small>
                            </div>
                            <span type="button" class="cursor-pointer" onclick="removeFile(${index})">
                                <i class="fas fa-times text-danger"></i>
                            </span>
                        </div>
                    `;
                    fileList.append(fileItem);
                });
            } else {
                selectedFiles.hide();
            }
        }
        
        function removeFile(index) {
            allSelectedFiles.splice(index, 1);
            updateFileDisplay();
            updateInputFiles();
        }
        
        function clearAllFiles() {
            allSelectedFiles = [];
            updateFileDisplay();
            updateInputFiles();
            $('#upload').val(''); // Vider l'input file
        }
        
        function updateInputFiles() {
            // Créer un nouveau FileList avec tous les fichiers sélectionnés
            const input = document.getElementById('upload');
            const dt = new DataTransfer();
            
            allSelectedFiles.forEach(file => {
                dt.items.add(file);
            });
            
            input.files = dt.files;
        }
        
        // Gestion du drag and drop
        document.addEventListener('DOMContentLoaded', function() {
            const uploadArea = document.getElementById('upload-area');
            
            // Empêcher le comportement par défaut du navigateur
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                uploadArea.addEventListener(eventName, preventDefaults, false);
                document.body.addEventListener(eventName, preventDefaults, false);
            });
            
            // Ajouter des effets visuels pendant le drag
            ['dragenter', 'dragover'].forEach(eventName => {
                uploadArea.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                uploadArea.addEventListener(eventName, unhighlight, false);
            });
            
            // Gérer le drop
            uploadArea.addEventListener('drop', handleDrop, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        function highlight(e) {
            document.getElementById('upload-area').classList.add('drag-over');
        }
        
        function unhighlight(e) {
            document.getElementById('upload-area').classList.remove('drag-over');
        }
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            // Convertir FileList en Array et traiter les fichiers
            const newFiles = Array.from(files);
            
            // Vérifier les doublons et ajouter seulement les nouveaux fichiers
            newFiles.forEach(newFile => {
                const isDuplicate = allSelectedFiles.some(existingFile => 
                    existingFile.name === newFile.name && existingFile.size === newFile.size
                );
                
                if (!isDuplicate) {
                    allSelectedFiles.push(newFile);
                }
            });
            
            // Mettre à jour l'affichage et l'input
            updateFileDisplay();
            updateInputFiles();
            
            // Activer le bouton d'envoi
            $('#validate').removeClass('disabled');
            $('.color-upload').removeClass('text-muted').addClass('text-light');
            $('.text-upload').html('<i class="fa-2x fa-duotone fas fa-check text-green pt-1 pb-1"></i>');
        }
    </script>
@endsection