@extends('crm.layouts.app')

@section('title', 'Create 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">Create Email Template</h1>
        <p class="mt-2 text-sm text-gray-700">Create a new custom email template for your 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.store') }}" method="POST" class="mt-8">
    @csrf

    <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') }}" 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">Appointment Confirmation</option>
                                <option value="appointment_reminder">Appointment Reminder</option>
                                <option value="postcare">Post-Care Instructions</option>
                                <option value="custom">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') }}" 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') }}</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">Manual Send Only</option>
                                <option value="appointment_booked">When Appointment Booked</option>
                                <option value="appointment_completed">When Appointment Completed</option>
                                <option value="payment_received">When Payment Received</option>
                                <option value="reminder_24h">24 Hours Before Appointment</option>
                                <option value="new_client">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" selected>Active</option>
                                <option value="0">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 fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
            </svg>
            Create Template
        </button>
    </div>
</form>
@endsection