@extends('layouts.app')
@section('title', 'Email Templates')

@section('content')

{{-- Quill CSS --}}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div
   class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
   >
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Email Templates`}">
      <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 -->

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

                                    <!-- Email Settings -->
                                    <a href="/email_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('email') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Email 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 === 'email_settings'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Email Templates
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       Create and manage templates for all outgoing system emails. Customize email subjects and message content.
                                    </p>

                                    <!-- Form start -->
                                       <!-- <div
                                          class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
                                          > -->
                                          <div
                                             class="mt-5 rounded-xl border border-gray-200 p-6 dark:border-gray-800"
                                             x-data="{ activeTab: 'signare_request' }"
                                             >
                                             <div class="flex flex-col gap-6 sm:flex-row sm:gap-8">
                                                <div
                                                   class="overflow-x-auto pb-2 sm:w-[200px] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-100 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5"
                                                   >
                                                   <nav class="flex w-full flex-row sm:flex-col sm:space-y-2">
                                                      <button
                                                         class="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'signare_request' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'signare_request'"
                                                         >
                                                      Signature Request
                                                      </button>
                                                      <button
                                                         class="inline-flex items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'document_complete' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'document_complete'"
                                                         >
                                                      Document Complete
                                                      </button>
                                                      <button
                                                         class="inline-flex items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'signature_notification' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'signature_notification'"
                                                         >
                                                      Signature Notification
                                                      </button>
                                                      <button
                                                         class="py-2.5å inline-flex items-center rounded-lg px-3 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'signature_reminder' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'signature_reminder'"
                                                         >
                                                      Signature Reminder
                                                      </button>
                                                      <button
                                                         class="py-2.5å inline-flex items-center rounded-lg px-3 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'signature_declined' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'signature_declined'"
                                                         >
                                                      Signature Declined
                                                      </button>
                                                      <button
                                                         class="py-2.5å inline-flex items-center rounded-lg px-3 text-sm font-medium transition-colors duration-200 ease-in-out sm:p-3"
                                                         x-bind:class="activeTab === 'default_footer' ? ' text-brand-500 dark:bg-brand-400/20 dark:text-brand-400 bg-brand-50 ' : 'bg-transparent text-gray-500 border-transparent  hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                                         x-on:click="activeTab = 'default_footer'"
                                                         >
                                                      Default Footer
                                                      </button>
                                                   </nav>
                                                </div>
                                                <div class="flex-1">
                                                   <div class="">
                                                      <div x-show="activeTab === 'signare_request'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Signature Request
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Email sent to recepient with signature request
                                                         </p>
                                                         <!-- Available Variables Start -->
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <!-- Available Variables End -->
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('signature_email') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Subject</label>
                                                                        <input type="text" placeholder="Enter Email Subject" name="subject" value="{{ $email_settings->signture_email_subject ?? ''}}" 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">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Body</label>
                                                                        <input type="hidden" name="body" id="input_sig_req_body" value="{{ $email_settings->signature_email_body ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_req_body">{!! $email_settings->signature_email_body ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Footer</label>
                                                                        <input type="hidden" name="footer" id="input_sig_req_footer" value="{{ $email_settings->signature_email_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_req_footer">{!! $email_settings->signature_email_footer ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500  flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div x-show="activeTab === 'document_complete'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Document Complete
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Email sent to everyone when a document is signed by all
                                                         </p>
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('document_complete') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Subject</label>
                                                                        <input type="text" placeholder="Enter Email Subject" name="subject" value="{{ $email_settings->complete_email_subject ?? ''}}" 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">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Body</label>
                                                                        <input type="hidden" name="body" id="input_doc_comp_body" value="{{ $email_settings->complete_email_body ?? ''}}">
                                                                        <div class="quill-editor" id="editor_doc_comp_body">{!! $email_settings->complete_email_body ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Footer</label>
                                                                        <input type="hidden" name="footer" id="input_doc_comp_footer" value="{{ $email_settings->complete_email_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_doc_comp_footer">{!! $email_settings->complete_email_footer ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500  flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div x-show="activeTab === 'signature_notification'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Signature Notification
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Email sent to everyone when a document is signed by a recepient
                                                         </p>
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('signature_notification') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Subject</label>
                                                                        <input type="text" placeholder="Enter Email Subject" name="subject" value="{{ $email_settings->signed_email_subject ?? ''}}" 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">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Body</label>
                                                                        <input type="hidden" name="body" id="input_sig_notif_body" value="{{ $email_settings->signed_email_body ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_notif_body">{!! $email_settings->signed_email_body ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Footer</label>
                                                                        <input type="hidden" name="footer" id="input_sig_notif_footer" value="{{ $email_settings->signed_email_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_notif_footer">{!! $email_settings->signed_email_footer ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500  flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div x-show="activeTab === 'signature_reminder'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Signature Reminder
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Email sent to recepient reminding pending signature
                                                         </p>
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('signature_reminder') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Subject</label>
                                                                        <input type="text" placeholder="Enter Email Subject" name="subject" value="{{ $email_settings->reminder_email_subject ?? ''}}" 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">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Body</label>
                                                                        <input type="hidden" name="body" id="input_sig_rem_body" value="{{ $email_settings->reminder_email_body ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_rem_body">{!! $email_settings->reminder_email_body ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Footer</label>
                                                                        <input type="hidden" name="footer" id="input_sig_rem_footer" value="{{ $email_settings->reminder_email_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_rem_footer">{!! $email_settings->reminder_email_footer ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500 flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div x-show="activeTab === 'signature_declined'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Signature Declined
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Email sent to recepient when a document is declined
                                                         </p>
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('signature_declined') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Subject</label>
                                                                        <input type="text" placeholder="Enter Email Subject" name="subject" value="{{ $email_settings->declined_email_subject ?? ''}}" 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">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Body</label>
                                                                        <input type="hidden" name="body" id="input_sig_dec_body" value="{{ $email_settings->declined_email_body ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_dec_body">{!! $email_settings->declined_email_body ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Footer</label>
                                                                        <input type="hidden" name="footer" id="input_sig_dec_footer" value="{{ $email_settings->declined_email_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_sig_dec_footer">{!! $email_settings->declined_email_footer ?? '' !!}</div>
                                                                     </div>
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500  flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div x-show="activeTab === 'default_footer'">
                                                         <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                                                            Default Footer
                                                         </h3>
                                                         <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            Default footer text for all outgoing emails
                                                         </p>
                                                         <div class="mt-4">
                                                            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">Available Variables</p>
                                                            <div class="flex flex-wrap gap-2">
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{name}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{companyname}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{email}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{templatename}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{reviewlink}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{senderemail}</span>
                                                               <span class="rounded bg-orange-400 px-2 py-1 text-xs font-semibold text-white">{completedlink}</span>
                                                            </div>
                                                         </div>
                                                         <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] mt-5">
                                                            <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                                                               <form action="{{ route('default_footer') }}" method="POST">
                                                                  @csrf
                                                                  <div class="-mx-2.5 flex flex-wrap gap-y-5">
                                                                     
                                                                     <div class="w-full px-2.5">
                                                                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Default Footer(Disclaimer Footer)</label>
                                                                        <input type="hidden" name="default_footer" id="input_default_footer" value="{{ $email_settings->email_disclaimer_footer ?? ''}}">
                                                                        <div class="quill-editor" id="editor_default_footer">{!! $email_settings->email_disclaimer_footer ?? '' !!}</div>
                                                                     </div>
                                                                     
                                                                     <div class="w-full px-2.5">
                                                                        <button type="submit" class="bg-brand-500 flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white">
                                                                        Save Changes
                                                                        </button>
                                                                     </div>
                                                                  </div>
                                                               </form>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       <!-- </div> -->
                                    <!-- Form end -->
                                 </div>

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

{{-- Quill JS CDN --}}
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<style>
    /* Styling for Quill to match your theme */
    .quill-editor {
        height: 200px;
        background-color: transparent;
        border-radius: 0 0 8px 8px;
    }
    .ql-toolbar {
        background-color: #f9fafb;
        border-color: #d1d5db !important;
        border-radius: 8px 8px 0 0;
    }
    .ql-container {
        border-color: #d1d5db !important;
    }
    /* Dark mode support */
    .dark .ql-toolbar {
        background-color: #1f2937;
        border-color: #374151 !important;
    }
    .dark .ql-container {
        border-color: #374151 !important;
        background-color: #111827;
        color: rgba(255, 255, 255, 0.9);
    }
    .dark .ql-stroke { stroke: #9ca3af !important; }
    .dark .ql-fill { fill: #9ca3af !important; }
    .dark .ql-picker { color: #9ca3af !important; }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const configs = [
            { editor: '#editor_sig_req_body', input: '#input_sig_req_body' },
            { editor: '#editor_sig_req_footer', input: '#input_sig_req_footer' },
            { editor: '#editor_doc_comp_body', input: '#input_doc_comp_body' },
            { editor: '#editor_doc_comp_footer', input: '#input_doc_comp_footer' },
            { editor: '#editor_sig_notif_body', input: '#input_sig_notif_body' },
            { editor: '#editor_sig_notif_footer', input: '#input_sig_notif_footer' },
            { editor: '#editor_sig_rem_body', input: '#input_sig_rem_body' },
            { editor: '#editor_sig_rem_footer', input: '#input_sig_rem_footer' },
            { editor: '#editor_sig_dec_body', input: '#input_sig_dec_body' },
            { editor: '#editor_sig_dec_footer', input: '#input_sig_dec_footer' },
            { editor: '#editor_default_footer', input: '#input_default_footer' }
        ];

        configs.forEach(conf => {
            const editorEl = document.querySelector(conf.editor);
            const inputEl = document.querySelector(conf.input);

            if (editorEl && inputEl) {
                const quill = new Quill(conf.editor, {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            ['link', 'clean']
                        ]
                    }
                });

                // Update hidden input on change
                quill.on('text-change', function() {
                    inputEl.value = quill.root.innerHTML;
                });
            }
        });
    });
</script>
         
@endsection