@extends('layouts.app')
@section('title', 'Account Settings')

@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: `Account Settings`}">
              <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="rounded-2xl border border-gray-200 bg-white p-5 lg:p-6 dark:border-gray-800 dark:bg-white/[0.03]"
            >
              <!-- <h3
                class="mb-5 text-lg font-semibold text-gray-800 lg:mb-7 dark:text-white/90"
              >
                Account Settings
              </h3> -->

              <div
                class="mb-6 rounded-2xl border border-gray-200 p-5 lg:p-6 dark:border-gray-800"
              >
                <div
                  class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between"
                >
                  <div
                    class="flex w-full flex-col items-center gap-6 xl:flex-row"
                  >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                    <line x1="6" y1="6" x2="6.01" y2="6"></line>
                    <line x1="6" y1="18" x2="6.01" y2="18"></line>
                    <path d="M20 10v4"></path>
                    <path d="M14 12h4"></path>
                    </svg>
                    <div class="order-3 xl:order-2">
                      <h4
                        class="mb-2 text-center text-lg font-semibold text-gray-800 xl:text-left dark:text-white/90"
                      >
                        SMTP Configuration
                      </h4>
                      <div
                        class="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left"
                      >
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                          Configure your SMTP server details to ensure secure and reliable email sending for notifications, alerts, and system communications.
                        </p>
                      </div>
                    </div>
                    
                  </div>

                  <a href="{{ route('smtp_configs.index') }}"
                    @click="isProfileInfoModal = true"
                    class="shadow-theme-xs flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-800 lg:inline-flex lg:w-auto dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
                  >
                    <svg
                      class="fill-current"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                        fill=""
                      />
                    </svg>
                    Edit
                    </a>
                </div>
              </div>

              <div
                class="mb-6 rounded-2xl border border-gray-200 p-5 lg:p-6 dark:border-gray-800"
              >
                <div
                  class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between"
                >
                  <div
                    class="flex w-full flex-col items-center gap-6 xl:flex-row"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h9"></path>
  <polyline points="22,6 12,13 2,6"></polyline>
  <circle cx="19" cy="19" r="3"></circle>
  <path d="M19 15.5v.5M19 22v.5M15.5 19h.5M22 19h.5"></path>
</svg>
                    <div class="order-3 xl:order-2">
                      <h4
                        class="mb-2 text-center text-lg font-semibold text-gray-800 xl:text-left dark:text-white/90"
                      >
                        Email Settings
                      </h4>
                      <div
                        class="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left"
                      >
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                          Manage your email preferences and configure how your system sends and receives emails.
                        </p>
                      </div>
                    </div>
                    
                  </div>

                  <a href="{{ route('email_settings') }}"
                    @click="isProfileInfoModal = true"
                    class="shadow-theme-xs flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-800 lg:inline-flex lg:w-auto dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
                  >
                    <svg
                      class="fill-current"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                        fill=""
                      />
                    </svg>
                    Edit
                    </a>
                </div>
              </div>

              <div
                class="mb-6 rounded-2xl border border-gray-200 p-5 lg:p-6 dark:border-gray-800"
              >
                <div
                  class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between"
                >
                  <div
                    class="flex w-full flex-col items-center gap-6 xl:flex-row"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
  <polyline points="2 17 12 22 22 17"></polyline>
  <polyline points="2 12 12 17 22 12"></polyline>
</svg>
                    <div class="order-3 xl:order-2">
                      <h4
                        class="mb-2 text-center text-lg font-semibold text-gray-800 xl:text-left dark:text-white/90"
                      >
                        Categories
                      </h4>
                      <div
                        class="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left"
                      >
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                          Create and manage categories to structure your data for better organization and easy access.
                        </p>
                      </div>
                    </div>
                    
                  </div>

                  <a href="{{ route('categories.index') }}"
                    @click="isProfileInfoModal = true"
                    class="shadow-theme-xs flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-800 lg:inline-flex lg:w-auto dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
                  >
                    <svg
                      class="fill-current"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                        fill=""
                      />
                    </svg>
                    Edit
                    </a>
                </div>
              </div>

             
            </div>
          </div>
 
          
        
@endsection