@extends('layouts.register')

@section('styles')
<style>
    /* Paksa semua teks label & input jadi putih/terang */
    .form-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.9); font-weight: 600; }
    .form-control, .form-select { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; font-size: 0.9rem; }
    .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.15) !important; border-color: #fff !important; box-shadow: none !important; }
    
    /* Perbaikan Placeholder agar tidak hitam */
    .form-control::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    
    select option { background: #1e3a8a; color: #fff; }
    
    /* Style untuk box preview */
    .preview-box { width: 60px; height: 60px; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,0.05); }
    .alert-glass { background: rgba(220, 53, 69, 0.2); border: 1px solid rgba(220, 53, 69, 0.3); color: #fff; font-size: 0.8rem; border-radius: 10px; }
    
    /* Memastikan icon di dalam preview berwarna putih */
    .preview-box i { color: #fff !important; opacity: 0.7; }
</style>
@endsection

@section('content')
@include('auth.register.partials.progress', ['step' => 1])

@if ($errors->any())
    <div class="alert alert-glass mb-4 shadow-sm">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('register.step1.store') }}" enctype="multipart/form-data" id="formStep1">
    @csrf

    <div class="row g-3">
        {{-- Baris 1: Identitas Dasar --}}
        <div class="col-md-6">
            <label class="form-label">Nama Lengkap</label>
            <input type="text" name="nama_lengkap" class="form-control uppercase-input" placeholder="SESUAI KTP..." required 
                value="{{ old('nama_lengkap', $user->profile->nama_lengkap ?? '') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label">NIK (16 Digit)</label>
            <input type="text" name="nik" class="form-control" required maxlength="16" minlength="16" 
                oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
                value="{{ old('nik', $user->profile->nik ?? '') }}" placeholder="16 DIGIT NIK...">
        </div>

        {{-- Baris 2: Kelahiran --}}
        <div class="col-md-6">
            <label class="form-label">Tempat Lahir</label>
            <input type="text" name="tempat_lahir" class="form-control uppercase-input" placeholder="KOTA..." required 
                value="{{ old('tempat_lahir', $user->profile->tempat_lahir ?? '') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label">Tanggal Lahir</label>
            <input type="date" name="tanggal_lahir" class="form-control" required 
                value="{{ old('tanggal_lahir', $user->profile->tanggal_lahir ?? '') }}">
        </div>

        {{-- Baris 3: Karakteristik Personal --}}
        <div class="col-md-3">
            <label class="form-label">Jenis Kelamin</label>
            <select name="jenis_kelamin" class="form-select" required>
                <option value="">PILIH</option>
                <option value="LAKI-LAKI" {{ old('jenis_kelamin', $user->profile->jenis_kelamin ?? '') == 'LAKI-LAKI' ? 'selected' : '' }}>LAKI-LAKI</option>
                <option value="PEREMPUAN" {{ old('jenis_kelamin', $user->profile->jenis_kelamin ?? '') == 'PEREMPUAN' ? 'selected' : '' }}>PEREMPUAN</option>
            </select>
        </div>

        <div class="col-md-3">
            <label class="form-label">Status Perkawinan</label>
            <select name="status_perkawinan" class="form-select" required>
                <option value="">PILIH</option>
                @foreach(['BELUM KAWIN', 'KAWIN', 'CERAI HIDUP', 'CERAI MATI'] as $st)
                    <option value="{{ $st }}" {{ old('status_perkawinan', $user->profile->status_perkawinan ?? '') == $st ? 'selected' : '' }}>{{ $st }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <label class="form-label">Agama</label>
            <select name="agama" class="form-select" required>
                <option value="">PILIH</option>
                @foreach(['ISLAM', 'KRISTEN', 'KATOLIK', 'HINDU', 'BUDHA', 'KONGHUCU'] as $agm)
                    <option value="{{ $agm }}" {{ old('agama', $user->profile->agama ?? '') == $agm ? 'selected' : '' }}>{{ $agm }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <label class="form-label">Golongan Darah</label>
            <select name="golongan_darah" class="form-select" required>
                @foreach(['TIDAK TAHU', 'A', 'B', 'AB', 'O'] as $goldar)
                    <option value="{{ $goldar }}" {{ old('golongan_darah', $user->profile->golongan_darah ?? '') == $goldar ? 'selected' : '' }}>{{ $goldar }}</option>
                @endforeach
            </select>
        </div>

        {{-- Baris 4: Kontak --}}
        <div class="col-md-6">
            <label class="form-label">No. Telepon / WhatsApp</label>
            <input type="text" name="no_telepon" class="form-control" placeholder="08..." required 
                value="{{ old('no_telepon', $user->profile->no_telepon ?? '') }}" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
        </div>
        <div class="col-md-6">
            <label class="form-label">Kewarganegaraan</label>
            <select name="kewarganegaraan" class="form-select" required>
                <option value="WARGA NEGARA INDONESIA" {{ old('kewarganegaraan', $user->profile->kewarganegaraan ?? '') == 'WARGA NEGARA INDONESIA' ? 'selected' : '' }}>WARGA NEGARA INDONESIA</option>
                <option value="WARGA NEGARA ASING" {{ old('kewarganegaraan', $user->profile->kewarganegaraan ?? '') == 'WARGA NEGARA ASING' ? 'selected' : '' }}>WARGA NEGARA ASING</option>
            </select>
        </div>

        {{-- Baris 5: Pendidikan & Pekerjaan --}}
        <div class="col-md-6">
            <label class="form-label">Pendidikan</label>
            <select name="pendidikan" class="form-select" required>
                <option value="">PILIH</option>
                @foreach(['SD/SEDERAJAT', 'TIDAK/BELUM SEKOLAH', 'SLTA/SEDERAJAT', 'SLTP/SEDERAJAT', 'BELUM TAMAT SD/SEDERAJAT', 'DIPLOMA IV', 'DIPLOMA I/II', 'AKADEMI/DIPLOMA III/S. MUDA', 'STRATA I', 'STRATA II', 'STRATA III'] as $pdk)
                    <option value="{{ $pdk }}" {{ old('pendidikan', $user->profile->pendidikan ?? '') == $pdk ? 'selected' : '' }}>{{ $pdk }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label">Pekerjaan</label>
            <select name="pekerjaan" class="form-select" required>
                <option value="">PILIH</option>
                @foreach(['BELUM/TIDAK BEKERJA', 'PELAJAR/MAHASISWA', 'MENGURUS RUMAH TANGGA', 'KARYAWAN BUMN', 'KARYAWAN BUMD', 'KARYAWAN SWASTA', 'WIRASWASTA', 'PENSIUNAN', 'PEGAWAI NEGERI SIPIL', 'TENTARA NASIONAL INDONESIA', 'KEPOLISIAN RI', 'GURU', 'DOSEN', 'DOKTER', 'BIDAN', 'PERAWAT'] as $pkj)
                    <option value="{{ $pkj }}" {{ old('pekerjaan', $user->profile->pekerjaan ?? '') == $pkj ? 'selected' : '' }}>{{ $pkj }}</option>
                @endforeach
            </select>
        </div>

        {{-- Baris 6: Lokasi & Keamanan --}}
        <div class="col-md-6">
            <label class="form-label">Pilih Wilayah RW</label>
            <select name="rw_id" class="form-select" required>
                <option value="">PILIH RW</option>
                @foreach($rws as $rw)
                    <option value="{{ $rw->id }}" {{ old('rw_id', $user->rw_id ?? '') == $rw->id ? 'selected' : '' }}>{{ $rw->nama_rw }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label">Password Login {{ isset($user) ? '(KOSONGKAN JIKA TIDAK GANTI)' : '' }}</label>
            <input type="password" name="password" class="form-control" placeholder="********" {{ isset($user) ? '' : 'required' }}>
        </div>

        {{-- Alamat --}}
        <div class="col-12">
            <label class="form-label">Alamat Lengkap</label>
            <textarea name="alamat" rows="2" class="form-control uppercase-input" placeholder="NAMA JALAN, NOMOR RUMAH..." required>{{ old('alamat', $user->profile->alamat ?? '') }}</textarea>
        </div>

        {{-- Baris File --}}
        <div class="col-md-6">
            <label class="form-label">Foto Profil</label>
            <div class="d-flex align-items-center gap-3">
                <input type="file" name="foto" class="form-control" accept="image/*" onchange="previewFile(this, 'img-preview', 'cam-icon')" {{ isset($user->profile->foto_path) ? '' : 'required' }}>
                <div class="preview-box">
                    @if(isset($user->profile->foto_path))
                        <img id="img-preview" src="{{ asset('storage/foto_user/'.$user->profile->foto_path) }}" class="w-100 h-100" style="object-fit: cover;">
                        <i id="cam-icon" class="bi bi-camera fs-4 d-none"></i>
                    @else
                        <i id="cam-icon" class="bi bi-camera fs-4"></i>
                        <img id="img-preview" class="d-none w-100 h-100" style="object-fit: cover;">
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <label class="form-label">Upload Sertifikat</label>
            <div class="d-flex align-items-center gap-3">
                <input type="file" name="sertifikat" class="form-control" accept=".pdf,image/*" onchange="previewFile(this, 'cert-preview', 'cert-icon')">
                <div class="preview-box">
                    @if(isset($user->profile->sertifikat))
                        @if(Str::endsWith($user->profile->sertifikat, '.pdf'))
                            <i id="cert-icon" class="bi bi-file-pdf text-danger fs-4"></i>
                            <img id="cert-preview" class="d-none w-100 h-100" style="object-fit: cover;">
                        @else
                            <img id="cert-preview" src="{{ asset('storage/sertifikat_user/'.$user->profile->sertifikat) }}" class="w-100 h-100" style="object-fit: cover;">
                            <i id="cert-icon" class="bi bi-file-earmark-check fs-4 d-none"></i>
                        @endif
                    @else
                        <i id="cert-icon" class="bi bi-file-earmark-check fs-4"></i>
                        <img id="cert-preview" class="d-none w-100 h-100" style="object-fit: cover;">
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-center mt-5">
        <button type="submit" class="btn btn-light rounded-circle shadow d-flex align-items-center justify-content-center" 
                style="width: 60px; height: 60px;" id="btnSubmit">
            <i class="bi bi-arrow-right-short fs-1 text-primary"></i>
        </button>
    </div>
</form>
@endsection

@section('scripts')
<script>
// Fungsi Paksa Kapital
function initUppercase() {
    document.querySelectorAll('.uppercase-input').forEach(input => {
        input.addEventListener('input', function() {
            this.value = this.value.toUpperCase();
        });
        // Jalankan sekali saat load untuk data yang sudah ada
        if(input.value) input.value = input.value.toUpperCase();
    });
}

// Fungsi Preview Universal
function previewFile(input, imgId, iconId) {
    const img = document.getElementById(imgId);
    const icon = document.getElementById(iconId);
    
    if (input.files && input.files[0]) {
        if (input.files[0].type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                img.classList.remove('d-none');
                icon.classList.add('d-none');
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            icon.className = 'bi bi-file-pdf text-danger fs-4';
            img.classList.add('d-none');
            icon.classList.remove('d-none');
        }
    }
}

document.addEventListener('DOMContentLoaded', initUppercase);

document.getElementById('formStep1').addEventListener('submit', function() {
    const btn = document.getElementById('btnSubmit');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm text-primary"></span>';
    btn.style.pointerEvents = 'none';
    btn.style.opacity = '0.7';
});
</script>
@endsection