@extends('admin.layout')

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

@section('content')
<div class="row">
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pencil me-2"></i>Modifier template</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.templates.update', $template->id) }}" method="POST" id="templateForm">
                    @csrf
                    @method('PUT')
                    
                    <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', $template->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 }}" 
                                            {{ old('excel_file_id', $template->excel_file_id) == $file->id ? 'selected' : '' }}
                                            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', $template->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="{{ json_encode($template->variables ?? []) }}">

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="set_as_default" name="set_as_default" value="1" {{ $template->is_default ? 'checked' : '' }}>
                        <label class="form-check-label" for="set_as_default">
                            Définir comme template par défaut
                        </label>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ route('admin.templates.index') }}" class="btn btn-secondary">Annuler</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-2"></i>Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-list-ul me-2"></i>Variables disponibles</h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Glissez-déposez les variables dans le contenu</p>
                <div id="variablesList">
                    @foreach($variables as $variable)
                        <div class="variable-item mb-2 p-2 border rounded cursor-move" 
                             draggable="true" 
                             data-variable="{{ $variable['key'] }}"
                             style="cursor: move; background-color: #f8f9fa;">
                            <strong>{{ $variable['key'] }}</strong>
                            <small class="d-block text-muted">{{ $variable['label'] }}</small>
                            <small class="d-block text-muted" style="font-size: 0.75rem;">{{ $variable['description'] }}</small>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contentTextarea = document.getElementById('content');
    const variablesInput = document.getElementById('variables');
    const variableItems = document.querySelectorAll('.variable-item');
    const usedVariables = new Set();

    // Fonction pour mettre à jour la liste des variables utilisées
    function updateUsedVariables() {
        const content = contentTextarea.value;
        usedVariables.clear();
        
        @foreach($variables as $variable)
            if (content.includes('{{ $variable['key'] }}')) {
                usedVariables.add('{{ $variable['key'] }}');
            }
        @endforeach
        
        variablesInput.value = JSON.stringify(Array.from(usedVariables));
    }

    // Initialiser avec les variables existantes
    updateUsedVariables();

    // Gestion du drag & drop
    variableItems.forEach(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';
        });
    });

    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);

    // Double-clic pour insérer
    variableItems.forEach(item => {
        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();
        });
    });
});
</script>
<style>
.variable-item {
    transition: all 0.2s;
}
.variable-item:hover {
    background-color: #e7f3ff !important;
    transform: translateX(5px);
}
.cursor-move {
    cursor: move;
}
</style>
@endsection