@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="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
                  class="text-sm text-gray-800 dark:text-white/90"
                  x-text="pageName"
                  ></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->
   <!-- ====== 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="px-6 py-5">
               <h3
                 class="text-base font-medium text-gray-800 dark:text-white/90"
               >
                 Tabs with underline and icon
               </h3>
               </div> -->
            
               <div
                  class="rounded-xl border border-gray-200 p-6 dark:border-gray-800"
                  x-data="{ activeTab: 'overview' }"
                  >
                  <div class="border-b border-gray-200 dark:border-gray-800">
                     <nav
                        class="-mb-px flex space-x-2 overflow-x-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5"
                        >
                        <button
                           class="inline-flex items-center gap-2 border-b-2 px-2.5 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                           x-bind:class="activeTab === 'overview' ? ' text-brand-500 border-brand-500  dark:text-brand-400 dark:border-brand-400' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                           x-on:click="activeTab = 'overview'"
                           >
                           <svg
                              class="size-5"
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M4.83203 2.5835C3.58939 2.5835 2.58203 3.59085 2.58203 4.83349V7.25015C2.58203 8.49279 3.58939 9.50015 4.83203 9.50015H7.2487C8.49134 9.50015 9.4987 8.49279 9.4987 7.25015V4.8335C9.4987 3.59086 8.49134 2.5835 7.2487 2.5835H4.83203ZM4.08203 4.83349C4.08203 4.41928 4.41782 4.0835 4.83203 4.0835H7.2487C7.66291 4.0835 7.9987 4.41928 7.9987 4.8335V7.25015C7.9987 7.66436 7.66291 8.00015 7.2487 8.00015H4.83203C4.41782 8.00015 4.08203 7.66436 4.08203 7.25015V4.83349ZM4.83203 10.5002C3.58939 10.5002 2.58203 11.5075 2.58203 12.7502V15.1668C2.58203 16.4095 3.58939 17.4168 4.83203 17.4168H7.2487C8.49134 17.4168 9.4987 16.4095 9.4987 15.1668V12.7502C9.4987 11.5075 8.49134 10.5002 7.2487 10.5002H4.83203ZM4.08203 12.7502C4.08203 12.336 4.41782 12.0002 4.83203 12.0002H7.2487C7.66291 12.0002 7.9987 12.336 7.9987 12.7502V15.1668C7.9987 15.5811 7.66291 15.9168 7.2487 15.9168H4.83203C4.41782 15.9168 4.08203 15.5811 4.08203 15.1668V12.7502ZM10.4987 4.83349C10.4987 3.59085 11.5061 2.5835 12.7487 2.5835H15.1654C16.408 2.5835 17.4154 3.59086 17.4154 4.8335V7.25015C17.4154 8.49279 16.408 9.50015 15.1654 9.50015H12.7487C11.5061 9.50015 10.4987 8.49279 10.4987 7.25015V4.83349ZM12.7487 4.0835C12.3345 4.0835 11.9987 4.41928 11.9987 4.83349V7.25015C11.9987 7.66436 12.3345 8.00015 12.7487 8.00015H15.1654C15.5796 8.00015 15.9154 7.66436 15.9154 7.25015V4.8335C15.9154 4.41928 15.5796 4.0835 15.1654 4.0835H12.7487ZM12.7487 10.5002C11.5061 10.5002 10.4987 11.5075 10.4987 12.7502V15.1668C10.4987 16.4095 11.5061 17.4168 12.7487 17.4168H15.1654C16.408 17.4168 17.4154 16.4095 17.4154 15.1668V12.7502C17.4154 11.5075 16.408 10.5002 15.1654 10.5002H12.7487ZM11.9987 12.7502C11.9987 12.336 12.3345 12.0002 12.7487 12.0002H15.1654C15.5796 12.0002 15.9154 12.336 15.9154 12.7502V15.1668C15.9154 15.5811 15.5796 15.9168 15.1654 15.9168H12.7487C12.3345 15.9168 11.9987 15.5811 11.9987 15.1668V12.7502Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           SMTP Configuration
                        </button>
                        <button
                           class="inline-flex items-center gap-2 border-b-2 px-2.5 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                           x-bind:class="activeTab === 'notification' ? ' text-brand-500 border-brand-500  dark:border-brand-400  dark:text-brand-400' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                           x-on:click="activeTab = 'notification'"
                           >
                           <svg
                              class="size-5"
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M10.7487 2.29248C10.7487 1.87827 10.4129 1.54248 9.9987 1.54248C9.58448 1.54248 9.2487 1.87827 9.2487 2.29248V2.83613C6.08132 3.20733 3.6237 5.9004 3.6237 9.16748V14.4591H3.33203C2.91782 14.4591 2.58203 14.7949 2.58203 15.2091C2.58203 15.6234 2.91782 15.9591 3.33203 15.9591H4.3737H15.6237H16.6654C17.0796 15.9591 17.4154 15.6234 17.4154 15.2091C17.4154 14.7949 17.0796 14.4591 16.6654 14.4591H16.3737V9.16748C16.3737 5.9004 13.9161 3.20733 10.7487 2.83613V2.29248ZM14.8737 14.4591V9.16748C14.8737 6.47509 12.6911 4.29248 9.9987 4.29248C7.30631 4.29248 5.1237 6.47509 5.1237 9.16748V14.4591H14.8737ZM7.9987 17.7085C7.9987 18.1228 8.33448 18.4585 8.7487 18.4585H11.2487C11.6629 18.4585 11.9987 18.1228 11.9987 17.7085C11.9987 17.2943 11.6629 16.9585 11.2487 16.9585H8.7487C8.33448 16.9585 7.9987 17.2943 7.9987 17.7085Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           Email Settings
                        </button>
                        <button
                           class="inline-flex items-center gap-2 border-b-2 px-2.5 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                           x-bind:class="activeTab === 'analytics' ? ' text-brand-500 border-brand-500   dark:text-brand-500' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                           x-on:click="activeTab = 'analytics'"
                           >
                           <svg
                              class="size-5"
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M9.85954 4.0835C9.5834 4.0835 9.35954 4.30735 9.35954 4.5835V15.4161C9.35954 15.6922 9.5834 15.9161 9.85954 15.9161H10.1373C10.4135 15.9161 10.6373 15.6922 10.6373 15.4161V4.5835C10.6373 4.30735 10.4135 4.0835 10.1373 4.0835H9.85954ZM7.85954 4.5835C7.85954 3.47893 8.75497 2.5835 9.85954 2.5835H10.1373C11.2419 2.5835 12.1373 3.47893 12.1373 4.5835V15.4161C12.1373 16.5206 11.2419 17.4161 10.1373 17.4161H9.85954C8.75497 17.4161 7.85954 16.5206 7.85954 15.4161V4.5835ZM4.58203 8.9598C4.30589 8.9598 4.08203 9.18366 4.08203 9.4598V15.4168C4.08203 15.693 4.30589 15.9168 4.58203 15.9168H4.85981C5.13595 15.9168 5.35981 15.693 5.35981 15.4168V9.4598C5.35981 9.18366 5.13595 8.9598 4.85981 8.9598H4.58203ZM2.58203 9.4598C2.58203 8.35523 3.47746 7.4598 4.58203 7.4598H4.85981C5.96438 7.4598 6.85981 8.35523 6.85981 9.4598V15.4168C6.85981 16.5214 5.96438 17.4168 4.85981 17.4168H4.58203C3.47746 17.4168 2.58203 16.5214 2.58203 15.4168V9.4598ZM14.637 12.435C14.637 12.1589 14.8609 11.935 15.137 11.935H15.4148C15.691 11.935 15.9148 12.1589 15.9148 12.435V15.4168C15.9148 15.693 15.691 15.9168 15.4148 15.9168H15.137C14.8609 15.9168 14.637 15.693 14.637 15.4168V12.435ZM15.137 10.435C14.0325 10.435 13.137 11.3304 13.137 12.435V15.4168C13.137 16.5214 14.0325 17.4168 15.137 17.4168H15.4148C16.5194 17.4168 17.4148 16.5214 17.4148 15.4168V12.435C17.4148 11.3304 16.5194 10.435 15.4148 10.435H15.137Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           Categories
                        </button>
                        <button
                           class="inline-flex items-center gap-2 border-b-2 px-2.5 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                           x-bind:class="activeTab === 'customers' ? ' text-brand-500 border-brand-500   dark:text-brand-500' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700  dark:text-gray-400 dark:hover:text-gray-200'"
                           x-on:click="activeTab = 'customers'"
                           >
                           <svg
                              class="size-5"
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M7.33633 4.79297C6.39425 4.79297 5.63054 5.55668 5.63054 6.49876C5.63054 7.44084 6.39425 8.20454 7.33633 8.20454C8.27841 8.20454 9.04212 7.44084 9.04212 6.49876C9.04212 5.55668 8.27841 4.79297 7.33633 4.79297ZM4.13054 6.49876C4.13054 4.72825 5.56582 3.29297 7.33633 3.29297C9.10684 3.29297 10.5421 4.72825 10.5421 6.49876C10.5421 8.26926 9.10684 9.70454 7.33633 9.70454C5.56582 9.70454 4.13054 8.26926 4.13054 6.49876ZM4.24036 12.7602C3.61952 13.3265 3.28381 14.0575 3.10504 14.704C3.06902 14.8343 3.09994 14.9356 3.17904 15.0229C3.26864 15.1218 3.4319 15.2073 3.64159 15.2073H10.9411C11.1507 15.2073 11.314 15.1218 11.4036 15.0229C11.4827 14.9356 11.5136 14.8343 11.4776 14.704C11.2988 14.0575 10.9631 13.3265 10.3423 12.7602C9.73639 12.2075 8.7967 11.7541 7.29132 11.7541C5.78595 11.7541 4.84626 12.2075 4.24036 12.7602ZM3.22949 11.652C4.14157 10.82 5.4544 10.2541 7.29132 10.2541C9.12825 10.2541 10.4411 10.82 11.3532 11.652C12.2503 12.4703 12.698 13.4893 12.9234 14.3042C13.1054 14.9627 12.9158 15.5879 12.5152 16.03C12.1251 16.4605 11.5496 16.7073 10.9411 16.7073H3.64159C3.03301 16.7073 2.45751 16.4605 2.06745 16.03C1.66689 15.5879 1.47723 14.9627 1.65929 14.3042C1.88464 13.4893 2.33237 12.4703 3.22949 11.652ZM12.7529 9.70454C12.1654 9.70454 11.6148 9.54648 11.1412 9.27055C11.4358 8.86714 11.6676 8.4151 11.8226 7.92873C12.0902 8.10317 12.4097 8.20454 12.7529 8.20454C13.695 8.20454 14.4587 7.44084 14.4587 6.49876C14.4587 5.55668 13.695 4.79297 12.7529 4.79297C12.4097 4.79297 12.0901 4.89435 11.8226 5.0688C11.6676 4.58243 11.4357 4.13039 11.1412 3.72698C11.6147 3.45104 12.1654 3.29297 12.7529 3.29297C14.5235 3.29297 15.9587 4.72825 15.9587 6.49876C15.9587 8.26926 14.5235 9.70454 12.7529 9.70454ZM16.3577 16.7072H13.8902C14.1962 16.2705 14.4012 15.7579 14.4688 15.2072H16.3577C16.5674 15.2072 16.7307 15.1217 16.8203 15.0228C16.8994 14.9355 16.9303 14.8342 16.8943 14.704C16.7155 14.0574 16.3798 13.3264 15.759 12.7601C15.2556 12.301 14.5219 11.9104 13.425 11.7914C13.1434 11.3621 12.7952 10.9369 12.3641 10.5437C12.2642 10.4526 12.1611 10.3643 12.0548 10.2791C12.2648 10.2626 12.4824 10.2541 12.708 10.2541C14.5449 10.2541 15.8577 10.82 16.7698 11.6519C17.6669 12.4702 18.1147 13.4892 18.34 14.3042C18.5221 14.9626 18.3324 15.5879 17.9319 16.03C17.5418 16.4605 16.9663 16.7072 16.3577 16.7072Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           API Key
                        </button>
                     </nav>
                  </div>
                  <div class="pt-4 dark:border-gray-800">
                     <div x-show="activeTab === 'overview'">
                        <!-- <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                           Overview
                        </h3> -->
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                           Configure your SMTP server details to ensure secure and reliable email sending for notifications, alerts, and system communications.
                        </p>
                        <form action="{{ route('smtp_configs.store') }}" class="mt-5" 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>
                                  <!-- <input
                                    type="text"
                                    placeholder="Enter Name" name="name" value="{{ old('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"
                                    /> -->
                                  <select
                                    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_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">
                                  <button
                                    type="submit"
                                    class="bg-brand-500 hover:bg-brand-600 flex w-full items-center justify-center gap-2 rounded-lg p-3 text-sm font-medium text-white transition-colors"
                                    >
                                    Update SMTP Config
                                    <svg
                                        class="fill-current"
                                        width="20"
                                        height="20"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                        >
                                        <path
                                          fill-rule="evenodd"
                                          clip-rule="evenodd"
                                          d="M4.98481 2.44399C3.11333 1.57147 1.15325 3.46979 1.96543 5.36824L3.82086 9.70527C3.90146 9.89367 3.90146 10.1069 3.82086 10.2953L1.96543 14.6323C1.15326 16.5307 3.11332 18.4291 4.98481 17.5565L16.8184 12.0395C18.5508 11.2319 18.5508 8.76865 16.8184 7.961L4.98481 2.44399ZM3.34453 4.77824C3.0738 4.14543 3.72716 3.51266 4.35099 3.80349L16.1846 9.32051C16.762 9.58973 16.762 10.4108 16.1846 10.68L4.35098 16.197C3.72716 16.4879 3.0738 15.8551 3.34453 15.2223L5.19996 10.8853C5.21944 10.8397 5.23735 10.7937 5.2537 10.7473L9.11784 10.7473C9.53206 10.7473 9.86784 10.4115 9.86784 9.99726C9.86784 9.58304 9.53206 9.24726 9.11784 9.24726L5.25157 9.24726C5.2358 9.20287 5.2186 9.15885 5.19996 9.11528L3.34453 4.77824Z"
                                          fill=""
                                          />
                                    </svg>
                                  </button>
                              </div>
                            </div>
                        </form>
                     </div>
                     <div x-show="activeTab === 'notification'">
                        <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                           Notification
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                           Notification ipsum dolor sit amet consectetur. Non vitae facilisis urna
                           tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a.
                           Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi
                           nulla elit sit libero scelerisque ante.
                        </p>
                     </div>
                     <div x-show="activeTab === 'analytics'">
                        <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                           Analytics
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                           Analytics ipsum dolor sit amet consectetur. Non vitae facilisis urna
                           tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a.
                           Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi
                           nulla elit sit libero scelerisque ante.
                        </p>
                     </div>
                     <div x-show="activeTab === 'customers'">
                        <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                           Customers
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                           Customers ipsum dolor sit amet consectetur. Non vitae facilisis urna
                           tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a.
                           Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi
                           nulla elit sit libero scelerisque ante.
                        </p>
                     </div>
                  </div>
               </div>
            
         </div>
         <div
            class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
            >
            <!-- <div class="px-5 py-4 sm:px-6 sm:py-5">
               <h3
                 class="text-base font-medium text-gray-800 dark:text-white/90"
               >
                 Example Form
               </h3>
               </div> -->
            <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>
                        <!-- <input
                           type="text"
                           placeholder="Enter Name" name="name" value="{{ old('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"
                           /> -->
                        <select
                           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_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">
                        <button
                           type="submit"
                           class="bg-brand-500 hover:bg-brand-600 flex w-full items-center justify-center gap-2 rounded-lg p-3 text-sm font-medium text-white transition-colors"
                           >
                           Update SMTP Config
                           <svg
                              class="fill-current"
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M4.98481 2.44399C3.11333 1.57147 1.15325 3.46979 1.96543 5.36824L3.82086 9.70527C3.90146 9.89367 3.90146 10.1069 3.82086 10.2953L1.96543 14.6323C1.15326 16.5307 3.11332 18.4291 4.98481 17.5565L16.8184 12.0395C18.5508 11.2319 18.5508 8.76865 16.8184 7.961L4.98481 2.44399ZM3.34453 4.77824C3.0738 4.14543 3.72716 3.51266 4.35099 3.80349L16.1846 9.32051C16.762 9.58973 16.762 10.4108 16.1846 10.68L4.35098 16.197C3.72716 16.4879 3.0738 15.8551 3.34453 15.2223L5.19996 10.8853C5.21944 10.8397 5.23735 10.7937 5.2537 10.7473L9.11784 10.7473C9.53206 10.7473 9.86784 10.4115 9.86784 9.99726C9.86784 9.58304 9.53206 9.24726 9.11784 9.24726L5.25157 9.24726C5.2358 9.20287 5.2186 9.15885 5.19996 9.11528L3.34453 4.77824Z"
                                 fill=""
                                 />
                           </svg>
                        </button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   <!-- ====== Form Layouts Section End -->
</div>
@endsection