@extends('layouts.app')
@section('title', 'SMTP Config')

@section('content')
 @php
        $config = $configs->first(); // since only one record per company
@endphp
          <div
            class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
          >
            <!-- Breadcrumb Start -->
            <div x-data="{ pageName: `SMTP Config`}">
              <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>
  <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="{{ route('dashboard') }}"
        >
          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 -->

            <!-- Alert Messages -->
            @if(session('success'))
                <div class="mb-4 p-4 bg-green-100 text-green-700 rounded-lg">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="mb-4 p-4 bg-red-100 text-red-700 rounded-lg">{{ session('error') }}</div>
            @endif

            <!-- ====== Form Layouts Section Start -->
            <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: 'smtp_config' }">
                              <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 Settings
                                    </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'">
                                       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('timezone') ? '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 === 'smtp_config'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       SMTP Configuration
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       Configure your SMTP server settings to enable the system to send outgoing emails using your own email provider.
                                    </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 -->
                                        <!-- SMTP Status Indicator -->
                                        <div class="mb-6">
                                            @if(($config->smtp_works ?? '') == 'Yes')
                                                <div class="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-900/30 dark:bg-green-500/10">
                                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-pink-500 text-white" style="background-color:green">
                                                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                                    </div>
                                                    <div>
                                                        <h4 class="text-sm font-semibold text-green-800 dark:text-green-400">Connection Verified</h4>
                                                        <p class="text-xs text-green-700 dark:text-green-500/80">Your SMTP settings are correctly configured and the system can send emails.</p>
                                                    </div>
                                                </div>
                                            @elseif(($config->smtp_works ?? '') == 'No')
                                                <div class="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900/30 dark:bg-red-500/10">
                                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-500 text-white">
                                                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                                    </div>
                                                    <div>
                                                        <h4 class="text-sm font-semibold text-red-800 dark:text-red-400">Connection Failed</h4>
                                                        <p class="text-xs text-red-700 dark:text-red-500/80">The last test attempt failed. Please check your credentials and port settings.</p>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
                                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-400 text-white">
                                                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                    </div>
                                                    <div>
                                                        <h4 class="text-sm font-semibold text-gray-800 dark:text-white/90">Not Verified</h4>
                                                        <p class="text-xs text-gray-500 dark:text-gray-400">Configuration hasn't been tested yet. Save settings to trigger a test.</p>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                        <form 
                                            action="{{ route('smtp_configs.store') }}" 
                                            method="POST"
                                            x-data="{ 
                                                showPass: false,
                                                host: '{{ $config->smtp_host ?? '' }}',
                                                port: '{{ $config->smtp_port ?? '' }}',
                                                email: '{{ $config->smtp_from_email ?? '' }}',
                                                name: '{{ $config->smtp_from_name ?? '' }}',
                                                username: '{{ $config->smtp_username ?? '' }}',
                                                password: '{{ $config->smtp_password ?? '' }}',
                                                get isValid() {
                                                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                                    return this.host.trim() !== '' && 
                                                          this.name.trim() !== '' && 
                                                          this.username.trim() !== '' && 
                                                          this.password.trim() !== '' && 
                                                          !isNaN(this.port) && this.port !== '' &&
                                                          emailRegex.test(this.email);
                                                }
                                            }"
                                        >
                                            @csrf
                                            <input type="hidden" name="company_id" value="{{ session('company_id') }}">
                                          <div class="-mx-2.5 flex flex-wrap gap-y-5">

                                          
                                            
                                            <div class="w-full px-2.5 xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                SMTP Host
                                              </label>
                                              <input
                                                type="text"
                                                placeholder="Enter Host"  name="smtp_host" x-model="host"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              />
                                            </div>
                                            <div class="w-full px-2.5  xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                SMTP Port
                                              </label>
                                              <input
                                                type="text"
                                                placeholder="Enter SMTP Port"  name="smtp_port" x-model="port"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              />
                                            </div>
                                            <div class="w-full px-2.5  xl:w-1/3">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                Encryption
                                              </label>
                                              <select id="smtp_encryption" name="smtp_encryption"
                                              class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                              @change="isOptionSelected = true">
                                                
                                                <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">Select</option>
                                                <option value="tls" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400" {{ ($config->smtp_encryption ?? '') == 'tls' ? 'selected' : '' }}>TLS</option>
                                                <option value="ssl" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400" {{ ($config->smtp_encryption ?? '') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                            
                                              </select>
                                            </div>
                                            <div class="w-full px-2.5  xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                SMTP Username
                                              </label>
                                              <input
                                                type="text"
                                                placeholder="Enter SMTP UserName" name="smtp_username" x-model="username"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              />
                                            </div>

                                            <div class="w-full px-2.5  xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                SMTP Password
                                              </label>
                                              <div class="relative">
                                                <input
                                                    :type="showPass ? 'text' : 'password'"
                                                    placeholder="Enter SMTP Password" name="smtp_password" x-model="password"
                                                    class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                                />
                                                <button 
                                                    type="button" 
                                                    @click="showPass = !showPass"
                                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700"
                                                >
                                                    <svg x-show="!showPass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.644C3.301 8.844 7.13 6 12 6c4.87 0 8.699 2.844 9.964 5.678.045.07.045.155 0 .225C20.699 15.156 16.87 18 12 18c-4.87 0-8.699-2.844-9.964-5.678z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    </svg>
                                                    <svg x-show="showPass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                                                    </svg>
                                                </button>
                                              </div>
                                            </div>

                                            <div class="w-full px-2.5  xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                From Email
                                              </label>
                                              <input
                                                type="text"
                                                placeholder="Enter From Email" name="smtp_from_email" x-model="email"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              />
                                            </div>

                                            <div class="w-full px-2.5  xl:w-1/2">
                                              <label
                                                class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                                              >
                                                SMTP Name
                                              </label>
                                              <input
                                                type="text"
                                                placeholder="Enter From Name" name="smtp_from_name" x-model="name"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                              />
                                            </div>

                                            <div class="w-full px-2.5">
                                              <button
                                                type="submit"
                                                :disabled="!isValid"
                                                :class="!isValid ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
                                                class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm"
                                              >
                                                Update SMTP Config
                                              </button>
                                            </div>
                                          </div>
                                        </form>
                                      </div>
                                      <div class="mt-5 border-t border-gray-100 ">
                                          <h3 class="text-base font-medium text-gray-800 dark:text-white/90 mb-4 mt-5">Test SMTP Connection</h3>
                                          <form action="{{ route('smtp_configs.test') }}" method="POST">
                                              @csrf
                                              <div class="flex flex-wrap items-end gap-4">
                                                  <div class="w-full xl:w-1/2">
                                                      <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                                          Recipient Email Address
                                                      </label>
                                                      <input
                                                          type="email"
                                                          name="test_email"
                                                          required
                                                          placeholder="email@example.com"
                                                          class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                                      />
                                                  </div>
                                                  <button
                                                      type="submit"
                                                      class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm cursor-pointer"
                                                  >
                                                      Send Test Email
                                                  </button>
                                              </div>
                                          </form>
                                      </div>
                                    <!-- Form end -->
                                 </div>

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

                

              </div>
            </div>
            <!-- ====== Form Layouts Section End -->
          </div>
@endsection