@extends('layouts.register')

@section('styles')
<style>
    /* Paksa label & teks utama 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.85rem; }
    
    /* Perbaikan teks input Readonly agar tidak terlalu gelap */
    .form-control[readonly] { background: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; cursor: not-allowed; }
    
    .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 warna putih transparan (tidak hitam) */
    .form-control::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    
    select option { background: #1e3a8a; color: #fff; }
    
    .preview-ksk-box { width: 100%; height: 150px; border: 1px dashed rgba(255,255,255,0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,0.05); }
    
    /* Teks deskripsi step */
    .step-desc { color: #fff !important; opacity: 0.9; letter-spacing: 1px; }
</style>
@endsection

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

<div class="text-center mb-4">
    <p class="small fw-bold step-desc">STEP 2: DATA KARTU SATUAN KELUARGA (KSK)</p>
</div>

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

    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label">Wilayah RW</label>
            <input type="text" class="form-control" value="{{ $rw->nama_rw }}" readonly>
        </div>

        <div class="col-md-6">
            <label class="form-label">Nomor KSK (16 Digit)</label>
            <input type="text" name="nomor_ksk" class="form-control" placeholder="16 DIGIT NO. KSK..." required 
                   maxlength="16" minlength="16"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
                   value="{{ old('nomor_ksk', $ksk->nomor_ksk ?? '') }}">
        </div>

        <div class="col-12">
            <label class="form-label">Alamat Domisili</label>
            <textarea class="form-control" rows="2" readonly>{{ $alamat }}</textarea>
        </div>

        {{-- Detail Alamat --}}
        <div class="col-md-3">
            <label class="form-label">RT</label>
            <select name="rt" class="form-select" required>
                <option value="">PILIH</option>
                @foreach(['01','02','03','04','05','06','07','08','09','10','11','12'] as $rtNo)
                    <option value="{{ $rtNo }}" {{ old('rt', $ksk->rt ?? '') == $rtNo ? 'selected' : '' }}>{{ $rtNo }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-4">
            <label class="form-label">Desa / Kelurahan</label>
            <input type="text" name="desa" class="form-control uppercase-input" placeholder="DESA..." required 
                   value="{{ old('desa', $ksk->desa ?? '') }}">
        </div>

        <div class="col-md-5">
            <label class="form-label">Kecamatan</label>
            <input type="text" name="kecamatan" class="form-control uppercase-input" placeholder="KECAMATAN..." required 
                   value="{{ old('kecamatan', $ksk->kecamatan ?? '') }}">
        </div>

        <div class="col-md-6">
            <label class="form-label">Kabupaten / Kota</label>
            <input type="text" name="kabupaten" class="form-control uppercase-input" placeholder="KABUPATEN..." required 
                   value="{{ old('kabupaten', $ksk->kabupaten ?? '') }}">
        </div>

        <div class="col-md-6">
            <label class="form-label">Provinsi</label>
            <input type="text" name="provinsi" class="form-control uppercase-input" placeholder="PROVINSI..." required 
                   value="{{ old('provinsi', $ksk->provinsi ?? '') }}">
        </div>

        <div class="col-12 mt-4">
            <label class="form-label">Upload Scan KSK (Gambar/PDF)</label>
            <div class="row align-items-center">
                <div class="col-md-8">
                    <input type="file" name="file_ksk" class="form-control" accept="image/*,application/pdf" onchange="previewKsk(this)" {{ isset($ksk->file_ksk_path) ? '' : 'required' }}>
                    @if(isset($ksk->file_ksk_path))
                        <small class="text-white-50 mt-1 d-block">* Kosongkan jika tidak ingin mengganti file KSK</small>
                    @endif
                </div>
                <div class="col-md-4 mt-2 mt-md-0">
                    <div class="preview-ksk-box">
                        @if(isset($ksk->file_ksk_path))
                            @if(Str::endsWith($ksk->file_ksk_path, '.pdf'))
                                <i id="ksk-icon" class="bi bi-file-earmark-text fs-2 text-white d-none"></i>
                                <img id="ksk-img" class="d-none w-100 h-100" style="object-fit: contain;">
                                <div id="ksk-pdf" class="text-center">
                                    <i class="bi bi-file-earmark-pdf text-danger fs-2"></i>
                                    <p class="m-0 small text-white" style="font-size: 0.7rem;">PDF TERSEDIA</p>
                                </div>
                            @else
                                <i id="ksk-icon" class="bi bi-file-earmark-text fs-2 text-white d-none"></i>
                                <img id="ksk-img" src="{{ asset('storage/ksk_files/'.$ksk->file_ksk_path) }}" class="w-100 h-100" style="object-fit: contain;">
                                <div id="ksk-pdf" class="d-none text-center">
                                    <i class="bi bi-file-earmark-pdf text-danger fs-2"></i>
                                    <p class="m-0 small text-white" style="font-size: 0.7rem;">PDF READY</p>
                                </div>
                            @endif
                        @else
                            <i id="ksk-icon" class="bi bi-file-earmark-text fs-2 text-white" style="opacity: 0.5;"></i>
                            <img id="ksk-img" class="d-none w-100 h-100" style="object-fit: contain;">
                            <div id="ksk-pdf" class="d-none text-center">
                                <i class="bi bi-file-earmark-pdf text-danger fs-2"></i>
                                <p class="m-0 small text-white" style="font-size: 0.7rem;">PDF READY</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('auth.register.partials.buttons', ['backRoute' => route('register.step1')])
</form>
@endsection

@section('scripts')
<script>
document.querySelectorAll('.uppercase-input').forEach(input => {
    input.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
    if(input.value) input.value = input.value.toUpperCase();
});

function previewKsk(input){
    const file = input.files[0];
    const img = document.getElementById('ksk-img');
    const icon = document.getElementById('ksk-icon');
    const pdf = document.getElementById('ksk-pdf');

    if (file) {
        icon.classList.add('d-none');
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                img.classList.remove('d-none');
                pdf.classList.add('d-none');
            }
            reader.readAsDataURL(file);
        } else if (file.type === 'application/pdf') {
            img.classList.add('d-none');
            pdf.classList.remove('d-none');
        }
    }
}

document.getElementById('formStep2').addEventListener('submit', function () {
    const btn = document.getElementById('btnSubmit');
    if(btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm text-white"></span>';
    }
});
</script>
@endsection