@extends('admin.layouts.app')

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

@section('page-title', 'EDIT ANGGOTA')

@section('styles')
<style>
    .form-section {
        background: white;
        border-radius: 8px;
        padding: 2rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .section-title {
        display: flex;
        align-items: center;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .section-title i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
    }
    
    .section-title h5 {
        margin: 0;
        color: #212121;
        font-weight: 500;
    }
    
    .form-group-custom {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-weight: 500;
        color: #424242;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .form-label i {
        margin-right: 8px;
        color: #1976d2;
    }
    
    .form-label .required {
        color: #f44336;
        margin-left: 4px;
    }
    
    .form-control, .form-select {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }
    
    .form-control[readonly], .form-select[readonly] {
        background-color: #f5f5f5;
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.15);
    }
    
    .form-text {
        font-size: 0.8rem;
        color: #757575;
        margin-top: 0.25rem;
    }
    
    .preview-container {
        margin-top: 1rem;
        padding: 1rem;
        background: #fafafa;
        border-radius: 8px;
        text-align: center;
    }
    
    .preview-image, .current-image {
        max-width: 200px;
        max-height: 200px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .current-image-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .current-image-badge {
        position: absolute;
        top: -10px;
        right: -10px;
        background: #1976d2;
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        background: #fafafa;
        border-radius: 8px;
        margin-top: 2rem;
    }
    .crop-wrapper {
        margin-top: 0.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 0.5rem;
        background: #fff;
    }

    .crop-image {
        display: block;
        max-width: 100%;
        max-height: 420px;
    }
</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css" rel="stylesheet" />
@endsection

@section('content')
    @php
        $adminRole = Auth::guard('admin')->user()->role ?? null;
        $isReadOnly = in_array($adminRole, ['admin_nasional', 'admin_wilayah', 'admin_cabang']);
    @endphp

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Terdapat kesalahan pada form:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <form action="{{ route('anggota.update', $anggota) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <!-- Data Pribadi Section -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-user"></i>
                        <h5>Data Pribadi</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="nama" class="form-label">
                                <i class="fas fa-user-circle"></i>
                                Nama Lengkap<span class="required">*</span>
                            </label>
                            <input type="text" class="form-control @error('nama') is-invalid @enderror" 
                                   id="nama" name="nama" value="{{ old('nama', $anggota->nama) }}" required
                                   placeholder="Masukkan nama lengkap">
                            @error('nama')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="email" class="form-label">
                                <i class="fas fa-envelope"></i>
                                Email<span class="required">*</span>
                            </label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email', $anggota->email) }}" required
                                   placeholder="nama@email.com">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="telepon" class="form-label">
                                <i class="fas fa-phone"></i>
                                Nomor Telepon<span class="required">*</span>
                            </label>
                            <input type="text" class="form-control @error('telepon') is-invalid @enderror" 
                                   id="telepon" name="telepon" value="{{ old('telepon', $anggota->telepon) }}" required
                                   placeholder="08xxxxxxxxxx" @if($isReadOnly) readonly @endif>
                            @error('telepon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="tanggal_lahir" class="form-label">
                                <i class="fas fa-calendar"></i>
                                Tanggal Lahir<span class="required">*</span>
                            </label>
                            <input type="date" class="form-control @error('tanggal_lahir') is-invalid @enderror" 
                                   id="tanggal_lahir" name="tanggal_lahir" 
                                   value="{{ old('tanggal_lahir', $anggota->tanggal_lahir->format('Y-m-d')) }}" required @if($isReadOnly) readonly @endif>
                            @error('tanggal_lahir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="jenis_kelamin" class="form-label">
                                <i class="fas fa-venus-mars"></i>
                                Jenis Kelamin<span class="required">*</span>
                            </label>
                            <select class="form-select @error('jenis_kelamin') is-invalid @enderror" 
                                    id="jenis_kelamin" name="jenis_kelamin" required>
                                <option value="">Pilih Jenis Kelamin</option>
                                <option value="Laki-laki" {{ old('jenis_kelamin', $anggota->jenis_kelamin) == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                                <option value="Perempuan" {{ old('jenis_kelamin', $anggota->jenis_kelamin) == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                            </select>
                            @error('jenis_kelamin')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="status" class="form-label">
                                <i class="fas fa-toggle-on"></i>
                                Status<span class="required">*</span>
                            </label>
                            <select class="form-select @error('status') is-invalid @enderror" 
                                    id="status" name="status" required>
                                <option value="">Pilih Status</option>
                                <option value="Aktif" {{ old('status', $anggota->status) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="Tidak Aktif" {{ old('status', $anggota->status) == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group-custom">
                        <label for="alamat" class="form-label">
                            <i class="fas fa-map-marker-alt"></i>
                            Alamat Lengkap<span class="required">*</span>
                        </label>
                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                  id="alamat" name="alamat" rows="3" required
                                  placeholder="Masukkan alamat lengkap" @if($isReadOnly) readonly @endif>{{ old('alamat', $anggota->alamat) }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="provinsi_code" class="form-label">
                                <i class="fas fa-map"></i>
                                Provinsi
                            </label>
                            <select class="form-select location-select @error('provinsi_code') is-invalid @enderror"
                                    id="provinsi_code" name="provinsi_code"
                                    data-placeholder="Cari provinsi...">
                                @if(!empty($initialLocations['provinsi']['code']))
                                    <option value="{{ $initialLocations['provinsi']['code'] }}" selected>
                                        {{ $initialLocations['provinsi']['name'] ?? $initialLocations['provinsi']['code'] }}
                                    </option>
                                @endif
                            </select>
                            @error('provinsi_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group-custom">
                            <label for="kota_code" class="form-label">
                                <i class="fas fa-city"></i>
                                Kota/Kabupaten
                            </label>
                            <select class="form-select location-select @error('kota_code') is-invalid @enderror"
                                    id="kota_code" name="kota_code"
                                    data-placeholder="Cari kota/kabupaten..."
                                    data-parent="#provinsi_code">
                                @if(!empty($initialLocations['kota']['code']))
                                    <option value="{{ $initialLocations['kota']['code'] }}" selected>
                                        {{ $initialLocations['kota']['name'] ?? $initialLocations['kota']['code'] }}
                                    </option>
                                @endif
                            </select>
                            @error('kota_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 form-group-custom">
                            <label for="nia" class="form-label">
                                <i class="fas fa-id-card"></i>
                                NIA
                            </label>
                            <div class="input-group">
                                <input type="text" class="form-control @error('nia') is-invalid @enderror"
                                       id="nia" name="nia" value="{{ old('nia', $anggota->nia) }}"
                                       data-identity-field="nia"
                                       placeholder="Masukkan NIA">
                                <button type="button" class="btn btn-outline-primary" id="generateNiaBtn">
                                    Generate
                                </button>
                            </div>
                            <input type="hidden" name="nia_auto_generated" id="nia_auto_generated" value="0">
                            <small class="form-text">Format otomatis: kodeprovinsikodekabkot + nomor urut (tanpa "_").</small>
                            @error('nia')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="invalid-feedback d-none" id="nia-ajax-feedback"></div>
                        </div>

                        <div class="col-md-4 form-group-custom">
                            <label for="nik" class="form-label">
                                <i class="fas fa-address-card"></i>
                                NIK
                            </label>
                            <input type="text" class="form-control @error('nik') is-invalid @enderror"
                                   id="nik" name="nik" value="{{ old('nik', $anggota->nik) }}"
                                   data-identity-field="nik"
                                   placeholder="Masukkan NIK" @if($isReadOnly) readonly @endif>
                            @error('nik')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="invalid-feedback d-none" id="nik-ajax-feedback"></div>
                        </div>

                        <div class="col-md-4 form-group-custom">
                            <label for="npwp" class="form-label">
                                <i class="fas fa-file-invoice-dollar"></i>
                                NPWP
                            </label>
                            <input type="text" class="form-control @error('npwp') is-invalid @enderror"
                                   id="npwp" name="npwp" value="{{ old('npwp', $anggota->npwp) }}"
                                   data-identity-field="npwp"
                                   placeholder="Masukkan NPWP" @if($isReadOnly) readonly @endif>
                            @error('npwp')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="invalid-feedback d-none" id="npwp-ajax-feedback"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="kecamatan_code" class="form-label">
                                <i class="fas fa-map-pin"></i>
                                Kecamatan
                            </label>
                            <select class="form-select location-select @error('kecamatan_code') is-invalid @enderror"
                                    id="kecamatan_code" name="kecamatan_code"
                                    data-placeholder="Cari kecamatan..."
                                    data-parent="#kota_code">
                                @if(!empty($initialLocations['kecamatan']['code']))
                                    <option value="{{ $initialLocations['kecamatan']['code'] }}" selected>
                                        {{ $initialLocations['kecamatan']['name'] ?? $initialLocations['kecamatan']['code'] }}
                                    </option>
                                @endif
                            </select>
                            @error('kecamatan_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group-custom">
                            <label for="kelurahan_code" class="form-label">
                                <i class="fas fa-home"></i>
                                Kelurahan/Desa
                            </label>
                            <select class="form-select location-select @error('kelurahan_code') is-invalid @enderror"
                                    id="kelurahan_code" name="kelurahan_code"
                                    data-placeholder="Cari kelurahan/desa..."
                                    data-parent="#kecamatan_code">
                                @if(!empty($initialLocations['kelurahan']['code']))
                                    <option value="{{ $initialLocations['kelurahan']['code'] }}" selected>
                                        {{ $initialLocations['kelurahan']['name'] ?? $initialLocations['kelurahan']['code'] }}
                                    </option>
                                @endif
                            </select>
                            @error('kelurahan_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Data Keamanan Section -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-lock"></i>
                        <h5>Keamanan Akun</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="password" class="form-label">
                                <i class="fas fa-key"></i>
                                Password Baru
                            </label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                   id="password" name="password" placeholder="Masukkan password baru">
                            <small class="form-text">Kosongkan jika tidak ingin mengubah password</small>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="password_confirmation" class="form-label">
                                <i class="fas fa-check-circle"></i>
                                Konfirmasi Password
                            </label>
                            <input type="password" class="form-control" 
                                   id="password_confirmation" name="password_confirmation"
                                   placeholder="Ulangi password baru">
                            <small class="form-text">Ulangi password baru jika mengubah</small>
                        </div>
                    </div>
                </div>

                <!-- Aktif di -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-layer-group"></i>
                        <h5>Aktif di</h5>
                    </div>
                    <small class="d-block text-muted mb-2">Pilih salah satu.</small>
                    @php
                        $aktifOptions = ['nasional' => 'Nasional', 'wilayah' => 'Wilayah', 'cabang' => 'Cabang', 'komisariat' => 'Komisariat'];
                        $aktifRaw = old('aktif_di', $anggota->aktif_di ?? null);
                        $aktifSelected = is_array($aktifRaw) ? ($aktifRaw[0] ?? null) : $aktifRaw;
                    @endphp
                    <div class="row">
                        @foreach($aktifOptions as $value => $label)
                            <div class="col-md-3 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="aktif_di" id="aktif_{{ $value }}" value="{{ $value }}" {{ $aktifSelected === $value ? 'checked' : '' }}>
                                    <label class="form-check-label" for="aktif_{{ $value }}">{{ $label }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @error('aktif_di')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <!-- Data Pekerjaan Section -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-briefcase"></i>
                        <h5>Informasi Pekerjaan & Jabatan</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="pekerjaan" class="form-label">
                                <i class="fas fa-building"></i>
                                Profesi & Pekerjaan
                            </label>
                            <select class="form-select select2-searchable @error('pekerjaan') is-invalid @enderror"
                                    id="pekerjaan" name="pekerjaan" @if($isReadOnly) disabled @endif>
                                <option value="">Pilih Profesi/Pekerjaan (Opsional)</option>
                                @foreach($profesis as $profesi)
                                    <option value="{{ $profesi->nama }}" {{ old('pekerjaan', $anggota->pekerjaan) == $profesi->nama ? 'selected' : '' }}>
                                        {{ $profesi->nama }}
                                    </option>
                                @endforeach
                            </select>
                            @error('pekerjaan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="pendidikan_id" class="form-label">
                                <i class="fas fa-graduation-cap"></i>
                                Pendidikan
                            </label>
                            <select class="form-select select2-searchable @error('pendidikan_id') is-invalid @enderror"
                                    id="pendidikan_id" name="pendidikan_id" @if($isReadOnly) disabled @endif>
                                <option value="">Pilih Pendidikan (Opsional)</option>
                                @foreach($pendidikans as $pendidikan)
                                    <option value="{{ $pendidikan->id }}" {{ old('pendidikan_id', $anggota->pendidikan_id) == $pendidikan->id ? 'selected' : '' }}>
                                        {{ $pendidikan->nama }}
                                    </option>
                                @endforeach
                            </select>
                            @error('pendidikan_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="jabatan" class="form-label">
                                <i class="fas fa-user-tie"></i>
                                Jabatan di Organisasi
                            </label>
                            <select class="form-select @error('jabatan') is-invalid @enderror"
                                    id="jabatan" name="jabatan">
                                <option value="">Pilih Jabatan (Opsional)</option>
                                @foreach($jabatans as $jabatan)
                                    <option value="{{ $jabatan->nama }}" {{ old('jabatan', $anggota->jabatan) == $jabatan->nama ? 'selected' : '' }}>
                                        {{ $jabatan->nama }}
                                    </option>
                                @endforeach
                            </select>
                            @error('jabatan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group-custom">
                            <label for="skills" class="form-label">
                                <i class="fas fa-screwdriver-wrench"></i>
                                Skill
                            </label>
                            @php $selectedSkills = (array) old('skills', $anggota->skills?->pluck('id')->toArray() ?? []); @endphp
                            <select class="form-select" id="skills" name="skills[]" multiple>
                                @foreach($skills as $skill)
                                    <option value="{{ $skill->id }}" {{ in_array($skill->id, $selectedSkills) ? 'selected' : '' }}>
                                        {{ $skill->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-text">Bisa memilih lebih dari satu.</small>
                        </div>
                    </div>
                </div>

                <!-- Foto Section -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-camera"></i>
                        <h5>Foto Profil</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 form-group-custom">
                            <label for="foto" class="form-label">
                                <i class="fas fa-image"></i>
                                Upload Foto
                            </label>
                            <input type="file" class="form-control @error('foto') is-invalid @enderror" 
                                   id="foto" name="foto" accept="image/*" onchange="previewImage(this)">
                            <small class="form-text">Format: JPG, PNG, GIF. Maksimal 2MB</small>
                            @error('foto')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <div id="preview-container" class="preview-container" style="display: none;">
                                <p class="text-muted mb-2"><strong>Crop Foto Baru (Rasio 1:1, drag manual):</strong></p>
                                <div class="crop-wrapper">
                                    <img id="preview" class="crop-image" alt="Crop foto anggota">
                                </div>
                            </div>
                        </div>
                        
                        @if($anggota->foto)
                        <div class="col-md-6 form-group-custom">
                            <label class="form-label">
                                <i class="fas fa-check-circle"></i>
                                Foto Saat Ini
                            </label>
                            <div class="preview-container">
                                <div class="current-image-wrapper">
                                    <img src="{{ asset('storage/anggotas/' . $anggota->foto) }}" 
                                         alt="{{ $anggota->nama }}" class="current-image">
                                    <span class="current-image-badge">Current</span>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Keterangan Section -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-sticky-note"></i>
                        <h5>Keterangan Tambahan</h5>
                    </div>
                    
                    <div class="form-group-custom">
                        <label for="keterangan" class="form-label">
                            <i class="fas fa-comment-alt"></i>
                            Keterangan
                        </label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                  id="keterangan" name="keterangan" rows="4"
                                  placeholder="Masukkan keterangan tambahan (opsional)">{{ old('keterangan', $anggota->keterangan) }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-user-shield"></i>
                        <h5>Induk Admin</h5>
                    </div>
                    <div class="form-group-custom">
                        <label for="parent_id" class="form-label">
                            <i class="fas fa-user-cog"></i>
                            Pilih Admin Induk
                        </label>
                        <select class="form-select @error('parent_id') is-invalid @enderror" id="parent_id" name="parent_id">
                            <option value="">Pilih Admin</option>
                            @foreach($admins as $adm)
                                <option value="{{ $adm->id }}" {{ old('parent_id', $anggota->parent_id) == $adm->id ? 'selected' : '' }}>
                                    {{ $adm->name }} ({{ $adm->username }})
                                </option>
                            @endforeach
                        </select>
                        @error('parent_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group-custom">
                        <label for="parent_id_cabang" class="form-label">
                            <i class="fas fa-building"></i>
                            Cabang
                        </label>
                        <select class="form-select @error('parent_id_cabang') is-invalid @enderror" id="parent_id_cabang" name="parent_id_cabang">
                            <option value="">Pilih Cabang (Opsional)</option>
                            @foreach($admins as $adm)
                                <option value="{{ $adm->id }}" {{ old('parent_id_cabang', $anggota->parent_id_cabang) == $adm->id ? 'selected' : '' }}>
                                    {{ $adm->name }} ({{ $adm->username }})
                                </option>
                            @endforeach
                        </select>
                        @error('parent_id_cabang')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <a href="{{ route('anggota.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Update Data Anggota
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"></script>
<script>
    const routes = {
        provinces: "{{ route('location.provinces') }}",
        cities: "{{ route('location.cities') }}",
        districts: "{{ route('location.districts') }}",
        villages: "{{ route('location.villages') }}",
        checkIdentity: "{{ route('anggota.check-identity') }}",
        generateNia: "{{ route('anggota.generate-nia') }}",
    };

    const identityDebounceTimers = {};
    let fotoCropper = null;

    function setIdentityFeedback(field, isInvalid, message) {
        const input = document.getElementById(field);
        const feedback = document.getElementById(`${field}-ajax-feedback`);
        if (!input || !feedback) return;

        if (isInvalid) {
            input.classList.add('is-invalid');
            input.dataset.ajaxInvalid = '1';
            feedback.textContent = message || `${field.toUpperCase()} sudah digunakan`;
            feedback.classList.remove('d-none');
            feedback.classList.add('d-block');
        } else {
            if (input.dataset.ajaxInvalid === '1') {
                input.classList.remove('is-invalid');
            }
            input.dataset.ajaxInvalid = '0';
            feedback.textContent = '';
            feedback.classList.remove('d-block');
            feedback.classList.add('d-none');
        }
    }

    function checkIdentityUnique(field, value) {
        if (!value || !value.trim()) {
            setIdentityFeedback(field, false, '');
            return;
        }

        $.get(routes.checkIdentity, {
            field,
            value: value.trim(),
            ignore_id: {{ $anggota->id }}
        })
        .done(function(res) {
            setIdentityFeedback(field, !res.available, res.message || '');
        })
        .fail(function() {
            setIdentityFeedback(field, false, '');
        });
    }

    function buildAjaxConfig(url, extraDataFn) {
        return {
            url,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                const base = { q: params.term || '' };
                return Object.assign(base, extraDataFn ? extraDataFn() : {});
            },
            processResults: function (data) {
                return { results: data };
            },
            cache: true
        };
    }

    function resetSelect(selector) {
        const $el = $(selector);
        $el.val(null).trigger('change');
        $el.empty();
    }

    $(document).ready(function() {
        const $provinsi = $('#provinsi_code');
        const $kota = $('#kota_code');
        const $kecamatan = $('#kecamatan_code');
        const $kelurahan = $('#kelurahan_code');
        const $skills = $('#skills');
        const $jabatan = $('#jabatan');

        $provinsi.select2({
            placeholder: $provinsi.data('placeholder'),
            allowClear: true,
            ajax: buildAjaxConfig(routes.provinces)
        });

        $kota.select2({
            placeholder: $kota.data('placeholder'),
            allowClear: true,
            ajax: buildAjaxConfig(routes.cities, () => ({
                province: $provinsi.val()
            }))
        });

        $kecamatan.select2({
            placeholder: $kecamatan.data('placeholder'),
            allowClear: true,
            ajax: buildAjaxConfig(routes.districts, () => ({
                city: $kota.val()
            }))
        });

        $kelurahan.select2({
            placeholder: $kelurahan.data('placeholder'),
            allowClear: true,
            ajax: buildAjaxConfig(routes.villages, () => ({
                district: $kecamatan.val()
            }))
        });

        $skills.select2({
            placeholder: 'Pilih Skill',
            allowClear: true
        });
        $jabatan.select2({
            placeholder: 'Pilih Jabatan (Opsional)',
            allowClear: true
        });
        $('#pekerjaan').select2({
            placeholder: 'Pilih Profesi/Pekerjaan (Opsional)',
            allowClear: true
        });
        $('#pendidikan_id').select2({
            placeholder: 'Pilih Pendidikan (Opsional)',
            allowClear: true
        });

        $provinsi.on('change', () => {
            resetSelect('#kota_code');
            resetSelect('#kecamatan_code');
            resetSelect('#kelurahan_code');
        });

        $kota.on('change', () => {
            resetSelect('#kecamatan_code');
            resetSelect('#kelurahan_code');
        });

        $kecamatan.on('change', () => {
            resetSelect('#kelurahan_code');
        });

        ['nia'].forEach((field) => {
            const $input = $('#' + field);
            $input.on('input blur', function() {
                if (field === 'nia') {
                    $('#nia_auto_generated').val('0');
                }
                clearTimeout(identityDebounceTimers[field]);
                const val = $(this).val();
                identityDebounceTimers[field] = setTimeout(() => {
                    checkIdentityUnique(field, val);
                }, 350);
            });
        });

        @unless($isReadOnly)
        ['nik', 'npwp'].forEach((field) => {
            const $input = $('#' + field);
            $input.on('input blur', function() {
                clearTimeout(identityDebounceTimers[field]);
                const val = $(this).val();
                identityDebounceTimers[field] = setTimeout(() => {
                    checkIdentityUnique(field, val);
                }, 350);
            });
        });
        @endunless

        $('#generateNiaBtn').on('click', function() {
            const provinsiCode = $('#provinsi_code').val();
            const kotaCode = $('#kota_code').val();

            if (!provinsiCode || !kotaCode) {
                alert('Pilih provinsi dan kota/kabupaten terlebih dahulu.');
                return;
            }

            const $btn = $(this);
            $btn.prop('disabled', true).text('Generating...');

            $.get(routes.generateNia, {
                provinsi_code: provinsiCode,
                kota_code: kotaCode,
                ignore_id: {{ $anggota->id }}
            }).done(function(res) {
                if (res && res.nia) {
                    $('#nia').val(res.nia);
                    $('#nia_auto_generated').val('1');
                    setIdentityFeedback('nia', false, '');
                }
            }).fail(function(xhr) {
                const message = xhr?.responseJSON?.message || 'Gagal generate NIA.';
                alert(message);
            }).always(function() {
                $btn.prop('disabled', false).text('Generate');
            });
        });

        $('form').on('submit', function(e) {
            const niaBlocked = (() => {
                const input = document.getElementById('nia');
                return input && input.dataset.ajaxInvalid === '1';
            })();

            if (niaBlocked) {
                e.preventDefault();
                alert('NIA sudah digunakan. Mohon gunakan data yang unik.');
                return;
            }

            @unless($isReadOnly)
            const nikNpwpBlocked = ['nik', 'npwp'].some((field) => {
                const input = document.getElementById(field);
                return input && input.dataset.ajaxInvalid === '1';
            });

            if (nikNpwpBlocked) {
                e.preventDefault();
                alert('NIK/NPWP sudah dipakai. Mohon gunakan data yang unik.');
                return;
            }
            @endunless

            const fotoInput = document.getElementById('foto');
            if (!fotoInput || !fotoInput.files || fotoInput.files.length === 0 || !fotoCropper) {
                return;
            }

            e.preventDefault();
            fotoCropper.getCroppedCanvas({
                width: 800,
                height: 800,
                imageSmoothingQuality: 'high'
            }).toBlob((blob) => {
                if (!blob) {
                    e.target.submit();
                    return;
                }

                const originalName = fotoInput.files[0].name || 'foto.jpg';
                const fileName = originalName.replace(/\.[^/.]+$/, '') + '-crop.jpg';
                const croppedFile = new File([blob], fileName, { type: 'image/jpeg' });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(croppedFile);
                fotoInput.files = dataTransfer.files;
                e.target.submit();
            }, 'image/jpeg', 0.92);
        });
    });

    function previewImage(input) {
        const previewContainer = document.getElementById('preview-container');
        const preview = document.getElementById('preview');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                previewContainer.style.display = 'block';
                if (fotoCropper) {
                    fotoCropper.destroy();
                }
                fotoCropper = new Cropper(preview, {
                    aspectRatio: 1,
                    viewMode: 1,
                    dragMode: 'move',
                    autoCropArea: 1,
                    guides: true,
                    movable: true,
                    zoomable: true,
                    cropBoxMovable: true,
                    cropBoxResizable: true
                });
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            previewContainer.style.display = 'none';
            if (fotoCropper) {
                fotoCropper.destroy();
                fotoCropper = null;
            }
        }
    }
</script>
@endsection