@extends('admin.layout')

@section('title', 'Nouveau template')

@section('content')
<div class="row">
    <div class="col-12">
        <!-- En-tête -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1" style="font-weight: 400;">
                    <i class="bi bi-plus-circle text-primary me-2"></i>
                    Nouveau Template
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">Créez un nouveau template de publipostage</p>
            </div>
            <a href="{{ route('admin.templates.index') }}" class="btn btn-outline-secondary btn-sm" style="font-weight: 300;">
                <i class="bi bi-arrow-left me-2"></i>
                Retour
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-9">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.templates.store') }}" method="POST" id="templateForm">
                    @csrf
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Nom du template</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="excel_file_id" class="form-label">Choisir une liste Excel (optionnel)</label>
                            <select class="form-select" id="excel_file_id" name="excel_file_id">
                                <option value="">-- Aucune liste sélectionnée --</option>
                                @foreach($excelFiles as $file)
                                    @php($columnCount = $file->columns ? count($file->columns) : 0)
                                    <option value="{{ $file->id }}" data-columns-count="{{ $columnCount }}">
                                        {{ $file->name }} ({{ trans_choice('messages.columns', $columnCount, ['count' => number_format($columnCount, 0, ',', ' ')]) }}, {{ trans_choice('messages.rows', $file->row_count, ['count' => number_format($file->row_count, 0, ',', ' ')]) }})
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-text">Sélectionnez une liste pour utiliser ses colonnes.</div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Contenu du template</label>
                        <textarea class="form-control @error('content') is-invalid @enderror" 
                                  id="content" name="content" rows="15" required>{{ old('content') }}</textarea>
                        <div class="form-text">Glissez-déposez les variables depuis la palette à droite.</div>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <input type="hidden" name="variables" id="variables" value="[]">

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-info btn-sm" id="previewBtn" onclick="previewPdf()" style="font-weight: 300;">
                            <i class="bi bi-eye me-2"></i>Aperçu PDF
                        </button>
                        <a href="{{ route('admin.templates.index') }}" class="btn btn-secondary btn-sm" style="font-weight: 300;">Annuler</a>
                        <button type="submit" class="btn btn-primary btn-sm" style="font-weight: 300;">
                            <i class="bi bi-save me-2"></i>Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card" id="excelColumnsCard" style="display: none;">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="bi bi-file-earmark-spreadsheet me-2"></i>Colonnes Excel</h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-2">Glissez-déposez les colonnes dans le contenu</p>
                <div id="excelColumnsList">
                    <div class="text-center text-muted">
                        <i class="bi bi-arrow-down-circle"></i>
                        <p class="small mt-2">Sélectionnez une liste pour voir ses colonnes</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contentTextarea = document.getElementById('content');
    const variablesInput = document.getElementById('variables');
    const excelFileSelect = document.getElementById('excel_file_id');
    const excelColumnsCard = document.getElementById('excelColumnsCard');
    const excelColumnsList = document.getElementById('excelColumnsList');
    const usedVariables = new Set();
    let allVariables = [];

    // Initialiser les variables standard (pour le suivi, mais pas d'affichage)
    const standardVariables = [
        @foreach($variables as $variable)
        {
            key: '{{ $variable['key'] }}',
            label: '{{ $variable['label'] }}',
            description: '{{ $variable['description'] }}',
            source: 'standard'
        },
        @endforeach
    ];
    allVariables = [...standardVariables];

    // Fonction pour mettre à jour la liste des variables utilisées
    function updateUsedVariables() {
        const content = contentTextarea.value;
        usedVariables.clear();
        
        allVariables.forEach(variable => {
            if (content.includes(variable.key)) {
                usedVariables.add(variable.key);
            }
        });
        
        variablesInput.value = JSON.stringify(Array.from(usedVariables));
    }

    // Fonction pour initialiser le drag & drop sur un élément
    function initDragAndDrop(item) {
        item.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text/plain', this.dataset.variable);
            this.style.opacity = '0.5';
        });

        item.addEventListener('dragend', function(e) {
            this.style.opacity = '1';
        });

        item.addEventListener('dblclick', function() {
            const variable = this.dataset.variable;
            const cursorPos = contentTextarea.selectionStart;
            const textBefore = contentTextarea.value.substring(0, cursorPos);
            const textAfter = contentTextarea.value.substring(cursorPos);
            
            contentTextarea.value = textBefore + variable + textAfter;
            contentTextarea.focus();
            contentTextarea.setSelectionRange(cursorPos + variable.length, cursorPos + variable.length);
            
            updateUsedVariables();
        });
    }

    // Gestion du drag & drop sur le textarea
    contentTextarea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.style.backgroundColor = '#e7f3ff';
    });

    contentTextarea.addEventListener('dragleave', function(e) {
        this.style.backgroundColor = '';
    });

    contentTextarea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.style.backgroundColor = '';
        
        const variable = e.dataTransfer.getData('text/plain');
        const cursorPos = this.selectionStart;
        const textBefore = this.value.substring(0, cursorPos);
        const textAfter = this.value.substring(cursorPos);
        
        this.value = textBefore + variable + textAfter;
        this.focus();
        this.setSelectionRange(cursorPos + variable.length, cursorPos + variable.length);
        
        updateUsedVariables();
    });

    // Mise à jour lors de la saisie manuelle
    contentTextarea.addEventListener('input', updateUsedVariables);

    // Fonction pour prévisualiser le PDF
    window.previewPdf = function() {
        const content = contentTextarea.value;
        if (!content || content.trim() === '') {
            alert('Veuillez saisir un contenu pour le template avant de prévisualiser.');
            return;
        }

        // Créer un formulaire temporaire pour envoyer les données
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("admin.templates.preview") }}';
        form.target = '_blank';
        
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = '{{ csrf_token() }}';
        form.appendChild(csrfInput);
        
        const contentInput = document.createElement('input');
        contentInput.type = 'hidden';
        contentInput.name = 'content';
        contentInput.value = content;
        form.appendChild(contentInput);
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    };

    // Charger les colonnes Excel lorsqu'une liste est sélectionnée
    excelFileSelect.addEventListener('change', function() {
        const fileId = this.value;
        
        if (!fileId) {
            excelColumnsCard.style.display = 'none';
            excelColumnsList.innerHTML = '<div class="text-center text-muted"><i class="bi bi-arrow-down-circle"></i><p class="small mt-2">Sélectionnez une liste pour voir ses colonnes</p></div>';
            // Retirer les variables Excel de allVariables
            allVariables = allVariables.filter(v => v.source !== 'excel');
            updateUsedVariables();
            return;
        }

        // Afficher un indicateur de chargement
        excelColumnsList.innerHTML = '<div class="text-center"><div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Chargement...</span></div><p class="small mt-2 text-muted">Chargement des colonnes...</p></div>';
        excelColumnsCard.style.display = 'block';

        // Récupérer les colonnes via AJAX
        fetch(`{{ url('/admin/templates/excel') }}/${fileId}/columns`)
            .then(response => response.json())
            .then(data => {
                // Retirer les anciennes variables Excel
                allVariables = allVariables.filter(v => v.source !== 'excel');
                
                // Ajouter les nouvelles variables Excel
                if (data.variables && data.variables.length > 0) {
                    allVariables = [...allVariables, ...data.variables];
                    
                    // Afficher les colonnes
                    excelColumnsList.innerHTML = '';
                    data.variables.forEach(variable => {
                        const columnDiv = document.createElement('div');
                        columnDiv.className = 'variable-item mb-1 p-1 border rounded cursor-move';
                        columnDiv.setAttribute('draggable', 'true');
                        columnDiv.setAttribute('data-variable', variable.key);
                        columnDiv.setAttribute('data-source', 'excel');
                        columnDiv.style.cssText = 'cursor: move; background-color: #e7f3ff; font-size: 0.85rem;';
                        columnDiv.innerHTML = `
                            <strong style="font-size: 0.9rem;">${variable.key}</strong>
                            <small class="d-block text-muted" style="font-size: 0.75rem;">${variable.label}</small>
                        `;
                        
                        // Initialiser le drag & drop
                        initDragAndDrop(columnDiv);
                        
                        excelColumnsList.appendChild(columnDiv);
                    });
                } else {
                    excelColumnsList.innerHTML = '<div class="alert alert-warning mb-0"><small>Aucune colonne trouvée dans ce fichier.</small></div>';
                }
                
                updateUsedVariables();
            })
            .catch(error => {
                console.error('Erreur lors du chargement des colonnes:', error);
                excelColumnsList.innerHTML = '<div class="alert alert-danger mb-0"><small>Erreur lors du chargement des colonnes.</small></div>';
            });
    });
});
</script>
<style>
.variable-item {
    transition: all 0.2s;
}
.variable-item:hover {
    background-color: #d0e7ff !important;
    transform: translateX(3px);
}
.cursor-move {
    cursor: move;
}
</style>
@endsection