<div x-data="{ chatProvider: @entangle('chat_provider') }">
    <form id="website-chat-settings-card" novalidate="novalidate" x-data="{ selectedChat: '' }">
        <div class="card">
            <div class="card-body">
                <h5>Chat</h5>
                <div class="mb-4 fv-row">
                    <label for="chat_provider" class="form-label">Proveedor</label>
                    <select id="chat_provider" name="chat_provider" x-model="chatProvider" wire:model="chat_provider" class="form-select">
                        <option value="">Deshabilitar Chat</option>
                        <option value="whatsapp">WhatsApp</option>
                    </select>
                </div>
                <div x-show="chatProvider === 'whatsapp'" class="mt-5">
                    <h5>WhatsApp</h5>
                    <div class="mb-4 fv-row">
                        <label for="chat_whatsapp_number" class="form-label">Número telefónico</label>
                        <input type="text" id="chat_whatsapp_number" name="chat_whatsapp_number" wire:model='chat_whatsapp_number' class="form-control" placeholder="Número telefónico">
                        @error("chat_whatsapp_number")
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-4 fv-row">
                        <label for="chat_whatsapp_message" class="form-label">Mensaje de saludo</label>
                        <input type="text" id="chat_whatsapp_message" name="chat_whatsapp_message" wire:model='chat_whatsapp_message' class="form-control" placeholder="Mensaje de saludo">
                        @error("chat_whatsapp_message")
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
        <div>
            {{-- Botones --}}
            <div class="row my-4">
                <div class="col-lg-12 text-end">
                    <button
                        type="submit"
                        class="btn btn-primary btn-save btn-sm mt-2 mr-2 waves-effect waves-light"
                        disabled
                        data-loading-text="Guardando...">
                        <i class="ti ti-device-floppy mr-2"></i>
                        Guardar cambios
                    </button>
                    <button
                        type="button"
                        wire:click="loadSettings"
                        class="btn btn-secondary btn-cancel btn-sm mt-2 mr-2 waves-effect waves-light"
                        disabled>
                        <i class="ti ti-rotate-2 mr-2"></i>
                        Cancelar
                    </button>
                </div>
            </div>
            {{-- Notifications --}}
            <div class="notification-container" wire:ignore></div>
        </div>
    </form>
</div>