<x-app-layout>
<x-module-hero
    :title="$template ? 'Edit SMS Template' : 'Create SMS Template'"
    :description="$template ? 'Update the template details below' : 'Create a new reusable SMS template'"
    icon="fa-file-lines">
    <x-slot name="backButton">
        <a href="{{ route('sms.templates') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Templates
        </a>
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if($errors->any())
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <div class="flex items-center gap-2 mb-2">
                <i class="fas fa-exclamation-circle"></i>
                <strong>Please fix the following errors:</strong>
            </div>
            <ul class="list-disc list-inside text-sm space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="max-w-5xl">
        <form action="{{ $template ? route('sms.update-template', $template) : route('sms.store-template') }}" method="POST">
            @csrf
            @if($template)
                @method('PUT')
            @endif

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Template Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                            Template Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="name" name="name"
                            value="{{ old('name', $template?->name) }}"
                            required maxlength="191"
                            placeholder="e.g. Welcome Message"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('name') border-red-400 @enderror">
                        @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                            Description <span class="text-gray-400 text-xs">(optional)</span>
                        </label>
                        <input type="text" id="description" name="description"
                            value="{{ old('description', $template?->description) }}"
                            maxlength="255"
                            placeholder="Brief description of this template"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Message Content</h3>
                <div x-data="{ content: @json(old('content', $template?->content ?? '')) }">
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-1">
                        Message Body <span class="text-red-500">*</span>
                    </label>
                    <textarea id="content" name="content" rows="5" required maxlength="1600"
                        x-model="content"
                        placeholder="Type your SMS template here. Use {name}, {email}, {phone} as placeholders."
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('content') border-red-400 @enderror">{{ old('content', $template?->content) }}</textarea>
                    <div class="flex justify-between mt-1">
                        <p class="text-xs text-gray-500">
                            Available placeholders:
                            <span class="font-mono text-blue-600">{name}</span>,
                            <span class="font-mono text-blue-600">{email}</span>,
                            <span class="font-mono text-blue-600">{phone}</span>,
                            <span class="font-mono text-blue-600">{date}</span>
                        </p>
                        <span class="text-xs text-gray-500">
                            <span x-text="content.length" :class="content.length > 160 ? 'text-orange-600 font-semibold' : ''">0</span>/160
                            <span x-show="content.length > 160" class="text-orange-600 ml-1">(multi-part)</span>
                        </span>
                    </div>
                    @error('content')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="mb-6">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1"
                        {{ old('is_active', $template?->is_active ?? true) ? 'checked' : '' }}
                        class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                    <span class="text-sm font-medium text-gray-700">Active (available for use)</span>
                </label>
            </div>

            <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('sms.templates') }}"
                   class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition">
                    <i class="fas fa-times mr-1"></i> Cancel
                </a>
                <button type="submit"
                    class="px-6 py-2 bg-[#1a4731] text-white text-sm font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-save mr-1"></i> {{ $template ? 'Update Template' : 'Create Template' }}
                </button>
            </div>
        </form>
    </div>
</div>
</x-app-layout>
