@extends('layouts.app')
@section('title', 'Roles List')

@section('content')

<div
   class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
   >
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Tabs`}">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
         <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
            x-text="pageName"
            ></h2>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="index.html"
                     >
                     Home
                     <svg
                        class="stroke-current"
                        width="17"
                        height="16"
                        viewBox="0 0 17 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <path
                           d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                           stroke=""
                           stroke-width="1.2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           />
                     </svg>
                  </a>
               </li>
               <li
                  class="text-sm text-gray-800 dark:text-white/90"
                  x-text="pageName"
                  ></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->
   <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="px-6 py-5">
            <h3
               class="text-base font-medium text-gray-800 dark:text-white/90"
               >
               Vertical Tabs
            </h3>
            </div> -->
         <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('contacts.store') }}" 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="name" value="{{ old('name') }}"
                                             class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                             />
                                       </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>
                                          <textarea placeholder="Enter Email Body" rows="6" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 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"></textarea>
                                       </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="text"
                                             placeholder="Enter Email Footer" name="name" value="{{ old('name') }}"
                                             class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                             />
                                       </div>
                                       <div class="w-full px-2.5">
                                          <button type="submit" class="bg-brand-500 hover:bg-brand-600 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">
                              Notification
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Notification ipsum dolor sit amet consectetur. Non vitae facilisis
                              urna tortor placerat egestas donec. Faucibus diam gravida enim elit
                              lacus a. Tincidunt fermentum condimentum quis et a et tempus.
                              Tristique urna nisi nulla elit sit libero scelerisque ante.
                           </p>
                        </div>
                        <div x-show="activeTab === 'signature_notification'">
                           <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                              Analytics
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Analytics ipsum dolor sit amet consectetur. Non vitae facilisis urna
                              tortor placerat egestas donec. Faucibus diam gravida enim elit lacus
                              a. Tincidunt fermentum condimentum quis et a et tempus. Tristique
                              urna nisi nulla elit sit libero scelerisque ante.
                           </p>
                        </div>
                        <div x-show="activeTab === 'signature_reminder'">
                           <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                              Customers
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Customers ipsum dolor sit amet consectetur. Non vitae facilisis urna
                              tortor placerat egestas donec. Faucibus diam gravida enim elit lacus
                              a. Tincidunt fermentum condimentum quis et a et tempus. Tristique
                              urna nisi nulla elit sit libero scelerisque ante.
                           </p>
                        </div>
                        <div x-show="activeTab === 'signature_declined'">
                           <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                              Customers
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Customers ipsum dolor sit amet consectetur. Non vitae facilisis urna
                              tortor placerat egestas donec. Faucibus diam gravida enim elit lacus
                              a. Tincidunt fermentum condimentum quis et a et tempus. Tristique
                              urna nisi nulla elit sit libero scelerisque ante.
                           </p>
                        </div>
                        <div x-show="activeTab === 'default_footer'">
                           <h3 class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90">
                              Customers
                           </h3>
                           <p class="text-sm text-gray-500 dark:text-gray-400">
                              Customers ipsum dolor sit amet consectetur. Non vitae facilisis urna
                              tortor placerat egestas donec. Faucibus diam gravida enim elit lacus
                              a. Tincidunt fermentum condimentum quis et a et tempus. Tristique
                              urna nisi nulla elit sit libero scelerisque ante.
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
         
        
@endsection