From 1e711de52a9548cf7697c1dde093a9e8f1c21a7a Mon Sep 17 00:00:00 2001
From: ayntk-ai <122374094+ayntk-ai@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:58:33 +0200
Subject: [PATCH] UI for Instance timezone

---
 .../views/livewire/settings/index.blade.php   | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index d53db6a98..93c233b6a 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -17,6 +17,37 @@
                 <h4 class="pt-6">Instance Settings</h4>
                 <x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io" />
                 <x-forms.input id="settings.instance_name" label="Instance's Name" placeholder="Coolify" />
+                <div class="w-full" x-data="{ 
+                    open: false, 
+                    search: '{{ $settings->instance_timezone }}', 
+                    timezones: @js($timezones),
+                    placeholder: 'Select Instance Timezone'
+                }">
+                    <label for="settings.instance_timezone" class="dark:text-white flex items-center">
+                        Instance Timezone
+                        <x-helper class="ml-2" helper="Timezone for the Coolify instance. This is used for update check and auto update frequency." />
+                    </label>
+                    <div class="relative">
+                        <input
+                            x-model="search"
+                            @focus="open = true"
+                            @click.away="open = false"
+                            @input="open = true"
+                            class="w-full input"
+                            :placeholder="placeholder"
+                            wire:model.debounce.300ms="settings.instance_timezone"
+                        >
+                        <div x-show="open" class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-gray-300 dark:border-white rounded-md shadow-lg max-h-60 overflow-auto">
+                            <template x-for="timezone in timezones.filter(tz => tz.toLowerCase().includes(search.toLowerCase()))" :key="timezone">
+                                <div
+                                    @click="search = timezone; open = false; $wire.set('settings.instance_timezone', timezone)"
+                                    class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-800 dark:text-gray-200"
+                                    x-text="timezone"
+                                ></div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
                 <h4 class="w-full pt-6">DNS Validation</h4>
                 <div class="md:w-96">
                     <x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Enabled" />
@@ -71,4 +102,4 @@
         </div>
     </form>
 
-</div>
+</div>
\ No newline at end of file