<x-layouts.tenant pageTitle="Comunicaciones">
    <x-page-header title="Recordatorios y comunicaciones" subtitle="Configura emails, recordatorios automáticos y WhatsApp." />

    <x-card title="Automatizaciones">
        <form method="POST" action="{{ route('tenant.communications.update') }}" class="space-y-5">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach ([
                    'reminder_24h_enabled' => 'Recordatorio 24 horas antes',
                    'reminder_2h_enabled' => 'Recordatorio 2 horas antes',
                    'email_notifications_enabled' => 'Notificaciones por correo',
                    'whatsapp_enabled' => 'WhatsApp activo',
                ] as $key => $label)
                    <label class="flex items-center justify-between gap-4 rounded-xl border border-ink-100 p-4">
                        <span class="font-semibold text-ink-800">{{ $label }}</span>
                        <input type="checkbox" name="{{ $key }}" value="1" @checked((bool) ($settings[$key] ?? false)) class="rounded border-ink-300 text-brand-600 focus:ring-brand-500">
                    </label>
                @endforeach
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Número WhatsApp</span>
                    <input name="whatsapp_number" value="{{ $settings['whatsapp_number'] ?? '' }}" class="input mt-1.5" placeholder="+57...">
                </label>
                <label class="block md:col-span-2">
                    <span class="text-sm font-semibold text-ink-700">Plantilla WhatsApp</span>
                    <textarea name="whatsapp_template" rows="4" class="input mt-1.5" placeholder="Hola {cliente}, te recordamos tu cita el {fecha} a las {hora}.">{{ $settings['whatsapp_template'] ?? '' }}</textarea>
                </label>
            </div>
            <x-btn type="submit">Guardar comunicaciones</x-btn>
        </form>
    </x-card>
</x-layouts.tenant>
