@extends('layouts.dashboard')

@section('content')
<div style="padding: 2rem; max-width: 100%; height: calc(100vh - 80px); display: flex; flex-direction: column; background: #f9fafb;">
    <div style="background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <h1 style="font-size: 1.5rem; font-weight: 600; color: #1f2937; margin: 0;">
                Éditeur FIC - {{ $prospect->prenom }} {{ $prospect->nom }}
            </h1>
            <div style="display: flex; gap: 0.75rem;">
                <button onclick="saveAndDownload()" id="saveButton" style="padding: 0.625rem 1.25rem; background: #6fb87d; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;" onmouseover="this.style.background='#5ea66d';" onmouseout="this.style.background='#6fb87d';">
                    Enregistrer et télécharger
                </button>
                <a href="{{ route('prospects.show', $prospect->id) }}" style="padding: 0.625rem 1.25rem; background: #6b7280; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.875rem; text-decoration: none; display: inline-block; transition: all 0.2s;" onmouseover="this.style.background='#4b5563';" onmouseout="this.style.background='#6b7280';">
                    Fermer
                </a>
            </div>
        </div>
    </div>
    
    <div style="flex: 1; display: flex; gap: 1rem; overflow: hidden;">
        <!-- Colonne gauche : Données OCR -->
        <div style="width: 400px; background: white; border-radius: 12px; padding: 1.5rem; overflow-y: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
            <h2 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid #6fb87d;">
                Données extraites (OCR)
            </h2>
            <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem;">Cliquez sur "Copier" pour coller dans le PDF</p>
            <div id="ocrDataList" style="display: flex; flex-direction: column; gap: 0.75rem;">
                <!-- Les données OCR seront affichées ici -->
            </div>
        </div>
        
        <!-- Colonne droite : Visualisateur PDF éditable -->
        <div style="flex: 1; background: white; border-radius: 12px; padding: 1rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column;">
            <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
                <h2 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 0;">
                    FIC - Édition
                </h2>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <span style="font-size: 0.875rem; color: #6b7280;">Vous pouvez modifier directement les champs du PDF</span>
                </div>
            </div>
            <div id="pdfViewer" style="flex: 1; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; position: relative;">
                <iframe id="pdfFrame" src="{{ $ficUrl }}#toolbar=1" style="width: 100%; height: 100%; border: none;"></iframe>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script>
let extractedData = @json($extractedData);
let pdfBytes = null;
let modifiedPdf = false;

// Charger le PDF pour pouvoir le sauvegarder
async function loadPdfForSaving() {
    try {
        const response = await fetch('{{ $ficUrl }}');
        pdfBytes = await response.arrayBuffer();
    } catch (error) {
        console.error('Erreur lors du chargement du PDF:', error);
    }
}

// Afficher les données OCR dans l'ordre
function displayOcrData() {
    const container = document.getElementById('ocrDataList');
    container.innerHTML = '';
    
    // Ordre d'affichage souhaité
    const displayOrder = [
        // Assuré
        { section: 'assure', keys: ['prenom', 'nom', 'date_naissance', 'adresse', 'code_postal', 'ville', 'telephone', 'email'] },
        // Véhicule
        { section: 'vehicule', keys: ['marque', 'modele', 'immatriculation', 'date_mise_en_circulation', 'puissance', 'cylindree', 'valeur_venale', 'date_acquisition', 'usage'] },
        // Garanties
        { section: 'garanties', keys: ['formule', 'montant_prime', 'franchise', 'assistance', 'protection_juridique', 'remboursement', 'options_retenues'] },
        // Dates
        { section: 'dates', keys: ['date_debut', 'date_fin', 'date_effet'] },
        // Permis
        { section: 'permis', keys: ['date_permis_b', 'permis_a', 'permis_a2'] },
        // CRM
        { section: 'crm', keys: ['crm_auto', 'crm_moto'] },
        // Ancien assureur
        { section: 'ancien_assureur', keys: ['nom', 'depuis_le'] },
        // Assureur
        { section: 'assureur', keys: ['nom', 'produit'] }
    ];
    
    // Afficher dans l'ordre défini
    displayOrder.forEach(({ section, keys }) => {
        if (extractedData[section]) {
            keys.forEach(key => {
                const value = extractedData[section][key];
                if (value && value.toString().trim() !== '') {
                    const item = createOcrItem(key, value, section);
                    container.appendChild(item);
                }
            });
        }
    });
    
    // Afficher les autres champs non listés
    Object.keys(extractedData).forEach(section => {
        if (!displayOrder.find(o => o.section === section)) {
            if (typeof extractedData[section] === 'object' && extractedData[section] !== null) {
                Object.entries(extractedData[section]).forEach(([key, value]) => {
                    if (value && value.toString().trim() !== '') {
                        const item = createOcrItem(key, value, section);
                        container.appendChild(item);
                    }
                });
            }
        }
    });
}

// Créer un élément OCR avec bouton copier
function createOcrItem(key, value, section) {
    const item = document.createElement('div');
    item.style.cssText = 'background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;';
    
    const label = document.createElement('div');
    label.style.cssText = 'font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: capitalize;';
    label.textContent = formatLabel(key, section);
    
    const valueDiv = document.createElement('div');
    valueDiv.style.cssText = 'font-size: 0.875rem; color: #1f2937; word-break: break-word; padding: 0.5rem; background: white; border: 1px solid #e5e7eb; border-radius: 4px;';
    valueDiv.textContent = value;
    
    const copyButton = document.createElement('button');
    copyButton.style.cssText = 'padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; align-self: flex-start; display: flex; align-items: center; gap: 0.5rem;';
    copyButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copier';
    copyButton.onmouseover = function() { this.style.background = '#5ea66d'; };
    copyButton.onmouseout = function() { this.style.background = '#6fb87d'; };
    copyButton.onclick = function() {
        navigator.clipboard.writeText(value).then(() => {
            const originalHTML = copyButton.innerHTML;
            copyButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copié';
            copyButton.style.background = '#10b981';
            setTimeout(() => {
                copyButton.innerHTML = originalHTML;
                copyButton.style.background = '#6fb87d';
            }, 2000);
        }).catch(err => {
            console.error('Erreur lors de la copie:', err);
            alert('Erreur lors de la copie dans le presse-papiers');
        });
    };
    
    item.appendChild(label);
    item.appendChild(valueDiv);
    item.appendChild(copyButton);
    
    return item;
}

// Formater le label pour l'affichage
function formatLabel(key, section) {
    const labels = {
        'prenom': 'Prénom',
        'nom': 'Nom',
        'date_naissance': 'Date de naissance',
        'adresse': 'Adresse',
        'code_postal': 'Code postal',
        'ville': 'Ville',
        'telephone': 'Téléphone',
        'email': 'Email',
        'marque': 'Marque',
        'modele': 'Modèle',
        'immatriculation': 'Immatriculation',
        'date_mise_en_circulation': 'Date mise en circulation',
        'puissance': 'Puissance',
        'cylindree': 'Cylindrée',
        'valeur_venale': 'Valeur vénale',
        'date_acquisition': 'Date d\'acquisition',
        'usage': 'Usage',
        'formule': 'Formule',
        'montant_prime': 'Montant prime',
        'franchise': 'Franchise',
        'assistance': 'Assistance',
        'protection_juridique': 'Protection juridique',
        'remboursement': 'Remboursement',
        'options_retenues': 'Options retenues',
        'date_debut': 'Date début',
        'date_fin': 'Date fin',
        'date_effet': 'Date effet',
        'date_permis_b': 'Date permis B',
        'permis_a': 'Permis A',
        'permis_a2': 'Permis A2',
        'crm_auto': 'CRM Auto',
        'crm_moto': 'CRM Moto',
        'depuis_le': 'Depuis le',
        'produit': 'Produit'
    };
    
    return labels[key] || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}

// Sauvegarder et télécharger le PDF modifié
async function saveAndDownload() {
    const saveButton = document.getElementById('saveButton');
    const originalText = saveButton.innerHTML;
    
    try {
        saveButton.disabled = true;
        saveButton.innerHTML = 'Enregistrement...';
        
        // Récupérer l'URL du PDF depuis l'iframe
        const iframe = document.getElementById('pdfFrame');
        let pdfUrl = iframe.src.split('#')[0];
        
        // Si l'URL est relative, la rendre absolue
        if (!pdfUrl.startsWith('http')) {
            pdfUrl = window.location.origin + pdfUrl;
        }
        
        // Charger le PDF actuel depuis l'URL
        const response = await fetch(pdfUrl);
        if (!response.ok) {
            throw new Error('Impossible de charger le PDF');
        }
        
        const pdfBlob = await response.blob();
        
        // Créer un FormData pour envoyer le PDF
        const formData = new FormData();
        formData.append('pdf', pdfBlob, 'fic_modified.pdf');
        
        // Envoyer au serveur
        const saveResponse = await fetch('{{ route("prospects.fic.save", $prospect->id) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            },
            body: formData
        });
        
        if (!saveResponse.ok) {
            const errorData = await saveResponse.json().catch(() => ({ message: 'Erreur serveur' }));
            throw new Error(errorData.message || 'Erreur lors de la sauvegarde');
        }
        
        const result = await saveResponse.json();
        
        if (result.success) {
            // Télécharger le PDF sauvegardé
            const downloadUrl = '{{ route("prospects.fic.download", $prospect->id) }}';
            window.open(downloadUrl, '_blank');
            
            // Afficher un message de succès
            alert('Le FIC a été enregistré et téléchargé avec succès !');
        } else {
            throw new Error(result.message || 'Erreur lors de la sauvegarde');
        }
    } catch (error) {
        console.error('Erreur:', error);
        alert('Erreur lors de la sauvegarde : ' + error.message);
    } finally {
        saveButton.disabled = false;
        saveButton.innerHTML = originalText;
    }
}

// Initialiser au chargement
document.addEventListener('DOMContentLoaded', function() {
    displayOcrData();
    loadPdfForSaving();
    
    // Détecter les modifications dans le PDF (si possible)
    const iframe = document.getElementById('pdfFrame');
    iframe.addEventListener('load', function() {
        console.log('PDF chargé dans l\'iframe');
    });
});
</script>

<style>
body {
    overflow: hidden;
}

#pdfFrame {
    min-height: 600px;
}
</style>
@endsection