@extends('frontend.layouts.app')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" rel="stylesheet" />
<!-- Dropzone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
<div class="container mt-5">
    <h2 class="mb-4">📤 Upload et Analyse de Fichiers</h2>

    <form action="{{ route('analyze.upload') }}" class="dropzone" id="fileDropzone" enctype="multipart/form-data">
        @csrf
    </form>

    <div id="result" class="mt-5"></div>
</div>

<script>
Dropzone.options.fileDropzone = {
    maxFilesize: 10, // 10MB
    acceptedFiles: ".pdf,.jpg,.jpeg,.png",
    timeout: 60000,
    addRemoveLinks: true,
    init: function () {
        this.on("success", function (file, response) {
            const result = document.getElementById('result');

            // 🖼 Aperçu des pages PDF si disponible
            let previewHTML = '';
            if (response.pages_base64 && response.pages_base64.length > 0) {
                previewHTML += `
                    <h5 class="mt-4 mb-2">📄 Aperçu du fichier :</h5>
                    <div style="display: flex; gap: 10px; overflow-x: auto; padding: 10px; border: 1px solid #ddd; background: #f8f8f8;">
                `;
                response.pages_base64.forEach((src, i) => {
                    previewHTML += `
                        <div>
                            <img src="${src}" alt="Page ${i + 1}" style="max-height: 300px; border: 1px solid #ccc; border-radius: 4px;">
                            <p style="text-align: center;">Page ${i + 1}</p>
                        </div>
                    `;
                });
                previewHTML += `</div>`;
            }

            // 📊 Bloc résultats
            result.innerHTML = `
                <div class="card mt-4 p-4 shadow-sm">
                    <h4 class="mb-3">📊 Résultat de l'analyse</h4>
                    <ul class="list-unstyled">
                        <li><strong>🗂 Nom du fichier :</strong> ${response.file_name}</li>
                        <li><strong>💾 Taille du fichier :</strong> ${response.size} Mo</li>
                        <li><strong>📄 Nombre de pages :</strong> ${response.pages ?? '—'}</li>
                        <li><strong>🎨 Couleurs estimées :</strong> ${response.colors ?? '—'}</li>
                        <li><strong>📐 Taille (px) :</strong> ${response.dimensions ?? '—'}</li>
                        <li><strong>📁 Type :</strong> ${response.type}</li>
                    </ul>
                    ${previewHTML}
                </div>
            `;
        });

        this.on("error", function (file, errorMessage) {
            alert("Erreur lors de l'upload : " + errorMessage.message || errorMessage);
        });
    }
};
</script>
@endsection