@extends('layouts.app')

@section('title', __('dashboard.Add New Template'))
@section('page_heading', __('dashboard.Add New Template'))

@section('breadcrumb')
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.home') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.marketing.email-templates.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Email Templates') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400 text-blue-600 dark:text-blue-400">{{ __('dashboard.Add New Template') }}</li>
@endsection


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.marketing.email-templates.index') }}" class="app-btn app-btn--primary-soft">
        <i class="fa-solid fa-circle-arrow-right text-base me-2"></i>
        {{ __('dashboard.Back') }}
    </a>
</div>

<style>
    .email-template-builder {
        border: 1px solid #e7edf5;
        border-radius: 30px;
        background: #fff;
        box-shadow: 0 26px 60px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .email-template-builder__hero {
        padding: 2rem;
        border-bottom: 1px solid #eaf0f7;
        background:
            radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 26%),
            radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.14), transparent 28%),
            linear-gradient(135deg, #fbfdff 0%, #eff6ff 52%, #f8fbff 100%);
    }

    .email-template-builder__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.7rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #2563eb;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .email-template-builder__title {
        margin: 1rem 0 0.65rem;
        color: #0f172a;
        font-size: clamp(1.9rem, 3vw, 2.55rem);
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .email-template-builder__text {
        margin: 0;
        max-width: 760px;
        color: #526077;
        font-size: 1rem;
        line-height: 1.9;
    }

    .email-template-builder__body {
        padding: 1.75rem;
    }

    .email-template-card {
        border: 1px solid #e8eef6;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        overflow: hidden;
        height: 100%;
    }

    .email-template-card__header {
        display: flex;
        align-items: center;
        gap: 0.95rem;
        padding: 1.35rem 1.5rem;
        border-bottom: 1px solid #edf2f7;
        background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }

    .email-template-card__icon {
        width: 3rem;
        height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .email-template-card__title h2 {
        margin: 0;
        color: #0f172a;
        font-size: 1.02rem;
        font-weight: 900;
    }

    .email-template-card__title p {
        margin: 0.2rem 0 0;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .email-template-card__body {
        padding: 1.5rem;
    }

    .email-template-field {
        padding: 1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: #fbfdff;
    }

    .email-template-field .app-label {
        margin-bottom: 0.55rem;
        color: #0f172a;
        font-size: 0.84rem;
        font-weight: 800;
    }

    .email-template-field .app-input {
        min-height: 48px;
        border-radius: 14px;
        border-color: #dbe4f0;
        background: #fff !important;
        box-shadow: none !important;
    }

    .email-template-editor-tabs {
        border-bottom: 1px solid #e8eef6;
        gap: 0.5rem;
    }

    .email-template-editor-tabs .nav-link {
        border: 0;
        border-radius: 14px 14px 0 0;
        color: #64748b;
        font-weight: 800;
        padding-inline: 1rem;
    }

    .email-template-editor-tabs .nav-link.active {
        background: #eff6ff;
        color: #2563eb;
    }

    .email-template-editor-pane {
        padding-top: 1.25rem;
    }

    .email-template-editor-frame {
        border: 1px solid #dbe4f0;
        border-radius: 22px;
        overflow: hidden;
        background: #fff;
    }

    .email-template-side-grid {
        display: grid;
        gap: 1.25rem;
    }

    .email-template-stat {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .email-template-stat__icon {
        width: 2.8rem;
        height: 2.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: #dbeafe;
        color: #2563eb;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .email-template-stat__title {
        color: #0f172a;
        font-size: 0.86rem;
        font-weight: 800;
    }

    .email-template-stat__text {
        margin-top: 0.2rem;
        color: #64748b;
        font-size: 0.78rem;
        line-height: 1.7;
        font-weight: 700;
    }

    .email-template-placeholder {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.95rem;
        border: 1px dashed #dbe4f0;
        border-radius: 16px;
        background: #fbfdff;
    }

    .email-template-placeholder code {
        min-width: 132px;
        color: #1d4ed8;
        font-size: 0.8rem;
        font-weight: 900;
    }

    .email-template-actions {
        display: grid;
        gap: 0.85rem;
    }

    .email-template-actions .app-btn {
        min-height: 48px;
        border-radius: 14px;
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .email-template-builder__hero,
        .email-template-builder__body,
        .email-template-card__header,
        .email-template-card__body {
            padding: 1.2rem;
        }

        .email-template-placeholder {
            align-items: flex-start;
            flex-direction: column;
        }
    }
</style>

<div class="email-template-builder">
    <div class="email-template-builder__hero">
        <div class="email-template-builder__badge">
            <i class="fa-solid fa-envelope"></i>
            {{ __('dashboard.Add New Template') }}
        </div>
        <h1 class="email-template-builder__title">{{ __('dashboard.Add New Template') }}</h1>
        <p class="email-template-builder__text">أنشئ قالبًا بريدياً متوافقًا مع هوية النظام ليكون جاهزًا للاستخدام السريع داخل الحملات والنشرات والتنبيهات التسويقية.</p>
    </div>

    <div class="email-template-builder__body">
        <form action="{{ route('dashboard.marketing.email-templates.store') }}" method="POST" id="template_form">
            @csrf
            <div class="app-grid g-7">
                <div class="xl:col-span-8">
                    <div class="email-template-card">
                        <div class="email-template-card__header">
                            <span class="email-template-card__icon"><i class="fa-solid fa-window-maximize"></i></span>
                            <div class="email-template-card__title">
                                <h2>{{ __('dashboard.Template Content') }}</h2>
                                <p>اكتب اسم القالب وموضوع الرسالة ثم جهّز المحتوى عبر المحرر المرئي أو كود HTML.</p>
                            </div>
                        </div>
                        <div class="email-template-card__body">
                            <div class="app-grid g-5 mb-5">
                                <div class="md:col-span-6">
                                    <div class="email-template-field">
                                        <label class="required app-label">{{ __('dashboard.Template Name') }}</label>
                                        <input type="text" name="name" class="app-input app-input--solid" value="{{ old('name') }}" placeholder="{{ __('dashboard.e.g., Welcome Email') }}" required>
                                    </div>
                                </div>
                                <div class="md:col-span-6">
                                    <div class="email-template-field">
                                        <label class="required app-label">{{ __('dashboard.Email Subject') }}</label>
                                        <input type="text" name="subject" class="app-input app-input--solid" value="{{ old('subject') }}" placeholder="{{ __('dashboard.e.g., Welcome to our store!') }}" required>
                                    </div>
                                </div>
                            </div>

                            <ul class="nav nav-tabs email-template-editor-tabs mb-0 text-sm">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#visual_editor_tab" onclick="switchTab(event,'visual_editor_tab')">{{ __('dashboard.Visual Editor') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#code_editor_tab" onclick="switchTab(event,'code_editor_tab')">{{ __('dashboard.Code Editor') }}</a>
                                </li>
                            </ul>

                            <div class="tab-content email-template-editor-pane">
                                <div class="tab-pane show active" id="visual_editor_tab" role="tabpanel">
                                    <div class="email-template-editor-frame">
                                        <textarea id="tinymce_editor" class="tox-target">{{ old('content_html') }}</textarea>
                                    </div>
                                </div>
                                <div class="tab-pane" id="code_editor_tab" role="tabpanel">
                                    <div class="email-template-editor-frame">
                                        <div id="ace_editor" style="height: 520px;">{{ old('content_html') }}</div>
                                    </div>
                                </div>
                            </div>

                            <textarea name="content_html" id="content_html_hidden" class="hidden"></textarea>
                        </div>
                    </div>
                </div>

                <div class="xl:col-span-4">
                    <div class="email-template-side-grid">
                        <div class="email-template-card">
                            <div class="email-template-card__header">
                                <span class="email-template-card__icon"><i class="fa-solid fa-star"></i></span>
                                <div class="email-template-card__title">
                                    <h2>إرشادات سريعة</h2>
                                    <p>توصيات مختصرة قبل حفظ القالب واعتماده داخل الحملات.</p>
                                </div>
                            </div>
                            <div class="email-template-card__body grid gap-3">
                                <div class="email-template-stat">
                                    <span class="email-template-stat__icon"><i class="fa-solid fa-font"></i></span>
                                    <div>
                                        <div class="email-template-stat__title">عنوان واضح</div>
                                        <div class="email-template-stat__text">استخدم اسمًا يوضح نوع الاستخدام مثل ترحيب أو تذكير أو حملة موسمية.</div>
                                    </div>
                                </div>
                                <div class="email-template-stat">
                                    <span class="email-template-stat__icon"><i class="fa-solid fa-code"></i></span>
                                    <div>
                                        <div class="email-template-stat__title">محتوى قابل للتخصيص</div>
                                        <div class="email-template-stat__text">أدرج المتغيرات الديناميكية داخل النص لرفع التخصيص دون تكرار إنشاء القوالب.</div>
                                    </div>
                                </div>
                                <div class="email-template-stat">
                                    <span class="email-template-stat__icon"><i class="fa-solid fa-eye"></i></span>
                                    <div>
                                        <div class="email-template-stat__title">مراجعة قبل الحفظ</div>
                                        <div class="email-template-stat__text">تحقق من شكل الرسالة في المحرر المرئي ومن صحة HTML إذا كنت تستخدم الكود المباشر.</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="email-template-card">
                            <div class="email-template-card__header">
                                <span class="email-template-card__icon"><i class="fa-solid fa-code"></i></span>
                                <div class="email-template-card__title">
                                    <h2>{{ __('dashboard.Placeholders') }}</h2>
                                    <p>{{ __('dashboard.Use these placeholders to personalize your email') }}</p>
                                </div>
                            </div>
                            <div class="email-template-card__body grid gap-3">
                                <div class="email-template-placeholder">
                                    <code>{customer_name}</code>
                                    <span class="text-xs text-gray-600">{{ __('dashboard.Customer Full Name') }}</span>
                                </div>
                                <div class="email-template-placeholder">
                                    <code>{customer_phone}</code>
                                    <span class="text-xs text-gray-600">{{ __('dashboard.Customer Phone') }}</span>
                                </div>
                                <div class="email-template-placeholder">
                                    <code>{loyalty_points}</code>
                                    <span class="text-xs text-gray-600">{{ __('dashboard.Available Loyalty Points') }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="email-template-card">
                            <div class="email-template-card__body">
                                <div class="email-template-actions">
                                    <button type="submit" class="app-btn app-btn--primary" id="save_template_btn">
                                        <i class="fa-solid fa-check2-circle text-base me-2"></i>{{ __('dashboard.Save Template') }}
                                    </button>
                                    <a href="{{ route('dashboard.marketing.email-templates.index') }}" class="app-btn app-btn--secondary">
                                        {{ __('dashboard.Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js"></script>

<script>
function switchTab(e, tabId) {
    e.preventDefault();
    document.querySelectorAll('.tab-pane').forEach(p => { p.classList.remove('show','active'); });
    document.querySelectorAll('.nav-link').forEach(l => { l.classList.remove('active'); });
    document.getElementById(tabId).classList.add('show','active');
    e.target.classList.add('active');
}
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const aceEditor = ace.edit("ace_editor");
        aceEditor.setTheme("ace/theme/monokai");
        aceEditor.session.setMode("ace/mode/html");
        aceEditor.setFontSize(14);

        tinymce.init({
            selector: '#tinymce_editor',
            height: 520,
            plugins: 'advlist autolink lists link image charmap preview anchor searchreplace vertical align visualblocks code fullscreen insertdatetime media app-table help wordcount',
            toolbar: 'undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
            branding: false,
            setup: function (editor) {
                editor.on('change', function () {
                    aceEditor.setValue(editor.getContent());
                });
            }
        });

        aceEditor.on('change', function() {
            if (document.getElementById('code_editor_tab')?.classList.contains('active')) {
                const content = aceEditor.getValue();
                tinymce.get('tinymce_editor')?.setContent(content);
            }
        });

        document.querySelectorAll('a[href="#code_editor_tab"], a[href="#visual_editor_tab"]').forEach((tabLink) => {
            tabLink.addEventListener('click', function (event) {
                if (event.currentTarget.hash === '#code_editor_tab') {
                    aceEditor.resize();
                }
            });
        });

        document.getElementById('template_form')?.addEventListener('submit', function() {
            const hiddenContent = document.getElementById('content_html_hidden');
            if (hiddenContent) {
                hiddenContent.value = aceEditor.getValue();
            }
        });
    });
</script>
@endsection