@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">
                

                <div
                  class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                >
                  <div
                    class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
                  >
                    <form action="{{ route('smtp_configs.store') }}" method="POST">
                        @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" value="{{ $config->smtp_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" value="{{ $config->smtp_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"  value="{{ $config->smtp_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>
                          <input
                            type="text"
                            placeholder="Enter SMTP Password" name="smtp_password" value="{{ $config->smtp_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"
                          />
                        </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" value="{{ $config->smtp_from_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"  value="{{ $config->smtp_from_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"
                            class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm cursor-pointer"
                          >
                            Update SMTP Config
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>

                <!-- Test Connection Section -->
                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-5 sm:p-6 mt-6">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90 mb-4">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-gray-800 dark:bg-white/10 text-white px-4 py-2.5 rounded-lg text-sm cursor-pointer hover:bg-gray-700"
                            >
                                Send Test Email
                            </button> -->
                            <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>
                <!-- End Test Connection Section -->

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