@extends('layouts.admin')
@section('title', 'Edit Template - ' . $template->name)
@section('page-title', 'Edit Notification Template')
@section('page-subtitle', $template->name)

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Template Information</h3>
                <p class="text-sm text-[var(--text-secondary)] mt-1">
                    <code class="bg-gray-100 px-2 py-0.5 rounded">{{ $template->code }}</code>
                    <span class="ml-2">Type: {{ str_replace('_', ' ', $template->type) }}</span>
                </p>
            </div>
            <a href="{{ route('admin.notifications.templates') }}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
        </div>

        <form action="{{ route('admin.notifications.templates.update', $template) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Template Name</label>
                    <input type="text" name="name" value="{{ old('name', $template->name) }}" required
                           class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)]">
                </div>

                <div>
                    <label class="flex items-center gap-3">
                        <input type="checkbox" name="is_active" value="1" 
                               {{ old('is_active', $template->is_active) ? 'checked' : '' }}
                               class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <span class="text-sm text-[var(--text-primary)]">Active (use this template for notifications)</span>
                    </label>
                </div>

                <div class="border-t border-[var(--border-color)] pt-6">
                    <h4 class="font-medium text-[var(--text-primary)] mb-4 flex items-center gap-2">
                        <i class="fas fa-sms text-blue-500"></i> SMS Template
                    </h4>
                    <textarea name="sms_template" rows="4" required
                              class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)]"
                              placeholder="Enter SMS message template...">{{ old('sms_template', $template->sms_template) }}</textarea>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">
                        Available: {{ '{{member_name}}' }}, {{ '{{amount}}' }}, {{ '{{receipt_number}}' }}, {{ '{{payment_date}}' }}, {{ '{{church_name}}' }}
                    </p>
                </div>

                <div class="border-t border-[var(--border-color)] pt-6">
                    <h4 class="font-medium text-[var(--text-primary)] mb-4 flex items-center gap-2">
                        <i class="fab fa-whatsapp text-green-500"></i> WhatsApp Template
                    </h4>
                    <textarea name="whatsapp_template" rows="5"
                              class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)]"
                              placeholder="Enter WhatsApp message template (supports formatting)...">{{ old('whatsapp_template', $template->whatsapp_template) }}</textarea>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">
                        Supports bold (*text*), italics (_text_), and code (```text```) formatting.
                    </p>
                </div>

                <div class="border-t border-[var(--border-color)] pt-6">
                    <h4 class="font-medium text-[var(--text-primary)] mb-4 flex items-center gap-2">
                        <i class="fas fa-envelope text-purple-500"></i> Email Template
                    </h4>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email Subject</label>
                            <input type="text" name="email_subject" value="{{ old('email_subject', $template->email_subject) }}"
                                   class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)]"
                                   placeholder="Enter email subject...">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email Body</label>
                            <textarea name="email_template" rows="8"
                                      class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)]"
                                      placeholder="Enter email body template...">{{ old('email_template', $template->email_template) }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h4 class="font-medium text-blue-800 mb-2">
                        <i class="fas fa-lightbulb mr-2"></i> Preview
                    </h4>
                    <p class="text-sm text-blue-700">
                        After saving, you can test this template by creating a test payment or checking the notification logs.
                    </p>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-4">
                <a href="{{ route('admin.notifications.templates') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </a>
                @if(!$template->church_id)
                <form action="{{ route('admin.notifications.templates.reset', $template) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-6 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50">
                        Reset to Default
                    </button>
                </form>
                @endif
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-save mr-2"></i> Save Template
                </button>
            </div>
        </form>
    </div>
</div>
@endsection