@extends('tenants.layouts.master')
@section('title')
@lang('Profile Update')
@endsection
@section('css')
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/task/task.add.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="{{ url('js/libs/filepond/filepond.min.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css') }}">
@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Profile Update
@endslot
@slot('title')
Profile
@endslot
@endcomponent
<div class="row">
<div class="col-12 p-0">
   <div class="card pb-2">
      <form id="profileForm">
         <div class="card-header d-flex align-items-center justify-content-between pos-sticky">
            <h4 class="card-title mb-0">Profile Details</h4>
            <div class="d-flex gap-2 flex-wrap">
               <button class="btn reset_btn" type="button">Cancel </button>
               <button type="submit" class="btn btn_primary" id="saveButton">Save</button>
            </div>
         </div>
         <div class="row py-3 px-4 gy-4">
           
         <div class="col-12">
               <label for="fileInput" class="form-label">Upload New Image</label>
               <div class="file-upload-wrapper" onclick="document.getElementById('fileInput').click();">
                
                  <input type="file" class="form-control" id="fileInput" accept=".jpg, .png, .gif" name="profile_image" style="display: none;">
                  <!-- Image Preview -->
                  <img 
    id="imagePreview"
    src="{{ $profileImage ? url('storage/tenant-38f67587-c032-4997-a284-d601e5118728/public/profile_images/' . $profileImage->file_name) : '' }}"
    alt="Image preview"
    style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; {{ $profileImage ? '' : 'display: none;' }}">



                  <!-- Default Icon (hidden when image is uploaded) -->
                  <svg id="uploadIcon" class="svg" xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                     <path d="M12.9006 11.2008C12.9006 12.5263 11.8261 13.6008 10.5006 13.6008C9.1751 13.6008 8.10059 12.5263 8.10059 11.2008C8.10059 9.8753 9.1751 8.80078 10.5006 8.80078C11.8261 8.80078 12.9006 9.8753 12.9006 11.2008Z" stroke="#404040" stroke-width="1.5"/>
                     <circle cx="10.5002" cy="6.0002" r="0.8" fill="#404040"/>
                     <path d="M17.7008 12.8002V9.6002C17.7008 7.39106 15.9099 5.6002 13.7008 5.6002H13.6C13.2447 4.22001 11.9919 3.2002 10.5008 3.2002C9.00971 3.2002 7.75683 4.22001 7.4016 5.6002H7.30078C5.09164 5.6002 3.30078 7.39106 3.30078 9.6002V12.8002C3.30078 15.0093 5.09164 16.8002 7.30078 16.8002H13.7008C15.9099 16.8002 17.7008 15.0093 17.7008 12.8002Z" stroke="#404040" stroke-width="1.5" stroke-linejoin="round"/>
                  </svg>
               </div>
               <div class="pt-1 d-flex align-items-center gap-2">
                  <p class="only_image_jpg">(Only jpg, png allowed, Max size: 5MB)</p>
               </div>
               <p id="fileError" style="color: red; display: none;">File size exceeds 5MB.</p>
            </div>

            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group ">
                  <label class="form-label">
                  First Name<sup class="required-start-icon ">*</sup> </label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 20"
                           fill="none">
                           <path
                              d="M10.5003 8.33366C12.3413 8.33366 13.8337 6.84127 13.8337 5.00033C13.8337 3.15938 12.3413 1.66699 10.5003 1.66699C8.65938 1.66699 7.16699 3.15938 7.16699 5.00033C7.16699 6.84127 8.65938 8.33366 10.5003 8.33366Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                           <path
                              d="M17.1673 14.584C17.1673 16.6548 17.1673 18.334 10.5007 18.334C3.83398 18.334 3.83398 16.6548 3.83398 14.584C3.83398 12.5132 6.81898 10.834 10.5007 10.834C14.1823 10.834 17.1673 12.5132 17.1673 14.584Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter First Name" name="first_name" value="{{ old('first_name', $user->f_name) }}">

                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group ">
                  <label class="form-label">
                  Last Name</label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 20"
                           fill="none">
                           <path
                              d="M10.5003 8.33366C12.3413 8.33366 13.8337 6.84127 13.8337 5.00033C13.8337 3.15938 12.3413 1.66699 10.5003 1.66699C8.65938 1.66699 7.16699 3.15938 7.16699 5.00033C7.16699 6.84127 8.65938 8.33366 10.5003 8.33366Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                           <path
                              d="M17.1673 14.584C17.1673 16.6548 17.1673 18.334 10.5007 18.334C3.83398 18.334 3.83398 16.6548 3.83398 14.584C3.83398 12.5132 6.81898 10.834 10.5007 10.834C14.1823 10.834 17.1673 12.5132 17.1673 14.584Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter Last Name" name="last_name" value="{{ old('last_name', $user->l_name) }}">
                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group ">
                  <label class="form-label">
                  Email Address </label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 25 24"
                           fill="none">
                           <path d="M7.5 9L12.5 12.5L17.5 9" stroke="#96A5B8" stroke-width="1.5"
                              stroke-linecap="round" stroke-linejoin="round" />
                           <path
                              d="M2.5 17V7C2.5 6.46957 2.71071 5.96086 3.08579 5.58579C3.46086 5.21071 3.96957 5 4.5 5H20.5C21.0304 5 21.5391 5.21071 21.9142 5.58579C22.2893 5.96086 22.5 6.46957 22.5 7V17C22.5 17.5304 22.2893 18.0391 21.9142 18.4142C21.5391 18.7893 21.0304 19 20.5 19H4.5C3.96957 19 3.46086 18.7893 3.08579 18.4142C2.71071 18.0391 2.5 17.5304 2.5 17Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter Email Address" name="email" value="{{ old('email', $user->email) }}" disabled>
                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group">
                  <div class="input-field">
                     <span class="icon z-index">
                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                           xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z"
                              fill="#525866"></path>
                        </svg>
                        </svg>
                     </span>
                     <label for="priority" class="form-label">Gender <sup
                        class="required-start-icon ">*</sup> </label>
                     <select class="form-control js-example-basic-single select2" name="gender">
                        <option selected value="">Select Gender</option>
                        <option value="1" {{ old('gender', $user->gender) == 1 ? 'selected' : '' }}>Male</option>
                        <option value="2" {{ old('gender', $user->gender) == 2 ? 'selected' : '' }}>Female</option>

                     </select>
                  </div>
               </div>
            </div>
            
            
            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group">
                  <div class="input-field">
                     <span class="icon z-index">
                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                           xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z"
                              fill="#525866"></path>
                        </svg>
                        </svg>
                     </span>
                     <label for="priority" class="form-label">Country</label>
                      <select class="form-select select2" aria-label="Default select example" name="country" id="country">
                           <option selected value="">Select Country</option>
                          
                        </select>
                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group">
                  <div class="input-field">
                     <span class="icon z-index">
                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                           xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z"
                              fill="#525866"></path>
                        </svg>
                        </svg>
                     </span>
                     <label for="priority" class="form-label">State</label>
                     <select class="form-select select2" aria-label="Default select example"   name="state" id="state">
                           <option selected value="">Select State</option>  
                        </select>
                  </div>
               </div>
            </div>

            <div class="col-xxl-4 col-md-6 col-lg-4">
               <div class="form-group ">
                  <label class="form-label">
                  City</label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 20"
                           fill="none">
                           <path
                              d="M10.5003 8.33366C12.3413 8.33366 13.8337 6.84127 13.8337 5.00033C13.8337 3.15938 12.3413 1.66699 10.5003 1.66699C8.65938 1.66699 7.16699 3.15938 7.16699 5.00033C7.16699 6.84127 8.65938 8.33366 10.5003 8.33366Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                           <path
                              d="M17.1673 14.584C17.1673 16.6548 17.1673 18.334 10.5007 18.334C3.83398 18.334 3.83398 16.6548 3.83398 14.584C3.83398 12.5132 6.81898 10.834 10.5007 10.834C14.1823 10.834 17.1673 12.5132 17.1673 14.584Z"
                              stroke="#96A5B8" stroke-width="1.5" />
                        </svg>
                     </span>
                     <select class="form-select select2" name="city" id="city">
                          <option value="">Select City</option>
                                          
                         </select>
                  </div>
               </div>
            </div>
            <div class="col-xxl-8 col-md-6 col-lg-8"><div class="form-group ">
                  <label class="form-label">
                  Update Password</label>
                  <div class="input-field">
     
                     <input class="form-check-input fs-14 cursor-pointer check_row" type="checkbox" value="" onclick="update_password_panel(this);">                  </div>
               </div></div>
            <div class="col-xxl-4 col-md-6 col-lg-4 update_password">
               <div class="form-group ">
                  <label class="form-label">
                  Old Password <sup class="required-start-icon ">*</sup> </label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="16"
                           height="16">
                           <path
                              d="M19,8.424V7A7,7,0,0,0,5,7V8.424A5,5,0,0,0,2,13v6a5.006,5.006,0,0,0,5,5H17a5.006,5.006,0,0,0,5-5V13A5,5,0,0,0,19,8.424ZM7,7A5,5,0,0,1,17,7V8H7ZM20,19a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H17a3,3,0,0,1,3,3Z"
                              fill="#96A5B8" />
                           <path d="M12,14a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V15A1,1,0,0,0,12,14Z"
                              fill="#96A5B8" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter Old Password" name="old_password" id="old_password" disabled>
                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4 update_password">
               <div class="form-group ">
                  <label class="form-label">
                  New Password <sup class="required-start-icon ">*</sup> </label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="16"
                           height="16">
                           <path
                              d="M19,8.424V7A7,7,0,0,0,5,7V8.424A5,5,0,0,0,2,13v6a5.006,5.006,0,0,0,5,5H17a5.006,5.006,0,0,0,5-5V13A5,5,0,0,0,19,8.424ZM7,7A5,5,0,0,1,17,7V8H7ZM20,19a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H17a3,3,0,0,1,3,3Z"
                              fill="#96A5B8" />
                           <path d="M12,14a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V15A1,1,0,0,0,12,14Z"
                              fill="#96A5B8" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter New Password" name="new_password" id="new_password" disabled>
                  </div>
               </div>
            </div>
            <div class="col-xxl-4 col-md-6 col-lg-4 update_password">
               <div class="form-group ">
                  <label class="form-label">
                  Confirm Password <sup class="required-start-icon ">*</sup> </label>
                  <div class="input-field">
                     <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="16"
                           height="16">
                           <path
                              d="M19,8.424V7A7,7,0,0,0,5,7V8.424A5,5,0,0,0,2,13v6a5.006,5.006,0,0,0,5,5H17a5.006,5.006,0,0,0,5-5V13A5,5,0,0,0,19,8.424ZM7,7A5,5,0,0,1,17,7V8H7ZM20,19a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H17a3,3,0,0,1,3,3Z"
                              fill="#96A5B8" />
                           <path d="M12,14a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V15A1,1,0,0,0,12,14Z"
                              fill="#96A5B8" />
                        </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Enter Confirm Password" name="new_password_confirmation" id="confirm_password" disabled>
                  </div>
               </div>
            </div>


      </form>
      </div>
   </div>
</div>
@endsection
@section('script')
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/select2.init.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="https://cdn.rawgit.com/jzaefferer/jquery-validation/1.19.3/dist/jquery.validate.min.js"></script>
<script src="{{ url('js/libs/filepond/filepond.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
<script>
let oldCountry = "{{ $user['country'] ?? '' }}";
let oldState = "{{ $user['state'] ?? '' }}";
let oldCity = "{{ $user['city'] ?? '' }}";

$(document).ready(function () {
    // Initialize Select2
    $(".select2, .select-multi").select2().on("change", function () {
        $(this).valid();
    });

    // Add strong password validation method
    $.validator.addMethod("strongPassword", function(value, element) {
        return this.optional(element) || /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/.test(value);
    }, "Password must contain uppercase, lowercase, number & special character");

    // Initialize validations
    initProfileFormValidation();

    // File upload preview
    initFileUploadPreview();

    // Password panel toggle
    $(".update_password").hide().find("input").prop("disabled", true);

    // Location dropdowns
    initLocationDropdowns();
});

// === Form Validation ===
function initProfileFormValidation() {
    $("#profileForm").validate({
        errorElement: "span",
        errorClass: "text-danger",
        rules: {
            first_name: { required: true },
            email_address: { required: true },
            gender: { required: true },
            old_password: {
                required: function () {
                    return $("#new_password").val().length > 0;
                }
            },
            new_password: {
                required: function () {
                    return $("#old_password").val().length > 0;
                },
                minlength: 8,
                strongPassword: true
            },
            confirm_password: {
                required: function () {
                    return $("#new_password").val().length > 0;
                },
                equalTo: "#new_password"
            }
        },
        messages: {
            first_name: { required: "Please enter the first name" },
            email_address: { required: "Please enter the email address" },
            gender: { required: "Please select the gender" },
            old_password: { required: "Please enter the old password" },
            new_password: {
                required: "Please enter a new password",
                minlength: "Password must be at least 8 characters",
                strongPassword: "Password must contain uppercase, lowercase, number & special character"
            },
            confirm_password: {
                required: "Please confirm your new password",
                equalTo: "Passwords do not match"
            }
        },
        errorPlacement: function (error, element) {
            error.addClass("invalid-feedback");
            if (element.hasClass("flatpickr-input")) {
                error.insertAfter(element.closest("div"));
            } else if (element.is(":radio")) {
                error.appendTo(element.closest(".radio-label-error"));
            } else if (element.hasClass("select2")) {
                error.insertAfter(element.next(".select2-container"));
            } else {
                error.insertAfter(element);
            }
        },
        ignore: [],
        submitHandler: function (form) {
            const formData = new FormData(form);
            const $button = $('#saveButton').prop('disabled', true).text('Saving...');
            $.ajax({
                url: "{{ route('userprofile.update') }}",
                type: 'POST',
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: "success",
                        title: "Success",
                        text: "Profile updated successfully!",
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $button.prop('disabled', false).text('Save');
                },
                error: function(xhr) {
                    let message = "Something went wrong.";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: message
                    });
                    $button.prop('disabled', false).text('Save');
                }
            });
        }
    });
}

// === Password Panel Toggle ===
function update_password_panel(el) {
    const isChecked = $(el).is(":checked");
    $(".update_password input").prop("disabled", !isChecked).val("");
    $(".update_password").toggle(isChecked);

    const validator = $("#profileForm").validate();

    if (isChecked) {
        $("#old_password").rules("add", { required: true });
        $("#new_password").rules("add", {
            required: true,
            minlength: 8,
            strongPassword: true
        });
        $("#confirm_password").rules("add", {
            required: true,
            equalTo: "#new_password"
        });
    } else {
        $("#old_password, #new_password, #confirm_password").each(function () {
            $(this).rules("remove");
            validator.resetForm();
        });
    }
}

// === File Upload Preview ===
function initFileUploadPreview() {
    const maxSize = 5 * 1024 * 1024;
    const allowedTypes = ["image/jpeg", "image/png", "image/gif"];

    $("#fileInput").on("change", function (e) {
        const file = e.target.files[0];
        const $fileError = $("#fileError");
        const $preview = $("#imagePreview");
        const $uploadIcon = $("#uploadIcon");

        if (file) {
            if (!allowedTypes.includes(file.type)) {
                $fileError.text("Only JPG, PNG, and GIF allowed").show();
                $preview.hide(); $uploadIcon.show(); return;
            }
            if (file.size > maxSize) {
                $fileError.text("Max upload size is 5MB").show();
                $preview.hide(); $uploadIcon.show(); return;
            }

            $fileError.hide();
            const reader = new FileReader();
            reader.onload = e => {
                $preview.attr("src", e.target.result).show();
                $uploadIcon.hide();
            };
            reader.readAsDataURL(file);
        }
    });
}

// === Location Dropdown Logic ===
function initLocationDropdowns() {
    fetchCountries().then(() => {
        if (oldCountry) $("#country").val(oldCountry).trigger("change");
    });

    $("#country").change(function () {
        const id = $(this).val();
        if (id) {
            fetchStates(id).then(() => {
                if (oldState) $("#state").val(oldState).trigger("change");
            });
        } else {
            $("#state, #city").html('<option value="">Select</option>');
        }
    });

    $("#state").change(function () {
        const id = $(this).val();
        if (id) {
            fetchCities(id).then(() => {
                if (oldCity) $("#city").val(oldCity).trigger("change");
            });
        } else {
            $("#city").html('<option value="">Select City</option>');
        }
    });
}

const routes = {
    getCountries: @json(route('location.getCountries')),
    getStates: @json(route('location.getStates', ['country_id' => ':id'])),
    getCities: @json(route('location.getCities', ['state_id' => ':id']))
};

function fetchCountries() {
    return $.ajax({
        url: routes.getCountries,
        type: "GET",
        success: res => {
            let html = '<option value="">Select Country</option>';
            $.each(res, (_, c) => html += `<option value="${c.id}">${c.name}</option>`);
            $("#country").html(html);
        },
        error: () => alert("Failed to load countries")
    });
}

function fetchStates(country_id) {
    return $.ajax({
        url: routes.getStates.replace(':id', country_id),
        type: "GET",
        success: res => {
            let html = '<option value="">Select State</option>';
            $.each(res, (_, s) => html += `<option value="${s.id}">${s.name}</option>`);
            $("#state").html(html);
            $("#city").html('<option value="">Select City</option>');
        },
        error: () => alert("Failed to load states")
    });
}

function fetchCities(state_id) {
    return $.ajax({
        url: routes.getCities.replace(':id', state_id),
        type: "GET",
        success: res => {
            let html = '<option value="">Select City</option>';
            $.each(res, (_, c) => html += `<option value="${c.id}">${c.name}</option>`);
            $("#city").html(html);
        },
        error: () => alert("Failed to load cities")
    });
}
function toggleCustomFocus(e, add = true) {
  const selection = e.target?.nextElementSibling?.querySelector('.select2-selection--single');
    if (selection) {
        selection.classList.toggle('custom-focus', add);
    }}
    $(document).on('select2:open', function (e) {
        toggleCustomFocus(e, true);
        requestAnimationFrame(() => {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
    });});
    $(document).on('select2:close', function (e) {
       toggleCustomFocus(e, false);
});
</script>


@endsection