@extends('crm.layouts.app')

@section('title', 'Automated Reminder Settings')

@section('content')
<div class="max-w-4xl mx-auto py-10">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-blue-600">Automated Reminder Settings</h1>
        <a href="{{ route('crm.automated-reminders.index') }}"
           class="btn-secondary px-4 py-2 rounded-lg">
            <i class="fas fa-arrow-left mr-2"></i>Back to Reminders
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('crm.automated-reminders.settings.update') }}">
        @csrf
        @method('PUT')

        <!-- General Settings -->
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mb-6">
            <h2 class="text-xl font-semibold text-blue-600 mb-6">
                <i class="fas fa-cogs mr-2"></i>General Settings
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Delivery Channels -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Delivery Channels</h3>

                    <div class="flex items-center">
                        <input type="checkbox"
                               id="reminder_send_email"
                               name="reminder_send_email"
                               value="1"
                               {{ old('reminder_send_email', $studio->reminder_send_email ?? true) ? 'checked' : '' }}
                               class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="reminder_send_email" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                            Send reminders via Email
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox"
                               id="reminder_send_sms"
                               name="reminder_send_sms"
                               value="1"
                               {{ old('reminder_send_sms', $studio->reminder_send_sms ?? false) ? 'checked' : '' }}
                               class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="reminder_send_sms" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                            Send reminders via SMS
                        </label>
                    </div>
                </div>

                <!-- Business Hours -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Hours</h3>

                    <div class="flex items-center">
                        <input type="checkbox"
                               id="reminder_business_hours_only"
                               name="reminder_business_hours_only"
                               value="1"
                               {{ old('reminder_business_hours_only', $studio->reminder_business_hours_only ?? true) ? 'checked' : '' }}
                               class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="reminder_business_hours_only" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                            Only send reminders during business hours
                        </label>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="reminder_business_start" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Business Start
                            </label>
                            <input type="time"
                                   id="reminder_business_start"
                                   name="reminder_business_start"
                                   value="{{ old('reminder_business_start', $studio->reminder_business_start) }}"
                                   class="form-input w-full">
                        </div>
                        <div>
                            <label for="reminder_business_end" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Business End
                            </label>
                            <input type="time"
                                   id="reminder_business_end"
                                   name="reminder_business_end"
                                   value="{{ old('reminder_business_end', $studio->reminder_business_end) }}"
                                   class="form-input w-full">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 24-Hour Reminder -->
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mb-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-blue-600">
                    <i class="fas fa-clock mr-2"></i>24-Hour Reminder
                </h2>
                <div class="flex items-center">
                    <input type="checkbox"
                           id="reminder_24h_enabled"
                           name="reminder_24h_enabled"
                           value="1"
                           {{ old('reminder_24h_enabled', $studio->reminder_24h_enabled ?? true) ? 'checked' : '' }}
                           class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="reminder_24h_enabled" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                        Enable 24-hour reminders
                    </label>
                </div>
            </div>

            <div>
                <label for="reminder_24h_template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Message Template
                </label>
                <textarea id="reminder_24h_template"
                          name="reminder_24h_template"
                          rows="4"
                          class="form-input w-full"
                          placeholder="Hi @{{client_name}}! Just a friendly reminder about your appointment tomorrow at @{{appointment_time}}. See you at @{{studio_name}}!">{{ old('reminder_24h_template', $studio->reminder_24h_template) }}</textarea>
                <p class="text-sm text-gray-500 mt-2">
                    Available variables: @{{client_name}}, @{{studio_name}}, @{{appointment_date}}, @{{appointment_time}}, @{{appointment_datetime}}, @{{artist_name}}, @{{hours_until}}, @{{days_until}}
                </p>
            </div>
        </div>

        <!-- 1-Hour Reminder -->
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mb-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-blue-600">
                    <i class="fas fa-clock mr-2"></i>1-Hour Reminder
                </h2>
                <div class="flex items-center">
                    <input type="checkbox"
                           id="reminder_1h_enabled"
                           name="reminder_1h_enabled"
                           value="1"
                           {{ old('reminder_1h_enabled', $studio->reminder_1h_enabled ?? true) ? 'checked' : '' }}
                           class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="reminder_1h_enabled" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                        Enable 1-hour reminders
                    </label>
                </div>
            </div>

            <div>
                <label for="reminder_1h_template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Message Template
                </label>
                <textarea id="reminder_1h_template"
                          name="reminder_1h_template"
                          rows="4"
                          class="form-input w-full"
                          placeholder="Hi @{{client_name}}! Your appointment is in 1 hour at @{{studio_name}}. Please arrive 10 minutes early!">{{ old('reminder_1h_template', $studio->reminder_1h_template) }}</textarea>
                <p class="text-sm text-gray-500 mt-2">
                    Available variables: @{{client_name}}, @{{studio_name}}, @{{appointment_date}}, @{{appointment_time}}, @{{appointment_datetime}}, @{{artist_name}}, @{{hours_until}}, @{{days_until}}
                </p>
            </div>
        </div>

        <!-- Confirmation Request -->
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mb-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-blue-600">
                    <i class="fas fa-question-circle mr-2"></i>Confirmation Request
                </h2>
                <div class="flex items-center">
                    <input type="checkbox"
                           id="reminder_confirmation_enabled"
                           name="reminder_confirmation_enabled"
                           value="1"
                           {{ old('reminder_confirmation_enabled', $studio->reminder_confirmation_enabled ?? false) ? 'checked' : '' }}
                           class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="reminder_confirmation_enabled" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                        Enable confirmation requests
                    </label>
                </div>
            </div>

            <div>
                <label for="reminder_confirmation_template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Message Template
                </label>
                <textarea id="reminder_confirmation_template"
                          name="reminder_confirmation_template"
                          rows="4"
                          class="form-input w-full"
                          placeholder="Hi @{{client_name}}! Please reply 'YES' to confirm your appointment on @{{appointment_date}} at @{{appointment_time}}.">{{ old('reminder_confirmation_template', $studio->reminder_confirmation_template) }}</textarea>
                <p class="text-sm text-gray-500 mt-2">
                    Available variables: @{{client_name}}, @{{studio_name}}, @{{appointment_date}}, @{{appointment_time}}, @{{appointment_datetime}}, @{{artist_name}}, @{{hours_until}}, @{{days_until}}
                </p>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end">
            <button type="submit" class="btn-primary px-6 py-3 rounded-lg">
                <i class="fas fa-save mr-2"></i>Save Settings
            </button>
        </div>
    </form>

    <!-- Template Preview -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-6 mt-8">
        <h2 class="text-xl font-semibold text-blue-600 mb-6">
            <i class="fas fa-eye mr-2"></i>Template Preview
        </h2>

        <div class="bg-gray-50 dark:bg-slate-700 p-4 rounded-lg">
            <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">
                <strong>Sample:</strong> How your reminder will look to clients
            </div>
            <div class="bg-white dark:bg-slate-600 p-3 rounded border-l-4 border-blue-500">
                <div id="template-preview" class="text-gray-800 dark:text-gray-200">
                    Hi John Doe! Just a friendly reminder about your appointment tomorrow at 2:00 PM. See you at Ink Studio!
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update preview when template changes
    const templates = ['reminder_24h_template', 'reminder_1h_template', 'reminder_confirmation_template'];

    templates.forEach(templateId => {
        const textarea = document.getElementById(templateId);
        if (textarea) {
            textarea.addEventListener('input', updatePreview);
        }
    });

    function updatePreview() {
        const template = this.value;
        const preview = document.getElementById('template-preview');

        if (template && preview) {
            let previewText = template
                .replace(/\{\{client_name\}\}/g, 'John Doe')
                .replace(/\{\{studio_name\}\}/g, 'Ink Studio')
                .replace(/\{\{appointment_date\}\}/g, 'March 15, 2024')
                .replace(/\{\{appointment_time\}\}/g, '2:00 PM')
                .replace(/\{\{appointment_datetime\}\}/g, 'March 15, 2024 at 2:00 PM')
                .replace(/\{\{artist_name\}\}/g, 'Mike Johnson')
                .replace(/\{\{hours_until\}\}/g, '24')
                .replace(/\{\{days_until\}\}/g, '1');

            preview.textContent = previewText;
        }
    }
});
</script>
@endsection