@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> -->
         <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  Email Templates
                  <span class="help-icon-wrapper">
                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                     <span class="help-popover-text" style="bottom: 100%;width:460px">
                           <span class="popover-header">Email Templates</span>
                           <span class="popover-body">Customize the subject, message, and footer of emails sent by the application. Use the available variables to automatically insert information such as the recipient name, template name, sender details, and signing links.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400" style="width:600px">Customize the emails sent by your account, including signature requests, reminders, and completion notifications.</p>
         </div>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="{{ route('dashboard') }}"
                     >
                     Home
                     <svg
                        class="stroke-current"
                        width="17"
                        height="16"
                        viewBox="0 0 17 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <path
                           d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                           stroke=""
                           stroke-width="1.2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           />
                     </svg>
                  </a>
               </li>
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="{{ route('account_settings') }}"
                  >
                     Account Settings
                     <svg
                        class="stroke-current"
                        width="17"
                        height="16"
                        viewBox="0 0 17 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                     >
                        <path
                        d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                        stroke=""
                        stroke-width="1.2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        />
                     </svg>
                  </a>
                  </li>
               <li
                  class="text-sm text-gray-800 dark:text-white/90"
                  x-text="pageName"
                  ></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->

   <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
                                                               <span class="help-icon-wrapper">
                                                                  <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                                                  <span class="help-popover-text" style="bottom: 100%;width:460px">
                                                                        <span class="popover-header">Available Variables</span>
                                                                        <span class="popover-body">Use these variables in your email subject or message to automatically insert information from the signature request. The value is filled in when the email is sent.</span>
                                                                  </span>
                                                               </span>
                                                            </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