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

<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; /* TailAdmin dark background */
   }

   /* (1) Improved File Button Design - Separating button from text */
   .modern-file-input {
      display: block;
      width: 100%;
      font-size: 0.875rem;
      color: #64748b; /* text-slate-500 */
   }

   .modern-file-input::file-selector-button {
      margin-right: 16px;
      border: none;
      background: #1a7a6e; /* TailAdmin Brand Blue/Green */
      padding: 8px 16px;
      border-radius: 6px;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
   }

   .modern-file-input::file-selector-button:hover {
      background: #146359;
   }

   .dark .modern-file-input::file-selector-button {
      background: #1a7a6e;
      border: 1px solid rgba(255, 255, 255, 0.1);
   }

   /* BOOTSTRAP-LIKE POPOVER TOOLTIP STYLES */
   .help-icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        cursor: help;
    }
    .help-popover-text {
        visibility: hidden;
        width: 260px;
        background-color: #fff;
        color: #212529;
        text-align: left;
        border-radius: .3rem;
        position: absolute;
        z-index: 100000;
        bottom: 150%;
        left: 50%;
        transform: translateX(-50%);
        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;
    }
    .help-popover-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        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>

<!-- Root Alpine.js Wrapper to define modal states -->
<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 Messages (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($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">
            <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=" 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-5 lg:mb-7">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 flex items-center gap-2">
               Profile
               <!-- ADDED POPOVER -->
               <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>
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Manage your account details and password.</p>
         </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">
                  <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>
                  <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" 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
               </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>
      <!-- Backdrop -->
      <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>
      
      <!-- Panel -->
      <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 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" 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" />
                  </div>
                  <div>
                     <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Phone Number (International)</label>
                     <!-- (2) Phone Validation: Allow only numbers and plus sign -->
                     <input type="text" 
                            name="company_phone" 
                            value="{{ $company->company_phone }}" 
                            placeholder="+1234567890"
                            oninput="this.value = this.value.replace(/[^0-9+]/g, '')"
                            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" />
                  </div>
                  <div>
                     <label class="mb-1.5 flex items-center text-sm font-medium text-gray-700 dark:text-gray-400">
                        Logo
                        <!-- LOGO POPOVER -->
                        <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 Requirements</span>
                                <span class="popover-body">Please upload a valid image file (JPG, PNG, or GIF). Maximum file size: 2MB. Recommended dimensions: 512x512px.</span>
                            </span>
                        </span>
                     </label>
                     
                     @if(!empty($company->company_logo) && file_exists(public_path('company/' . $company->company_logo)))
                        <img src="{{ asset('company/' . $company->company_logo) }}" 
                              class="h-20 w-auto max-w-full rounded-lg mb-4 object-contain border bg-white" />
                     @else
                        <img src="{{ asset('user/src/images/logo/logo.png') }}" 
                              class="h-20 w-auto max-w-full rounded-lg mb-4 object-contain border bg-white" />
                     @endif
                     
                     <!-- (1) New Modern File Input Button Design - Separated button and text -->
                     <div class="relative">
                        <input type="file" name="company_logo" accept="image/*" class="modern-file-input h-11 w-full rounded-lg border border-gray-300 bg-transparent px-1 py-1 text-sm dark:border-gray-700 dark:text-white" />
                     </div>
                  </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">Close</button>
               <button type="submit" class="flex-1 justify-center rounded-lg bg-brand-500 py-2.5 text-sm font-medium text-white">Update</button>
            </div>
         </form>
      </div>
   </div>

   <!-- Change Password Offcanvas -->
   <div x-show="isChangePasswordModal" x-cloak>
      <!-- Backdrop -->
      <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>
      
      <!-- Panel -->
      <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 class="flex flex-col flex-1" method="post" action="{{ route('update_password') }}" onsubmit="return validatePasswords()">
            @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" name="old_password" required 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" />
                  </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" required 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" />
                  </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" required class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" />
                     <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">Close</button>
               <button type="submit" class="flex-1 justify-center rounded-lg bg-brand-500 py-2.5 text-sm font-medium text-white">Save Changes</button>
            </div>
         </form>
      </div>
   </div>
</div>

<script>
   /** Simple client-side validation for passwords **/
   function validatePasswords() {
      const pass = document.getElementById('new_password').value;
      const confirm = document.getElementById('confirm_password').value;
      const errorText = document.getElementById('password_error');

      if (pass !== confirm) {
         errorText.classList.remove('hidden');
         return false;
      }
      errorText.classList.add('hidden');
      return true;
   }
</script>
<!-- End of x-data wrapper -->
@endsection