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

<!-- Global Phone Number International Input CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">

<style>
   /* Alternative approach: Force width via CSS to override theme defaults */
   .custom-offcanvas {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      background: white;
      z-index: 999999;
      transition: transform 0.3s ease-in-out;
      display: flex;
      flex-direction: column;
      box-shadow: -10px 0 15px -3px rgba(0, 0, 0, 0.1);
   }

   /* Mobile: 100% width */
   @media (max-width: 1023px) {
      .custom-offcanvas {
         width: 100% !important;
      }
   }

   /* Laptop/Desktop: 30% width */
   @media (min-width: 1024px) {
      .custom-offcanvas {
         width: 30% !important;
      }
   }

   .dark .custom-offcanvas {
      background-color: #1a222c; 
   }

   /* International Phone Input Custom Styles & Generous Width Sizing */
   .iti { 
      width: 100%; 
      position: relative; 
      display: block; 
   }
   .iti__flag { 
      background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/img/flags.png"); 
   }
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .iti__flag { 
         background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/img/flags@2x.png"); 
      }
   }

   /* Distinct & Spacious Country Code Selector Box */
   .iti__selected-flag {
      padding: 0 12px 0 14px !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      height: 100% !important;
      background-color: #f8fafc;
      border-right: 1px solid #e2e8f0;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      transition: background-color 0.2s ease;
   }
   .iti__selected-flag:hover {
      background-color: #f1f5f9;
   }
   .dark .iti__selected-flag {
      background-color: rgba(255, 255, 255, 0.04);
      border-right-color: #334155;
   }
   .dark .iti__selected-flag:hover {
      background-color: rgba(255, 255, 255, 0.08);
   }

   .iti__selected-dial-code {
      font-size: 0.875rem !important;
      font-weight: 600 !important;
      color: #1e293b !important;
      margin-left: 2px !important;
   }
   .dark .iti__selected-dial-code {
      color: #f1f5f9 !important;
   }

   /* Spacious Country Dropdown List */
   .iti__country-list {
      position: absolute;
      z-index: 100000 !important;
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      max-height: 240px;
      overflow-y: auto;
      width: 100% !important;
      min-width: 320px !important;
      color: #1e293b;
      padding: 6px 0;
   }
   .iti__country {
      padding: 9px 14px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px;
      font-size: 0.875rem;
   }
   .iti__country-name {
      margin-right: 6px;
      color: #334155;
      font-weight: 500;
   }
   .dark .iti__country-name {
      color: #e2e8f0;
   }
   .iti__dial-code {
      color: #64748b;
      font-weight: 500;
   }
   .dark .iti__dial-code {
      color: #94a3b8;
   }
   .iti__hide {
      display: none !important;
   }
   .dark .iti__country-list {
      background-color: #1a222c;
      border-color: #313d4a;
      color: #f1f5f9;
   }
   .dark .iti__country.iti__highlight {
      background-color: #24303f;
   }

   /* Improved File Button Design - Separating button from text */
   .file-upload-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
   }

   .custom-file-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #1a7a6e;
      color: #ffffff;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.1s ease;
      user-select: none;
      border: none;
   }

   .custom-file-btn:hover {
      background-color: #146359;
   }

   .custom-file-btn:active {
      transform: scale(0.98);
   }

   .file-chosen-text {
      font-size: 0.813rem;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 190px;
   }

   .dark .file-chosen-text {
      color: #94a3b8;
   }

   /* BOOTSTRAP-LIKE POPOVER TOOLTIP STYLES - UPDATED FOR LEFT ALIGNMENT */
   .help-icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        cursor: help;
    }
    .help-popover-text {
        visibility: hidden;
        width: 270px;
        background-color: #fff;
        color: #212529;
        text-align: left;
        border-radius: .375rem;
        position: absolute;
        z-index: 100000;
        bottom: 160%; /* Gap from icon */
        left: 0;      /* START FROM ICON */
        transform: none; /* Remove centering */
        opacity: 0;
        transition: opacity 0.3s, visibility 0.3s;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 400;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.175);
        pointer-events: none;
        text-transform: none;
        border: 1px solid rgba(0,0,0,.2);
        overflow: hidden;
    }
    .popover-header {
        padding: .5rem .75rem;
        margin-bottom: 0;
        font-size: 13px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        font-weight: 600;
        color: #212529;
        display: block;
    }
    .popover-body {
        padding: .5rem .75rem;
        color: #212529;
        display: block;
    }
    /* Arrow alignment - moved to the left to match the icon */
    .help-popover-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 8px; /* Align arrow with icon */
        margin-left: 0;
        border-width: 6px;
        border-style: solid;
        border-color: rgba(0,0,0,.2) transparent transparent transparent;
    }
    .help-icon-wrapper:hover .help-popover-text {
        visibility: visible;
        opacity: 1;
    }
    /* Dark mode adjustments for Popover */
    .dark .help-popover-text {
        background-color: #1a222c;
        border: 1px solid #313d4a;
        color: #e2e8f0;
    }
    .dark .popover-header {
        background-color: #24303f;
        border-bottom: 1px solid #313d4a;
        color: #fff;
    }
    .dark .popover-body {
        color: #d1d5db;
    }
    .dark .help-popover-text::after {
        border-color: #313d4a transparent transparent transparent;
    }
</style>

<div x-data="{ 
   isProfileInfoModal: false, 
   isProfileAddressModal: false, 
   isChangePasswordModal:false,
   pageName: 'Profile' 
   }">
   <div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6">
      
      <!-- Feedback Alerts -->
      @if(session('success'))
         <div class="mb-4 flex w-full border-l-6 border-[#34D399] bg-[#34D399]/[0.08] p-4 shadow-md">
            <div class="mr-3 flex h-9 w-9 items-center justify-center rounded-lg bg-[#34D399]">
               <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401837 14.3238 0.400754 13.9657 0.794406L5.91888 9.51233L2.02776 5.49337L2.01511 5.48029L2.00135 5.46824C1.64144 5.15387 1.08228 5.15414 0.722527 5.46892C0.357412 5.78747 0.357412 6.30607 0.722527 6.62462L5.27546 10.5969L5.28811 10.61L5.30188 10.622C5.66178 10.9364 6.22095 10.9361 6.5807 10.6213L15.2984 1.95652C15.6635 1.63797 15.6635 1.12537 15.2984 0.826822Z" fill="white" stroke="white"></path></svg>
            </div>
            <div class="w-full">
               <h5 class="text-lg font-bold text-black dark:text-[#34D399]">Success</h5>
               <p class="text-sm text-gray-600 dark:text-gray-400">{{ session('success') }}</p>
            </div>
         </div>
      @endif

      @if(session('error'))
         <div class="mb-4 flex w-full border-l-6 border-[#F87171] bg-[#F87171]/[0.08] p-4 shadow-md">
            <div class="mr-3 flex h-9 w-9 items-center justify-center rounded-lg bg-[#F87171]">
               <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.4917 7.65547L11.106 12.2698C11.4259 12.5897 11.9442 12.5897 12.2641 12.2698C12.584 11.9499 12.584 11.4316 12.2641 11.1117L7.64977 6.49737L12.2641 1.88304C12.584 1.56311 12.584 1.04482 12.2641 0.724891C11.9442 0.404963 11.4259 0.404963 11.106 0.724891L6.4917 5.33922L1.87737 0.724891C1.55744 0.404963 1.03915 0.404963 0.719224 0.724891C0.399295 1.04482 0.399295 1.56311 0.719224 1.88304L5.33355 6.49737L0.719224 11.1117C0.399295 11.4316 0.399295 11.9499 0.719224 12.2698C1.03915 12.5897 1.55744 12.5897 1.87737 12.2698L6.4917 7.65547Z" fill="white"></path></svg>
            </div>
            <div class="w-full">
               <h5 class="text-lg font-bold text-black dark:text-[#F87171]">Update Failed</h5>
               <p class="text-sm text-gray-600 dark:text-gray-400">{{ session('error') }}</p>
            </div>
         </div>
      @endif

      @if($errors->any())
         <div class="mb-4 flex w-full border-l-6 border-[#F87171] bg-[#F87171]/[0.08] p-4 shadow-md">
            <div class="mr-3 flex h-9 w-9 items-center justify-center rounded-lg bg-[#F87171]">
               <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.4917 7.65547L11.106 12.2698C11.4259 12.5897 11.9442 12.5897 12.2641 12.2698C12.584 11.9499 12.584 11.4316 12.2641 11.1117L7.64977 6.49737L12.2641 1.88304C12.584 1.56311 12.584 1.04482 12.2641 0.724891C11.9442 0.404963 11.4259 0.404963 11.106 0.724891L6.4917 5.33922L1.87737 0.724891C1.55744 0.404963 1.03915 0.404963 0.719224 0.724891C0.399295 1.04482 0.399295 1.56311 0.719224 1.88304L5.33355 6.49737L0.719224 11.1117C0.399295 11.4316 0.399295 11.9499 0.719224 12.2698C1.03915 12.5897 1.55744 12.5897 1.87737 12.2698L6.4917 7.65547Z" fill="white"></path></svg>
            </div>
            <div class="w-full">
               <h5 class="text-lg font-bold text-black dark:text-[#F87171]">Update Failed</h5>
               <ul class="list-disc ml-4 text-sm text-gray-600 dark:text-gray-400">
                  @foreach($errors->all() as $error)
                     <li>{{ $error }}</li>
                  @endforeach
               </ul>
            </div>
         </div>
      @endif

      <!-- Breadcrumb Start -->
      <div>
         <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
            <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  Profile
                  <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">
                           <span class="popover-header">Profile Information</span>
                           <span class="popover-body">View and update your profile information, or change your password.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400">Manage your account details and password.</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="#">
                        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=" mb-5 rounded-2xl border border-gray-200 bg-white p-5 lg:p-6 dark:border-gray-800 dark:bg-white/[0.03]">
         <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">
                  <!-- <div class="h-20 w-20 overflow-hidden rounded-full border border-gray-200 dark:border-gray-800">
                     @if(!empty($company->company_logo) && file_exists(public_path('company/' . $company->company_logo)))
                        <img src="{{ asset('company/' . $company->company_logo) }}" alt="user" style="height: auto; margin-top: 30px;" />
                     @else
                        <img src="{{ asset('user/src/images/logo/logo.png') }}" alt="user" style="height: auto; margin-top: 30px;" />
                     @endif
                  </div> -->
                  <!-- UPDATED LOGO CONTAINER -->
                  <div class="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-full border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
                     @if(!empty($company->company_logo) && file_exists(public_path('company/' . $company->company_logo)))
                        <img src="{{ asset('company/' . $company->company_logo) }}" alt="company logo" class="max-h-full max-w-full object-contain p-1" />
                     @else
                        <img src="{{ asset('user/src/images/logo/logo.png') }}" alt="default logo" class="max-h-full max-w-full object-contain p-1" />
                     @endif
                  </div>
                  <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">
                        {{ $company->company_name }}
                     </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">{{ $company->company_email }}</p>
                        <div class="hidden h-3.5 w-px bg-gray-300 xl:block dark:bg-gray-700"></div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $company->company_phone }}</p>
                     </div>
                  </div>
               </div>
               <button @click="isProfileInfoModal = true; $nextTick(() => { initPhoneInput(); })" class="shadow-theme-xs flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 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">Edit&nbsp;Profile</button>
               <button @click="isChangePasswordModal = true" class="shadow-theme-xs flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 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">Change&nbsp;Password</button>
            </div>
         </div>
      </div>
   </div>
   
   <!-- Edit Profile Offcanvas -->
   <div x-show="isProfileInfoModal" x-cloak>
      <div x-show="isProfileInfoModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="isProfileInfoModal = false" class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm"></div>
      
      <div x-show="isProfileInfoModal" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="custom-offcanvas dark:border-l dark:border-gray-800">
         
         <div class="relative px-6 py-6 border-b border-gray-200 dark:border-gray-800">
            <button @click="isProfileInfoModal = false" class="absolute right-5 top-5 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 dark:bg-white/[0.05]">
               <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24"><path d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z" /></svg>
            </button>
            <h4 class="text-xl font-semibold text-gray-800 dark:text-white/90">Edit Profile</h4>
         </div>

         <form id="editProfileForm" class="flex flex-col flex-1" method="post" action="{{ route('update_profile') }}" enctype="multipart/form-data">
            @csrf
            <div class="flex-1 overflow-y-auto px-6 py-6 custom-scrollbar">
               <div class="grid grid-cols-1 gap-y-5">
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Company Name</label>
                     <input type="text" id="company_name" name="company_name" required value="{{ $company->company_name }}" class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" />
                     <p id="company_name_error" class="hidden text-xs text-red-500 mt-1 font-medium"></p>
                  </div>

                  <!-- International Phone Number Input Field with Styled Country Code Box -->
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Phone Number (International)</label>
                     <div class="w-full relative">
                        <input type="tel" id="company_phone" name="company_phone" value="{{ $company->company_phone }}" class="h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 text-sm dark:border-gray-700 dark:text-white" />
                     </div>
                     <p id="phone_error" class="hidden text-xs text-red-500 mt-1.5 font-medium"></p>
                  </div>

                  <div>
                     <label class="mb-1.5 flex items-center text-sm font-medium text-gray-700 dark:text-gray-400">
                        Logo
                        <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">
                                <span class="popover-header">Logo Upload Requirements</span>
                                <span class="popover-body">
                                   <strong>Allowed Formats:</strong> JPG, JPEG, PNG, WEBP, GIF<br>
                                   <strong>Max File Size:</strong> 2 MB<br>
                                   <strong>Recommended:</strong> 512 &times; 512 px (Square)
                                </span>
                            </span>
                        </span>
                     </label>
                     
                     <div class="mb-3">
                        @if(!empty($company->company_logo) && file_exists(public_path('company/' . $company->company_logo)))
                           <img id="logo_preview" src="{{ asset('company/' . $company->company_logo) }}" class="h-20 w-auto max-w-full rounded-lg object-contain border bg-white p-1 dark:border-gray-700 dark:bg-gray-800" />
                        @else
                           <img id="logo_preview" src="{{ asset('user/src/images/logo/logo.png') }}" class="h-20 w-auto max-w-full rounded-lg object-contain border bg-white p-1 dark:border-gray-700 dark:bg-gray-800" />
                        @endif
                     </div>

                     <!-- Distinct Choose File Button and Separated Text -->
                     <div class="file-upload-wrapper">
                        <label for="company_logo" class="custom-file-btn">
                           <svg class="w-4 h-4 mr-1.5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                           Choose File
                        </label>
                        <span id="chosen_file_name" class="file-chosen-text">No file chosen</span>
                        <input type="file" id="company_logo" name="company_logo" accept=".jpg,.jpeg,.png,.gif,.webp,image/png,image/jpeg,image/webp,image/gif" class="hidden" onchange="validateLogoFile(this)" />
                     </div>
                     <p id="logo_error" class="hidden text-xs text-red-500 mt-1.5 font-medium"></p>
                  </div>
               </div>
            </div>
            <div class="p-6 border-t border-gray-200 dark:border-gray-800 flex items-center gap-3">
               <button @click="isProfileInfoModal = false" type="button" class="flex-1 justify-center rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/[0.03]">Close</button>
               <button type="submit" id="update_profile_btn" class="flex-1 justify-center rounded-lg bg-brand-500 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-50 disabled:cursor-not-allowed">Update</button>
            </div>
         </form>
      </div>
   </div>

   <!-- Change Password Offcanvas -->
   <div x-show="isChangePasswordModal" x-cloak>
      <div x-show="isChangePasswordModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="isChangePasswordModal = false" class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm"></div>
      
      <div x-show="isChangePasswordModal" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="custom-offcanvas dark:border-l dark:border-gray-800">
         
         <div class="relative px-6 py-6 border-b border-gray-200 dark:border-gray-800">
            <button @click="isChangePasswordModal = false" class="absolute right-5 top-5 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 dark:bg-white/[0.05]">
               <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24"><path d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z" /></svg>
            </button>
            <h4 class="text-xl font-semibold text-gray-800 dark:text-white/90">Update Password</h4>
         </div>

         <form id="changePasswordForm" class="flex flex-col flex-1" method="post" action="{{ route('update_password') }}" onsubmit="return validatePasswords(event)">
            @csrf
            <div class="flex-1 overflow-y-auto px-6 py-6 custom-scrollbar">
               <div class="grid grid-cols-1 gap-y-5">
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Old Password</label>
                     <input type="password" id="old_password" name="old_password" class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" />
                     <p id="old_password_error" class="hidden text-xs text-red-500 mt-1">Please enter your current password.</p>
                  </div>
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">New Password</label>
                     <input type="password" id="new_password" name="new_password" class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" />
                     <p id="new_password_error" class="hidden text-xs text-red-500 mt-1">New password must be at least 6 characters.</p>
                  </div>
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Confirm New Password</label>
                     <input type="password" id="confirm_password" name="confirm_password" class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" />
                     <p id="password_error" class="hidden text-xs text-red-500 mt-1">Passwords do not match.</p>
                  </div>
               </div>
            </div>
            <div class="p-6 border-t border-gray-200 dark:border-gray-800 flex items-center gap-3">
               <button @click="isChangePasswordModal = false" type="button" class="flex-1 justify-center rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/[0.03]">Close</button>
               <button type="submit" class="flex-1 justify-center rounded-lg bg-brand-500 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition">Save Changes</button>
            </div>
         </form>
      </div>
   </div>
</div>

<!-- International Phone Input Script -->
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>

<script>
   let iti = null;
   let phoneInput = null;
   let phoneError = null;
   let hasLogoError = false;

   function setError(input, errorEl, message) {
      input.classList.remove('border-gray-300', 'dark:border-gray-700');
      input.classList.add('border-red-500');
      errorEl.textContent = message;
      errorEl.classList.remove('hidden');
   }

   function clearError(input, errorEl) {
      input.classList.remove('border-red-500');
      input.classList.add('border-gray-300', 'dark:border-gray-700');
      errorEl.textContent = '';
      errorEl.classList.add('hidden');
   }

   // Enable / Disable Update Button based on validation
   function setUpdateButtonDisabled(disabled, reason = '') {
      const updateBtn = document.getElementById('update_profile_btn');
      if (!updateBtn) return;
      
      updateBtn.disabled = disabled;
      if (disabled) {
         updateBtn.classList.add('opacity-50', 'cursor-not-allowed');
         if (reason) updateBtn.setAttribute('title', reason);
      } else {
         updateBtn.classList.remove('opacity-50', 'cursor-not-allowed');
         updateBtn.removeAttribute('title');
      }
   }

   // Dynamically update text padding so typed phone numbers never collide with the flag & dial code box
   function updatePhonePadding() {
      const selectedFlag = document.querySelector('.iti__selected-flag');
      if (phoneInput && selectedFlag) {
         const flagWidth = selectedFlag.offsetWidth || 85;
         phoneInput.style.paddingLeft = (flagWidth + 12) + 'px';
      }
   }

   // Format phone input dynamically to match placeholder structure & enforce placeholder length
   function applyPhoneMask() {
      if (!phoneInput) return;
      const template = phoneInput.getAttribute('placeholder') || phoneInput.placeholder;
      if (!template || !/\d/.test(template) || template.toLowerCase().includes('phone')) {
         return;
      }

      const maxDigits = template.replace(/\D/g, '').length;
      let rawDigits = phoneInput.value.replace(/\D/g, '');

      // Strip accidental country dial code if user pasted a full international number
      if (iti) {
         const countryData = iti.getSelectedCountryData();
         if (countryData && countryData.dialCode && rawDigits.length > maxDigits && rawDigits.startsWith(countryData.dialCode)) {
            rawDigits = rawDigits.slice(countryData.dialCode.length);
         }
      }

      // Limit input strictly to placeholder maximum digits
      if (rawDigits.length > maxDigits) {
         rawDigits = rawDigits.substring(0, maxDigits);
      }

      // Format entered digits according to the placeholder template
      let formatted = '';
      let digitIdx = 0;
      for (let i = 0; i < template.length && digitIdx < rawDigits.length; i++) {
         if (/\d/.test(template[i])) {
            formatted += rawDigits[digitIdx++];
         } else {
            formatted += template[i];
         }
      }
      phoneInput.value = formatted;
      updatePhonePadding();
   }

   // Real-time Phone Validation Function
   function validatePhone(showIncompleteError = false) {
      if (!phoneInput || !iti) return true;

      const phoneVal = phoneInput.value.trim();
      const rawDigits = phoneVal.replace(/\D/g, '');
      const template = phoneInput.getAttribute('placeholder') || phoneInput.placeholder || '';
      const maxDigits = template.replace(/\D/g, '').length;

      if (!phoneVal) {
         clearError(phoneInput, phoneError);
         return true;
      }

      if (iti.isValidNumber()) {
         clearError(phoneInput, phoneError);
         return true;
      } else {
         if (showIncompleteError || (maxDigits > 0 && rawDigits.length >= maxDigits)) {
            const errorCode = iti.getValidationError();
            let errorMsg = 'Please enter a valid phone number for the selected country.';
            if (errorCode === 2 || (maxDigits > 0 && rawDigits.length < maxDigits)) {
               errorMsg = 'Phone number is too short.';
            } else if (errorCode === 3 || (maxDigits > 0 && rawDigits.length > maxDigits)) {
               errorMsg = 'Phone number is too long.';
            }
            setError(phoneInput, phoneError, errorMsg);
            return false;
         } else {
            clearError(phoneInput, phoneError);
            return false;
         }
      }
   }

   // Initialize phone plugin when modal is visible to prevent sizing and collapse bugs
   function initPhoneInput() {
      phoneInput = document.getElementById('company_phone');
      phoneError = document.getElementById('phone_error');
      if (!phoneInput) return;

      if (!iti) {
         iti = window.intlTelInput(phoneInput, {
            initialCountry: "auto",
            geoIpLookup: function (success, failure) {
               fetch("https://ipapi.co/json/")
                  .then(res => res.json())
                  .then(data => success(data.country_code ? data.country_code.toLowerCase() : "us"))
                  .catch(() => success("us"));
            },
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
            preferredCountries: ["us", "gb", "ca", "au", "in", "ae", "pk"],
            separateDialCode: true,
            autoPlaceholder: "aggressive"
         });

         // Block text / letters dynamically and apply placeholder-based mask
         phoneInput.addEventListener('input', function() {
            applyPhoneMask();
            validatePhone(false);
         });

         // Validate when user leaves the phone input field
         phoneInput.addEventListener('blur', function() {
            validatePhone(true);
         });

         // Update mask and validation when country selection changes & collapse dropdown
         phoneInput.addEventListener('countrychange', function() {
            applyPhoneMask();
            updatePhonePadding();
            if (phoneInput.value.trim() !== '') {
               validatePhone(false);
            } else {
               clearError(phoneInput, phoneError);
            }
         });

         // Smooth backspacing over formatting characters like parentheses, dashes, and spaces
         phoneInput.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace') {
               const selStart = this.selectionStart;
               const selEnd = this.selectionEnd;
               if (selStart === selEnd && selStart > 0) {
                  const charToDelete = this.value[selStart - 1];
                  if (/\D/.test(charToDelete)) {
                     e.preventDefault();
                     let idx = selStart - 1;
                     while (idx >= 0 && /\D/.test(this.value[idx])) {
                        idx--;
                     }
                     if (idx >= 0) {
                        this.value = this.value.slice(0, idx) + this.value.slice(idx + 1);
                        this.dispatchEvent(new Event('input'));
                     }
                  }
               }
            }
         });
      }

      setTimeout(() => {
         updatePhonePadding();
         if (phoneInput && phoneInput.value.trim() !== '') {
            applyPhoneMask();
         }
      }, 250);
   }

   // Global handler to guarantee country dropdown collapses on outside click, selection, or Escape key
   document.addEventListener('click', function(e) {
      const countryList = document.querySelector('.iti__country-list');
      if (!countryList) return;

      // Collapse if clicked on a country option
      if (e.target.closest('.iti__country')) {
         countryList.classList.add('iti__hide');
         updatePhonePadding();
         return;
      }

      // Collapse if clicked outside the telephone widget
      if (!e.target.closest('.iti')) {
         if (!countryList.classList.contains('iti__hide')) {
            countryList.classList.add('iti__hide');
         }
      }
   });

   document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
         const countryList = document.querySelector('.iti__country-list');
         if (countryList && !countryList.classList.contains('iti__hide')) {
            countryList.classList.add('iti__hide');
         }
      }
   });

   document.addEventListener('DOMContentLoaded', function () {
      const profileForm = document.getElementById('editProfileForm');

      // Profile Form Submit Validation
      if (profileForm) {
         profileForm.addEventListener('submit', function (e) {
            let isValid = true;
            const nameInput = document.getElementById('company_name');
            const nameError = document.getElementById('company_name_error');

            // 1. Prevent submit if logo file is invalid
            if (hasLogoError) {
               e.preventDefault();
               setUpdateButtonDisabled(true, 'Please select a valid image file');
               return false;
            }

            // 2. Validate Company Name
            if (!nameInput.value.trim()) {
               nameError.textContent = "Company name is required.";
               nameError.classList.remove('hidden');
               nameInput.focus();
               isValid = false;
            } else {
               nameError.classList.add('hidden');
            }

            // 3. Validate Phone Number
            if (phoneInput && iti && phoneInput.value.trim() !== '') {
               const isPhoneValid = validatePhone(true);
               if (!isPhoneValid) {
                  phoneInput.focus();
                  isValid = false;
               }
            }

            if (!isValid) {
               e.preventDefault();
            } else {
               if (phoneInput && iti && phoneInput.value.trim() !== '') {
                  phoneInput.value = iti.getNumber();
               }
            }
         });
      }
   });

   /* Logo File Validation: Disables "Update" button on invalid type/size with clear feedback */
   function validateLogoFile(input) {
      const file = input.files[0];
      const errorElem = document.getElementById('logo_error');
      const nameElem = document.getElementById('chosen_file_name');
      const previewElem = document.getElementById('logo_preview');

      if (!file) {
         hasLogoError = false;
         nameElem.textContent = "No file chosen";
         errorElem.classList.add('hidden');
         setUpdateButtonDisabled(false);
         return;
      }

      const allowedExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
      const fileExt = file.name.split('.').pop().toLowerCase();
      const maxSize = 2 * 1024 * 1024; // 2 MB

      // 1. Validate File Extension / Type (rejects PDF or non-images immediately)
      if (!allowedExtensions.includes(fileExt) || !file.type.startsWith('image/')) {
         hasLogoError = true;
         errorElem.textContent = `Upload failed: "${file.name}" is not an accepted image format. Allowed formats: JPG, PNG, WEBP, GIF. (PDFs and other document formats are strictly not allowed).`;
         errorElem.classList.remove('hidden');
         nameElem.textContent = "Invalid file selected";
         setUpdateButtonDisabled(true, 'Invalid file format. Only JPG, PNG, WEBP, and GIF images are allowed.');
         return;
      }

      // 2. Validate File Size
      if (file.size > maxSize) {
         hasLogoError = true;
         const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
         errorElem.textContent = `Upload failed: File size is ${sizeInMB} MB. Maximum allowed size is 2 MB.`;
         errorElem.classList.remove('hidden');
         nameElem.textContent = "File too large";
         setUpdateButtonDisabled(true, 'File size exceeds the 2MB limit.');
         return;
      }

      // Valid File: Clear errors, re-enable Update button, update filename and preview
      hasLogoError = false;
      errorElem.classList.add('hidden');
      nameElem.textContent = file.name;
      setUpdateButtonDisabled(false);

      const reader = new FileReader();
      reader.onload = function(e) {
         if (previewElem) {
            previewElem.src = e.target.result;
         }
      };
      reader.readAsDataURL(file);
   }

   /* Change Password Offcanvas Validation */
   function validatePasswords(e) {
      let isValid = true;

      const oldPass = document.getElementById('old_password');
      const newPass = document.getElementById('new_password');
      const confirmPass = document.getElementById('confirm_password');

      const oldError = document.getElementById('old_password_error');
      const newError = document.getElementById('new_password_error');
      const confirmError = document.getElementById('password_error');

      // Reset errors
      oldError.classList.add('hidden');
      newError.classList.add('hidden');
      confirmError.classList.add('hidden');

      // Validate Old Password
      if (!oldPass.value.trim()) {
         oldError.textContent = "Please enter your current password.";
         oldError.classList.remove('hidden');
         oldPass.focus();
         isValid = false;
      }

      // Validate New Password
      if (!newPass.value.trim()) {
         newError.textContent = "Please enter a new password.";
         newError.classList.remove('hidden');
         if (isValid) newPass.focus();
         isValid = false;
      } else if (newPass.value.length < 6) {
         newError.textContent = "New password must be at least 6 characters.";
         newError.classList.remove('hidden');
         if (isValid) newPass.focus();
         isValid = false;
      }

      // Validate Confirm Password Match
      if (!confirmPass.value.trim()) {
         confirmError.textContent = "Please confirm your new password.";
         confirmError.classList.remove('hidden');
         if (isValid) confirmPass.focus();
         isValid = false;
      } else if (newPass.value !== confirmPass.value) {
         confirmError.textContent = "Passwords do not match.";
         confirmError.classList.remove('hidden');
         if (isValid) confirmPass.focus();
         isValid = false;
      }

      if (!isValid && e) {
         e.preventDefault();
      }

      return isValid;
   }
</script>
@endsection
<style type="text/css">
   .text-red-500
   {
      color:red;
   }
</style>