@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 template</label>
    <input type="text" class="form-control" id="name" name="name"
        value="{{ old('name', $template->name) }}" required>
    <small class="form-text text-muted">Ex: Attestation Présence A4 Paysage, Attestation Communication</small>
</div>

<div class="form-group mb-3">
    <label for="type">Type de document</label>
    <input type="text" class="form-control" id="type" name="type"
        value="{{ old('type', $template->type) }}" required>
    <small class="form-text text-muted">Ex: presence, communication-orale, attestation-pratique...</small>
</div>

{{-- ONGLETS PDF / EMAIL --}}
<ul class="nav nav-tabs mb-0" id="templateTabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="pdf-tab" data-bs-toggle="tab" href="#pdf-content" role="tab">
            <i class="fas fa-file-pdf"></i> Template PDF
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="email-tab" data-bs-toggle="tab" href="#email-content" role="tab">
            <i class="fas fa-envelope"></i> Template Email
        </a>
    </li>
</ul>

<div class="tab-content border border-top-0 p-3 mb-3">
    {{-- ONGLET PDF --}}
    <div class="tab-pane fade show active" id="pdf-content" role="tabpanel">
        <div class="row">
            <div class="col-md-7">
                <div class="form-group mb-3">
                    <label>Contenu PDF (code Blade/HTML)</label>
                    <div id="pdf-editor-container" style="height: 440px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
                    <textarea id="pdf_content" name="pdf_content" required style="display: none;">{{ old('pdf_content', $template->pdf_content) }}</textarea>
                    <small class="form-text text-muted">
                        Variables disponibles : <code>$document, $participant, $user, $event, $config, $bg, $is_doctor, $firstname, $lastname, $title, $collaborators, $date, $location, $subject_1...$subject_6</code>
                    </small>
                </div>
            </div>
            <div class="col-md-5">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label>Aperçu PDF</label>
                    <button type="button" id="refresh-pdf-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: 100%; height: 500px;">
                    <iframe id="pdf-preview-iframe" src="about:blank"
                        style="width: 100%; height: 100%; border: none;" title="Aperçu PDF"></iframe>
                </div>
            </div>
        </div>
    </div>

    {{-- ONGLET EMAIL --}}
    <div class="tab-pane fade" id="email-content" role="tabpanel">
        <div class="form-group mb-3">
            <label>Contenu Email (code Blade/HTML)</label>
            <div id="email-editor-container" style="height: 500px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
            <textarea id="email_content" name="email_content" style="display: none;">{{ old('email_content', $template->email_content) }}</textarea>
            <small class="form-text text-muted">
                Variables disponibles : <code>$firstname, $lastname, $is_doctor, $has_doctor_abr, $event, $participant, $config, $more_than_one_attachement</code>
            </small>
        </div>
    </div>
</div>

{{-- DIMENSIONS --}}
<div class="row">
    <div class="col-md-4">
        <div class="form-group mb-3">
            <label for="format_select">Format</label>
            <select id="format_select" class="form-select">
                <option value="A4-landscape">A4 Paysage (297 x 210 mm)</option>
                <option value="A4-portrait">A4 Portrait (210 x 297 mm)</option>
                <option value="A5-landscape">A5 Paysage (210 x 148 mm)</option>
                <option value="A5-portrait">A5 Portrait (148 x 210 mm)</option>
                <option value="specific">Spécifique</option>
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <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 ?? 297) }}" required>
        </div>
    </div>
    <div class="col-md-2">
        <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 ?? 210) }}" required>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group mb-3">
            <label for="orientation">Orientation</label>
            <select class="form-select" id="orientation" name="orientation">
                <option value="landscape" {{ old('orientation', $template->orientation) === 'landscape' ? 'selected' : '' }}>Paysage</option>
                <option value="portrait" {{ old('orientation', $template->orientation) === 'portrait' ? 'selected' : '' }}>Portrait</option>
            </select>
        </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">Inclure l'image de fond dans le PDF</label>
    </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 (!empty($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" 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.attestation-templates.index') }}" class="btn btn-secondary">Annuler</a>
    <button type="submit" class="btn btn-primary">{{ $buttonText }}</button>
</div>

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.0/ace.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const widthInput = document.getElementById('width_mm');
            const heightInput = document.getElementById('height_mm');
            const formatSelect = document.getElementById('format_select');
            const backgroundImageInput = document.getElementById('background_image');

            // --- PDF Editor ---
            const pdfEditor = ace.edit("pdf-editor-container", {
                theme: "ace/theme/monokai",
                mode: "ace/mode/html_laravel",
                autoScrollEditorIntoView: true,
                minLines: 15,
                maxLines: 80,
            });
            const pdfTextarea = document.getElementById('pdf_content');
            pdfEditor.setValue(pdfTextarea.value, -1);
            pdfEditor.on('change', function () { pdfTextarea.value = pdfEditor.getValue(); });
            pdfEditor.on('input', function () { debouncedUpdatePreview(); });

            // --- Email Editor ---
            const emailEditor = ace.edit("email-editor-container", {
                theme: "ace/theme/monokai",
                mode: "ace/mode/html_laravel",
                autoScrollEditorIntoView: true,
                minLines: 15,
                maxLines: 80,
            });
            const emailTextarea = document.getElementById('email_content');
            emailEditor.setValue(emailTextarea.value, -1);
            emailEditor.on('change', function () { emailTextarea.value = emailEditor.getValue(); });

            // --- Formats ---
            const formats = {
                'A4-landscape': { width: 297, height: 210 },
                'A4-portrait':  { width: 210, height: 297 },
                'A5-landscape': { width: 210, height: 148 },
                'A5-portrait':  { width: 148, height: 210 },
            };

            function updateDimensions() {
                const val = formatSelect.value;
                if (val === 'specific') {
                    widthInput.readOnly = false;
                    heightInput.readOnly = false;
                } else if (formats[val]) {
                    widthInput.value = formats[val].width;
                    heightInput.value = formats[val].height;
                    widthInput.readOnly = true;
                    heightInput.readOnly = true;
                }
            }

            function initializeFormat() {
                const w = parseInt(widthInput.value);
                const h = parseInt(heightInput.value);
                let match = 'specific';
                for (const f in formats) {
                    if (formats[f].width === w && formats[f].height === h) { match = f; break; }
                }
                formatSelect.value = match;
                updateDimensions();
            }

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

            // --- Preview ---
            let backgroundImageBase64 = null;

            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();
                    };
                    reader.readAsDataURL(file);
                }
            });

            function debounce(func, wait) {
                let timeout;
                return function (...args) {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(this, args), wait);
                };
            }

            function updatePreview() {
                const content = pdfTextarea.value;
                const width = widthInput.value;
                const height = heightInput.value;
                const previewUrl = "{{ route('backend.attestation-templates.preview', ['attestationTemplate' => $template->id ?? 0]) }}";

                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(r => r.text())
                .then(html => { document.getElementById('pdf-preview-iframe').srcdoc = html; })
                .catch(e => console.error('Erreur aperçu:', e));
            }

            const debouncedUpdatePreview = debounce(updatePreview, 500);
            document.getElementById('refresh-pdf-preview').addEventListener('click', updatePreview);
            debouncedUpdatePreview();
        });
    </script>
@endsection