@extends('layouts.main')

@section('title', 'Edit Profil')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-4">
    <div class="mx-auto">
        <div class="bg-white shadow rounded-xl mb-4 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h5 class="m-0 flex items-center text-gray-800 font-semibold text-lg">
                    <i class="fas fa-user-edit fa-lg mr-3"></i>Edit Profil
                </h5>
            </div>

            <div class="p-6">
                    @if(session('success'))
                        <div class="border border-emerald-200 bg-emerald-50 text-emerald-800 px-4 py-3 rounded mb-4 flex items-start">
                            <i class="fas fa-check-circle mr-2 mt-0.5"></i>
                            <div>{{ session('success') }}</div>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="border border-red-200 bg-red-50 text-red-800 px-4 py-3 rounded mb-4 flex items-start">
                            <i class="fas fa-exclamation-circle mr-2 mt-0.5"></i>
                            <div>{{ session('error') }}</div>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="border border-red-200 bg-red-50 text-red-800 px-4 py-3 rounded mb-4">
                            <ul class="list-disc pl-5 space-y-1">
                                @foreach($errors->all() as $error)
                                    <li class="flex"><i class="fas fa-exclamation-circle mr-2 mt-0.5"></i><span>{{ $error }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Foto Profil Card -->
                    <div class="bg-white shadow-sm rounded-lg mb-4">
                        <div class="text-center p-6">
                            <div class="relative inline-block mb-2">
                                <img id="preview-foto"
                                    src="{{ $user->profile && $user->profile->foto 
                                        ? (file_exists(public_path('assets/images/profilefoto/' . $user->profile->foto)) 
                                            ? asset('assets/images/profilefoto/' . $user->profile->foto)
                                            : asset('assets/images/profilefoto/default-profile.png'))
                                        : asset('assets/images/profilefoto/default-profile.png') }}"
                                    class="rounded-full shadow-sm h-40 w-40 object-cover ring-4 ring-white"
                                    alt="Foto profil">
                            </div>
                            <div class="d-flex justify-content-center gap-2" style="margin-top: -8px;">
                                <button type="button" class="btn-3d-camera" 
                                        id="btn-open-camera-modal" 
                                        title="Ambil dengan Kamera">
                                    <i class="fas fa-camera"></i>
                                </button>
                                <button type="button" class="btn-3d-upload" 
                                        id="btn-open-upload-modal" 
                                        title="Upload dari File">
                                    <i class="fas fa-file-upload"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('profile.update', auth()->user()->id) }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf
                        @method('PUT')

                        <div class="space-y-4">
                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">ID</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="text" class="w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2" value="{{ auth()->user()->id }}" disabled>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Nama Lengkap</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="text" class="w-full rounded-md border border-gray-300 px-3 py-2" name="name" value="{{ auth()->user()->name }}" required>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Email</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="email" class="w-full rounded-md border border-gray-300 px-3 py-2" name="email" value="{{ auth()->user()->email }}" required>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">No. HP</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="tel" class="w-full rounded-md border border-gray-300 px-3 py-2" name="no_hp" value="{{ auth()->user()->profile->no_hp ?? '' }}" 
                                            pattern="[0-9]{10,13}" 
                                            title="Masukkan nomor HP yang valid (10-13 digit angka)" 
                                            maxlength="13"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                            onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                </div>
                            </div>

                            <div class="sm:flex sm:items-start">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Alamat</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <textarea class="w-full rounded-md border border-gray-300 px-3 py-2" name="alamat" rows="3" maxlength="255">{{ auth()->user()->profile->alamat ?? '' }}</textarea>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Pekerjaan</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="text" class="w-full rounded-md border border-gray-300 px-3 py-2" name="pekerjaan" value="{{ auth()->user()->profile->pekerjaan ?? '' }}">
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Jabatan</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="text" class="w-full rounded-md border border-gray-300 px-3 py-2" name="jabatan" value="{{ auth()->user()->profile->jabatan ?? '' }}">
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Jenis Kelamin</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        @php
                                            $jenisKelaminRaw = old('jenis_kelamin', auth()->user()->profile->jenis_kelamin ?? '');
                                            $jenisKelamin = null;
                                            if (in_array(strtolower($jenisKelaminRaw), ['l', 'laki-laki', 'laki laki', 'laki', 'laki-laki', 'laki-laki'])) {
                                                $jenisKelamin = 'Laki-laki';
                                            } elseif (in_array(strtolower($jenisKelaminRaw), ['p', 'perempuan', 'wanita'])) {
                                                $jenisKelamin = 'Perempuan';
                                            }
                                        @endphp
                                        <select class="select2 w-full" name="jenis_kelamin" required>
                                            <option value="" disabled {{ $jenisKelamin == null ? 'selected' : '' }}>Pilih Jenis Kelamin</option>
                                            <option value="Laki-laki" {{ $jenisKelamin == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                                            <option value="Perempuan" {{ $jenisKelamin == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                                        </select>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Tanggal Lahir</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                    <input type="date" 
                                           class="w-full rounded-md border border-gray-300 px-3 py-2" 
                                           name="tanggal_lahir" 
                                           value="{{ old('tanggal_lahir', auth()->user()->profile->tanggal_lahir ? auth()->user()->profile->tanggal_lahir->format('Y-m-d') : '') }}"
                                           max="{{ date('Y-m-d') }}">
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Provinsi</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <select class="select2 w-full" name="province_id" id="province_id">
                                            <option value="" disabled selected>Pilih Provinsi</option>
                                            @foreach($provinces as $province)
                                                <option value="{{ $province->id }}" {{ old('province_id', $user->profile->province_id ?? '') == $province->id ? 'selected' : '' }}>
                                                    {{ $province->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Kabupaten/Kota</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <select class="select2 w-full" name="regency_id" id="regency_id">
                                            <option value="" disabled selected>Pilih Kabupaten/Kota</option>
                                            @foreach($regencies as $regency)
                                                <option value="{{ $regency->id }}" {{ old('regency_id', $user->profile->regency_id ?? '') == $regency->id ? 'selected' : '' }}>
                                                    {{ $regency->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                </div>
                            </div>

                            <div class="sm:flex sm:items-center">
                                <label class="sm:w-1/3 text-sm font-medium text-gray-700">Kecamatan</label>
                                <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <select class="select2 w-full" name="district_id" id="district_id">
                                            <option value="" disabled selected>Pilih Kecamatan</option>
                                            @foreach($districts as $district)
                                                <option value="{{ $district->id }}"
                                                    {{ (auth()->user()->profile->district_id ?? '') == $district->id ? 'selected' : '' }}>
                                                    {{ $district->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="foto_data" id="foto-input">
                        <input type="file" name="foto_file" id="file-input" class="d-none" accept="image/*">

                        <div class="mt-4 sm:flex sm:justify-end sm:space-x-3">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
                                <i class="fas fa-save mr-2"></i> Simpan Perubahan
                            </button>
                            <a href="{{ route('profile.show', auth()->user()->id) }}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-800 rounded-md shadow hover:bg-gray-200">
                                <i class="fas fa-arrow-left mr-2"></i> Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Tombol Ganti Password -->
            <div class="mb-4">
                <button class="inline-flex items-center w-full justify-center px-4 py-2 border border-red-300 text-red-700 bg-white rounded-md hover:bg-red-50" type="button" data-bs-toggle="collapse" data-bs-target="#passwordCollapse" aria-expanded="false" aria-controls="passwordCollapse">
                    <i class="fas fa-key mr-2"></i> Ganti Password
                </button>
            </div>

            <!-- Konten Ganti Password yang bisa disembunyikan -->
            <div class="collapse mb-4" id="passwordCollapse">
                <div class="bg-white shadow rounded-xl">
                    <div class="p-6">
                        <form action="{{ route('profile.update-password') }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="space-y-4">
                                <div class="sm:flex sm:items-center">
                                    <label class="sm:w-1/3 text-sm font-medium text-gray-700">Password Lama</label>
                                    <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <div class="flex">
                                            <input type="password" class="w-full rounded-md border border-gray-300 px-3 py-2" name="current_password" id="current_password" required>
                                            <button class="ml-2 inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-700 toggle-password" type="button" data-target="current_password">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="sm:flex sm:items-center">
                                    <label class="sm:w-1/3 text-sm font-medium text-gray-700">Password Baru</label>
                                    <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <div class="flex">
                                            <input type="password" class="w-full rounded-md border border-gray-300 px-3 py-2" name="new_password" id="new_password" required minlength="8">
                                            <button class="ml-2 inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-700 toggle-password" type="button" data-target="new_password">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                        <small class="text-gray-500">Password minimal 8 karakter</small>
                                    </div>
                                </div>

                                <div class="sm:flex sm:items-center">
                                    <label class="sm:w-1/3 text-sm font-medium text-gray-700">Konfirmasi Password</label>
                                    <div class="sm:w-2/3 mt-2 sm:mt-0">
                                        <div class="flex">
                                            <input type="password" class="w-full rounded-md border border-gray-300 px-3 py-2" name="new_password_confirmation" id="new_password_confirmation" required minlength="8">
                                            <button class="ml-2 inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-700 toggle-password" type="button" data-target="new_password_confirmation">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 sm:flex sm:justify-end">
                                <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
                                    <i class="fas fa-save mr-2"></i> Update Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Kamera -->
<div class="modal fade" id="modalCamera" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ambil Foto dengan Kamera</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <!-- Video/Canvas Area -->
                <div class="text-center mb-3">
                    <video id="camera" class="w-100 rounded" autoplay playsinline 
                           style="display: none; max-height: 400px; background: #000;"></video>
                    <canvas id="canvas" class="w-100 rounded" 
                            style="display: none; max-height: 400px;"></canvas>
                </div>

                <!-- Pilihan Kamera (Hidden by default, shown if multiple cameras) -->
                <div class="mb-2" id="camera-select-container" style="display: none;">
                    <select id="camera-select" class="form-select form-select-sm">
                        <option value="">Memuat kamera...</option>
                    </select>
                </div>

                <!-- Tombol Aksi -->
                <div class="d-flex justify-content-center gap-2">
                    <button id="start-camera" class="btn btn-sm btn-primary" style="display: none;">
                        <i class="fas fa-camera"></i> Buka
                    </button>
                    <button id="take-photo" class="btn btn-sm btn-success" style="display: none;">
                        <i class="fas fa-camera"></i> Ambil
                    </button>
                    <button id="retake-photo" class="btn btn-sm btn-warning" style="display: none;">
                        <i class="fas fa-redo"></i> Ulangi
                    </button>
                    <button id="switch-camera" class="btn btn-sm btn-secondary" style="display: none;">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" id="btn-close-camera-modal">Tutup</button>
                <button type="button" class="btn btn-sm btn-primary" id="save-photo-camera">Simpan</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Upload -->
<div class="modal fade" id="modalUpload" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Foto dari File</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div class="mb-3">
                    <label class="form-label">Pilih file gambar:</label>
                    <input type="file" id="file-input-modal" class="form-control" accept="image/*">
                    <small class="form-text text-muted">Format: JPG, PNG, GIF (Maks. 20MB)</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" id="btn-close-upload-modal">Tutup</button>
                <button type="button" class="btn btn-sm btn-primary" id="save-photo-upload">Simpan</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    let camera_stream = null;
    let video = document.getElementById('camera');
    let canvas = document.getElementById('canvas');
    let photoTaken = false;
    const modalCamera = document.getElementById('modalCamera');
    const modalUpload = document.getElementById('modalUpload');
    let availableCameras = [];
    let currentCameraId = null;

    // Fungsi untuk membuka modal kamera
    function openCameraModal() {
        if (!modalCamera) {
            return;
        }
        
        // Coba menggunakan jQuery Bootstrap modal (jika tersedia)
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $(modalCamera).modal('show');
            // Muat daftar kamera dan mulai kamera setelah modal terbuka
            $(modalCamera).on('shown.bs.modal', function() {
                populateCameraSelect();
                setTimeout(function() {
                    startCamera();
                }, 500);
            });
            return;
        }
        
        // Coba menggunakan Bootstrap 5 (jika tersedia)
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modalInstance = new bootstrap.Modal(modalCamera);
            modalInstance.show();
            setTimeout(function() {
                populateCameraSelect();
                setTimeout(function() {
                    startCamera();
                }, 500);
            }, 300);
            return;
        }
        
        // Fallback: Buka modal secara manual dengan vanilla JS
        modalCamera.classList.add('show');
        modalCamera.style.display = 'block';
        modalCamera.setAttribute('aria-hidden', 'false');
        modalCamera.setAttribute('aria-modal', 'true');
        document.body.classList.add('modal-open');
        
        // Tambahkan backdrop
        let backdrop = document.querySelector('.modal-backdrop');
        if (!backdrop) {
            backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.style.cssText = 'position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5);';
            document.body.appendChild(backdrop);
        }
        
        // Event untuk menutup modal saat backdrop diklik
        backdrop.onclick = function() {
            closeCameraModal();
        };
        
        // Muat daftar kamera dan mulai kamera
        populateCameraSelect();
        setTimeout(function() {
            startCamera();
        }, 500);
        
        // Trigger event shown.bs.modal secara manual
        setTimeout(function() {
            const shownEvent = new Event('shown.bs.modal', { bubbles: true });
            modalCamera.dispatchEvent(shownEvent);
        }, 300);
    }
    
    // Fungsi untuk menutup modal kamera
    function closeCameraModal() {
        const modalCamera = document.getElementById('modalCamera');
        
        if (!modalCamera) return;
        
        // Coba menggunakan jQuery
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $(modalCamera).modal('hide');
            return;
        }
        
        // Coba menggunakan Bootstrap 5
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const inst = typeof bootstrap.Modal.getInstance === 'function' 
                ? bootstrap.Modal.getInstance(modalCamera) 
                : new bootstrap.Modal(modalCamera);
            if (inst) {
                inst.hide();
                return;
            }
        }
        
        // Fallback: Tutup modal secara manual
        modalCamera.classList.remove('show');
        modalCamera.style.display = 'none';
        modalCamera.setAttribute('aria-hidden', 'true');
        modalCamera.removeAttribute('aria-modal');
        document.body.classList.remove('modal-open');
        
        // Hapus backdrop
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) {
            backdrop.remove();
        }
        
        // Trigger event hidden.bs.modal secara manual
        const hiddenEvent = new Event('hidden.bs.modal', { bubbles: true });
        modalCamera.dispatchEvent(hiddenEvent);
    }
    
    // Fungsi untuk membuka modal upload
    function openUploadModal() {
        const modalUpload = document.getElementById('modalUpload');
        
        if (!modalUpload) {
            return;
        }
        
        // Coba menggunakan jQuery Bootstrap modal (jika tersedia)
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $(modalUpload).modal('show');
            return;
        }
        
        // Coba menggunakan Bootstrap 5 (jika tersedia)
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modalInstance = new bootstrap.Modal(modalUpload);
            modalInstance.show();
            return;
        }
        
        // Fallback: Buka modal secara manual dengan vanilla JS
        modalUpload.classList.add('show');
        modalUpload.style.display = 'block';
        modalUpload.setAttribute('aria-hidden', 'false');
        modalUpload.setAttribute('aria-modal', 'true');
        document.body.classList.add('modal-open');
        
        // Tambahkan backdrop
        let backdrop = document.querySelector('.modal-backdrop');
        if (!backdrop) {
            backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.style.cssText = 'position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5);';
            document.body.appendChild(backdrop);
        }
        
        // Event untuk menutup modal saat backdrop diklik
        backdrop.onclick = function() {
            closeUploadModal();
        };
        
        // Trigger event shown.bs.modal secara manual
        setTimeout(function() {
            const shownEvent = new Event('shown.bs.modal', { bubbles: true });
            modalUpload.dispatchEvent(shownEvent);
        }, 300);
    }
    
    // Fungsi untuk menutup modal upload
    function closeUploadModal() {
        const modalUpload = document.getElementById('modalUpload');
        
        if (!modalUpload) return;
        
        // Coba menggunakan jQuery
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $(modalUpload).modal('hide');
            return;
        }
        
        // Coba menggunakan Bootstrap 5
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const inst = typeof bootstrap.Modal.getInstance === 'function' 
                ? bootstrap.Modal.getInstance(modalUpload) 
                : new bootstrap.Modal(modalUpload);
            if (inst) {
                inst.hide();
                return;
            }
        }
        
        // Fallback: Tutup modal secara manual
        modalUpload.classList.remove('show');
        modalUpload.style.display = 'none';
        modalUpload.setAttribute('aria-hidden', 'true');
        modalUpload.removeAttribute('aria-modal');
        document.body.classList.remove('modal-open');
        
        // Hapus backdrop
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) {
            backdrop.remove();
        }
        
        // Trigger event hidden.bs.modal secara manual
        const hiddenEvent = new Event('hidden.bs.modal', { bubbles: true });
        modalUpload.dispatchEvent(hiddenEvent);
    }

    // Event listener untuk tombol buka modal kamera
    const btnOpenCameraModal = document.getElementById('btn-open-camera-modal');
    if (btnOpenCameraModal) {
        btnOpenCameraModal.addEventListener('click', function(e) {
            e.preventDefault();
            openCameraModal();
        });
    }
    
    // Event listener untuk tombol upload - langsung buka file picker
    const btnOpenUploadModal = document.getElementById('btn-open-upload-modal');
    if (btnOpenUploadModal) {
        btnOpenUploadModal.addEventListener('click', function(e) {
            e.preventDefault();
            // Langsung trigger file input di form utama
            const fileInput = document.getElementById('file-input');
            if (fileInput) {
                fileInput.click();
            }
        });
    }
    
    // Event listener untuk tombol tutup modal kamera
    const btnCloseCameraModal = document.getElementById('btn-close-camera-modal');
    if (btnCloseCameraModal) {
        btnCloseCameraModal.addEventListener('click', function(e) {
            e.preventDefault();
            closeCameraModal();
        });
    }
    
    // Event listener untuk tombol close (X) di header modal kamera
    const btnCloseCameraHeader = document.querySelector('#modalCamera .btn-close');
    if (btnCloseCameraHeader) {
        btnCloseCameraHeader.addEventListener('click', function(e) {
            e.preventDefault();
            closeCameraModal();
        });
    }
    
    // Event listener untuk tombol tutup modal upload
    const btnCloseUploadModal = document.getElementById('btn-close-upload-modal');
    if (btnCloseUploadModal) {
        btnCloseUploadModal.addEventListener('click', function(e) {
            e.preventDefault();
            closeUploadModal();
        });
    }
    
    // Event listener untuk tombol close (X) di header modal upload
    const btnCloseUploadHeader = document.querySelector('#modalUpload .btn-close');
    if (btnCloseUploadHeader) {
        btnCloseUploadHeader.addEventListener('click', function(e) {
            e.preventDefault();
            closeUploadModal();
        });
    }

    // Fungsi untuk mendapatkan daftar kamera yang tersedia
    async function getAvailableCameras() {
        try {
            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
                return [];
            }
            
            const devices = await navigator.mediaDevices.enumerateDevices();
            const cameras = devices.filter(device => device.kind === 'videoinput');
            return cameras;
        } catch (err) {
            return [];
        }
    }
    
    // Fungsi untuk mengisi dropdown pilihan kamera
    async function populateCameraSelect() {
        const cameraSelect = document.getElementById('camera-select');
        const cameraSelectContainer = document.getElementById('camera-select-container');
        
        if (!cameraSelect) return;
        
        // Kosongkan dropdown
        cameraSelect.innerHTML = '<option value="">Memuat kamera...</option>';
        
        try {
            // Minta izin akses kamera terlebih dahulu untuk mendapatkan label kamera
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            stream.getTracks().forEach(track => track.stop());
            
            // Sekarang dapatkan daftar kamera dengan label
            availableCameras = await getAvailableCameras();
            
            if (availableCameras.length === 0) {
                cameraSelect.innerHTML = '<option value="">Tidak ada kamera ditemukan</option>';
                return;
            }
            
            // Isi dropdown
            cameraSelect.innerHTML = '';
            availableCameras.forEach((camera, index) => {
                const option = document.createElement('option');
                option.value = camera.deviceId;
                option.textContent = camera.label || `Kamera ${index + 1}`;
                cameraSelect.appendChild(option);
            });
            
            // Pilih kamera pertama secara default
            if (availableCameras.length > 0) {
                currentCameraId = availableCameras[0].deviceId;
                cameraSelect.value = currentCameraId;
            }
            
            // Tampilkan dropdown jika ada lebih dari 1 kamera
            if (availableCameras.length > 1) {
                cameraSelectContainer.style.display = 'block';
            } else {
                cameraSelectContainer.style.display = 'none';
            }
            
        } catch (err) {
            cameraSelect.innerHTML = '<option value="">Error memuat kamera</option>';
        }
    }

    // Fungsi untuk memulai kamera
    async function startCamera(cameraId = null) {
        try {
            // Hentikan stream yang ada jika ada
            if (camera_stream) {
                camera_stream.getTracks().forEach(track => {
                    track.stop();
                });
            }
            
            // Cek apakah getUserMedia tersedia
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                throw new Error('getUserMedia tidak didukung di browser ini atau tidak dalam secure context (HTTPS/localhost)');
            }
            
            // Gunakan cameraId jika diberikan, atau gunakan currentCameraId, atau default ke facingMode
            const cameraSelect = document.getElementById('camera-select');
            const selectedCameraId = cameraId || (cameraSelect ? cameraSelect.value : null) || currentCameraId;
            
            let constraints;
            if (selectedCameraId) {
                constraints = { 
                    video: { 
                        deviceId: { exact: selectedCameraId },
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }, 
                    audio: false 
                };
            } else {
                // Fallback ke facingMode jika tidak ada deviceId
                constraints = { 
                    video: { 
                        facingMode: 'user', // Gunakan kamera depan
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }, 
                    audio: false 
                };
            }
            
            camera_stream = await navigator.mediaDevices.getUserMedia(constraints);
            
            // Simpan deviceId dari track yang aktif
            const videoTrack = camera_stream.getVideoTracks()[0];
            if (videoTrack) {
                const settings = videoTrack.getSettings();
                currentCameraId = settings.deviceId;
            }
            
            video.srcObject = camera_stream;
            video.style.display = 'block';
            canvas.style.display = 'none';
            
            document.getElementById('start-camera').style.display = 'none';
            document.getElementById('take-photo').style.display = 'inline-block';
            document.getElementById('retake-photo').style.display = 'none';
            
            // Tampilkan tombol ganti kamera jika ada lebih dari 1 kamera
            if (availableCameras.length > 1) {
                document.getElementById('switch-camera').style.display = 'inline-block';
            }
            
            photoTaken = false;
            
            await video.play();
        } catch (err) {
            alert('Tidak dapat mengakses kamera. Pastikan Anda memberikan izin akses kamera. Error: ' + err.message);
            document.getElementById('start-camera').style.display = 'inline-block';
        }
    }

    // Start camera ketika tombol diklik
    const startCameraBtn = document.getElementById('start-camera');
    if (startCameraBtn) {
        startCameraBtn.addEventListener('click', function() {
            startCamera();
        });
    }

    // Event listener untuk modal kamera
    if (modalCamera) {
        modalCamera.addEventListener('hidden.bs.modal', function (e) {
            // Hentikan kamera
            if (camera_stream) {
                camera_stream.getTracks().forEach(track => track.stop());
                camera_stream = null;
            }
            video.srcObject = null;
            video.style.display = 'none';
            canvas.style.display = 'none';
            document.getElementById('start-camera').style.display = 'inline-block';
            document.getElementById('take-photo').style.display = 'none';
            document.getElementById('retake-photo').style.display = 'none';
            const switchCameraBtn = document.getElementById('switch-camera');
            if (switchCameraBtn) {
                switchCameraBtn.style.display = 'none';
            }
            photoTaken = false;
        });
    }
    
    // Event listener untuk modal upload
    if (modalUpload) {
        modalUpload.addEventListener('hidden.bs.modal', function (e) {
            // Reset file input jika modal ditutup tanpa save
            const modalFileInput = document.getElementById('file-input-modal');
            if (modalFileInput && !modalFileInput.files || !modalFileInput.files[0]) {
                // Jika tidak ada file yang dipilih, reset preview jika belum disimpan
                const fotoInput = document.getElementById('foto-input');
                if (fotoInput && !fotoInput.value) {
                    // Tidak perlu reset preview jika sudah ada foto sebelumnya
                }
            }
        });
    }

    // Take photo
    const takePhotoBtn = document.getElementById('take-photo');
    if (takePhotoBtn) {
        takePhotoBtn.addEventListener('click', function() {
            if (!camera_stream) {
                alert('Kamera belum aktif. Silakan klik "Buka Kamera" terlebih dahulu.');
                return;
            }
            
            // Set ukuran canvas agar hasil tidak buram (sesuai dengan video)
            const videoWidth = video.videoWidth || 1280;
            const videoHeight = video.videoHeight || 720;
            
            canvas.width = videoWidth;
            canvas.height = videoHeight;
            
            const ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            video.style.display = 'none';
            canvas.style.display = 'block';
            this.style.display = 'none';
            document.getElementById('retake-photo').style.display = 'inline-block';
            photoTaken = true;
            
            // Hentikan kamera setelah mengambil foto
            if (camera_stream) {
                camera_stream.getTracks().forEach(track => {
                    track.stop();
                });
                camera_stream = null;
            }
        });
    }

    // Retake photo
    const retakePhotoBtn = document.getElementById('retake-photo');
    if (retakePhotoBtn) {
        retakePhotoBtn.addEventListener('click', function() {
            canvas.style.display = 'none';
            // Mulai ulang kamera dengan kamera yang sama
            startCamera(currentCameraId);
        });
    }
    
    // Switch camera button
    const switchCameraBtn = document.getElementById('switch-camera');
    if (switchCameraBtn) {
        switchCameraBtn.addEventListener('click', function() {
            if (availableCameras.length < 2) {
                alert('Hanya ada 1 kamera yang tersedia');
                return;
            }
            
            // Cari index kamera saat ini
            const currentIndex = availableCameras.findIndex(cam => cam.deviceId === currentCameraId);
            // Pilih kamera berikutnya (wrap around jika sudah di akhir)
            const nextIndex = (currentIndex + 1) % availableCameras.length;
            const nextCamera = availableCameras[nextIndex];
            
            currentCameraId = nextCamera.deviceId;
            
            // Update dropdown
            const cameraSelect = document.getElementById('camera-select');
            if (cameraSelect) {
                cameraSelect.value = currentCameraId;
            }
            
            // Restart kamera dengan kamera baru
            startCamera(currentCameraId);
        });
    }
    
    // Camera select change
    const cameraSelect = document.getElementById('camera-select');
    if (cameraSelect) {
        cameraSelect.addEventListener('change', function() {
            const selectedCameraId = this.value;
            if (selectedCameraId && camera_stream) {
                currentCameraId = selectedCameraId;
                startCamera(selectedCameraId);
            }
        });
    }

    // File input change (untuk upload file biasa di form utama)
    const fileInput = document.getElementById('file-input');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview-foto').src = e.target.result;
                    // Reset foto_data karena menggunakan file upload
                    document.getElementById('foto-input').value = '';
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    }

    // File input change (untuk upload file di modal)
    const fileInputModal = document.getElementById('file-input-modal');
    if (fileInputModal) {
        fileInputModal.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview-foto').src = e.target.result;
                    // Set foto_data dengan base64 dari file yang dipilih
                    document.getElementById('foto-input').value = e.target.result;
                    // Reset file input di form utama agar tidak konflik
                    document.getElementById('file-input').value = '';
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    }

    // Save photo from camera
    const savePhotoCameraBtn = document.getElementById('save-photo-camera');
    if (savePhotoCameraBtn) {
        savePhotoCameraBtn.addEventListener('click', function() {
            if (photoTaken) {
                const image_data_url = canvas.toDataURL('image/jpeg');
                
                const previewFoto = document.getElementById('preview-foto');
                const fotoInput = document.getElementById('foto-input');
                
                if (previewFoto) {
                    previewFoto.src = image_data_url;
                }
                
                if (fotoInput) {
                    fotoInput.value = image_data_url;
                }
                
                // Reset file input agar tidak konflik
                document.getElementById('file-input').value = '';
                document.getElementById('file-input-modal').value = '';
            } else {
                alert('Silakan ambil foto terlebih dahulu');
                return;
            }
            
            if (camera_stream) {
                camera_stream.getTracks().forEach(track => track.stop());
            }
            
            closeCameraModal();
        });
    }
    
    // Save photo from upload
    const savePhotoUploadBtn = document.getElementById('save-photo-upload');
    if (savePhotoUploadBtn) {
        savePhotoUploadBtn.addEventListener('click', function() {
            const modalFileInput = document.getElementById('file-input-modal');
            if (modalFileInput && modalFileInput.files && modalFileInput.files[0]) {
                // File sudah di-handle oleh event listener file-input-modal
                // Reset file input di form utama
                document.getElementById('file-input').value = '';
                closeUploadModal();
            } else {
                alert('Silakan pilih file terlebih dahulu');
            }
        });
    }

    // Setup CSRF token untuk AJAX
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Handle province change
    $('#province_id').on('change', function() {
        var provinceId = $(this).val();
        $('#regency_id').empty().append('<option value="" disabled selected>Pilih Kabupaten/Kota</option>');
        $('#district_id').empty().append('<option value="" disabled selected>Pilih Kecamatan</option>');
        
        if(provinceId) {
            $.ajax({
                url: '/profile/ajax/regencies/' + provinceId,
                type: "GET",
                dataType: "json",
                beforeSend: function() {
                    $('#regency_id').prop('disabled', true);
                    $('#regency_id').html('<option value="" disabled selected>Loading...</option>');
                },
                success: function(data) {
                    $('#regency_id').empty();
                    $('#regency_id').append('<option value="" disabled selected>Pilih Kabupaten/Kota</option>');
                    $.each(data, function(key, value) {
                        $('#regency_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    // Jika ada nilai regency yang tersimpan, pilih nilai tersebut
                    const selectedRegency = '{{ old("regency_id", $user->profile->regency_id ?? "") }}';
                    if (selectedRegency && provinceId == '{{ old("province_id", $user->profile->province_id ?? "") }}') {
                        $('#regency_id').val(selectedRegency).trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    alert('Gagal memuat data kabupaten/kota. Silakan coba lagi.');
                },
                complete: function() {
                    $('#regency_id').prop('disabled', false);
                }
            });
        }
    });

    // Handle regency change
    $('#regency_id').on('change', function() {
        var regencyId = $(this).val();
        $('#district_id').empty().append('<option value="" disabled selected>Pilih Kecamatan</option>');
        
        if(regencyId) {
            $.ajax({
                url: '/profile/ajax/districts/' + regencyId,
                type: "GET",
                dataType: "json",
                beforeSend: function() {
                    $('#district_id').prop('disabled', true);
                    $('#district_id').html('<option value="" disabled selected>Loading...</option>');
                },
                success: function(data) {
                    $('#district_id').empty();
                    $('#district_id').append('<option value="" disabled selected>Pilih Kecamatan</option>');
                    $.each(data, function(key, value) {
                        $('#district_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    // Jika ada nilai district yang tersimpan, pilih nilai tersebut
                    const selectedDistrict = '{{ old("district_id", $user->profile->district_id ?? "") }}';
                    if (selectedDistrict && regencyId == '{{ old("regency_id", $user->profile->regency_id ?? "") }}') {
                        $('#district_id').val(selectedDistrict);
                    }
                },
                error: function(xhr, status, error) {
                    alert('Gagal memuat data kecamatan. Silakan coba lagi.');
                },
                complete: function() {
                    $('#district_id').prop('disabled', false);
                }
            });
        }
    });

    // Load initial values
    const initialProvince = '{{ old("province_id", $user->profile->province_id ?? "") }}';
    if (initialProvince) {
        $('#province_id').val(initialProvince).trigger('change');
    }

    // Password toggle functionality
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });

    // Validasi khusus NPA dihapus. Form profil tidak lagi menggunakan NPA.

    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2({
                width: '100%',
                placeholder: function(){
                    return $(this).find('option[selected]').text();
                },
                allowClear: false
            });
        }
    });
</script>
@endpush

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Seragamkan select2 dengan input box */
    .form-control,
    .select2-container--default .select2-selection--single {
        width: 100% !important;
        min-height: 38px;
        border-radius: 4px !important;
        border: 1px solid #ced4da !important;
        box-shadow: none !important;
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
        background: #fff;
        transition: border-color 0.2s;
        display: block;
    }
    .select2-container--default .select2-selection--single {
        height: 38px !important;
        display: flex;
        align-items: center;
        background: #fff !important;
        border-radius: 4px !important;
        border: 1px solid #ced4da !important;
        box-shadow: none !important;
        font-size: 1rem;
        padding-left: 0.1rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
        padding-left: 0.1rem !important;
        color: #212529;
        font-size: 1rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px !important;
        right: 10px;
    }
    .select2-container--default .select2-selection--single:focus,
    .form-control:focus {
        border-color: #80bdff !important;
        background: #fff;
        outline: 0;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff !important;
        color: #fff;
    }
    .select2-container--default .select2-results__option {
        font-size: 1rem;
    }
    .select2-container {
        width: 100% !important;
    }
    .select2-selection__placeholder {
        color: #b0b8c1 !important;
        font-style: italic;
    }
    .select2-selection__clear {
        display: none !important;
    }
    .select2-container .select2-dropdown {
        border-radius: 4px !important;
        box-shadow: none !important;
        border: 1px solid #ced4da !important;
        left: 0 !important;
        width: 100% !important;
    }
    .select2-results__options {
        border-radius: 4px !important;
        padding: 0.2rem 0;
    }
    
    /* Styling untuk modal kamera */
    #camera, #canvas {
        object-fit: contain;
    }
    
    /* Styling untuk tombol 3D modern */
    .btn-3d-camera,
    .btn-3d-upload {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.75rem;
        overflow: hidden;
    }
    
    .btn-3d-camera {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 
            0 8px 16px rgba(102, 126, 234, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-upload {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        box-shadow: 
            0 8px 16px rgba(245, 87, 108, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-camera i,
    .btn-3d-upload i {
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
    }
    
    /* Hover effect - tombol naik */
    .btn-3d-camera:hover,
    .btn-3d-upload:hover {
        transform: translateY(-4px) scale(1.05);
    }
    
    .btn-3d-camera:hover {
        box-shadow: 
            0 12px 24px rgba(102, 126, 234, 0.5),
            0 6px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-upload:hover {
        box-shadow: 
            0 12px 24px rgba(245, 87, 108, 0.5),
            0 6px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-camera:hover i {
        transform: scale(1.15) rotate(5deg);
    }
    
    .btn-3d-upload:hover i {
        transform: scale(1.15) translateY(-3px);
    }
    
    /* Active effect - tombol ditekan */
    .btn-3d-camera:active,
    .btn-3d-upload:active {
        transform: translateY(-1px) scale(0.98);
    }
    
    .btn-3d-camera:active {
        box-shadow: 
            0 4px 8px rgba(102, 126, 234, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.2),
            inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-upload:active {
        box-shadow: 
            0 4px 8px rgba(245, 87, 108, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.2),
            inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .btn-3d-camera:active i,
    .btn-3d-upload:active i {
        transform: scale(0.95);
    }
    
    /* Shine effect saat hover */
    .btn-3d-camera::before,
    .btn-3d-upload::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%
        );
        transform: rotate(45deg);
        transition: all 0.5s;
        opacity: 0;
    }
    
    .btn-3d-camera:hover::before,
    .btn-3d-upload:hover::before {
        opacity: 1;
        animation: shine 0.6s ease-in-out;
    }
    
    @keyframes shine {
        0% {
            transform: translateX(-100%) translateY(-100%) rotate(45deg);
        }
        100% {
            transform: translateX(100%) translateY(100%) rotate(45deg);
        }
    }
</style>
@endpush