@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="form-group mb-3">
    <label for="name">Nom du modèle</label>
    <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $template->name) }}"
        required>
    <small class="form-text text-muted">Ex: Badge Participant Standard, Badge VIP Vertical</small>
</div>

<div class="form-group mb-3">
    <label for="type">Type</label>
    <input type="text" class="form-control" id="type" name="type" value="{{ old('type', $template->type) }}"
        required>
    <small class="form-text text-muted">Ex: participant, vip, staff, speaker...</small>
</div>

<div class="row">
    <div class="col-md-7">
        <div class="form-group mb-3">
            <label for="content">Contenu du template (code Blade)</label>
            {{-- Ce div sera remplacé par l'éditeur Ace --}}
            <div id="editor-container" style="height: 440px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
            {{-- Le textarea original est masqué et sera mis à jour par l'éditeur --}}
            <textarea id="content" name="content" required style="display: none;">{{ old('content', $template->content) }}</textarea>
            <small class="form-text text-muted">Entrez ici le code HTML/Blade complet pour le badge.</small>
        </div>
    </div>
    <div class="col-md-5">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <label>Aperçu en direct</label>
            <button type="button" id="refresh-preview" class="btn btn-sm btn-outline-primary">
                <i class="bx bx-refresh"></i> Rafraîchir
            </button>
        </div>
        <div class="border bg-light" style="width: 458px; height: 660px;">
            <iframe id="preview-iframe" src="about:blank" style="width: 100%; height: 100%; border: none;"
                title="Aperçu du badge"></iframe>
        </div>
    </div>
</div>

<div class="form-group mb-3">
    <label for="format_select">Format</label>
    <select id="format_select" class="form-select form-select">
        <option value="A4">A4 (210 x 297 mm)</option>
        <option value="A5">A5 (148 x 210 mm)</option>
        <option value="A6">A6 (105 x 148 mm)</option>
        <option value="A7">A7 (74 x 105 mm)</option>
        <option value="specific">Spécifique</option>
    </select>
</div>

<div id="dimensions_specific" class="row">
    <div class="col-md-6">
        <div class="form-group mb-3">
            <label for="width_mm">Largeur (mm)</label>
            <input type="number" class="form-control" id="width_mm" name="width_mm"
                value="{{ old('width_mm', $template->width_mm) }}" required>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group mb-3">
            <label for="height_mm">Hauteur (mm)</label>
            <input type="number" class="form-control" id="height_mm" name="height_mm"
                value="{{ old('height_mm', $template->height_mm) }}" required>
        </div>
    </div>
</div>

<div class="form-group mb-3">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="print_background" id="print_background" value="1"
            {{ old('print_background', $template->print_background) ? 'checked' : '' }}>
        <label class="form-check-label" for="print_background">Imprimer l'image de fond</label>
        <small class="form-text text-muted d-block">Cochez cette case si vous souhaitez que l'image de fond soit incluse
            dans le PDF destiné à l'impression (par exemple, si vous n'utilisez pas de papier pré-imprimé).</small>
    </div>
</div>

<div class="form-group mb-3">
    <label for="background_image">Image de fond</label>
    <input type="file" class="form-control" id="background_image" name="background_image" accept="image/*">
    @if ($template->background_image)
        <div class="mt-2">
            <p>Image de fond actuelle :</p>
            <img src="{{ route('backend.files.serve', ['path' => $template->background_image]) }}"
                alt="Image de fond actuelle"
                style="max-width: 200px; height: auto; border: 1px solid #ddd; padding: 5px;">
            <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="delete_background_image"
                    id="delete_background_image">
                <label class="form-check-label" for="delete_background_image">
                    Supprimer l'image de fond
                </label>
            </div>
        </div>
    @endif
</div>

<div class="d-flex justify-content-between">
    <a href="{{ route('backend.badge-templates.index') }}" class="btn btn-secondary">Annuler</a>
    <button type="submit" class="btn btn-primary">{{ $buttonText }}</button>
</div>

@section('scripts')
    {{-- Ajout du script pour l'éditeur Ace --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.0/ace.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const formatSelect = document.getElementById('format_select');
            const widthInput = document.getElementById('width_mm');
            const heightInput = document.getElementById('height_mm');
            const refreshButton = document.getElementById('refresh-preview');
            const previewIframe = document.getElementById('preview-iframe');
            const contentTextArea = document.getElementById('content');
            const backgroundImageInput = document.getElementById('background_image');

            // --- Initialisation de Ace Editor ---
            const editor = ace.edit("editor-container", {
                theme: "ace/theme/monokai",
                // Utiliser le mode PHP et le configurer pour les templates Blade
                mode: "ace/mode/html_laravel",
                autoScrollEditorIntoView: true,
                maxLines: 80,
                minLines: 15
            });
            // Charger le contenu initial dans l'éditeur
            editor.setValue(contentTextArea.value, -1);

            // On écoute l'événement 'input' qui est plus fiable pour le rafraîchissement automatique.
            editor.on('input', function() {
                debouncedUpdatePreview();
            });

            // Synchroniser le contenu de l'éditeur avec le textarea caché à chaque changement
            editor.on('change', function() {
                contentTextArea.value = editor.getValue();
            });

            const formats = {
                'A4': {
                    width: 210,
                    height: 297
                },
                'A5': {
                    width: 148,
                    height: 210
                },
                'A6': {
                    width: 105,
                    height: 148
                },
                'A7': {
                    width: 74,
                    height: 105
                },
            };

            function updateDimensions() {
                const selectedFormat = formatSelect.value;

                if (selectedFormat === 'specific') {
                    widthInput.readOnly = false;
                    heightInput.readOnly = false;
                } else {
                    const dims = formats[selectedFormat];
                    if (dims) {
                        widthInput.value = dims.width;
                        heightInput.value = dims.height;
                        widthInput.readOnly = true;
                        heightInput.readOnly = true;
                    }
                }
            }

            function initializeFormat() {
                const currentWidth = parseInt(widthInput.value, 10);
                const currentHeight = parseInt(heightInput.value, 10);
                let matchingFormat = 'specific';

                for (const format in formats) {
                    if (formats[format].width === currentWidth && formats[format].height === currentHeight) {
                        matchingFormat = format;
                        break;
                    }
                }
                formatSelect.value = matchingFormat;
                updateDimensions();
            }

            formatSelect.addEventListener('change', updateDimensions);
            initializeFormat();

            // Fonction pour "déclencher" une fonction après un certain temps d'inactivité (debounce)
            function debounce(func, wait) {
                let timeout;
                return function(...args) {
                    const context = this;
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(context, args), wait);
                };
            }

            // Variable pour stocker l'image de fond en base64
            let backgroundImageBase64 = null;

            // Convertir l'image sélectionnée en base64 pour l'aperçu
            backgroundImageInput.addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        backgroundImageBase64 = e.target.result;
                        updatePreview(); // Rafraîchir l'aperçu avec la nouvelle image
                    };
                    reader.readAsDataURL(file);
                }
            });

            // --- Logique de l'aperçu ---
            function updatePreview() {
                // S'assurer que le textarea est synchronisé avec le contenu de l'éditeur

                const content = contentTextArea.value;
                const width = widthInput.value;
                const height = heightInput.value;

                // L'URL pour l'aperçu. Utilise l'ID du template s'il existe (édition), sinon 0 (création).
                const previewUrl =
                    "{{ route('backend.badge-templates.preview', ['badgeTemplate' => $template->id ?? 0]) }}";

                // Utilise fetch pour envoyer le contenu au contrôleur
                // On envoie aussi les dimensions pour que l'aperçu puisse être mis à l'échelle.
                fetch(previewUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            content: content,
                            width_mm: width,
                            height_mm: height,
                            background_image_base64: backgroundImageBase64
                        })
                    })
                    .then(response => response.text())
                    .then(html => {
                        previewIframe.srcdoc = html;
                    })
                    .catch(error => console.error('Erreur lors du rafraîchissement de l\'aperçu:', error));
            }

            // Créer une version "debounced" de la fonction de mise à jour de l'aperçu.
            // L'aperçu ne se mettra à jour que 500ms après la dernière frappe.
            const debouncedUpdatePreview = debounce(updatePreview, 500);


            refreshButton.addEventListener('click', updatePreview);
            debouncedUpdatePreview(); // Charger l'aperçu initial au chargement de la page
        });
    </script>
@endsection