@extends('backend.layouts.app')

@section('title', 'Create 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; }
        .note-editor.note-frame { border-color:#d1d5db; border-radius:10px; }
        .dark .note-editor.note-frame { border-color:#374151; }
    </style>
@endpush

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

    <form id="email-template-form" action="{{ route('email-template.store') }}" method="POST">
        @csrf
        <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="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Template Information</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Create a reusable template for manual sends or assign it to an automatic event.</p>
                </div>

                <div class="space-y-5 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Template Name <span class="text-error-500">*</span></label>
                            <input type="text" name="template_name" value="{{ old('template_name') }}" placeholder="Example: Activation - Corporate"
                                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('template_name') 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('template_name')<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">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">
                                <option value="">Select category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->code }}" @selected(old('category', 'General') === $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">
                                Category options come from Parameter group <code class="text-gray-700 dark:text-gray-300">EMAIL_TEMPLATE_CATEGORY</code>.
                                @can('ref.view')
                                    <a href="{{ route('ref.index', ['cat' => 'EMAIL_TEMPLATE_CATEGORY']) }}" class="font-medium text-brand-500 hover:text-brand-600">Manage categories</a>
                                @endcan
                            </p>
                        </div>
                    </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') }}" placeholder="Email 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
                    </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') }}</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="6"
                            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 HTML.">{{ old('body_text') }}</textarea>
                        @error('body_text')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </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">Use placeholders for values supplied by the event or by the manual send form.</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', true) ? '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</span>
                    </label>
                </div>

                <div class="flex flex-col-reverse gap-3 border-t border-gray-100 p-5 sm:flex-row 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>
                    <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">Save</button>
                </div>
            </div>
        </div>
    </form>
@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);
                    }
                });
            });
        });
    </script>
@endpush