@extends('layout.layout')
@section('content')

<link rel="stylesheet" href="{{ asset('assets/css/profilepage.css') }}">

    <div class="row mx-4">
      <div class="container-fluid  py-6">
        <div class="row row_card">

            <!-- PROFILE SIDE NAV -->
            <div class="col-sm-8 col-md-4 col-lg-4 mt-4">
                <div class="mb-4">
                    <div class="text-center">
                        <div class="user-profile">
                            <div class="user-avatar">
                                <img src="{{ asset('profile_picture/lrmisicondefpicgreybg.png') }}" alt="Profile Picture" class="profilepic">
                            </div>
                        </div>
                    </div>
                    <div class="py-4 px-1 pb-2">
                        <div class="mx-0" id="myDIV">
                            <!-- Personal Info Button -->
                            <div class="mb-2">
                                <button href="#personal_information" class="btn1 w-100 py-2 button_" onclick="showSection('personal_information'); return false;">
                                    Personal Information
                                </button>
                            </div>
                            <!-- Contact Details Button -->
                            <div class="mb-2">
                                <button href="#contact_details" class="btn1 w-100 py-2 button_" onclick="showSection('contact_details'); return false;">
                                    Contact Details
                                </button>
                            </div>
                            <!-- Profile Picture Button -->
                            <div class="mb-2">
                                <button href="#profile_picture" class="btn1 w-100 py-2 button_" onclick="showSection('profile_picture'); return false;">
                                    Profile Picture
                                </button>
                            </div>
                            <!-- Password Button -->
                            <div class="mb-2">
                                <button href="#user_password" class="btn1 w-100 py-2 button_" onclick="showSection('user_password'); return false;">
                                    Password
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script> //script for nav func
            function showSection(sectionId) {
  $('.section').removeClass('active').hide(); // Hide all sections
  $('#' + sectionId).addClass('active').show(); // Show the selected section

  // Get all buttons with class btn1
  const buttons = document.querySelectorAll('.btn1');

  // Remove active class from all buttons
  buttons.forEach(button => button.classList.remove('active'));

  // Get the button that was clicked
  const clickedButton = event.target;

  // Add active class to the clicked button
  clickedButton.classList.add('active');
}

$(document).ready(function() {
  var activeSection = localStorage.getItem('activeSection');
  if (activeSection) {
      showSection(activeSection);
  } else {
      showSection('personal_information');
  }
});
            </script>

            <!-- PROFILE INFORMATION -->
            <div class="col-sm-12 col-md-8 my-3 section" id="personal_information">
                <div class="mb-2 p-4 bg-white rounded shadow-sm">
                    <div class="mx-3 pt-3">
                        <p class="h4 mb-4" style="color: #333;">Personal Information</p>
                    </div>
                    <div class="mx-3 mt-4">
                        <form id="informationForm">
                            <div class="row">
                                <!-- First Name -->
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label for="first_name" class="form-label" style="color: #333;">First Name</label>
                                    <input id="first_name" type="text" name="first_name" class="form-control" value="{{$profileService->Firstname}}">
                                </div>
                                <!-- Last Name -->
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label for="last_name" class="form-label" style="color: #333;">Last Name</label>
                                    <input id="last_name" type="text" name="last_name" class="form-control" value="{{$profileService->Lastname}}">
                                </div>
                                <!-- Username -->
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label for="username" class="form-label" style="color: #333;">Username</label>
                                    <input id="username" type="text" name="username" class="form-control" value="{{$profileService->Username}}">
                                </div>
                                <!-- TIN -->
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label for="tin" class="form-label" style="color: #333;">TIN</label>
                                    <input id="tin" type="text" name="tin" class="form-control" value="{{$profileService->TIN}}">
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-sm-12 d-flex justify-content-center">
                                    <button type=" button" class="btn1 button_" id="saveInformation" style="width: 130px;">Update</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <script>
              $('#saveInformation').on('click', function(e) {
                  e.preventDefault();

                  $('#errorF').text('');
                  $('#errorL').text('');
                  $('#error').text('');

                  let isValid = true;

                  const firstName = $('#first_name').val().trim();
                  const lastName = $('#last_name').val().trim();
                  const username = $('#username').val().trim();
                  const tin = $('#tin').val().trim();

                  if (firstName === '') {
                    $('#errorF').text('First Name is required.');
                    isValid = false;
                  }
                  if (lastName === '') {
                    $('#errorL').text('Last Name is required.');
                    isValid = false;
                  }
                  if (username === '') {
                    $('#error').text('Username is required.');
                    isValid = false;
                  }
                  if (tin === '') {
                    $('#error').text('TIN is required.');
                    isValid = false;
                  }

                  if (isValid) {
                    const formData = {
                      first_name: firstName,
                      last_name: lastName,
                      username: username,
                      tin: tin
                    };

                    $('#saveInformation').prop('disabled', true);

                    $.ajax({
                      url: 'user_profile/update_information.php',
                      type: 'POST',
                      data: formData,
                      success: function(response) {
                        const result = JSON.parse(response);
                        alert(result.message);
                        if (result.success) {
                          location.reload()
                        }
                      },
                      error: function(xhr, status, error) {
                        console.error('AJAX error:', error);
                        alert('An error occurred. Please try again.');
                      },
                      complete: function() {
                        $('#saveInformation').prop('disabled', false);
                      }
                    });
                  }
                });

            </script>
            <!-- PROFILE DETAILS END -->

            <!-- CONTACT DETAILS -->
            <div class="col-sm-12 col-md-8 my-3 section" id="contact_details" style="display: none;">
                  <div class="mb-2 p-4 bg-white rounded shadow-sm">
                      <div class="mx-3 pt-3">
                          <p class="h4 mb-4" style="color: #333;">Contact Details</p>
                      </div>
                      @php
                              $email = $fax = $instant_messaging = $mobile_number = $phone = $social_media = "";
                              $email_id = $fax_id = $instant_messaging_id = $mobile_number_id = $phone_id = $social_media_id = 0;
                              $email_type_id = $fax_type_id = $instant_messaging_type_id = $mobile_number_type_id = $phone_type_id = $social_media_type_id = 0;
                          @endphp

                          @if (!empty($profileService->Contacts) && is_iterable($profileService->Contacts))
                              @foreach ($profileService->Contacts as $contact)
                                  @php

                                      $contact_type_id = $contact['contact_type_id'] ?? null;
                                      $contact_value = $contact['contact_value'] ?? null;
                                      $contact_id = $contact['contact_id'] ?? null;

                                      if (!empty($contact_type_id)) {
                                          switch ($contact_type_id) {
                                              case 1:  // Email
                                                  $email = $contact_value ?? $email;
                                                  $email_id = $contact_id ?? $email_id;
                                                  $email_type_id = $contact_type_id ?? $email_type_id;
                                                  break;
                                              case 2:  // Fax
                                                  $fax = $contact_value ?? $fax;
                                                  $fax_id = $contact_id ?? $fax_id;
                                                  $fax_type_id = $contact_type_id ?? $fax_type_id;
                                                  break;
                                              case 3:  // Instant Messaging
                                                  $instant_messaging = $contact_value ?? $instant_messaging;
                                                  $instant_messaging_id = $contact_id ?? $instant_messaging_id;
                                                  $instant_messaging_type_id = $contact_type_id ?? $instant_messaging_type_id;
                                                  break;
                                              case 4:  // Mobile Number
                                                  $mobile_number = $contact_value ?? $mobile_number;
                                                  $mobile_number_id = $contact_id ?? $mobile_number_id;
                                                  $mobile_number_type_id = $contact_type_id ?? $mobile_number_type_id;
                                                  break;
                                              case 5:  // Phone
                                                  $phone = $contact_value ?? $phone;
                                                  $phone_id = $contact_id ?? $phone_id;
                                                  $phone_type_id = $contact_type_id ?? $phone_type_id;
                                                  break;
                                              case 6:  // Social Media
                                                  $social_media = $contact_value ?? $social_media;
                                                  $social_media_id = $contact_id ?? $social_media_id;
                                                  $social_media_type_id = $contact_type_id ?? $social_media_type_id;
                                                  break;
                                          }
                                      }
                                  @endphp
                              @endforeach
                          @endif
                      <form id="contactForm">
                          <div class="mx-3 mt-4">
                              <div class="row">
                              <div class="col-md-6 col-sm-12">
                              <!-- Email Address -->
                              <label for="" class="form-label fw-bold required" data-toggle="tooltip" data-placement="top">Email Address</label>
                              <div class="input-group ">
                                  <input id="email" type="email" name="email" class="form-control" value="{{ $email }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="email_id" type="text" name="email_id" class="form-control" value="{{ $email_id }}">
                                  <input id="email_type_id" type="text" name="email_type_id" class="form-control" value="{{ $email_type_id }}"> -->
                              </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                              <!-- FAX -->
                              <label for="" class="form-label fw-bold" data-toggle="tooltip" data-placement="top">FAX</label>
                              <div class="input-group">
                                  <input id="fax" type="text" name="fax" class="form-control" value="{{ $fax }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="fax_id" type="text" name="fax_id" class="form-control" value="{{ $fax_id }}">
                                  <input id="fax_type_id" type="text" name="fax_type_id" class="form-control" value="{{ $fax_type_id }}"> -->
                              </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                              <!-- Instant Messaging -->
                              <label for="" class="form-label fw-bold" data-toggle="tooltip" data-placement="top">Instant Messaging</label>
                              <div class="input-group i">
                                  <input id="instant_messaging" type="text" name="instant_messaging" class="form-control" value="{{ $instant_messaging }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="instant_messaging_id" type="text" name="instant_messaging_id" class="form-control" value="{{ $instant_messaging_id }}">
                                  <input id="instant_messaging_type_id" type="text" name="instant_messaging_type_id" class="form-control" value="{{ $instant_messaging_type_id }}"> -->
                              </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                              <!-- Mobile Number -->
                              <label for="" class="form-label fw-bold" data-toggle="tooltip" data-placement="top">Mobile Number</label>
                              <div class="input-group ">
                                  <input id="mobile_number" type="text" name="mobile_number" class="form-control" value="{{ $mobile_number }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="mobile_number_id" type="text" name="mobile_number_id" class="form-control" value="{{ $mobile_number_id }}">
                                  <input id="mobile_number_type_id" type="text" name="mobile_number_type_id" class="form-control" value="{{ $mobile_number_type_id }}"> -->
                              </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                              <!-- Phone -->
                              <label for="" class="form-label fw-bold" data-toggle="tooltip" data-placement="top">Phone</label>
                              <div class="input-group ">
                                  <input id="phone" type="text" name="phone" class="form-control" value="{{ $phone }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="phone_id" type="text" name="phone_id" class="form-control" value="{{ $phone_id }}">
                                  <input id="phone_type_id" type="text" name="phone_type_id" class="form-control" value="{{ $phone_type_id }}"> -->
                              </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                              <!-- Social Media -->
                              <label for="" class="form-label fw-bold" data-toggle="tooltip" data-placement="top">Social Media</label>
                              <div class="input-group">
                                  <input id="social_media" type="text" name="social_media" class="form-control" value="{{ $social_media }}" data-toggle="tooltip" data-placement="top">
                                  <!-- <input id="social_media_id" type="text" name="social_media_id" class="form-control" value="{{ $social_media_id }}">
                                  <input id="social_media_type_id" type="text" name="social_media_type_id" class="form-control" value="{{ $social_media_type_id }}"> -->
                              </div>
                          </div>
                      </div>
                              </div>

                              <div class="row mt-4">
                                  <div class="col-sm-12 d-flex justify-content-center">
                                  <button type=" button" class="btn1 button_" id="saveInformation" style="width: 130px;">Update</button>
                                </div>
                              </div>
                          </div>
                      </form>
            </div>

            <script>
              // $(document).ready(function() {
              //   $('#saveContact').on('click', function() {
              //       const email = $('#email').val();

              //       if (!email) {
              //           alert('Email is required.');
              //           return;
              //       }

              //       const formData = {
              //           email: email,
              //           email_id: $('#email_id').val(),
              //           email_type_id: $('#email_type_id').val(),
              //           fax: $('#fax').val(),
              //           fax_id: $('#fax_id').val(),
              //           fax_type_id: $('#fax_type_id').val(),
              //           instant_messaging: $('#instant_messaging').val(),
              //           instant_messaging_id: $('#instant_messaging_id').val(),
              //           instant_messaging_type_id: $('#instant_messaging_type_id').val(),
              //           mobile_number: $('#mobile_number').val(),
              //           mobile_number_id: $('#mobile_number_id').val(),
              //           mobile_number_type_id: $('#mobile_number_type_id').val(),
              //           phone: $('#phone').val(),
              //           phone_id: $('#phone_id').val(),
              //           phone_type_id: $('#phone_type_id').val(),
              //           social_media: $('#social_media').val(),
              //           social_media_id: $('#social_media_id').val(),
              //           social_media_type_id: $('#social_media_type_id').val()
              //       };
              //       console.log(formData);
              //       $('#saveContact').prop('disabled', true);

              //       $.ajax({
              //           url: 'user_profile/update_contact.php',
              //           type: 'POST',
              //           data: formData,
              //           success: function(response) {
              //               const result = JSON.parse(response);
              //               alert(result.message);
              //               if (result.success) {
              //                   location.reload();
              //               }
              //           },
              //           error: function(xhr, status, error) {
              //               console.error('AJAX error:', error);
              //               alert('An error occurred. Please try again.');
              //           },
              //           complete: function() {
              //               $('#saveContact').prop('disabled', false);
              //           }
              //       });
              //   });
            // });


            </script>
            <!-- CONTACT DETAILS END -->

            <!-- PROFILE PIC -->

            <div class="col-sm-12 col-md-8  my-3 section" id="profile_picture" style="display: none;">
              <div class="mb-2 p-4 bg-white rounded shadow-sm">
                <div class="mx-3 pt-3">
                      <p class="h4 mb-4" style="color: #333;">Profile Picture</p>
                </div>
                <div class=" ">
                  <div class="row" style="margin-left: 20px; margin-right: 20px; width:90% flex">
                    <div class="col-md-12 col-sm-12"  >
                        <div class="form-element text-center mb-3 mt-2">
                            <img src="" class="profilepic_update" alt="">
                        </div>
                      <div class="text-center mt-1 my-1 mb-4">
                      <button type=" button" data-bs-toggle="modal" data-bs-target="#logoModal" class="btn1 button_" id="saveInformation" style="width: 130px;">Choose Image</button>
                        <!-- <a class="shadow-dark fw-bold cancelbtn me-2 mb-4" data-bs-toggle="modal" data-bs-target="#logoModal" style="text-decoration: none;">Choose Image</a> -->
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <!-- MODAL PIC FOR UPLODAING OF IMAGE-->
            <div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-text="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header" style="background-color: #f0b327">
                    <h5 class="modal-title" id="staticBackdropLabel" style="color:#fff; font-weight:600">Update Profile Picture</h5>
                    <button type="z" class="btn-close" style="border-radius: 50px; margin-top:0px; background-color: #ff3f3f; color: white;" data-bs-dismiss="modal" ></button>
                  </div>
                  <div class="modal-body">

                    <!-- <form method="post" action="" class="" autocomplete="off" enctype="multipart/form-data"> -->
                    <!-- <form  action="/pages/profile" method="POST" enctype="multipart/form-data"> -->
                    <form  action="{{route('image.store')}}" method="POST" enctype="multipart/form-data">

                        @csrf
                        <div class="upload-container" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">


                        <!-- Display the comparison of the original and compressed images before uploading -->
                        <div class="image-display-section" style="display: flex; flex-direction: row; justify-content: center; gap: 20px; margin-top: 20px;">
                          <div class="original-image" style="text-align: center;">
                            <h6 id = "originalImgTxt">Upload an Image</h6>
                            <img id="original-image-preview" src="#" alt="" style=" display: block; margin: 0 auto;">
                            <p id="original-image-info"></p>
                          </div>
                          <div class="compressed-image" style="text-align: center;" name="compressedImage">
                            <h6 id = "compressedImgTxt"> </h6>
                            <img name = "compressed-image-preview" id="compressed-image-preview" src="#" alt="" style=" display: block; margin: 0 auto;">
                            <p id="compressed-image-info"></p>
                          </div>
                        </div>

                        <!-- display the size changes-->
                        <p id="size-difference-info" style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; text-align: center; color: #007bff; font-weight: bold;"></p>

                        <!-- upload btn -->
                        <div class="form-element img-thumbnail" style="margin-bottom: 20px; text-align: center;">

                        <input type="file" id="logo-1" style="margin: 0 auto;" name="image" required accept=".png, .jpg, .jpeg">  @error('image')
                              <p class ="text-danger">({{$message}})

                              </p>
                              @enderror
                          </div>
                          <!-- <button id="buttonupl" class="shadow-dark submitbtn" type="submit">Upload Image</button>  -->
                          <button type="submit button" data-bs-toggle="modal" data-bs-target="#logoModal" class="btn1 button_" id="buttonupl" style="width: 130px;">Choose Image</button>

                    </form>

                    </div>
                </div>
              </div>
            </div>

            <!-- MODAL SCRIPT -->

            <script>
            document.getElementById('logo-1').addEventListener('change', function (event) {


                const file = event.target.files[0]; //checks if there are files in the input

                const maxWidth = 300; // Max width
                const maxHeight = 300; // Max height
                const minWidth = 150; // Min width
                const minHeight = 150; // Min height
                const maxFileSize = 50 * 1024; // 50KB in bytes

                if (file) {
                    const img = new Image();
                    img.src = URL.createObjectURL(file);

                    img.onload = function () {
                        const originalWidth = img.width;
                        const originalHeight = img.height;
                        const fileSize = file.size; // Get file size in bytes

                        // Determine file type based on file size
                        let fileType = 'image/png'; // Default to PNG
                        if (fileSize > maxFileSize) {
                            fileType = 'image/jpeg'; // Convert to JPG if file size exceeds 50KB
                        } else {
                            // Check if converting to PNG will exceed 50KB
                            const canvas = document.createElement('canvas');
                            canvas.width = originalWidth;
                            canvas.height = originalHeight;
                            const ctx = canvas.getContext('2d');
                            ctx.drawImage(img, 0, 0, originalWidth, originalHeight);

                            canvas.toBlob(
                                function (blob) {
                                    if (blob.size > maxFileSize) {
                                        fileType = 'image/jpeg'; // Convert to JPG if PNG exceeds 50KB
                                    }
                                },
                                'image/png' // Check PNG size
                            );
                        }

                        // Resize logic based on dimensions
                        let newWidth = originalWidth;
                        let newHeight = originalHeight;

                        if (originalWidth > maxWidth || originalHeight > maxHeight) {
                            // Resize to max dimensions of 300x300 while maintaining aspect ratio
                            newWidth = maxWidth;
                            newHeight = maxHeight;

                            // Display original image
                            document.getElementById('original-image-preview').src = img.src;
                            document.getElementById('original-image-info').innerText = `Resolution: ${originalWidth}x${originalHeight} | Size: ${(fileSize / 1024).toFixed(2)}KB`;
                            document.getElementById('originalImgTxt').innerText = 'Original Image:';
                        } else if (originalWidth < minWidth || originalHeight < minHeight) {
                            // Resize to min dimensions of 150x150 while maintaining aspect ratio
                            newWidth = minWidth;
                            newHeight = minHeight;

                            // Display original image
                            document.getElementById('original-image-preview').src = img.src;
                            document.getElementById('original-image-info').innerText = `Resolution: ${originalWidth}x${originalHeight} | Size: ${(fileSize / 1024).toFixed(2)}KB`;
                            document.getElementById('originalImgTxt').innerText = 'Original Image:';
                        } else {
                            // Image is within acceptable range; only display compressed image
                            newWidth = originalWidth;
                            newHeight = originalHeight;
                            document.getElementById('originalImgTxt').innerText = '';
                            document.getElementById('original-image-preview').src = '';
                            document.getElementById('original-image-info').innerText = '';
                        }

                        // Resize and display compressed image
                        const canvas = document.createElement('canvas');
                        canvas.width = newWidth;
                        canvas.height = newHeight;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, newWidth, newHeight);

                        canvas.toBlob(
                            function (blob) {
                                // Check if the compressed image exceeds 50KB
                                if (blob.size > maxFileSize) {
                                    fileType = 'image/jpeg'; // Convert to JPG if compressed image exceeds 50KB
                                    canvas.toBlob(
                                        function (newBlob) {
                                            const compressedImageUrl = URL.createObjectURL(newBlob);
                                            document.getElementById('compressed-image-preview').src = compressedImageUrl;
                                            document.getElementById('compressed-image-info').innerText = `Resolution: ${newWidth}x${newHeight} | Size: ${(newBlob.size / 1024).toFixed(2)}KB`;
                                            document.getElementById('compressedImgTxt').innerText = 'Compressed Image:';

                                            // Store the compressed image URL for later use
                                            document.getElementById('buttonupl').dataset.imageUrl = compressedImageUrl;

                                            // Show the upload button
                                            document.getElementById('buttonupl').style.display = 'block';
                                        },
                                        fileType, // Use the determined file type
                                        0.8 // Adjust quality as needed
                                    );
                                } else {
                                    const compressedImageUrl = URL.createObjectURL(blob);
                                    document.getElementById('compressed-image-preview').src = compressedImageUrl;
                                    document.getElementById('compressed-image-info').innerText = `Resolution: ${newWidth}x${newHeight} | Size: ${(blob.size / 1024).toFixed(2)}KB`;
                                    document.getElementById('compressedImgTxt').innerText = 'Compressed Image:';

                                    // Store the compressed image URL for later use
                                    document.getElementById('buttonupl').dataset.imageUrl = compressedImageUrl;

                                    // Show the upload button
                                    document.getElementById('buttonupl').style.display = 'block';
                                }
                            },
                            fileType, // Use the determined file type
                            0.8 // Adjust quality as needed
                        );
                    };
                } else {
                    document.getElementById('buttonupl').style.display = 'none';
                }
            });

            document.getElementById('buttonupl').addEventListener('click', function (event) {
                const compressedImageUrl = this.dataset.imageUrl;

                if (compressedImageUrl) {
                    alert('Image Uploaded Successfully');
                    const profilePictureElement = document.querySelector('.profilepic_update');
                    profilePictureElement.src = compressedImageUrl;

                    const modal = document.getElementById('logoModal');
                    const bootstrapModal = bootstrap.Modal.getInstance(modal);
                    bootstrapModal.hide();

                    // $.ajax({
                    //   url: '/pages/profile',
                    //   type: 'POST',
                    //   data: new FormData($('#uploadForm')[0]),
                    //   processData: false,
                    //   contentType: false,
                    //   success: function (response) {
                    //     console.log(response);
                    //   },
                    //   error: function (xhr) {
                    //     console.error('Error:', xhr.responseText);
                    //   },
                    // });
                }
            });
            </script>
             <!-- PROFILE PIC END -->
        </div>

        <!-- PASSWORD -->
        <div class="col-sm-12 col-md-8 my-3 section" id="user_password" style="display: none;">
          <div class="mb-2 p-4 bg-white rounded shadow-sm">
            <div class="mx-3 pt-3">
              <p class="h4 mb-4" style="color: #333;">Change Password</p>
            </div>
            <div class="mx-3 mt-4">
              <form id="passwordForm">
                <div class="row mt-3 mb-3 d-flex justify-content-center">
                  <div class="col-sm-12 col-md-8">
                    <!-- Current Password -->
                    <label for="" class="form-label required ">Current Password</label>
                      <div class="login_input py-0">
                        <input type="password"  class="form-control" value="" required
                        id="password" placeholder=" " name="password" value="" spellcheck="false" placeholder=" " style="z-index:2;" >
                        <span class="invalid-feedback"></span>
                        <i class="ri-eye-off-line login_eye  px-2  " style="top:10%" id="loginEye" ></i>
                    </div>
                  </div>

                  <div class="col-sm-12 col-md-8 ">
                    <!-- New Password -->
                    <label for="" class="form-label required">New Password</label>
                      <div class="login_input py-0">
                        <input type="password" name="new_password" class=" form-control"
                        value=""  required
                        id="nP" placeholder=" "  value="" spellcheck="false" placeholder=" " style="z-index:2;" >
                        <span class="invalid-feedback"></span>
                        <i class="ri-eye-off-line login_eye px-2 " style="top:10%" id="loginEye3" ></i>
                      </div>
                  </div>

                  <div class="col-sm-12 col-md-8">
                    <!-- Retype New Password -->
                    <label for="" class="form-label required">Confirm Password</label>
                      <div class="login_input py-0">
                        <input type="password" name="confirm_password" class="form-control"
                        value=""  required
                        id="cP" placeholder=" "  placeholder=" " style="z-index:2;"  >
                        <span class="invalid-feedback"></span>
                        <i class="ri-eye-off-line login_eye  px-2"  style="top:10%" id="loginEye2" ></i>
                      </div>
                  </div>

                  <div class="row d-flex justify-content-center mt-4">
                    <button type=" button" class="btnreset mx-2 button_" id="resetButton"  style="width: 130px">Reset</button>
                    <button type="button" class="btn1 mx-2 button_" id="savePassword" style="width: 130px">Save</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- PASSWORD VISIBILITY -->
        <script>
          function togglePasswordVisibility(passwordId, eyeIconId) {
            $(`#${eyeIconId}`).on('click', function () {
              const input = $(`#${passwordId}`);
              if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                $(this).addClass('ri-eye-line').removeClass('ri-eye-off-line');
              } else {
                input.attr('type', 'password');
                $(this).removeClass('ri-eye-line').addClass('ri-eye-off-line');
              }
            });
          }
          togglePasswordVisibility('password', 'loginEye');
          togglePasswordVisibility('nP', 'loginEye3');
          togglePasswordVisibility('cP', 'loginEye2');

          $('#resetButton').on('click', function() {
            $('#passwordForm')[0].reset();
            $('#password, #nP, #cP').attr('type', 'password');
            $('#loginEye, #loginEye3, #loginEye2').removeClass('ri-eye-line').addClass('ri-eye-off-line');
            $('span.invalid-feedback').text(''); // Clear error messages
          });

          $('#savePassword').on('click', function(e) {
            e.preventDefault();

            $('span.invalid-feedback').text('');

            let isValid = true;
            const currentPassword = $('#password').val().trim();
            const newPassword = $('#nP').val().trim();
            const confirmPassword = $('#cP').val().trim();

            if (currentPassword.length < 6) {
              $('#password').siblings('.invalid-feedback').text('Current password is too short.');
              isValid = false;
            }
            if (newPassword.length < 6) {
              $('#nP').siblings('.invalid-feedback').text('New password must be at least 6 characters.');
              isValid = false;
            }
            if (newPassword !== confirmPassword) {
              $('#cP').siblings('.invalid-feedback').text('Passwords do not match.');
              isValid = false;
            }

            if (isValid) {
              const formData = {
                current_password: currentPassword,
                new_password: newPassword,
                confirm_password: confirmPassword
              };

              $('#savePassword').prop('disabled', true);

              $.ajax({
                url: 'user_profile/change_pass.php',
                type: 'POST',
                data: formData,
                success: function(response) {
                  const result = JSON.parse(response);
                  alert(result.message);
                  if (result.success) {
                    window.location.href = 'restructure/login/logout.php';
                  }
                },
                error: function(xhr, status, error) {
                  console.error('AJAX error:', error);
                  alert('An error occurred. Please try again.');
                },
                complete: function() {
                  $('#savePassword').prop('disabled', false);
                }
              });
            }
          });

        </script>
        <!-- PASSWORD END -->

      </div>
    </div>



        <!-- test style -->
  <style>
  </style>

  @endsection