@extends('crm.layouts.app')

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

@section('content')
<!-- Page Header -->
<div class="sm:flex sm:items-center sm:justify-between">
    <div class="min-w-0 flex-1">
        <h1 class="text-2xl font-semibold text-gray-900">Edit Email Template</h1>
        <p class="mt-2 text-sm text-gray-700">Update your custom email template for studio communications.</p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <a href="{{ route('crm.email-templates.index') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
            <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
            </svg>
            Back
        </a>
    </div>
</div>

<!-- Form -->
<form action="{{ route('crm.email-templates.update', $emailTemplate->id) }}" method="POST" class="mt-8">
    @csrf
    @method('PUT')

    <div class="space-y-8">
        <!-- Template Details Card -->
        <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- Template Name -->
                    <div class="sm:col-span-3">
                        <label for="name" class="block text-sm font-medium text-gray-900">Template Name</label>
                        <div class="mt-2">
                            <input type="text" name="name" id="name" value="{{ old('name', $emailTemplate->name) }}" required class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="e.g., Custom Reminder">
                        </div>
                    </div>

                    <!-- Template Type -->
                    <div class="sm:col-span-3">
                        <label for="type" class="block text-sm font-medium text-gray-900">Template Type</label>
                        <div class="mt-2">
                            <select name="type" id="type" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                <option value="appointment_confirmation" {{ old('type', $emailTemplate->type) == 'appointment_confirmation' ? 'selected' : '' }}>Appointment Confirmation</option>
                                <option value="appointment_reminder" {{ old('type', $emailTemplate->type) == 'appointment_reminder' ? 'selected' : '' }}>Appointment Reminder</option>
                                <option value="postcare" {{ old('type', $emailTemplate->type) == 'postcare' ? 'selected' : '' }}>Post-Care Instructions</option>
                                <option value="custom" {{ old('type', $emailTemplate->type) == 'custom' ? 'selected' : '' }}>Custom</option>
                            </select>
                        </div>
                    </div>

                    <!-- Subject Line -->
                    <div class="col-span-full">
                        <label for="subject" class="block text-sm font-medium text-gray-900">Subject Line</label>
                        <div class="mt-2">
                            <input type="text" name="subject" id="subject" value="{{ old('subject', $emailTemplate->subject) }}" required class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="e.g., Your appointment is confirmed!">
                        </div>
                        <p class="mt-2 text-sm text-gray-500">You can use variables like {client_name}, {appointment_date}, {studio_name}</p>
                    </div>

                    <!-- Email Content -->
                    <div class="col-span-full">
                        <label for="content" class="block text-sm font-medium text-gray-900">Email Content</label>
                        <div class="mt-2">
                            <textarea name="content" id="content" rows="12" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Write your email content here...">{{ old('content', $emailTemplate->content) }}</textarea>
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Available variables: {client_name}, {appointment_date}, {appointment_time}, {studio_name}, {studio_address}, {artist_name}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Card -->
        <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <h2 class="text-base font-semibold text-gray-900">Template Settings</h2>
                <p class="mt-1 text-sm text-gray-500">Configure when and how this template should be used.</p>

                <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- Send Trigger -->
                    <div class="sm:col-span-3">
                        <label for="trigger" class="block text-sm font-medium text-gray-900">Send Trigger</label>
                        <div class="mt-2">
                            <select name="trigger" id="trigger" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                <option value="manual" {{ old('trigger', $emailTemplate->trigger) == 'manual' ? 'selected' : '' }}>Manual Send Only</option>
                                <option value="appointment_booked" {{ old('trigger', $emailTemplate->trigger) == 'appointment_booked' ? 'selected' : '' }}>When Appointment Booked</option>
                                <option value="appointment_completed" {{ old('trigger', $emailTemplate->trigger) == 'appointment_completed' ? 'selected' : '' }}>When Appointment Completed</option>
                                <option value="payment_received" {{ old('trigger', $emailTemplate->trigger) == 'payment_received' ? 'selected' : '' }}>When Payment Received</option>
                                <option value="reminder_24h" {{ old('trigger', $emailTemplate->trigger) == 'reminder_24h' ? 'selected' : '' }}>24 Hours Before Appointment</option>
                                <option value="new_client" {{ old('trigger', $emailTemplate->trigger) == 'new_client' ? 'selected' : '' }}>New Client Welcome</option>
                            </select>
                        </div>
                    </div>

                    <!-- Active Status -->
                    <div class="sm:col-span-3">
                        <label for="is_active" class="block text-sm font-medium text-gray-900">Status</label>
                        <div class="mt-2">
                            <select name="is_active" id="is_active" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                <option value="1" {{ old('is_active', $emailTemplate->is_active) == 1 ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('is_active', $emailTemplate->is_active) == 0 ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="mt-6 flex items-center justify-end gap-x-3">
        <a href="{{ route('crm.email-templates.index') }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
            Cancel
        </a>
        <button type="submit" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                <path d="M5.433 13.917l1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z" />
                <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z" />
            </svg>
            Update Template
        </button>
    </div>
</form>
@endsection