@extends('backend.layouts.master')
@section('title', 'Nouveau Template')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/monokai.min.css">
    <style>
        .CodeMirror {
            border: 1px solid #ced4da;
            border-radius: .25rem;
            height: auto;
            min-height: 400px;
            max-height: 600px;
            font-size: 13px;
            overflow-x: hidden;
        }

        .CodeMirror-scroll {
            overflow-x: hidden !important;
        }
    </style>
@endsection

@section('content')
    <div class="page-title-box">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="page-title">Nouveau Template d'e-mail</h6>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('backend.templates.index') }}">Templates</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Création</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-7">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('backend.templates.store') }}" method="POST" id="template-form">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Nom du template (interne)</label>
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ old('name') }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="subject" class="form-label">Sujet de l'e-mail</label>
                            <input type="text" class="form-control" id="subject" name="subject"
                                value="{{ old('subject') }}" required>
                            <small class="form-text text-muted">Variables utilisables dans le sujet :
                                <code>@{{ $user - > firstname }}</code>, <code>@{{ $user - > name }}</code>,
                                <code>@{{ $event - > title }}</code></small>
                        </div>
                        <div class="mb-3">
                            <label for="content" class="form-label">Contenu HTML</label>
                            <textarea class="form-control d-none" id="content" name="content" required></textarea>
                            <script>
                                document.getElementById('content').value = @json(old('content', ''));
                            </script>
                            <div id="editor-wrapper"></div>
                            <small class="form-text text-muted">
                                Variables : <code>@{{ $user - > firstname }}</code>, <code>@{{ $user - > name }}</code>,
                                <code>@{{ $user - > email }}</code>, <code>@{{ $campaign - > title }}</code>,
                                <code>@{{ $event - > title }}</code>
                            </small>
                        </div>

                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                        <a href="{{ route('backend.templates.index') }}" class="btn btn-secondary">Annuler</a>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Aperçu</h4>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="preview_event_id" class="form-label small">Événement</label>
                            <select class="form-select form-select-sm" id="preview_event_id">
                                <option value="">-- Aucun --</option>
                                @foreach ($events as $event)
                                    <option value="{{ $event->id }}">
                                        {{ $event->title }}{{ $event->bo_title ? ' (' . $event->bo_title . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="preview_user_id" class="form-label small">Utilisateur</label>
                            <select class="form-select form-select-sm" id="preview_user_id">
                                @foreach ($users as $u)
                                    <option value="{{ $u->id }}" {{ $u->id == 6 ? 'selected' : '' }}>
                                        {{ $u->firstname }} {{ $u->name }} ({{ $u->email }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div id="preview-subject" class="mb-2 fw-bold"></div>
                    <iframe id="preview-frame" class="border bg-white"
                        style="width:100%; min-height:200px; max-height:500px;"></iframe>
                    <div id="preview-error" class="alert alert-danger mt-2 d-none"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/htmlmixed/htmlmixed.min.js"></script>
    <script>
        (function() {
            var textarea = document.getElementById('content');
            var editor = CodeMirror(document.getElementById('editor-wrapper'), {
                value: textarea.value,
                mode: 'htmlmixed',
                theme: 'monokai',
                lineNumbers: true,
                lineWrapping: true,
                viewportMargin: Infinity
            });

            // Sync editor content to hidden textarea for form submission
            editor.on('change', function() {
                textarea.value = editor.getValue();
            });

            var debounceTimer = null;

            function triggerPreview() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(doPreview, 600);
            }

            function doPreview() {
                var content = editor.getValue();
                var subject = document.getElementById('subject').value;
                var event_id = document.getElementById('preview_event_id').value;
                var user_id = document.getElementById('preview_user_id').value;

                if (!content.trim()) return;

                fetch('{{ route('backend.templates.preview') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            content: content,
                            subject: subject,
                            event_id: event_id,
                            user_id: user_id
                        })
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(data) {
                        if (data.error) {
                            document.getElementById('preview-error').textContent = data.error;
                            document.getElementById('preview-error').classList.remove('d-none');
                        } else {
                            document.getElementById('preview-error').classList.add('d-none');
                            document.getElementById('preview-subject').textContent = 'Sujet : ' + data.subject;
                            var iframe = document.getElementById('preview-frame');
                            var doc = iframe.contentDocument || iframe.contentWindow.document;
                            doc.open();
                            doc.write(data.content);
                            doc.close();
                            setTimeout(function() {
                                iframe.style.height = doc.body.scrollHeight + 20 + 'px';
                            }, 200);
                        }
                    })
                    .catch(function(e) {
                        document.getElementById('preview-error').textContent = 'Erreur : ' + e.message;
                        document.getElementById('preview-error').classList.remove('d-none');
                    });
            }

            // Live preview on content change
            editor.on('change', triggerPreview);

            // Live preview on subject / event / user change
            document.getElementById('subject').addEventListener('input', triggerPreview);
            document.getElementById('preview_event_id').addEventListener('change', triggerPreview);
            document.getElementById('preview_user_id').addEventListener('change', triggerPreview);

            // Initial preview on page load
            setTimeout(doPreview, 500);
        })();
    </script>
@endsection