@extends($layout)

@section('content')
  <!-- Cropper.js CDN & Sleek Circular Mask Styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
  <style>
    /* Sleek Circular Avatar Cropper */
    .circle-cropper .cropper-view-box,
    .circle-cropper .cropper-face {
      border-radius: 50%;
    }
    .circle-cropper .cropper-view-box {
      outline: 2px solid rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.72);
    }
    .circle-cropper .cropper-dashed,
    .circle-cropper .cropper-point,
    .circle-cropper .cropper-line {
      display: none !important;
    }
    .circle-cropper .cropper-modal {
      background-color: transparent;
    }
    .cropper-preview-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  </style>

  <!-- Header Page (Konsisten dengan halaman lain) -->
  <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <div>
      <h2 class="text-3xl font-bold text-[#13124E] tracking-tight">Pengaturan Profil</h2>
      <p class="text-xs text-gray-400 mt-1">Kelola data akun, foto avatar, dan keamanan password Anda.</p>
    </div>
    <div class="flex items-center space-x-2.5 bg-white px-3.5 py-1.5 rounded-lg border border-gray-200 text-xs font-medium text-gray-700 shadow-2xs self-start sm:self-auto">
      <i class="fa-solid fa-user-shield text-[#13124E] text-xs"></i>
      <span class="capitalize">{{ $user->role?->role_name ?? 'Pengguna' }}</span>
    </div>
  </header>

  <!-- Notifikasi Sukses -->
  @if (session('success'))
    <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-xs font-medium text-emerald-800 flex items-center justify-between shadow-xs">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
        <span>{{ session('success') }}</span>
      </div>
    </div>
  @endif

  <!-- Notifikasi Error -->
  @if ($errors->any())
    <div class="mb-6 p-4 rounded-xl bg-rose-50 border border-rose-200 text-xs font-medium text-rose-800 shadow-xs space-y-1">
      <div class="flex items-center gap-2 font-bold mb-1">
        <i class="fa-solid fa-triangle-exclamation text-rose-600 text-sm"></i>
        <span>Terjadi kesalahan pengisian form:</span>
      </div>
      <ul class="list-disc list-inside space-y-0.5 pl-2 text-rose-700 text-xs">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <!-- Card Form Full Width (Konsisten dengan modul lain tanpa margin berlebih) -->
  <div x-data="profileManager({
    originalAvatar: '{{ $user->avatar_url }}',
    fallbackAvatar: 'https://ui-avatars.com/api/?name=' + encodeURIComponent({{ json_encode($user->name) }}) + '&color=FFFFFF&background=13124E&bold=true'
  })">
  <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="w-full bg-white rounded-2xl border border-gray-200/80 shadow-xs overflow-hidden">
    @csrf
    @method('PUT')

    <input type="hidden" name="remove_avatar" x-ref="removeAvatarInput" :value="removeAvatarVal">
    <input type="file" name="avatar" x-ref="avatarInput" accept="image/png,image/jpeg,image/jpg,image/webp" class="hidden">
    <input type="file" x-ref="rawAvatarInput" @change="handleFileSelect($event)" accept="image/png,image/jpeg,image/jpg,image/webp" class="hidden">

    <!-- Section 1: Foto Profil (Avatar & Aksi) -->
    <div class="p-6 border-b border-gray-100 flex flex-col sm:flex-row items-center sm:items-start gap-5">
      <div class="relative shrink-0">
        <div class="w-18 h-18 sm:w-20 sm:h-20 rounded-full ring-2 ring-gray-100 shadow-2xs overflow-hidden bg-gray-50 flex items-center justify-center">
          <img :src="previewSrc" x-on:error="$el.src = fallbackAvatar" alt="{{ $user->name }}" class="w-full h-full object-cover">
        </div>
        <label @click="triggerFileInput()" class="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-[#13124E] text-white hover:bg-[#1E1B6B] flex items-center justify-center cursor-pointer shadow-xs transition" title="Ganti Foto">
          <i class="fa-solid fa-camera text-[10px]"></i>
        </label>
      </div>

      <div class="space-y-2 text-center sm:text-left self-center">
        <div class="flex flex-wrap items-center justify-center sm:justify-start gap-2">
          <button type="button" @click="triggerFileInput()" class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-[#13124E] text-white hover:bg-[#1E1B6B] transition shadow-2xs cursor-pointer inline-flex items-center gap-1.5">
            <i class="fa-solid fa-arrow-up-from-bracket text-[11px]"></i>
            <span>Pilih Foto</span>
          </button>

          @if ($user->avatar)
            <button type="button" @click="confirmDeleteAvatar()" class="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-rose-600 bg-rose-50 hover:bg-rose-100 border border-rose-200 transition cursor-pointer inline-flex items-center gap-1.5">
              <i class="fa-regular fa-trash-can text-[11px]"></i>
              <span>Hapus Foto</span>
            </button>
          @endif

          <button type="button" x-show="hasPendingChange" @click="cancelSelection()" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-gray-600 bg-gray-100 hover:bg-gray-200 transition cursor-pointer inline-flex items-center gap-1">
            <i class="fa-solid fa-xmark text-[11px]"></i>
            <span>Batal</span>
          </button>
        </div>

        <p class="text-[11px] text-gray-400">JPG, PNG, WEBP (Maks. 2MB)</p>
        <p x-show="feedbackText" x-text="feedbackText" class="text-xs text-indigo-600 font-medium"></p>
      </div>
    </div>

    <!-- Section 2: Form Inputs -->
    <div class="p-6 sm:p-7 space-y-6">
      <!-- Informasi Akun -->
      <div>
        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3">Informasi Akun</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <!-- Nama Lengkap (Non-editable / Read-only) -->
          <div>
            <div class="flex items-center justify-between mb-1.5">
              <label for="name" class="block text-xs font-medium text-gray-700">Nama Lengkap</label>
              <span class="text-[10px] text-gray-400">Permanen</span>
            </div>
            <div class="relative">
              <input type="text" id="name" value="{{ $user->name }}" readonly disabled class="w-full px-3.5 py-2.5 bg-gray-50 border border-gray-200 text-xs sm:text-sm rounded-xl text-gray-500 cursor-not-allowed">
              <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400">
                <i class="fa-solid fa-lock text-xs"></i>
              </div>
            </div>
          </div>

          <!-- Email (Non-editable / Read-only) -->
          <div>
            <div class="flex items-center justify-between mb-1.5">
              <label for="email" class="block text-xs font-medium text-gray-700">Alamat Email</label>
              <span class="text-[10px] text-gray-400">Permanen</span>
            </div>
            <div class="relative">
              <input type="email" id="email" value="{{ $user->email }}" readonly disabled class="w-full px-3.5 py-2.5 bg-gray-50 border border-gray-200 text-xs sm:text-sm rounded-xl text-gray-500 cursor-not-allowed">
              <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400">
                <i class="fa-solid fa-lock text-xs"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-100"></div>

      <!-- Keamanan Password -->
      <div>
        <div class="mb-3">
          <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400">Keamanan Password</h4>
          <p class="text-xs text-gray-400 mt-0.5">Kosongkan bagian ini jika Anda tidak ingin mengubah password saat ini.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
          <!-- Password Saat Ini -->
          <div>
            <label for="current_password" class="block text-xs font-medium text-gray-700 mb-1.5">Password Saat Ini</label>
            <div class="relative">
              <input :type="showCurrentPassword ? 'text' : 'password'" id="current_password" name="current_password" autocomplete="current-password" placeholder="Password lama" class="w-full pl-3.5 pr-10 py-2.5 bg-white border border-gray-200 text-xs sm:text-sm rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-[#363199]/20 shadow-2xs transition">
              <button type="button" @click="showCurrentPassword = !showCurrentPassword" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer" aria-label="Lihat password saat ini">
                <i :class="showCurrentPassword ? 'fa-regular fa-eye-slash text-xs' : 'fa-regular fa-eye text-xs'"></i>
              </button>
            </div>
          </div>

          <!-- Password Baru -->
          <div>
            <label for="password" class="block text-xs font-medium text-gray-700 mb-1.5">Password Baru</label>
            <div class="relative">
              <input :type="showNewPassword ? 'text' : 'password'" id="password" name="password" autocomplete="new-password" placeholder="Minimal 8 karakter" class="w-full pl-3.5 pr-10 py-2.5 bg-white border border-gray-200 text-xs sm:text-sm rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-[#363199]/20 shadow-2xs transition">
              <button type="button" @click="showNewPassword = !showNewPassword" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer" aria-label="Lihat password baru">
                <i :class="showNewPassword ? 'fa-regular fa-eye-slash text-xs' : 'fa-regular fa-eye text-xs'"></i>
              </button>
            </div>
          </div>

          <!-- Konfirmasi Password Baru -->
          <div>
            <label for="password_confirmation" class="block text-xs font-medium text-gray-700 mb-1.5">Konfirmasi Password</label>
            <div class="relative">
              <input :type="showConfirmPassword ? 'text' : 'password'" id="password_confirmation" name="password_confirmation" autocomplete="new-password" placeholder="Ulangi password baru" class="w-full pl-3.5 pr-10 py-2.5 bg-white border border-gray-200 text-xs sm:text-sm rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-[#363199]/20 shadow-2xs transition">
              <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer" aria-label="Lihat konfirmasi password">
                <i :class="showConfirmPassword ? 'fa-regular fa-eye-slash text-xs' : 'fa-regular fa-eye text-xs'"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Section 3: Footer Aksi -->
    <div class="bg-gray-50/70 border-t border-gray-100 px-6 sm:px-7 py-4 flex items-center justify-between gap-3">
      <a href="{{ route('dashboard') }}" class="px-4 py-2 rounded-xl text-xs sm:text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-gray-50 transition shadow-2xs">
        Kembali
      </a>
      <button type="submit" class="px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-white bg-[#13124E] hover:bg-[#1E1B6B] shadow-2xs transition inline-flex items-center gap-2 cursor-pointer">
        <i class="fa-solid fa-floppy-disk text-xs"></i>
        <span>Simpan Perubahan</span>
      </button>
    </div>
  </form>

  @if ($user->avatar)
    <form id="deleteAvatarForm" method="POST" action="{{ route('profile.avatar.destroy') }}" class="hidden">
      @csrf
      @method('DELETE')
    </form>
  @endif

  <!-- Modal Cropper Foto Profil (Sleek Style ala Instagram) -->
  <div x-show="cropperModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-slate-950/75 backdrop-blur-xs transition-opacity duration-200" role="dialog" aria-modal="true" aria-labelledby="cropperModalTitle" @click.self="closeCropperModal()" @keydown.escape.window="closeCropperModal()">
    <div class="relative w-full max-w-lg bg-white rounded-2xl shadow-2xl border border-gray-150 overflow-hidden flex flex-col">
      
      <!-- Modal Header -->
      <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100 bg-white">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-lg bg-indigo-50 text-[#13124E] flex items-center justify-center text-sm font-semibold">
            <i class="fa-solid fa-crop-simple"></i>
          </div>
          <div>
            <h3 id="cropperModalTitle" class="text-sm sm:text-base font-bold text-[#13124E] leading-tight">Sesuaikan Foto Profil</h3>
            <p class="text-[11px] text-gray-400">Geser, perbesar, dan putar foto agar pas di dalam lingkaran profil.</p>
          </div>
        </div>
        <button type="button" @click="closeCropperModal()" class="w-8 h-8 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 flex items-center justify-center transition cursor-pointer" aria-label="Tutup modal">
          <i class="fa-solid fa-xmark text-sm"></i>
        </button>
      </div>

      <!-- Modal Body: Crop Viewport -->
      <div class="p-4 space-y-3 bg-gray-50/60">
        <!-- Crop Container -->
        <div class="relative w-full h-72 sm:h-80 bg-slate-950 rounded-xl overflow-hidden flex items-center justify-center shadow-inner circle-cropper">
          <img x-ref="cropperImage" src="" alt="Foto untuk dipotong" class="max-w-full max-h-full block">
        </div>

        <!-- Sleek Controls: Zoom & Rotate & Live Circular Thumbnail -->
        <div class="bg-white p-3 rounded-xl border border-gray-200/80 shadow-2xs space-y-2.5">
          <!-- Zoom Slider Row -->
          <div class="flex items-center gap-3">
            <button type="button" @click="zoom(-0.1)" class="w-8 h-8 rounded-lg text-gray-600 hover:bg-gray-100 border border-gray-200 flex items-center justify-center transition cursor-pointer shrink-0" title="Perkecil">
              <i class="fa-solid fa-magnifying-glass-minus text-xs"></i>
            </button>
            <input type="range" x-ref="zoomRange" :min="zoomMin" :max="zoomMax" step="0.01" :value="zoomVal" @input="onZoomSlider($event.target.value)" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#13124E]" aria-label="Zoom foto">
            <button type="button" @click="zoom(0.1)" class="w-8 h-8 rounded-lg text-gray-600 hover:bg-gray-100 border border-gray-200 flex items-center justify-center transition cursor-pointer shrink-0" title="Perbesar">
              <i class="fa-solid fa-magnifying-glass-plus text-xs"></i>
            </button>
          </div>

          <!-- Action Buttons Row (Rotate & Flip & Reset & Preview) -->
          <div class="flex items-center justify-between pt-1 border-t border-gray-100">
            <div class="flex items-center gap-1.5">
              <button type="button" @click="rotate(-90)" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 border border-gray-200 transition cursor-pointer flex items-center gap-1" title="Putar Kiri 90°">
                <i class="fa-solid fa-rotate-left text-[11px]"></i>
                <span class="hidden sm:inline">Putar Kiri</span>
              </button>
              <button type="button" @click="rotate(90)" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 border border-gray-200 transition cursor-pointer flex items-center gap-1" title="Putar Kanan 90°">
                <i class="fa-solid fa-rotate-right text-[11px]"></i>
                <span class="hidden sm:inline">Putar Kanan</span>
              </button>
              <button type="button" @click="flip()" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 border border-gray-200 transition cursor-pointer flex items-center gap-1" title="Cermin Horizontal">
                <i class="fa-solid fa-arrows-left-right text-[11px]"></i>
              </button>
              <button type="button" @click="resetCrop()" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition cursor-pointer" title="Reset Posisi">
                Reset
              </button>
            </div>

            <!-- Mini Preview Circle -->
            <div class="flex items-center gap-2">
              <span class="text-[10px] text-gray-400 font-medium hidden sm:inline">Hasil:</span>
              <div class="cropper-preview-thumb ring-2 ring-indigo-100 shadow-2xs bg-gray-100"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal Footer -->
      <div class="flex items-center justify-between px-5 py-3 border-t border-gray-100 bg-white">
        <button type="button" @click="closeCropperModal()" class="px-4 py-2 rounded-xl text-xs font-medium text-gray-600 bg-white border border-gray-200 hover:bg-gray-50 transition shadow-2xs cursor-pointer">
          Batal
        </button>
        <button type="button" @click="applyCrop()" class="px-5 py-2 rounded-xl text-xs font-semibold text-white bg-[#13124E] hover:bg-[#1E1B6B] transition shadow-2xs cursor-pointer flex items-center gap-2">
          <i class="fa-solid fa-check text-xs"></i>
          <span>Gunakan Foto</span>
        </button>
      </div>

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

  <!-- Cropper.js Script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>

  <script>
    function profileManager(config) {
      return {
        previewSrc: config.originalAvatar,
        originalAvatar: config.originalAvatar,
        fallbackAvatar: config.fallbackAvatar,
        removeAvatarVal: '0',
        feedbackText: '',
        hasPendingChange: false,
        showCurrentPassword: false,
        showNewPassword: false,
        showConfirmPassword: false,
        cropperModalOpen: false,
        zoomVal: 1,
        zoomMin: 0.1,
        zoomMax: 3,
        cropper: null,
        scaleX: 1,
        activeObjectUrl: null,

        triggerFileInput() {
          this.$refs.rawAvatarInput.click();
        },

        handleFileSelect(e) {
          const file = e.target.files && e.target.files[0];
          if (!file) return;

          if (file.size > 10 * 1024 * 1024) {
            alert('Ukuran file foto melebihi batas maksimal 10MB.');
            this.$refs.rawAvatarInput.value = '';
            return;
          }

          if (!file.type.match(/^image\/(png|jpeg|jpg|webp)$/)) {
            alert('Format file tidak didukung. Harap pilih gambar dengan format JPG, PNG, atau WEBP.');
            this.$refs.rawAvatarInput.value = '';
            return;
          }

          const reader = new FileReader();
          const self = this;
          reader.onload = function (event) {
            self.openCropperModal(event.target.result);
          };
          reader.readAsDataURL(file);
        },

        openCropperModal(imageSrc) {
          const self = this;
          this.cropperModalOpen = true;
          document.body.classList.add('overflow-hidden');

          this.$nextTick(() => {
            const imgElem = self.$refs.cropperImage;

            if (self.cropper) {
              self.cropper.destroy();
              self.cropper = null;
            }

            imgElem.onload = function () {
              self.scaleX = 1;

              if (self.cropper) {
                self.cropper.destroy();
                self.cropper = null;
              }

              self.cropper = new Cropper(imgElem, {
                aspectRatio: 1,
                viewMode: 1,
                dragMode: 'move',
                autoCropArea: 0.85,
                restore: false,
                guides: false,
                center: true,
                highlight: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
                preview: '.cropper-preview-thumb',
                ready() {
                  const imageData = self.cropper.getImageData();
                  const baseRatio = imageData.width / imageData.naturalWidth;
                  self.zoomMin = (baseRatio * 0.4).toFixed(2);
                  self.zoomMax = (baseRatio * 3.5).toFixed(2);
                  self.zoomVal = baseRatio.toFixed(2);
                },
                zoom(e) {
                  if (e.detail && typeof e.detail.ratio === 'number') {
                    self.zoomVal = e.detail.ratio.toFixed(2);
                  }
                }
              });
            };

            imgElem.src = imageSrc;
          });
        },

        closeCropperModal() {
          this.cropperModalOpen = false;
          document.body.classList.remove('overflow-hidden');

          if (this.cropper) {
            this.cropper.destroy();
            this.cropper = null;
          }
          if (this.$refs.rawAvatarInput) {
            this.$refs.rawAvatarInput.value = '';
          }
        },

        onZoomSlider(val) {
          if (!this.cropper) return;
          this.zoomVal = val;
          this.cropper.zoomTo(parseFloat(val));
        },

        zoom(delta) {
          if (!this.cropper) return;
          this.cropper.zoom(delta);
        },

        rotate(deg) {
          if (!this.cropper) return;
          this.cropper.rotate(deg);
        },

        flip() {
          if (!this.cropper) return;
          this.scaleX = -this.scaleX;
          this.cropper.scaleX(this.scaleX);
        },

        resetCrop() {
          if (!this.cropper) return;
          this.scaleX = 1;
          this.cropper.reset();
          const imageData = this.cropper.getImageData();
          this.zoomVal = (imageData.width / imageData.naturalWidth).toFixed(2);
        },

        applyCrop() {
          if (!this.cropper) return;

          const canvas = this.cropper.getCroppedCanvas({
            width: 512,
            height: 512,
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high',
          });

          if (!canvas) {
            alert('Gagal memproses gambar foto profil.');
            return;
          }

          const self = this;
          canvas.toBlob(function (blob) {
            if (!blob) {
              alert('Gagal membuat file foto hasil crop.');
              return;
            }

            const croppedFile = new File([blob], 'avatar_' + Date.now() + '.jpg', { type: 'image/jpeg' });
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(croppedFile);
            self.$refs.avatarInput.files = dataTransfer.files;

            if (self.activeObjectUrl) {
              URL.revokeObjectURL(self.activeObjectUrl);
            }
            self.activeObjectUrl = URL.createObjectURL(blob);
            self.previewSrc = self.activeObjectUrl;
            self.removeAvatarVal = '0';
            if (self.$refs.removeAvatarInput) {
              self.$refs.removeAvatarInput.value = '0';
            }
            self.feedbackText = 'Foto siap disimpan (' + (blob.size / 1024).toFixed(1) + ' KB). Klik "Simpan Perubahan" di bawah.';
            self.hasPendingChange = true;

            self.closeCropperModal();
          }, 'image/jpeg', 0.92);
        },

        cancelSelection() {
          this.$refs.avatarInput.value = '';
          if (this.$refs.rawAvatarInput) {
            this.$refs.rawAvatarInput.value = '';
          }
          if (this.activeObjectUrl) {
            URL.revokeObjectURL(this.activeObjectUrl);
            this.activeObjectUrl = null;
          }
          this.previewSrc = this.originalAvatar;
          this.removeAvatarVal = '0';
          if (this.$refs.removeAvatarInput) {
            this.$refs.removeAvatarInput.value = '0';
          }
          this.feedbackText = '';
          this.hasPendingChange = false;
        },

        confirmDeleteAvatar() {
          if (!confirm('Apakah Anda yakin ingin menghapus foto profil ini dan kembali ke avatar standar?')) {
            return;
          }

          const deleteForm = document.getElementById('deleteAvatarForm');
          if (deleteForm) {
            deleteForm.submit();
          } else {
            this.removeAvatarAction();
          }
        },

        removeAvatarAction() {
          this.$refs.avatarInput.value = '';
          if (this.$refs.rawAvatarInput) {
            this.$refs.rawAvatarInput.value = '';
          }
          if (this.activeObjectUrl) {
            URL.revokeObjectURL(this.activeObjectUrl);
            this.activeObjectUrl = null;
          }
          this.previewSrc = this.fallbackAvatar;
          this.removeAvatarVal = '1';
          if (this.$refs.removeAvatarInput) {
            this.$refs.removeAvatarInput.value = '1';
          }
          this.feedbackText = 'Foto saat ini akan dihapus setelah Anda menekan tombol "Simpan Perubahan".';
          this.hasPendingChange = true;
        }
      };
    }
  </script>
@endsection