@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> -->
  <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  SMTP Configuration
                  <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:460px">
                           <span class="popover-header">SMTP Configuration</span>
                           <span class="popover-body">Configure your SMTP server to allow the application to send emails using your own email provider. Enter your SMTP host, port, encryption, login credentials, and the email address used to send messages.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400">Connect your email server to send emails from your account.</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="{{ 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 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('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"> -->
                                      <div class="mt-2">
                                        <!-- 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">

                                          
                                            
                                            <!-- Single Row: Host, Port, Encryption -->
                                            <div class="w-full px-2.5">
                                                    <div class="flex flex-col gap-5 xl:flex-row">

                                                        <!-- SMTP Host -->
                                                        <div class="w-full xl:flex-1">
                                                            <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>

                                                        <!-- SMTP Port -->
                                                        <div class="w-full xl:flex-1">
                                                            <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>

                                                        <!-- Encryption -->
                                                        <div class="w-full xl:flex-1">
                                                            <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>
                                            </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"
                                              >
                                                Save SMTP Settings
                                              </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> -->
                                          <div>
                                                      <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
                                                      <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                                                          Test SMTP Connection
                                                          <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:460px">
                                                                  <span class="popover-header">Test SMTP Connection</span>
                                                                  <span class="popover-body">Send a test email to verify that the application can connect to your SMTP server and send emails successfully. Enter a recipient email address and send a test message.</span>
                                                            </span>
                                                          </span>
                                                      </h2>
                                                      <p class="text-sm text-gray-500 dark:text-gray-400">Make sure your SMTP settings are working correctly.</p>
                                          </div>
                                          <form action="{{ route('smtp_configs.test') }}" class="mt-4" 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">
                                                          Send Test Email To
                                                      </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