<div class="grid grid-cols-1 px-4">
    <form wire:submit.prevent="submitForm" class="space-y-6">
        <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-green-600 sm:p-6 dark:bg-gray-800 xl:mb-0">
            <div class="flow-root">
                <h3 class="text-xl font-semibold dark:text-white">
                    @lang('modules.settings.whatsappNotificationSettings')
                </h3>

                <div class="divide-y divide-gray-200 dark:divide-green-600">
                    @foreach ($whatsappSettings as $index => $setting)
                        <div class="py-4">
                            <!-- Header -->
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex flex-col">
                                    <div class="text-lg font-semibold text-gray-900 dark:text-white">
                                        @lang('modules.notifications.' . $setting['type'])
                                    </div>
                                    <div class="text-base font-normal text-gray-500 dark:text-gray-400">
                                        @lang('modules.notifications.' . $setting['type'] . '_info')
                                    </div>
                                </div>

                                <label for="checkbox_{{ $setting['type'] }}" class="relative flex items-center cursor-pointer"
                                    wire:key='toggle_active_{{ $setting['id'] }}'>
                                    <input type="checkbox" id="checkbox_{{ $setting['type'] }}"
                                        wire:model.live="whatsappSettings.{{ $index }}.active"
                                        class="sr-only">
                                    <span class="h-6 bg-gray-200 border border-gray-200 rounded-full w-11 toggle-bg dark:bg-green-600 dark:border-gray-600"></span>
                                </label>
                            </div>

                            <!-- Message Body -->
                            <div class="mt-3">
                                <label for="body_{{ $setting['id'] }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                                    @lang('modules.notifications.whatsappMessage')
                                </label>
                                <textarea wire:model="whatsappSettings.{{ $index }}.body"
                                    id="body_{{ $setting['id'] }}"
                                    class="block w-full px-3 py-2 text-sm text-gray-900 placeholder-gray-400 border border-gray-300 rounded-lg shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:ring-green-500 focus:border-green-500"
                                    rows="5"
                                    placeholder="Enter WhatsApp message with placeholders like __customer__, __amount__..."></textarea>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-6">
                    <x-button>@lang('app.save')</x-button>
                </div>
            </div>
        </div>
    </form>
</div>
