@extends('layouts.admin.app')

@section('title', __('buttons.edit') . ' (' . $template->title . ')')

@section('content')
<div class="animate-fade-in" x-data="emailTemplateForm({
    storeUrl: '{{ route('admin.email-templates.update', $template->id) }}',
    resetContentUrl: '{{ route('admin.email-templates.reset-content', $template->id) }}',
    redirectUrl: '{{ route('admin.email-templates.index') }}',
    lang: {
        dialogs: {
            reset: {
                title: @js(__('pages/admin/email-templates.dialogs.reset_content.title')),
                description: @js(__('pages/admin/email-templates.dialogs.reset_content.description')),
            },
        },
        buttons: {
            reset: @js(__('pages/admin/email-templates.form.reset_to_default')),
        },
    },
})">
    {{-- Breadcrumb --}}
    <div class="px-4 py-4 flex-shrink-0">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/email-templates.title'), 'url' => route('admin.email-templates.index')],
            ['label' => __('buttons.edit') . ' (' . $template->title . ')'],
        ]" />
    </div>

    <div class="p-6">
        <form id="email-template-form" @submit.prevent="submitForm">
            @method('PUT')

            <div class="flex flex-col lg:flex-row gap-6 items-start">

                {{-- LEFT: Title, Subject, Content --}}
                <div class="flex-1 min-w-0 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 space-y-5">

                    <div>
                        <x-forms.label for="title" required>{{ __('pages/admin/email-templates.form.title') }}</x-forms.label>
                        <x-forms.input
                            type="text"
                            id="title"
                            name="title"
                            value="{{ old('title', $template->title) }}"
                            :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/email-templates.form.title')])"
                            autocomplete="off" />
                    </div>

                    <div>
                        <x-forms.label for="subject" required>{{ __('pages/admin/email-templates.form.subject') }}</x-forms.label>
                        <x-forms.input
                            type="text"
                            id="subject"
                            name="subject"
                            value="{{ old('subject', $template->subject) }}"
                            :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/email-templates.form.subject')])"
                            autocomplete="off" />
                    </div>

                    <div>
                        <div class="mb-2 flex items-center justify-between gap-3">
                            <x-forms.label for="content" class="mb-0" required>{{ __('pages/admin/email-templates.form.content') }}</x-forms.label>
                            <x-buttons.secondary type="button" size="sm" class="shrink-0" x-bind:disabled="resetting" @click="resetContent()">
                                <x-heroicon-o-arrow-path />
                                {{ __('pages/admin/email-templates.form.reset_to_default') }}
                            </x-buttons.secondary>
                        </div>
                        <x-forms.tinymce id="content" name="content" :value="$template->content" :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/email-templates.form.content')])" rows="10"></x-forms.tinymce>
                    </div>
                </div>

                {{-- RIGHT: Variables reference --}}
                <div class="w-full lg:w-80 xl:w-96 flex-shrink-0">
                    @include('pages.admin.email-templates.partials.variables-panel', ['variables' => $variables])
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end gap-3 border-t border-surface-200 dark:border-surface-700 pt-5">
                <a href="{{ route('admin.email-templates.index') }}" class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 hover:bg-surface-200 dark:hover:bg-surface-700">
                    {{ __('buttons.cancel') }}
                </a>
                <x-buttons.primary type="submit" x-bind:disabled="submitting">
                    <span x-show="!submitting">{{ __('buttons.save_changes') }}</span>
                    <span x-show="submitting" class="flex items-center gap-2">
                        <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" /> {{ __('buttons.saving') }}
                    </span>
                </x-buttons.primary>
            </div>
        </form>
    </div>

    <x-alert-dialog />
</div>
@endsection

@push('before-app-js')
{!! JsValidator::formRequest('App\Http\Requests\Admin\EmailTemplate\EmailTemplateRequest', '#email-template-form') !!}
@vite(['resources/js/admin/email-template-form.js'])
@endpush