@extends('warga.layouts.warga')

@section('subtitle', 'Profil Saya')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Profil Saya" 
        subtitle="Manajemen data pribadi dan pengaturan keamanan akun Anda"
        :breadcrumbs="[
            'Dashboard' => route('warga.dashboard'),
            'Profil Saya' => route('warga.profil')
        ]"
    />

    <div class="container-fluid px-0">
        <div class="row">
            <!-- Foto Profil Card (Left Column) -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm text-center py-4">
                    <div class="card-body">
                        <div class="mb-3">
                            @if($warga->foto_profil)
                                <img src="{{ asset('storage/' . $warga->foto_profil) }}" alt="Foto Profil" class="img-circle elevation-2" style="width: 150px; height: 150px; object-fit: cover; border: 3px solid var(--primary-color);">
                            @else
                                <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Avatar" class="img-circle elevation-2" style="width: 150px; height: 150px; object-fit: cover; border: 3px solid #cbd5e1;">
                            @endif
                        </div>
                    
                    <h4 class="font-weight-bold text-dark mb-1">{{ $warga->name }}</h4>
                    <p class="text-success font-weight-bold mb-3"><i class="fas fa-id-badge mr-1"></i>NIK: {{ $warga->penduduk->nik }}</p>
                    
                    <hr>
                    
                    <form action="{{ route('warga.profil.update') }}" method="post" enctype="multipart/form-data" id="photoForm">
                        @csrf
                        <input type="hidden" name="email" value="{{ $warga->email }}">
                        <input type="hidden" name="nomor_whatsapp" value="{{ $warga->nomor_whatsapp }}">
                        <input type="hidden" name="agama" value="{{ $warga->penduduk->agama }}">
                        <input type="hidden" name="pendidikan" value="{{ $warga->penduduk->pendidikan }}">
                        <input type="hidden" name="pekerjaan" value="{{ $warga->penduduk->pekerjaan }}">
                        <input type="hidden" name="alamat" value="{{ $warga->penduduk->alamat }}">
                        
                        <div class="form-group mb-0">
                            <label for="foto_profil" class="btn btn-outline-primary btn-block" style="cursor: pointer;">
                                <i class="fas fa-camera mr-2"></i>Ubah Foto Profil
                            </label>
                            <input type="file" name="foto_profil" id="foto_profil" class="d-none" accept="image/*" onchange="document.getElementById('photoForm').submit();">
                            <small class="text-muted d-block mt-2">Maksimal ukuran file 2MB (JPG, PNG)</small>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Tabs Container (Right Column) -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header p-0 border-bottom-0 bg-white">
                    <ul class="nav nav-tabs font-weight-bold" id="profileTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="data-profil-tab" data-toggle="tab" href="#data-profil-pane" role="tab" aria-controls="data-profil-pane" aria-selected="true" style="padding: 15px 20px;">
                                <i class="fas fa-user-edit mr-2"></i>Data Profil
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="dokumen-tab" data-toggle="tab" href="#dokumen-pane" role="tab" aria-controls="dokumen-pane" aria-selected="false" style="padding: 15px 20px;">
                                <i class="fas fa-folder-open mr-2"></i>Dokumen Saya
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="keamanan-tab" data-toggle="tab" href="#keamanan-pane" role="tab" aria-controls="keamanan-pane" aria-selected="false" style="padding: 15px 20px;">
                                <i class="fas fa-key mr-2"></i>Keamanan Akun
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body p-4 bg-white">
                    <div class="tab-content" id="profileTabContent">
                        
                        <!-- Tab 1: Data Profil -->
                        <div class="tab-pane fade show active" id="data-profil-pane" role="tabpanel" aria-labelledby="data-profil-tab">
                            <form action="{{ route('warga.profil.update') }}" method="post">
                                @csrf

                                <!-- Baris 1: Nama Lengkap & NIK -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted mb-1">Nama Lengkap</label>
                                        <input type="text" class="form-control bg-light text-sm" value="{{ $warga->name }}" readonly style="border-radius: 6px;">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted mb-1">NIK</label>
                                        <input type="text" class="form-control bg-light text-sm" value="{{ $warga->penduduk->nik }}" readonly style="border-radius: 6px;">
                                    </div>
                                </div>

                                <!-- Baris 2: Username -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted mb-1">Username</label>
                                        <input type="text" class="form-control bg-light text-sm" value="{{ $warga->username }}" readonly style="border-radius: 6px;">
                                    </div>
                                </div>

                                <!-- Baris 3: Alamat Email & Nomor WhatsApp -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="text-sm font-weight-normal text-dark mb-1">Alamat Email <small class="text-muted">(Opsional)</small></label>
                                        <input type="email" name="email" id="email" class="form-control text-sm @error('email') is-invalid @enderror" value="{{ old('email', $warga->email) }}" style="border-radius: 6px;" placeholder="Contoh: warga@email.com">
                                        <small class="form-text text-muted">Opsional. Isi jika Anda memiliki alamat email.</small>
                                        @error('email')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="nomor_whatsapp" class="text-sm font-weight-normal text-dark mb-1">Nomor WhatsApp <span class="text-danger">*</span></label>
                                        <input type="text" name="nomor_whatsapp" id="nomor_whatsapp" class="form-control text-sm @error('nomor_whatsapp') is-invalid @enderror" value="{{ old('nomor_whatsapp', $warga->nomor_whatsapp) }}" style="border-radius: 6px;" placeholder="Contoh: 081234567890">
                                        <small class="form-text text-muted">Gunakan nomor WhatsApp aktif yang diawali 08.</small>
                                        @error('nomor_whatsapp')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Baris 4: Agama, Pendidikan Terakhir, Pekerjaan -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="agama" class="text-sm font-weight-normal text-dark mb-1">Agama</label>
                                        <select name="agama" id="agama" class="form-control text-sm" style="border-radius: 6px;">
                                            <option value="Islam" {{ old('agama', $warga->penduduk->agama) == 'Islam' ? 'selected' : '' }}>Islam</option>
                                            <option value="Kristen" {{ old('agama', $warga->penduduk->agama) == 'Kristen' || old('agama', $warga->penduduk->agama) == 'Protestan' ? 'selected' : '' }}>Kristen</option>
                                            <option value="Katolik" {{ old('agama', $warga->penduduk->agama) == 'Katolik' ? 'selected' : '' }}>Katolik</option>
                                            <option value="Hindu" {{ old('agama', $warga->penduduk->agama) == 'Hindu' ? 'selected' : '' }}>Hindu</option>
                                            <option value="Buddha" {{ old('agama', $warga->penduduk->agama) == 'Buddha' ? 'selected' : '' }}>Buddha</option>
                                            <option value="Konghucu" {{ old('agama', $warga->penduduk->agama) == 'Konghucu' ? 'selected' : '' }}>Konghucu</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="pendidikan" class="text-sm font-weight-normal text-dark mb-1">Pendidikan Terakhir</label>
                                        <input type="text" name="pendidikan" id="pendidikan" class="form-control text-sm" value="{{ old('pendidikan', $warga->penduduk->pendidikan) }}" style="border-radius: 6px;">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="pekerjaan" class="text-sm font-weight-normal text-dark mb-1">Pekerjaan</label>
                                        <input type="text" name="pekerjaan" id="pekerjaan" class="form-control text-sm" value="{{ old('pekerjaan', $warga->penduduk->pekerjaan) }}" style="border-radius: 6px;">
                                    </div>
                                </div>

                                <!-- Baris 5: Alamat Tinggal Sekarang (Full width) -->
                                <div class="form-group mb-4">
                                    <label for="alamat" class="text-sm font-weight-normal text-dark mb-1">Alamat Tinggal Sekarang <span class="text-danger">*</span></label>
                                    <textarea name="alamat" id="alamat" class="form-control text-sm @error('alamat') is-invalid @enderror" rows="3" required style="border-radius: 6px;">{{ old('alamat', $warga->penduduk->alamat) }}</textarea>
                                    @error('alamat')
                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Tombol Simpan -->
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary font-weight-bold shadow-sm px-4" style="border-radius: 6px;">
                                        Simpan Perubahan <i class="fas fa-save ml-1.5"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Tab 2: Dokumen Saya -->
                        <div class="tab-pane fade" id="dokumen-pane" role="tabpanel" aria-labelledby="dokumen-tab">
                            <div class="alert border-0 shadow-sm mb-4 py-2.5 px-3 d-flex align-items-center" style="border-radius: 8px; background-color: #e0f2fe; color: #0369a1; font-size: 0.85rem;">
                                <i class="fas fa-info-circle mr-2 fa-lg text-info"></i>
                                <div>
                                    Simpan KTP dan KK Anda di sini. Dokumen akan digunakan otomatis saat mengajukan surat.
                                </div>
                            </div>

                            <div class="row">
                                <!-- Card KTP -->
                                <div class="col-md-6 mb-4">
                                    <div class="card h-100 border shadow-sm" style="border-radius: 10px;">
                                        <div class="card-body p-3.5 d-flex flex-column justify-content-between">
                                            <div>
                                                <!-- Header: Title & Status Badge -->
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <span class="font-weight-bold text-dark text-sm">
                                                        <i class="fas fa-id-card text-primary mr-1.5"></i> Kartu Tanda Penduduk (KTP)
                                                    </span>
                                                    @if($warga->file_ktp && \Illuminate\Support\Facades\Storage::disk('public')->exists($warga->file_ktp))
                                                        <span class="badge badge-success px-2 py-1" style="border-radius: 6px; font-size: 0.72rem;">
                                                            <i class="fas fa-check-circle mr-1"></i>Tersedia
                                                        </span>
                                                    @else
                                                        <span class="badge badge-secondary px-2 py-1" style="border-radius: 6px; font-size: 0.72rem;">
                                                            <i class="fas fa-exclamation-circle mr-1"></i>Belum tersedia
                                                        </span>
                                                    @endif
                                                </div>

                                                <!-- Brief Description & Action Area -->
                                                @if($warga->file_ktp && \Illuminate\Support\Facades\Storage::disk('public')->exists($warga->file_ktp))
                                                    @php
                                                        $ktpExt = strtolower(pathinfo($warga->file_ktp, PATHINFO_EXTENSION));
                                                    @endphp
                                                    <p class="text-xs text-muted mb-3">
                                                        Dokumen tersimpan di profil dan siap digunakan untuk pengajuan surat.
                                                    </p>

                                                    <!-- Primary Action Buttons: Lihat & Ganti -->
                                                    <div class="d-flex flex-column flex-sm-row align-items-stretch" style="gap: 8px;">
                                                        <button type="button" class="btn btn-sm btn-primary font-weight-bold btn-preview-dokumen d-inline-flex align-items-center justify-content-center py-2 flex-fill" data-url="{{ route('warga.profil.dokumen.preview', 'ktp') }}" data-title="Preview Kartu Tanda Penduduk (KTP)" data-ext="{{ $ktpExt }}" style="border-radius: 6px; font-size: 0.85rem;">
                                                            <i class="fas fa-eye mr-1.5 text-white"></i> Lihat
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary font-weight-bold bg-white text-dark border d-inline-flex align-items-center justify-content-center py-2 flex-fill" data-toggle="collapse" data-target="#collapseGantiKtp" aria-expanded="false" style="border-radius: 6px; font-size: 0.85rem;">
                                                            <i class="fas fa-sync-alt mr-1.5 text-dark"></i> Ganti
                                                        </button>
                                                    </div>

                                                    <!-- Collapsible Form Ganti KTP -->
                                                    <div class="collapse mt-2.5" id="collapseGantiKtp">
                                                        <div class="p-2.5 bg-light rounded border" style="border-radius: 8px;">
                                                            <div class="font-weight-bold text-xs text-dark mb-1.5">Ganti dokumen KTP</div>
                                                            <form action="{{ route('warga.profil.dokumen.update') }}" method="POST" enctype="multipart/form-data">
                                                                @csrf
                                                                <div class="form-group mb-2">
                                                                    <div class="custom-file">
                                                                        <input type="file" name="file_ktp" class="custom-file-input input-dokumen-warga" id="file_ktp_replace" accept=".pdf,.jpg,.jpeg,.png" required>
                                                                        <label class="custom-file-label text-xs label-file-selected text-truncate" for="file_ktp_replace">Pilih file KTP...</label>
                                                                    </div>
                                                                    <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Format: PDF, JPG, JPEG, PNG (Maks 5 MB)</small>
                                                                </div>
                                                                <div class="file-chosen-info text-xs text-info font-weight-bold mb-2 d-none">
                                                                    <i class="fas fa-file-alt mr-1"></i><span class="file-chosen-name"></span>
                                                                </div>
                                                                <div class="d-flex justify-content-end" style="gap: 6px;">
                                                                    <button type="button" class="btn btn-xs btn-light font-weight-bold border px-2.5 py-1" data-toggle="collapse" data-target="#collapseGantiKtp" style="border-radius: 4px; font-size: 0.75rem;">
                                                                        Batal
                                                                    </button>
                                                                    <button type="submit" class="btn btn-xs btn-primary font-weight-bold px-3 py-1" style="border-radius: 4px; font-size: 0.75rem;">
                                                                        Simpan
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>

                                                @else
                                                    <p class="text-xs text-muted mb-3">
                                                        KTP belum tersimpan. Upload KTP agar dapat digunakan saat mengajukan surat.
                                                    </p>

                                                    <!-- Form Unggah KTP Baru -->
                                                    <form action="{{ route('warga.profil.dokumen.update') }}" method="POST" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="form-group mb-2">
                                                            <div class="custom-file">
                                                                <input type="file" name="file_ktp" class="custom-file-input input-dokumen-warga" id="file_ktp_new" accept=".pdf,.jpg,.jpeg,.png" required>
                                                                <label class="custom-file-label text-xs label-file-selected text-truncate" for="file_ktp_new">Pilih file KTP...</label>
                                                            </div>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Format: PDF, JPG, JPEG, PNG (Maks 5 MB)</small>
                                                        </div>
                                                        <div class="file-chosen-info text-xs text-info font-weight-bold mb-2 d-none">
                                                            <i class="fas fa-file-alt mr-1"></i><span class="file-chosen-name"></span>
                                                        </div>
                                                        <button type="submit" class="btn btn-sm btn-primary font-weight-bold btn-block mt-2" style="border-radius: 6px;">
                                                            <i class="fas fa-save mr-1"></i> Simpan KTP
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card KK -->
                                <div class="col-md-6 mb-4">
                                    <div class="card h-100 border shadow-sm" style="border-radius: 10px;">
                                        <div class="card-body p-3.5 d-flex flex-column justify-content-between">
                                            <div>
                                                <!-- Header: Title & Status Badge -->
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <span class="font-weight-bold text-dark text-sm">
                                                        <i class="fas fa-users text-primary mr-1.5"></i> Kartu Keluarga (KK)
                                                    </span>
                                                    @if($warga->file_kk && \Illuminate\Support\Facades\Storage::disk('public')->exists($warga->file_kk))
                                                        <span class="badge badge-success px-2 py-1" style="border-radius: 6px; font-size: 0.72rem;">
                                                            <i class="fas fa-check-circle mr-1"></i>Tersedia
                                                        </span>
                                                    @else
                                                        <span class="badge badge-secondary px-2 py-1" style="border-radius: 6px; font-size: 0.72rem;">
                                                            <i class="fas fa-exclamation-circle mr-1"></i>Belum tersedia
                                                        </span>
                                                    @endif
                                                </div>

                                                <!-- Brief Description & Action Area -->
                                                @if($warga->file_kk && \Illuminate\Support\Facades\Storage::disk('public')->exists($warga->file_kk))
                                                    @php
                                                        $kkExt = strtolower(pathinfo($warga->file_kk, PATHINFO_EXTENSION));
                                                    @endphp
                                                    <p class="text-xs text-muted mb-3">
                                                        Dokumen tersimpan di profil dan siap digunakan untuk pengajuan surat.
                                                    </p>

                                                    <!-- Primary Action Buttons: Lihat & Ganti -->
                                                    <div class="d-flex flex-column flex-sm-row align-items-stretch" style="gap: 8px;">
                                                        <button type="button" class="btn btn-sm btn-primary font-weight-bold btn-preview-dokumen d-inline-flex align-items-center justify-content-center py-2 flex-fill" data-url="{{ route('warga.profil.dokumen.preview', 'kk') }}" data-title="Preview Kartu Keluarga (KK)" data-ext="{{ $kkExt }}" style="border-radius: 6px; font-size: 0.85rem;">
                                                            <i class="fas fa-eye mr-1.5 text-white"></i> Lihat
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary font-weight-bold bg-white text-dark border d-inline-flex align-items-center justify-content-center py-2 flex-fill" data-toggle="collapse" data-target="#collapseGantiKk" aria-expanded="false" style="border-radius: 6px; font-size: 0.85rem;">
                                                            <i class="fas fa-sync-alt mr-1.5 text-dark"></i> Ganti
                                                        </button>
                                                    </div>

                                                    <!-- Collapsible Form Ganti KK -->
                                                    <div class="collapse mt-2.5" id="collapseGantiKk">
                                                        <div class="p-2.5 bg-light rounded border" style="border-radius: 8px;">
                                                            <div class="font-weight-bold text-xs text-dark mb-1.5">Ganti dokumen KK</div>
                                                            <form action="{{ route('warga.profil.dokumen.update') }}" method="POST" enctype="multipart/form-data">
                                                                @csrf
                                                                <div class="form-group mb-2">
                                                                    <div class="custom-file">
                                                                        <input type="file" name="file_kk" class="custom-file-input input-dokumen-warga" id="file_kk_replace" accept=".pdf,.jpg,.jpeg,.png" required>
                                                                        <label class="custom-file-label text-xs label-file-selected text-truncate" for="file_kk_replace">Pilih file KK...</label>
                                                                    </div>
                                                                    <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Format: PDF, JPG, JPEG, PNG (Maks 5 MB)</small>
                                                                </div>
                                                                <div class="file-chosen-info text-xs text-info font-weight-bold mb-2 d-none">
                                                                    <i class="fas fa-file-alt mr-1"></i><span class="file-chosen-name"></span>
                                                                </div>
                                                                <div class="d-flex justify-content-end" style="gap: 6px;">
                                                                    <button type="button" class="btn btn-xs btn-light font-weight-bold border px-2.5 py-1" data-toggle="collapse" data-target="#collapseGantiKk" style="border-radius: 4px; font-size: 0.75rem;">
                                                                        Batal
                                                                    </button>
                                                                    <button type="submit" class="btn btn-xs btn-primary font-weight-bold px-3 py-1" style="border-radius: 4px; font-size: 0.75rem;">
                                                                        Simpan
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>

                                                @else
                                                    <p class="text-xs text-muted mb-3">
                                                        KK belum tersimpan. Upload KK agar dapat digunakan saat mengajukan surat.
                                                    </p>

                                                    <!-- Form Unggah KK Baru -->
                                                    <form action="{{ route('warga.profil.dokumen.update') }}" method="POST" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="form-group mb-2">
                                                            <div class="custom-file">
                                                                <input type="file" name="file_kk" class="custom-file-input input-dokumen-warga" id="file_kk_new" accept=".pdf,.jpg,.jpeg,.png" required>
                                                                <label class="custom-file-label text-xs label-file-selected text-truncate" for="file_kk_new">Pilih file KK...</label>
                                                            </div>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Format: PDF, JPG, JPEG, PNG (Maks 5 MB)</small>
                                                        </div>
                                                        <div class="file-chosen-info text-xs text-info font-weight-bold mb-2 d-none">
                                                            <i class="fas fa-file-alt mr-1"></i><span class="file-chosen-name"></span>
                                                        </div>
                                                        <button type="submit" class="btn btn-sm btn-primary font-weight-bold btn-block mt-2" style="border-radius: 6px;">
                                                            <i class="fas fa-save mr-1"></i> Simpan KK
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Security Information Footer Card -->
                            <div class="card border-0 bg-light p-3 mt-1 mb-2" style="border-radius: 10px;">
                                <div class="d-flex align-items-center text-muted text-xs">
                                    <i class="fas fa-shield-alt text-success fa-lg mr-2.5"></i>
                                    <div>
                                        <strong>Dokumen Aman &amp; Pribadi:</strong> Dokumen Anda digunakan khusus untuk kebutuhan administrasi dan pengajuan surat serta hanya dapat diakses sesuai hak akses yang berlaku.
                                    </div>
                                </div>
                            </div>

                            <!-- Hidden Forms for Delete Actions -->
                            <form id="delete-ktp-form" action="{{ route('warga.profil.dokumen.delete', 'ktp') }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                            <form id="delete-kk-form" action="{{ route('warga.profil.dokumen.delete', 'kk') }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>

                        <!-- Tab 3: Keamanan Akun -->
                        <div class="tab-pane fade" id="keamanan-pane" role="tabpanel" aria-labelledby="keamanan-tab">
                            <form action="{{ route('warga.pengaturan.password') }}" method="post">
                                @csrf
                                
                                <div class="form-group mb-3">
                                    <label for="current_password">Password Lama <span class="text-danger">*</span></label>
                                    <input type="password" name="current_password" id="current_password" class="form-control @error('current_password') is-invalid @enderror" placeholder="Masukkan password lama" required style="border-radius: 6px;">
                                    @error('current_password')
                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="password">Password Baru <span class="text-danger">*</span></label>
                                    <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" placeholder="Minimal 8 karakter" required style="border-radius: 6px;">
                                    @error('password')
                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <div class="form-group mb-4">
                                    <label for="password_confirmation">Konfirmasi Password <span class="text-danger">*</span></label>
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Ulangi password baru" required style="border-radius: 6px;">
                                </div>

                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary shadow-sm">
                                        Ubah Password <i class="fas fa-lock ml-1"></i>
                                    </button>
                                </div>
                            </form>
                        </div>

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

    <!-- Modal Preview Dokumen Saya (Reusable) -->
    <div class="modal fade" id="previewDokumenModal" tabindex="-1" role="dialog" aria-labelledby="previewDokumenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden;">
                <div class="modal-header text-white" style="background: var(--primary-color);">
                    <h5 class="modal-title font-weight-bold text-white" id="previewDokumenModalLabel">
                        <i class="fas fa-file-alt mr-2"></i><span id="modalDokumenTitle">Preview Dokumen</span>
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 0.9;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0 position-relative bg-dark d-flex align-items-center justify-content-center" style="min-height: 70vh; max-height: 80vh; overflow: hidden;">
                    <!-- Loading Indicator -->
                    <div id="previewDokumenLoading" class="position-absolute text-white text-center py-5" style="z-index: 10;">
                        <div class="spinner-border text-light mb-2" role="status" style="width: 3rem; height: 3rem;">
                            <span class="sr-only">Memuat dokumen...</span>
                        </div>
                        <p class="text-xs font-weight-bold mb-0">Memuat berkas dokumen...</p>
                    </div>

                    <!-- Error State Message -->
                    <div id="previewDokumenError" class="position-absolute text-white text-center p-4 d-none" style="z-index: 10;">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h6 class="font-weight-bold">Gagal memuat dokumen.</h6>
                        <p class="text-xs text-muted mb-0">Silakan coba lagi beberapa saat lagi.</p>
                    </div>

                    <!-- PDF Frame -->
                    <iframe id="previewDokumenFrame" src="" style="width: 100%; height: 70vh; border: none; display: none;"></iframe>

                    <!-- Image Display Element -->
                    <img id="previewDokumenImage" src="" class="img-fluid" style="max-height: 70vh; object-fit: contain; display: none;" alt="Preview Dokumen">
                </div>
                <div class="modal-footer bg-light py-2 px-3 d-flex justify-content-between align-items-center">
                    <small class="text-muted"><i class="fas fa-shield-alt text-success mr-1"></i>Dokumen terlindungi hak akses</small>
                    <button type="button" class="btn btn-secondary font-weight-bold px-4" data-dismiss="modal" style="border-radius: 6px;">
                        <i class="fas fa-times mr-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('warga_js')
    <script>
        $(document).ready(function() {
            // Display chosen file name: "File dipilih: nama_file.pdf"
            $(document).on('change', '.input-dokumen-warga', function() {
                let file = this.files[0];
                let $container = $(this).closest('form');
                let $info = $container.find('.file-chosen-info');
                let $name = $container.find('.file-chosen-name');

                if (file) {
                    let fileName = file.name;
                    $(this).next('.custom-file-label').addClass("selected").html(fileName);
                    $name.text('File dipilih: ' + fileName);
                    $info.removeClass('d-none');
                } else {
                    $(this).next('.custom-file-label').removeClass("selected").html('Pilih file...');
                    $info.addClass('d-none');
                }
            });

            // Preview Dokumen Modal Trigger (In-page modal without opening new tab)
            $(document).on('click', '.btn-preview-dokumen', function(e) {
                e.preventDefault();
                let url = $(this).data('url');
                let title = $(this).data('title');
                let ext = ($(this).data('ext') || '').toLowerCase();

                if (!url) {
                    console.error('Preview URL tidak ditemukan.');
                    return;
                }

                $('#modalDokumenTitle').text(title);

                // Reset modal state
                $('#previewDokumenFrame').hide().attr('src', '');
                $('#previewDokumenImage').hide().attr('src', '');
                $('#previewDokumenError').addClass('d-none');
                $('#previewDokumenLoading').removeClass('d-none');

                $('#previewDokumenModal').modal('show');

                // Render PDF vs Image
                if (ext === 'pdf' || url.toLowerCase().includes('.pdf')) {
                    $('#previewDokumenFrame')
                        .off('load')
                        .on('load', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                        })
                        .attr('src', url)
                        .show();

                    // Fallback timer for iframe
                    setTimeout(function() {
                        $('#previewDokumenLoading').addClass('d-none');
                    }, 1000);
                } else {
                    $('#previewDokumenImage')
                        .off('load error')
                        .on('load', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                        })
                        .on('error', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                            $('#previewDokumenError').removeClass('d-none');
                        })
                        .attr('src', url)
                        .show();
                }
            });

            // Clean up modal container on hide (reset preview content & state)
            $('#previewDokumenModal').on('hidden.bs.modal', function () {
                $('#previewDokumenFrame').hide().attr('src', '');
                $('#previewDokumenImage').hide().attr('src', '');
                $('#previewDokumenLoading').removeClass('d-none');
                $('#previewDokumenError').addClass('d-none');
            });
        });

        // SweetAlert Confirmation for Delete Document
        function confirmDeleteDokumen(type, label) {
            let docLabel = type === 'ktp' ? 'KTP' : 'KK';
            
            Swal.fire({
                title: 'Hapus Dokumen ' + docLabel + '?',
                text: 'Dokumen akan dihapus dari Dokumen Saya. Pengajuan surat yang sudah dibuat tetap aman.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    let formId = type === 'ktp' ? 'delete-ktp-form' : 'delete-kk-form';
                    document.getElementById(formId).submit();
                }
            });
        }
    </script>
@endsection