@extends('layouts.admin', [
    'title' => 'Template Editor',
    'pageTitle' => 'Template Editor',
    'active' => 'reminders',
])

@php
    $variables = [
        '{customer_name}',
        '{business_name}',
        '{service_name}',
        '{staff_name}',
        '{appointment_date}',
        '{appointment_time}',
        '{invoice_number}',
        '{invoice_amount}',
        '{booking_link}',
    ];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Design a reusable reminder template with dynamic variables for each booking or invoice.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'editor'])
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <div class="space-y-5">
                <x-ui.card title="Template Details">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="template_name" label="Template name" value="Appointment reminder" placeholder="Enter template name" />
                        <x-form.select name="channel" label="Channel" value="whatsapp" :options="['whatsapp' => 'WhatsApp', 'email' => 'Email']" />
                        <x-form.select name="reminder_type" label="Reminder type" value="appointment" :options="['booking' => 'Booking confirmation', 'appointment' => 'Appointment reminder', 'invoice' => 'Invoice reminder', 'cancellation' => 'Cancellation notice', 'follow_up' => 'Follow-up message']" />
                        <x-form.input name="subject" label="Subject field for email templates" value="Reminder for your {service_name} appointment" placeholder="Email subject" />
                    </div>
                </x-ui.card>

                <x-ui.card title="Message Body" description="Use variables to personalize every reminder automatically.">
                    <x-form.textarea
                        name="message_body"
                        rows="9"
                        value="Hi {customer_name}, this is a friendly reminder from {business_name}. Your {service_name} appointment with {staff_name} is scheduled on {appointment_date} at {appointment_time}. Manage your booking here: {booking_link}"
                    />

                    <div class="mt-4">
                        <p class="mb-2 text-sm font-bold text-slate-700">Insert variables</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($variables as $variable)
                                <button type="button" class="rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-xs font-bold text-booklio-primary transition hover:bg-blue-100">
                                    {{ $variable }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </x-ui.card>

                <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
                    <x-ui.button variant="secondary" href="{{ route('admin.reminders.templates') }}">Cancel</x-ui.button>
                    <x-ui.button variant="outline" data-booklio-placeholder="Reminder template drafts will be persisted when reminder template CRUD is connected.">Save Draft</x-ui.button>
                    <x-ui.button data-booklio-placeholder="Reminder template saving will be connected to the reminder template backend.">Save Template</x-ui.button>
                </div>
            </div>

            <div class="space-y-5 xl:sticky xl:top-24">
                <x-ui.card title="Live Preview">
                    <div class="rounded-xl border border-booklio-border bg-slate-50 p-4">
                        <div class="rounded-xl bg-white p-4 shadow-soft">
                            <div class="flex items-center gap-3 border-b border-booklio-border pb-3">
                                <span class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                                    <x-ui.icon name="message-circle" class="h-5 w-5" />
                                </span>
                                <div>
                                    <p class="text-sm font-extrabold">WhatsApp reminder</p>
                                    <p class="text-xs font-medium text-booklio-muted">To Jessica Miller</p>
                                </div>
                            </div>
                            <p class="mt-4 text-sm leading-6 text-slate-700">
                                Hi Jessica Miller, this is a friendly reminder from Booklio Beauty Salon. Your Hair Cut & Style appointment with Emma Wilson is scheduled on May 23, 2026 at 9:00 AM.
                            </p>
                            <a href="#" class="mt-3 inline-flex text-sm font-bold text-booklio-primary">booklio.com/beauty-salon/book</a>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Template Rules">
                    <div class="space-y-4 text-sm leading-6 text-slate-600">
                        <div class="flex gap-3">
                            <x-ui.icon name="check" class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
                            <p>WhatsApp templates should stay concise and approved before production use.</p>
                        </div>
                        <div class="flex gap-3">
                            <x-ui.icon name="check" class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
                            <p>Email templates can include a subject and longer message body.</p>
                        </div>
                        <div class="flex gap-3">
                            <x-ui.icon name="check" class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
                            <p>Variables are replaced with booking, invoice, and customer data when reminders are sent.</p>
                        </div>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection