<x-layouts.app.sidebar>
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <!-- Settings Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Settings</h1>
        </div>

        <!-- Settings Navigation -->
        <x-settings-navigation />

        <!-- Settings Form -->        <!-- Settings Form -->
        <form method="POST" action="{{ route('settings.notifications.update') }}" class="space-y-8">
            @csrf
            @method('PUT')

            <!-- Email Notifications Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">Email Notifications</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure when and how to send email notifications</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">From Email *</label>
                        <input type="email" name="from_email" 
                               value="{{ old('from_email', $settings->from_email ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('from_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">From Name *</label>
                        <input type="text" name="from_name" 
                               value="{{ old('from_name', $settings->from_name ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('from_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Escalation Hours *</label>
                        <input type="number" min="1" name="escalation_hours" 
                               value="{{ old('escalation_hours', $settings->escalation_hours ?? '24') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('escalation_hours')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" name="send_appointment_reminders" value="1" 
                               {{ old('send_appointment_reminders', $settings->send_appointment_reminders ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Send Appointment Reminders</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Email customers about upcoming appointments</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="send_service_completion" value="1" 
                               {{ old('send_service_completion', $settings->send_service_completion ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Send Service Completion Notifications</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Notify customers when service is completed</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="send_payment_confirmations" value="1" 
                               {{ old('send_payment_confirmations', $settings->send_payment_confirmations ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Send Payment Confirmations</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Email receipt confirmations after payment</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="send_maintenance_reminders" value="1" 
                               {{ old('send_maintenance_reminders', $settings->send_maintenance_reminders ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Send Maintenance Reminders</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Remind customers of scheduled maintenance</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="send_estimate_notifications" value="1" 
                               {{ old('send_estimate_notifications', $settings->send_estimate_notifications ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Send Estimate Notifications</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Email estimates to customers for approval</p>
                </div>
            </div>

            <!-- SMS Notifications Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">SMS Notifications</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure text message notifications</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">SMS Provider</label>
                        <select name="sms_provider" 
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white">
                            <option value="">Select SMS Provider</option>
                            <option value="TWILIO" {{ old('sms_provider', $settings->sms_provider ?? '') === 'TWILIO' ? 'selected' : '' }}>Twilio</option>
                            <option value="NEXMO" {{ old('sms_provider', $settings->sms_provider ?? '') === 'NEXMO' ? 'selected' : '' }}>Nexmo/Vonage</option>
                            <option value="TEXTMAGIC" {{ old('sms_provider', $settings->sms_provider ?? '') === 'TEXTMAGIC' ? 'selected' : '' }}>TextMagic</option>
                        </select>
                        @error('sms_provider')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">SMS From Number</label>
                        <input type="text" name="sms_from_number" 
                               value="{{ old('sms_from_number', $settings->sms_from_number ?? '') }}" 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">SMS sender number or short code</p>
                        @error('sms_from_number')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" name="enable_sms_notifications" value="1" 
                               {{ old('enable_sms_notifications', $settings->enable_sms_notifications ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Enable SMS Notifications</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Allow sending SMS notifications to customers</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="sms_appointment_reminders" value="1" 
                               {{ old('sms_appointment_reminders', $settings->sms_appointment_reminders ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">SMS Appointment Reminders</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="sms_service_updates" value="1" 
                               {{ old('sms_service_updates', $settings->sms_service_updates ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">SMS Service Updates</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="sms_urgent_notifications" value="1" 
                               {{ old('sms_urgent_notifications', $settings->sms_urgent_notifications ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">SMS Urgent Notifications</label>
                    </div>
                </div>
            </div>

            <!-- Internal Notifications Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">Internal Notifications</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure notifications for staff and management</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Manager Email *</label>
                        <input type="email" name="manager_email" 
                               value="{{ old('manager_email', $settings->manager_email ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Email for management notifications</p>
                        @error('manager_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Technician Notification Email</label>
                        <input type="email" name="technician_notification_email" 
                               value="{{ old('technician_notification_email', $settings->technician_notification_email ?? '') }}" 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Email for technician assignments</p>
                        @error('technician_notification_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" name="notify_new_appointments" value="1" 
                               {{ old('notify_new_appointments', $settings->notify_new_appointments ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Notify New Appointments</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Alert staff when new appointments are scheduled</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_estimate_requests" value="1" 
                               {{ old('notify_estimate_requests', $settings->notify_estimate_requests ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Notify Estimate Requests</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Alert when customers request estimates</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_low_inventory" value="1" 
                               {{ old('notify_low_inventory', $settings->notify_low_inventory ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Notify Low Inventory</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Alert when parts are running low</p>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_overdue_payments" value="1" 
                               {{ old('notify_overdue_payments', $settings->notify_overdue_payments ?? true) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Notify Overdue Payments</label>
                    </div>
                    <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Alert about overdue customer payments</p>
                </div>
            </div>

            <!-- Notification Timing Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">Notification Timing</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure when notifications are sent</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Appointment Reminder (hours before) *</label>
                        <input type="number" min="1" max="72" name="appointment_reminder_hours" 
                               value="{{ old('appointment_reminder_hours', $settings->appointment_reminder_hours ?? '24') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('appointment_reminder_hours')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Maintenance Reminder (days before) *</label>
                        <input type="number" min="1" max="90" name="maintenance_reminder_days" 
                               value="{{ old('maintenance_reminder_days', $settings->maintenance_reminder_days ?? '30') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('maintenance_reminder_days')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Follow-up After Service (days) *</label>
                        <input type="number" min="1" max="30" name="followup_after_service_days" 
                               value="{{ old('followup_after_service_days', $settings->followup_after_service_days ?? '7') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('followup_after_service_days')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3">
                <a href="{{ route('settings.general') }}" 
                   class="px-4 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Save Notification Settings
                </button>
            </div>
        </form>
    </div>
</x-layouts.app.sidebar>
