@extends('webUser.layouts.app')
@section('contents')
<!-- Header -->
    <div
      class="relative ProfileBG bg-no-repeat bg-cover bg-center min-h-[300px] w-full"
    >
      <div class="flex justify-end pt-10 pr-16 items-center">
        <!-- Toggle Buttons -->
        <div
          class="inline-flex items-center mt-4 sm:mt-0 bg-[#F1FAFA] p-1 rounded-full"
        >
          <!-- Home Toggle -->
          <input
            type="radio"
            name="toggle"
            id="home"
            class="hidden peer/home"
            onclick="change()"
          />
          <label
            for="home"
            class="peer-checked/home:bg-[#009A94] peer-checked/home:text-white text-[#009A94] text-sm font-semibold px-8 py-2 rounded-full cursor-pointer transition"
          >
            Home
          </label>

          <!-- Profile Toggle -->
          <input
            type="radio"
            name="toggle"
            id="profile"
            class="hidden peer/profile"
            checked
          />
          <label
            for="profile"
            class="peer-checked/profile:bg-[#009A94] peer-checked/profile:text-white text-[#009A94] text-sm font-semibold px-8 py-2 rounded-full cursor-pointer transition"
          >
            Profile
          </label>
        </div>
      </div>

      <!-- Profile Picture -->
      <div
        class="absolute left-1/2 top-full transform -translate-x-1/2 -translate-y-2/3"
      >
        <div
          class="relative w-56 h-56 rounded-full border-4 border-white shadow-lg"
        >
          <input type="file" id="myFile" accept="image/*" style="display:none">
          <img
            id="previewImage" src="{{ asset($user->profile_image ? 'storage/images/profile/'. $user->profile_image : 'user/images/manIcon.svg') }}"
            alt="Profile Picture"
            class="w-full h-full rounded-full object-cover"
          />
          <button class="absolute w-20 h-20 bottom-0 -right-3 text-white p-2" id="haveClick">
            <img
              src="{{asset('user/images/camera.svg')}}"
              alt="Profile Picture"
              class="w-20 h-20"
            />
          </button>
        </div>
      </div>
    </div>

    <!-- Profile Info Section -->
    <section class="mt-28 md:mt-44 px-4 ProfilePageBottomBG md:px-12">
      <div
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-center items-start"
      >
        <!-- User ID -->
        <div class="flex items-center justify-center gap-3">
          <div class="text-white rounded-full text-2xl">
            <img
              src="{{asset('user/images/id.svg')}}"
              alt="Profile Picture"
              class="w-full h-full object-cover"
            />
          </div>
          <div class="">
            <p class="text-base text-gray-500">User ID</p>
            <p class="text-lg font-semibold">{{$user->id}}</p>
          </div>
        </div>

        <!-- Phone -->
        <div class="flex items-center justify-center gap-3">
          <div class="text-white rounded-full text-2xl">
            <img
              src="{{asset('user/images/phone.svg')}}"
              alt="Profile Picture"
              class="w-full h-full object-cover"
            />
          </div>
          <div>
            <p class="text-base text-gray-500"> {{$user->phone_code ? '+' : '' }}{{$user->phone_code }} {{$user->phone_number}}</p>
            <a href="{{route('user.phone')}}"
              class="text-[#009A94] font-semibold text-lg font-semibold hover:underline"
            >
              Change Phone Number
            </a>
          </div>
        </div>

        <!-- Password -->
        <div class="flex items-center justify-center gap-3">
          <div class="text-white rounded-full text-2xl">
            <img
              src="{{asset('user/images/key.svg')}}"
              alt="Profile Picture"
              class="w-full h-full object-cover"
            />
          </div>
          <div>
            <p class="text-base text-gray-500">Password</p>
            <a href="{{route('user.password')}}"
              class="text-[#009A94] font-semibold text-lg font-semibold hover:underline"
            >
              Change Password
            </a>
          </div>
        </div>
      </div>

      <!-- Logout -->
      <div class="mt-20 pb-10 flex items-center justify-center">
        <button 
         onclick="openlogoutModal(event)"
          class="text-[#009A94] font-semibold text-lg hover:underline flex items-center justify-center gap-2"
        >
          <span
            ><img
              src="{{asset('user/images/logout.svg')}}"
              alt="Profile Picture"
              class="w-full h-full object-cover"
          /></span>
          Log Out
        </button>
      </div>
    </section>
    <div class="fixed inset-0 bg-black/90 flex items-center justify-center z-50 px-4 hidden" id="logoutModal">
      <!-- Modal Box -->
      <div class="bg-white rounded-3xl w-full max-w-sm flex flex-col shadow-lg overflow-hidden">
        <!-- Modal Body (Scrollable Area) -->
        <div class="overflow-y-auto flex justify-center items-center flex-col px-6 py-4 space-y-4">
            <img src="{{asset('user/images/attention.svg')}}" alt="Show" class="">
            <h2 class="text-center font-semibold text-xl">
                Are you sure you want <br> to log out?
            </h2>
        </div>

        <!-- Modal Footer -->
        <div class="px-6 flex gap-6 py-4 mx-4 bg-white my-5">
            <button onclick="closelogoutModal(event)" class="w-full bg-[#F3FAFA] text-[#009696] py-3 rounded-lg text-base font-medium btn-shadow transition">
          No, cancel
           </button>
          <button onclick="logout(event)"  class="w-full bg-[#009696] text-white py-3 rounded-lg text-base font-medium btn-shadow hover:bg-[#007f7b] transition">
          Yes, log out
          </button>
        </div>
      </div>
    </div>
    <script>
      function change(){
        window.location.href = "{{route('user.landing')}}"
      }
    </script>
  <script>
    $(document).ready(function () {
        $('#haveClick').click(function () {
            $('#myFile').click();
        });

        $('#myFile').change(function () {
            const input = this;
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const fileType = file.type;
                const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];

                if (!validTypes.includes(fileType)) {
                    toastr.warning("Please add a valid image (JPG, JPEG, PNG).");
                    return;
                }

                const reader = new FileReader();
                reader.onload = function (event) {
                    const img = new Image();
                    img.src = event.target.result;

                    $(img).on('load', function () {
                        const canvas = $('<canvas>')[0];
                        const ctx = canvas.getContext('2d');
                        const maxWidth = 800, maxHeight = 800;
                        let width = img.width, height = img.height;

                        // Resize if needed
                        if (width > maxWidth || height > maxHeight) {
                            if (width > height) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            } else {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        canvas.toBlob(function (blob) {
                            if (blob.size <= 4 * 1024 * 1024) {
                                const compressedFile = new File([blob], file.name, { type: fileType });
                                const formData = new FormData();
                                formData.append('profile_image', compressedFile);

                                // Preview the image
                                const compressedUrl = URL.createObjectURL(compressedFile);
                                $('#previewImage').attr('src', compressedUrl);

                                // Upload via AJAX
                                $.ajax({
                                    url: "{{ route('user.update-profile') }}",
                                    method: "POST",
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    headers: {
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    },
                                    beforeSend: function () {
                                        // $('#profileSave').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                                    },
                                    success: function (response) {
                                        // $('#profileSave').prop('disabled', false).html('Save Changes');
                                        toastr.success(response.message || 'Profile image updated successfully');
                                    },
                                    error: function (xhr) {
                                        // $('#profileSave').prop('disabled', false).html('Save Changes');
                                        if (xhr.status === 422) {
                                          let errors = xhr.responseJSON.errors || {};
                                          $.each(errors, function (key, value) {
                                              $('#' + key + '-error').html(value[0]);
                                          });
                                          toastr.warning("Validation error");
                                        } else {
                                          toastr.error(xhr.responseJSON.message || "Something went wrong");
                                        }
                                    }
                                });

                            } else {
                                toastr.warning("Even after compression, the file size exceeds 4 MB.");
                            }
                        }, fileType, 0.7);
                    });
                };
                reader.readAsDataURL(file);
            }
        });
    });
  </script>
 <script>
    function closelogoutModal(event) {
      event.preventDefault();
      $('#logoutModal').addClass('hidden');
    }
    function openlogoutModal(event) {
      event.preventDefault();
      $('#logoutModal').removeClass('hidden');
    }

    function logout(event) {
      event.preventDefault();
      window.location.href = "{{ route('user.logout') }}";
    }
  </script>
  <script>
    $(document).on('click', '#logoutModal', function (event) {
      if (!$(this).hasClass('hidden')) {
        if ($(event.target).is('#logoutModal')) {
          $('#logoutModal').addClass('hidden');
        }
      }
    });
  </script>
@endsection