@extends('backend.layouts.app')

@section('title', 'Edit Email Template')

@push('styles')
    <link href="{{ asset('vendor/summernote/summernote-lite.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/summernote/summernote-tailadmin.css') }}" rel="stylesheet">
    <style>
        .placeholder-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #d1d5db;
            border-radius: 9999px;
            padding: 4px 10px;
            font-size: 12px;
            color: #374151;
            background: #fff;
            cursor: pointer;
        }
        .placeholder-chip:hover { border-color: #465fff; color: #465fff; background: #f5f7ff; }
        .dark .placeholder-chip { background: #1f2937; border-color: #374151; color: #d1d5db; }
        .dark .placeholder-chip:hover { border-color: #7592ff; color: #7592ff; background: #111827; }
        .note-editor.note-frame { border-color: #d1d5db; border-radius: 10px; }
        .dark .note-editor.note-frame { border-color: #374151; }
    </style>
@endpush

@section('content')
    @php
        $pageTitle = 'Edit Email Template';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-wrap items-start justify-between gap-4 px-5 py-4 sm:px-6 sm:py-5">
                <div>
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">{{ $template->template_name }}</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        {{ $definition['description'] ?? 'Edit the subject and body below.' }}
                    </p>
                </div>
                <div class="flex flex-wrap items-center gap-2 text-xs">
                    <code class="rounded bg-gray-100 px-2 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ $template->template_key }}</code>
                    <span class="rounded-full bg-brand-50 px-2.5 py-1 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">{{ $categoryLabels[$template->category] ?? $template->category }}</span>
                </div>
            </div>

            <form id="email-template-form" action="{{ route('email-template.update', $template) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category <span class="text-error-500">*</span></label>
                        <select name="category"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 @error('category') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            @foreach ($categories as $category)
                                <option value="{{ $category->code }}" @selected(old('category', $template->category) === $category->code)>
                                    {{ $category->descr_en ?: $category->code }}
                                </option>
                            @endforeach
                        </select>
                        @error('category')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            Options come from Parameter group <code class="text-gray-700 dark:text-gray-300">EMAIL_TEMPLATE_CATEGORY</code>.
                        </p>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Subject <span class="text-error-500">*</span></label>
                        <input type="text" name="subject" value="{{ old('subject', $template->subject) }}"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('subject') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                        @error('subject')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Placeholders are allowed in the subject, for example [[ticket_no]].</p>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">HTML Body <span class="text-error-500">*</span></label>
                        <textarea name="body_html" id="body_html" rows="14"
                            class="summernote-editor dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('body_html') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">{{ old('body_html', $template->body_html) }}</textarea>
                        @error('body_html')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Plain Text Body</label>
                        <textarea name="body_text" rows="7"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('body_text') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror"
                            placeholder="Optional. Leave blank to auto-generate from the HTML body.">{{ old('body_text', $template->body_text) }}</textarea>
                        @error('body_text')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">This is the fallback shown by email clients that block HTML.</p>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-400">Available Placeholders</label>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($placeholders as $token => $label)
                                <button type="button" class="placeholder-chip" data-token="[[{{ $token }}]]" title="{{ $label }}">
                                    <span class="font-mono">[[{{ $token }}]]</span>
                                    <span class="text-gray-400 dark:text-gray-500">{{ $label }}</span>
                                </button>
                            @endforeach
                        </div>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Click a placeholder to insert it at the cursor. Values are escaped before being inserted into HTML.</p>
                    </div>

                    <label class="inline-flex cursor-pointer items-center gap-3">
                        <input type="checkbox" name="is_active" value="1" class="sr-only peer" {{ old('is_active', $template->is_active) ? 'checked' : '' }}>
                        <span class="relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all peer-checked:bg-brand-500 peer-checked:after:translate-x-5 dark:bg-gray-700"></span>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Active — use this template when sending emails</span>
                    </label>
                </div>

                <div class="flex flex-col-reverse gap-3 border-t border-gray-100 p-5 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:p-6 dark:border-gray-800">
                    <a href="{{ route('email-template.index') }}"
                        class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                    <a href="{{ route('email-template.preview', $template) }}" target="_blank"
                        class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Preview</a>
                    <button type="submit"
                        class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600 sm:w-auto">Update</button>
                </div>
            </form>
        </div>


        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Send Test Email</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">The preview uses sample data. The saved template is not changed.</p>
                </div>
                <form action="{{ route('email-template.test', $template) }}" method="POST" class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    @csrf
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Recipient email</label>
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                        <input type="email" name="test_email" value="{{ old('test_email', auth()->user()->email ?? '') }}"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('test_email') border-error-300 dark:border-error-700 @enderror"
                            placeholder="you@example.com">
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm text-white hover:bg-brand-600 sm:w-auto">Send Test</button>
                    </div>
                    @error('test_email')
                        <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                    @enderror
                    <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">If <code>MAIL_MAILER=log</code>, the message is written to the Laravel log instead of your inbox.</p>
                </form>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Default Content</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Restore this template to the content shipped with the application.</p>
                </div>
                <form action="{{ route('email-template.reset', $template) }}" method="POST" class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
                    onsubmit="return confirm('Reset this template to the default content? Your current edits will be replaced.');">
                    @csrf
                    <button type="submit"
                        class="rounded-lg border border-error-300 px-4 py-2 text-sm font-medium text-error-600 hover:bg-error-50 dark:border-error-700 dark:text-error-400 dark:hover:bg-error-500/10">
                        Reset to Default
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('vendor/summernote/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('vendor/summernote/summernote-lite.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            jQuery('.summernote-editor').summernote({
                height: 360,
                tabsize: 2,
                codeviewFilter: false,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'italic', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['codeview', 'help']],
                ],
            });

            jQuery('#email-template-form').on('submit', function () {
                jQuery('#body_html').val(jQuery('#body_html').summernote('code'));
            });

            document.querySelectorAll('.placeholder-chip').forEach(function (button) {
                button.addEventListener('click', function () {
                    var token = this.dataset.token;
                    var $editor = jQuery('#body_html');

                    if ($editor.next('.note-editor').length) {
                        $editor.summernote('insertText', token);
                    } else {
                        var field = document.getElementById('body_html');
                        var start = field.selectionStart || 0;
                        var end = field.selectionEnd || 0;
                        field.value = field.value.substring(0, start) + token + field.value.substring(end);
                        field.focus();
                        field.selectionStart = field.selectionEnd = start + token.length;
                    }
                });
            });
        });
    </script>
@endpush