@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="space-y-5 sm:space-y-6">
      <!-- Vertical Tabs -->
      <div
         class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
         >
         <div
            class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
            >
            <div
               class="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>
                           <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="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="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">
                              Signture Reminder
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Email sent to recepient reminding pending signature
                           </p>
                           <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="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="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>
      </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