@extends('layouts.app')
@section('title', 'Account Settings')
@section('content')


<div
   class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
   >
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Timezone Settings`}">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
         <!-- <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
            x-text="pageName"
            ></h2> -->
         <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  Timezone Settings
                  <span class="help-icon-wrapper">
                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                     <span class="help-popover-text" style="bottom: 100%;width:360px">
                           <span class="popover-header">Timezone Information</span>
                           <span class="popover-body">Choose the timezone used by your account. Dates and times for signing activity, audit records, notifications, and other time-based events will be displayed according to this timezone.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400">Set the timezone used for signing activity, audit records, and scheduled notifications.</p>
         </div>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="index.html"
                     >
                     Home
                     <svg
                        class="stroke-current"
                        width="17"
                        height="16"
                        viewBox="0 0 17 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <path
                           d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                           stroke=""
                           stroke-width="1.2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           />
                     </svg>
                  </a>
               </li>
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="{{ route('account_settings') }}"
                  >
                     Account Settings
                     <svg
                        class="stroke-current"
                        width="17"
                        height="16"
                        viewBox="0 0 17 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                     >
                        <path
                        d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                        stroke=""
                        stroke-width="1.2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        />
                     </svg>
                  </a>
               </li>
               
               <li
                  class="text-sm text-gray-800 dark:text-white/90"
                  x-text="pageName"
                  ></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->

            <div class="grid grid-cols-1 gap-6 ">
              <div class="space-y-6">

                <!-- Tab start -->
                    <div
                        class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                     >
                        <!-- <div class="px-6 py-5">
                           <h3
                              class="text-base font-medium text-gray-800 dark:text-white/90"
                           >
                              Account Settings
                           </h3>
                        </div> -->
                        <!-- <div
                           class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
                        > -->
                           <div x-data="{ activeTab: 'account_settings' }">
                              <div
                                 class="rounded-t-xl border border-gray-200 p-3 dark:border-gray-800"
                              >
                                 
                                  <nav class="flex overflow-x-auto rounded-lg bg-gray-100 p-1 dark:bg-gray-900 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5">
                                    
                                    <!-- SMTP Configuration -->
                                    <a href="/smtp_configs"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('smtp') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       SMTP Configuration
                                    </a>

                                    <!-- Email Settings -->
                                    <a href="/email_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('email') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Email Templates
                                    </a>

                                    <!-- API Keys -->
                                    <a href="/settings/api-keys"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('api-keys') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       API Keys
                                    </a>

                                    <!-- Categories -->
                                    <a href="/categories"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('categories') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Template Categories
                                    </a>

                                    <!-- Timezone Settings -->
                                    <a href="/account_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('account_settings') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Timezone Settings
                                    </a>

                                  </nav>
                              </div>
                              <div
                                 class="rounded-b-xl border border-t-0 border-gray-200 p-6 pt-4 dark:border-gray-800"
                              >
                                 <div x-show="activeTab === 'account_settings'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Timezone Settings
                                       <span class="help-icon-wrapper">
                                          <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                          <span class="help-popover-text" style="bottom: 100%;width:360px">
                                             <span class="popover-header">Timezone Settings</span>
                                             <span class="popover-body">Choose the timezone used by your account. Dates and times for signing activity, audit records, notifications, and other time-based events will be displayed according to this timezone.</span>
                                          </span>
                                       </span>
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       Set the timezone used for signing activity, audit records, and scheduled notifications.
                                    </p>

                                    <!-- Form start -->
                                      <!--<div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">-->
                                      <div class="mt-5">
                                        <!-- Added x-data for Validation and Password Toggle -->
                                          <div class="mt-6 rounded-2xl border border-gray-200 bg-white px-6 pl-5 dark:border-gray-800 dark:bg-white/3">
                                             
                                             <div class="py-6">
                                                <form action="{{ route('company.update_timezone') }}" method="POST">
                                                      @csrf
                                                      <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
                                                         <div class="w-full lg:w-1/2">
                                                            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                                                  <!-- System Timezone -->
                                                                  Account Timezone
                                                                  <span class="help-icon-wrapper">
                                                                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                                                     <span class="help-popover-text" style="bottom: 100%;width:360px">
                                                                           <span class="popover-header">Account Timezone</span>
                                                                           <span class="popover-body">Select the timezone that matches your location. This timezone is used when displaying dates and times throughout your account.</span>
                                                                     </span>
                                                                  </span>
                                                            </label>
                                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                               I prefer Account Timezone because it is clearer to users than “System Timezone.”
                                                            </p>
                                                            <div class="relative timezone-select-wrapper  pt-2">
                                                                  <select id="timezone-select" name="company_timezone" style="display:none">
                                                                     @foreach($timezones as $identifier => $label)
                                                                        <option value="{{ $identifier }}" {{ $company->company_timezone == $identifier ? 'selected' : '' }}>
                                                                           {{ $label }}
                                                                        </option>
                                                                     @endforeach
                                                                  </select>
                                                            </div>
                                                         </div>
                                                         <button
                                                            type="submit" style="margin-top:55px"
                                                            class="bg-brand-500 shadow-theme-xs inline-flex items-center justify-center rounded-lg px-6 h-11 text-sm font-medium text-white transition hover:opacity-90"
                                                            >
                                                            Update Timezone
                                                         </button>

                                                         {{--  now() --}}
                                                      </div>
                                                      @if(session('success'))
                                                         <p class="mt-3 text-sm text-green-500">
                                                            {{ session('success') }}
                                                         </p>
                                                      @endif
                                                </form>
                                             </div>
                                          </div>
                                      </div>
                                      
                                    <!-- Form end -->
                                 </div>

                                 
                              </div>
                           </div>
                        <!-- </div> -->
                     </div>
                <!-- Tab End -->
                

                

              </div>
            </div>

  
      

<!-- Tom Select Assets -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

<style>
    /* 1. Main Input Styling */
    .ts-wrapper.single .ts-control {
        height: 44px !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        padding: 0 12px !important;
        display: flex;
        align-items: center;
        font-size: 14px !important;
        background-color: #fff !important;
    }

    .dark .ts-wrapper.single .ts-control {
        background-color: #111827 !important;
        border-color: #374151 !important;
        color: #fff !important;
    }

    /* 2. FORCE DROPDOWN TO OPEN UPWARDS */
    .ts-wrapper .ts-dropdown {
        top: auto !important;
        bottom: 100% !important; 
        margin-bottom: 8px !important;
        margin-top: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        max-height: 250px !important;
        z-index: 100 !important;
    }

    .ts-dropdown .ts-dropdown-content {
        max-height: 250px !important;
    }

    .dark .ts-dropdown {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    /* Selected Item Highlight */
    .ts-dropdown .active {
        background-color: #0d9488 !important; 
        color: #fff !important;
    }
    
    /* Ensure the search text doesn't look like a value when not focused */
    .ts-wrapper.single.focus .ts-control input {
        opacity: 1 !important;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ts = new TomSelect("#timezone-select", {
            create: false,       // DO NOT allow new values
            maxOptions: null,    // Show all timezones
            controlInput: '<input />',
            placeholder: "Search Timezone...",
            searchField: ['text'],
            // Logic to prevent "random text" from staying in the box
            onBlur: function() {
                this.setTextboxValue(''); // Clear any untyped search text when focus is lost
                this.refreshOptions(false);
            },
            onChange: function() {
                this.blur(); // Automatically close and clear search once an item is picked
            },
            onInitialize: function() {
                this.revertSettings.id = ""; 
            }
        });
    });
</script>
      <!-- Timezone Settings End -->

  
</div>
@endsection