@extends('layouts.admin')
@section('title', 'Settings')
@section('page-title', 'Settings')
@section('page-subtitle', 'System configuration')

@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">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Church Information</h3>
        <form action="{{ route('admin.settings.index') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Church Logo</label>
                    <div class="flex items-center gap-6">
                        <div class="relative">
                            @php
                                $logoFile = $settings['church_logo'] ?? null;
                                $logoTimestamp = '';
                                if ($logoFile) {
                                    $logoPath = storage_path('app/public/' . $logoFile);
                                    if (file_exists($logoPath)) {
                                        $logoTimestamp = filemtime($logoPath);
                                    }
                                }
                            @endphp
                            @if(!empty($settings['church_logo']))
                                <img src="{{ asset('storage/' . $settings['church_logo']) }}?v={{ $logoTimestamp ?: time() }}" 
                                    alt="Church Logo" class="w-32 h-32 object-contain rounded-lg border border-[var(--border-color)] bg-white p-2" id="logo-preview">
                            @else
                                <div class="w-32 h-32 rounded-lg border-2 border-dashed border-[var(--border-color)] flex items-center justify-center bg-[var(--bg-primary)]">
                                    <div class="text-center">
                                        <i class="fas fa-church text-4xl text-[var(--text-secondary)]"></i>
                                        <p class="text-xs text-[var(--text-secondary)] mt-1">No Logo</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="flex-1">
                            <input type="file" name="church_logo" id="church_logo" accept="image/png,image/jpeg,image/jpg,image/svg+xml"
                                class="w-full text-sm text-[var(--text-secondary)] file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600 file:cursor-pointer">
                            <p class="text-xs text-[var(--text-secondary)] mt-2">
                                Accepted formats: PNG, JPG, JPEG, SVG. Max size: 2MB.
                            </p>
                            @if(!empty($settings['church_logo']))
                                <label class="flex items-center gap-2 mt-3">
                                    <input type="checkbox" name="remove_logo" value="1" class="w-4 h-4 rounded border-[var(--border-color)]">
                                    <span class="text-sm text-red-500">Remove current logo</span>
                                </label>
                            @endif
                        </div>
                    </div>
                </div>
                
                <!-- Favicon -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Church Favicon</label>
                    <div class="flex items-center gap-6">
                        <div class="relative">
                            @if(!empty($settings['church_favicon']))
                                <img src="{{ asset('storage/' . $settings['church_favicon']) }}?v={{ filemtime(storage_path('app/public/' . $settings['church_favicon'])) }}" 
                                    alt="Church Favicon" class="w-16 h-16 object-contain rounded-lg border border-[var(--border-color)] bg-white p-2" id="favicon-preview">
                            @else
                                <div class="w-16 h-16 rounded-lg border-2 border-dashed border-[var(--border-color)] flex items-center justify-center bg-[var(--bg-primary)]">
                                    <div class="text-center">
                                        <i class="fas fa-image text-2xl text-[var(--text-secondary)]"></i>
                                        <p class="text-xs text-[var(--text-secondary)] mt-1">No Favicon</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="flex-1">
                            <input type="file" name="church_favicon" id="church_favicon" accept="image/png,image/x-icon,image/jpeg"
                                class="w-full text-sm text-[var(--text-secondary)] file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600 file:cursor-pointer">
                            <p class="text-xs text-[var(--text-secondary)] mt-2">
                                Accepted formats: PNG, ICO, JPG. Max size: 512KB. Recommended size: 32x32 or 64x64 pixels.
                            </p>
                            @if(!empty($settings['church_favicon']))
                                <label class="flex items-center gap-2 mt-3">
                                    <input type="checkbox" name="remove_favicon" value="1" class="w-4 h-4 rounded border-[var(--border-color)]">
                                    <span class="text-sm text-red-500">Remove current favicon</span>
                                </label>
                            @endif
                        </div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Church Name *</label>
                    <input type="text" name="church_name" value="{{ old('church_name', $settings['church_name'] ?? '') }}" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Tagline</label>
                    <input type="text" name="church_tagline" value="{{ old('church_tagline', $settings['church_tagline'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email *</label>
                    <input type="email" name="church_email" value="{{ old('church_email', $settings['church_email'] ?? '') }}" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                    <input type="text" name="church_phone" value="{{ old('church_phone', $settings['church_phone'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Address</label>
                    <textarea name="church_address" rows="2"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('church_address', $settings['church_address'] ?? '') }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Service Times</label>
                    <input type="text" name="service_times" value="{{ old('service_times', $settings['service_times'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="e.g., Sunday: 9:00 AM & 11:00 AM">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Settings</button>
            </div>
        </form>
    </div>

    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">System Settings</h3>
        <form action="{{ route('admin.settings.index') }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Currency</label>
                    <input type="text" name="currency" value="{{ old('currency', $settings['currency'] ?? 'GHS') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Currency Symbol</label>
                    <input type="text" name="currency_symbol" value="{{ old('currency_symbol', $settings['currency_symbol'] ?? 'GH₵') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Date Format</label>
                    <input type="text" name="date_format" value="{{ old('date_format', $settings['date_format'] ?? 'Y-m-d') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Timezone</label>
                    <input type="text" name="timezone" value="{{ old('timezone', $settings['timezone'] ?? 'UTC') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Settings</button>
            </div>
        </form>
    </div>

    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Birthday Notifications</h3>
        <form action="{{ route('admin.settings.index') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <input type="checkbox" name="birthday_notifications_enabled" id="birthday_notifications_enabled" 
                        value="1" {{ old('birthday_notifications_enabled', $settings['birthday_notifications_enabled'] ?? false) ? 'checked' : '' }}
                        class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                    <label for="birthday_notifications_enabled" class="text-sm text-[var(--text-primary)]">
                        Enable birthday notifications
                    </label>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 ml-8">
                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="birthday_email_enabled" id="birthday_email_enabled" 
                            value="1" {{ old('birthday_email_enabled', $settings['birthday_email_enabled'] ?? false) ? 'checked' : '' }}
                            class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="birthday_email_enabled" class="text-sm text-[var(--text-primary)]">
                            <i class="fas fa-envelope mr-1 text-[var(--text-secondary)]"></i> Email
                        </label>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="birthday_sms_enabled" id="birthday_sms_enabled" 
                            value="1" {{ old('birthday_sms_enabled', $settings['birthday_sms_enabled'] ?? false) ? 'checked' : '' }}
                            class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="birthday_sms_enabled" class="text-sm text-[var(--text-primary)]">
                            <i class="fas fa-sms mr-1 text-[var(--text-secondary)]"></i> SMS
                        </label>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="birthday_whatsapp_enabled" id="birthday_whatsapp_enabled" 
                            value="1" {{ old('birthday_whatsapp_enabled', $settings['birthday_whatsapp_enabled'] ?? false) ? 'checked' : '' }}
                            class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="birthday_whatsapp_enabled" class="text-sm text-[var(--text-primary)]">
                            <i class="fab fa-whatsapp mr-1 text-green-500"></i> WhatsApp
                        </label>
                    </div>
                </div>

                <div class="ml-8 mt-4">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Message Template</label>
                    <textarea name="birthday_message_template" rows="3"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="Use {name} for member name, {church_name} for church name, {date} for date">{{ old('birthday_message_template', $settings['birthday_message_template'] ?? '') }}</textarea>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">
                        Available placeholders: {name}, {church_name}, {date}
                    </p>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Settings</button>
            </div>
        </form>
    </div>

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Payment Notifications</h3>
            <span class="text-xs bg-gold-500/20 text-gold-600 px-3 py-1 rounded-full">Auto-send receipts</span>
        </div>
        <form action="{{ route('admin.settings.index') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <p class="text-sm text-[var(--text-secondary)] mb-4">
                    Configure which notification channels should be enabled by default when recording payments. Members can override these settings in their profile.
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border border-[var(--border-color)] rounded-lg p-4">
                        <h4 class="font-medium text-[var(--text-primary)] mb-3 flex items-center gap-2">
                            <i class="fas fa-coins text-gold-500"></i> Tithe Payments
                        </h4>
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="tithe_sms_enabled" id="tithe_sms_enabled" 
                                    value="1" {{ old('tithe_sms_enabled', $settings['tithe_sms_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="tithe_sms_enabled" class="text-sm text-[var(--text-primary)]">SMS</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="tithe_whatsapp_enabled" id="tithe_whatsapp_enabled" 
                                    value="1" {{ old('tithe_whatsapp_enabled', $settings['tithe_whatsapp_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="tithe_whatsapp_enabled" class="text-sm text-[var(--text-primary)]">WhatsApp</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="tithe_email_enabled" id="tithe_email_enabled" 
                                    value="1" {{ old('tithe_email_enabled', $settings['tithe_email_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="tithe_email_enabled" class="text-sm text-[var(--text-primary)]">Email</label>
                            </div>
                        </div>
                    </div>

                    <div class="border border-[var(--border-color)] rounded-lg p-4">
                        <h4 class="font-medium text-[var(--text-primary)] mb-3 flex items-center gap-2">
                            <i class="fas fa-hand-holding-heart text-royal-500"></i> Welfare Contributions
                        </h4>
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="welfare_sms_enabled" id="welfare_sms_enabled" 
                                    value="1" {{ old('welfare_sms_enabled', $settings['welfare_sms_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="welfare_sms_enabled" class="text-sm text-[var(--text-primary)]">SMS</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="welfare_whatsapp_enabled" id="welfare_whatsapp_enabled" 
                                    value="1" {{ old('welfare_whatsapp_enabled', $settings['welfare_whatsapp_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="welfare_whatsapp_enabled" class="text-sm text-[var(--text-primary)]">WhatsApp</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="welfare_email_enabled" id="welfare_email_enabled" 
                                    value="1" {{ old('welfare_email_enabled', $settings['welfare_email_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="welfare_email_enabled" class="text-sm text-[var(--text-primary)]">Email</label>
                            </div>
                        </div>
                    </div>

                    <div class="border border-[var(--border-color)] rounded-lg p-4">
                        <h4 class="font-medium text-[var(--text-primary)] mb-3 flex items-center gap-2">
                            <i class="fas fa-gift text-green-500"></i> Donations
                        </h4>
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="donation_sms_enabled" id="donation_sms_enabled" 
                                    value="1" {{ old('donation_sms_enabled', $settings['donation_sms_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="donation_sms_enabled" class="text-sm text-[var(--text-primary)]">SMS</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="donation_whatsapp_enabled" id="donation_whatsapp_enabled" 
                                    value="1" {{ old('donation_whatsapp_enabled', $settings['donation_whatsapp_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="donation_whatsapp_enabled" class="text-sm text-[var(--text-primary)]">WhatsApp</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="donation_email_enabled" id="donation_email_enabled" 
                                    value="1" {{ old('donation_email_enabled', $settings['donation_email_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="donation_email_enabled" class="text-sm text-[var(--text-primary)]">Email</label>
                            </div>
                        </div>
                    </div>

                    <div class="border border-[var(--border-color)] rounded-lg p-4">
                        <h4 class="font-medium text-[var(--text-primary)] mb-3 flex items-center gap-2">
                            <i class="fas fa-user-check text-blue-500"></i> Attendance Check-in
                        </h4>
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="attendance_sms_enabled" id="attendance_sms_enabled" 
                                    value="1" {{ old('attendance_sms_enabled', $settings['attendance_sms_enabled'] ?? false) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="attendance_sms_enabled" class="text-sm text-[var(--text-primary)]">SMS</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="attendance_whatsapp_enabled" id="attendance_whatsapp_enabled" 
                                    value="1" {{ old('attendance_whatsapp_enabled', $settings['attendance_whatsapp_enabled'] ?? true) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="attendance_whatsapp_enabled" class="text-sm text-[var(--text-primary)]">WhatsApp</label>
                            </div>
                            <div class="flex items-center gap-3">
                                <input type="checkbox" name="attendance_email_enabled" id="attendance_email_enabled" 
                                    value="1" {{ old('attendance_email_enabled', $settings['attendance_email_enabled'] ?? false) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                <label for="attendance_email_enabled" class="text-sm text-[var(--text-primary)]">Email</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Settings</button>
            </div>
        </form>
    </div>

    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Notification Configuration</h3>
        <form action="{{ route('admin.settings.index') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-3">
                    <h4 class="font-medium text-[var(--text-primary)] mb-4 flex items-center gap-2">
                        <i class="fas fa-envelope text-[var(--text-secondary)]"></i> Email Configuration
                    </h4>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMTP Host</label>
                    <input type="text" name="mail_mailer" value="{{ old('mail_mailer', $settings['mail_mailer'] ?? 'smtp') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="smtp.mailtrap.io">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMTP Port</label>
                    <input type="text" name="mail_port" value="{{ old('mail_port', $settings['mail_port'] ?? '587') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="587">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMTP Username</label>
                    <input type="text" name="mail_username" value="{{ old('mail_username', $settings['mail_username'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="your username">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMTP Password</label>
                    <input type="password" name="mail_password" value="{{ old('mail_password', $settings['mail_password'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="••••••••">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">From Address</label>
                    <input type="email" name="mail_from_address" value="{{ old('mail_from_address', $settings['mail_from_address'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="noreply@church.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">From Name</label>
                    <input type="text" name="mail_from_name" value="{{ old('mail_from_name', $settings['mail_from_name'] ?? church_name()) }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="Church Name">
                </div>

                <div class="lg:col-span-3 mt-4">
                    <h4 class="font-medium text-[var(--text-primary)] mb-4 flex items-center gap-2">
                        <i class="fas fa-sms text-[var(--text-secondary)]"></i> SMS Configuration
                    </h4>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMS Provider</label>
                    <select name="sms_provider" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="twilio" {{ old('sms_provider', $settings['sms_provider'] ?? '') == 'twilio' ? 'selected' : '' }}>Twilio</option>
                        <option value="africastalking" {{ old('sms_provider', $settings['sms_provider'] ?? '') == 'africastalking' ? 'selected' : '' }}>Africa's Talking</option>
                        <option value="hubtel" {{ old('sms_provider', $settings['sms_provider'] ?? '') == 'hubtel' ? 'selected' : '' }}>Hubtel</option>
                        <option value="custom" {{ old('sms_provider', $settings['sms_provider'] ?? '') == 'custom' ? 'selected' : '' }}>Custom API</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMS API Key</label>
                    <input type="password" name="sms_api_key" value="{{ old('sms_api_key', $settings['sms_api_key'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="Your SMS API key">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMS Sender ID</label>
                    <input type="text" name="sms_sender_id" value="{{ old('sms_sender_id', $settings['sms_sender_id'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="CHURCH">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">SMS API URL</label>
                    <input type="text" name="sms_api_url" value="{{ old('sms_api_url', $settings['sms_api_url'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="https://api.example.com/send">
                </div>

                <div class="lg:col-span-3 mt-4">
                    <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 Configuration
                    </h4>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">WhatsApp Provider</label>
                    <select name="whatsapp_provider" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="twilio" {{ old('whatsapp_provider', $settings['whatsapp_provider'] ?? '') == 'twilio' ? 'selected' : '' }}>Twilio WhatsApp</option>
                        <option value="meta" {{ old('whatsapp_provider', $settings['whatsapp_provider'] ?? '') == 'meta' ? 'selected' : '' }}>Meta Business API</option>
                        <option value="whatsapp_cloud" {{ old('whatsapp_provider', $settings['whatsapp_provider'] ?? '') == 'whatsapp_cloud' ? 'selected' : '' }}>WhatsApp Cloud API</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">WhatsApp Phone Number</label>
                    <input type="text" name="whatsapp_phone" value="{{ old('whatsapp_phone', $settings['whatsapp_phone'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="+1234567890">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">WhatsApp API Token</label>
                    <input type="password" name="whatsapp_api_token" value="{{ old('whatsapp_api_token', $settings['whatsapp_api_token'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="Your WhatsApp API token">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">WhatsApp Business Account ID</label>
                    <input type="text" name="whatsapp_business_id" value="{{ old('whatsapp_business_id', $settings['whatsapp_business_id'] ?? '') }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="Your Business Account ID">
                </div>
            </div>

            <div class="mt-6 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <form action="{{ route('admin.settings.test-email') }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                            <i class="fas fa-envelope mr-2"></i> Test Email
                        </button>
                    </form>
                    <form action="{{ route('admin.settings.test-sms') }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                            <i class="fas fa-sms mr-2"></i> Test SMS
                        </button>
                    </form>
                    <form action="{{ route('admin.settings.test-whatsapp') }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                            <i class="fab fa-whatsapp mr-2"></i> Test WhatsApp
                        </button>
                    </form>
                </div>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-save mr-2"></i> Save Configuration
                </button>
            </div>
        </form>
    </div>

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">System Actions</h3>
        </div>
        <div class="flex flex-wrap gap-4">
            <form action="{{ route('admin.settings.clear-cache') }}" method="POST">
                @csrf
                <button type="submit" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    <i class="fas fa-broom mr-2"></i> Clear Cache
                </button>
            </form>
            <a href="{{ route('admin.settings.audit-logs') }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                <i class="fas fa-history mr-2"></i> View Audit Logs
            </a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const logoInput = document.getElementById('church_logo');
    const logoPreview = document.getElementById('logo-preview');
    
    if (logoInput && logoPreview) {
        logoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    logoPreview.src = e.target.result + '?t=' + Date.now();
                };
                reader.readAsDataURL(file);
            }
        });
    }
});
</script>
@endpush