@extends('layouts.admin')

@section('title', 'Database Warga - Superadmin')

@section('content')
<style>
    body { font-size: 11px !important; color: #334155; }
    .table td, .table th { padding: 6px 8px !important; vertical-align: middle; }
    .form-control-sm, .form-select-sm { font-size: 11px !important; height: calc(1.5em + 0.5rem + 2px); }
    label { font-weight: 700; color: #475569; text-transform: uppercase; font-size: 10px; margin-bottom: 2px; display: block; }
    
    .stepper-header { display: flex; gap: 5px; margin-bottom: 15px; }
    .step-item { flex: 1; padding: 10px; text-align: center; background: #f1f5f9; border-radius: 6px; font-weight: 800; color: #94a3b8; border: 1px solid #e2e8f0; transition: 0.3s; }
    .step-item.active { background: #dc3545; color: #fff; border-color: #dc3545; box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.2); }
    
    .card-header { background: #fff !important; border-bottom: 1px solid #edf2f7; }
    .btn-xs { padding: 2px 6px; font-size: 10px; border-radius: 4px; }
    .bg-light-custom { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
    .form-section-title { font-size: 11px; font-weight: 800; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; }
</style>

<div class="container-fluid py-3">
    <div class="card shadow-sm border-0">
        <div class="card-header d-flex justify-content-between align-items-center py-3">
            <h6 class="mb-0 fw-bold text-danger"><i class="fas fa-database me-2"></i>MANAJEMEN DATABASE WARGA</h6>
            <button class="btn btn-danger btn-sm px-3 fw-bold" onclick="openModalTambah()">
                <i class="fas fa-user-plus me-1"></i> INPUT DATA WARGA LAMA
            </button>
        </div>
        
        <div class="card-body">
            <form method="GET" class="row g-2 mb-4 p-3 bg-light-custom">
                <div class="col-md-1">
                    <label>Show</label>
                    <select name="show" class="form-select form-select-sm" onchange="this.form.submit()">
                        @foreach([10, 50, 100, 500] as $val)
                            <option value="{{ $val }}" {{ request('show') == $val ? 'selected' : '' }}>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Filter RW</label>
                    <select name="rw_id" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">-- SEMUA RW --</option>
                        @foreach($data_rw as $rw)
                            <option value="{{ $rw->id }}" {{ request('rw_id') == $rw->id ? 'selected' : '' }}>RW {{ $rw->kode_rw }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Filter RT</label>
                    <select name="rt" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">-- SEMUA RT --</option>
                        @foreach(range(1, 12) as $r)
                            @php $val = str_pad($r, 2, '0', STR_PAD_LEFT); @endphp
                            <option value="{{ $val }}" {{ request('rt') == $val ? 'selected' : '' }}>RT {{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Cari Nama / NIS / NIK</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" name="keyword" class="form-control form-control-sm border-start-0" value="{{ request('keyword') }}" placeholder="Ketik di sini...">
                    </div>
                </div>
                <div class="col-md-3 d-flex align-items-end gap-1">
                    <button class="btn btn-primary btn-sm w-100 fw-bold" type="submit">FILTER</button>
                    <a href="{{ route('adminrw.tambah_user.index') }}" class="btn btn-outline-secondary btn-sm fw-bold">RESET</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th width="100">NIS</th>
                            <th>NAMA KEPALA KELUARGA</th>
                            <th width="140">NIK</th>
                            <th class="text-center" width="80">RT/RW</th>
                            <th width="150">TEMPAT, TGL LAHIR</th>
                            <th class="text-center" width="100">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $u)
                        <tr>
                            <td class="fw-bold text-primary">{{ $u->nis }}</td>
                            <td class="text-uppercase fw-bold">{{ $u->nama_lengkap }}</td>
                            <td>{{ $u->profile?->nik ?? '-' }}</td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $u->ksk?->rt ?? '00' }}</span> / 
                                <span class="badge bg-danger">{{ $u->ksk?->rw?->kode_rw ?? '00' }}</span>
                            </td>
                            <td class="text-uppercase small">
                                {{ $u->profile?->tempat_lahir ?? '-' }}, <br>
                                {{ $u->profile?->tanggal_lahir ? \Carbon\Carbon::parse($u->profile->tanggal_lahir)->format('d/m/Y') : '-' }}
                            </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button class="btn btn-outline-warning btn-xs" onclick="editUser({{ $u->id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form action="{{ route('adminrw.tambah_user.destroy', $u->id) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-xs" onclick="return confirm('Hapus data ini secara permanen?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="6" class="text-center py-5 text-muted">Data warga tidak ditemukan.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-3">
                {{ $users->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUser" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <form id="formStoreUser" class="modal-content border-0" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="user_id" id="user_id">

            <div class="modal-header bg-dark text-white py-2">
                <h6 class="modal-title" id="modalTitle">FORM INPUT WARGA</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="modal-body p-4 bg-light">
                <div class="stepper-header mb-4">
                    <div class="step-item active" id="st-1">STEP 1: DATA INTI & KSK</div>
                    <div class="step-item" id="st-2">STEP 2: ANGGOTA KELUARGA</div>
                </div>

                <div id="panel-step-1">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <div class="p-3 bg-white rounded shadow-sm border-top border-4 border-danger h-100">
                                <h6 class="form-section-title text-danger">INFORMASI AKUN</h6>
                                <label>NIS (Username Login)</label>
                                <input type="text" name="nis" id="f_nis" class="form-control form-control-sm mb-2" required>
                                
                                <label>Password</label>
                                <input type="password" name="password" id="f_password" class="form-control form-control-sm mb-1">
                                <small class="text-muted d-block mb-3" id="passHint" style="font-size: 9px;">*Default: password123</small>
                                
                                <label>Foto Profil (.jpg/.png)</label>
                                <input type="file" name="foto" class="form-control form-control-sm">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 bg-white rounded shadow-sm border-top border-4 border-primary h-100">
                                <h6 class="form-section-title text-primary">DATA KEPALA KELUARGA</h6>
                                <div class="row g-2">
                                    <div class="col-md-12">
                                        <label>Nama Lengkap (Sesuai KTP)</label>
                                        <input type="text" name="nama_lengkap" id="f_nama" class="form-control form-control-sm text-uppercase" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label>NIK Kepala Keluarga</label>
                                        <input type="text" name="nik" id="f_nik" class="form-control form-control-sm" maxlength="16" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Nomor HP/WA</label>
                                        <input type="text" name="no_telepon" id="f_telp" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Tempat Lahir</label>
                                        <input type="text" name="tempat_lahir" id="f_tmp_lahir" class="form-control form-control-sm text-uppercase">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Tanggal Lahir</label>
                                        <input type="date" name="tanggal_lahir" id="f_tgl_lahir" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Jenis Kelamin</label>
                                        <select name="jenis_kelamin" id="f_jk" class="form-select form-select-sm">
                                            <option value="LAKI-LAKI">LAKI-LAKI</option>
                                            <option value="PEREMPUAN">PEREMPUAN</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Agama</label>
                                        <select name="agama" id="f_agama" class="form-select form-select-sm">
                                            @foreach(['ISLAM','KRISTEN','KATOLIK','HINDU','BUDHA','KONGHUCU'] as $ag)
                                                <option value="{{$ag}}">{{$ag}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Pendidikan</label>
                                        <select name="pendidikan" id="f_pendidikan" class="form-select form-select-sm">
                                            @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 $p)
                                                <option value="{{$p}}">{{$p}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Status Perkawinan</label>
                                        <select name="status_perkawinan" id="f_status_perkawinan" class="form-select form-select-sm">
                                            @foreach(['KAWIN', 'BELUM KAWIN', 'KAWIN TERCATAT', 'KAWIN BELUM TERCATAT', 'CERAI HIDUP', 'CERAI MATI'] as $sp)
                                                <option value="{{$sp}}">{{$sp}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-12">
                                        <label>Pekerjaan Utama</label>
                                        <input type="text" name="pekerjaan" id="f_pekerjaan" class="form-control form-control-sm text-uppercase">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="p-3 bg-white rounded shadow-sm border-top border-4 border-warning h-100">
                                <h6 class="form-section-title text-warning">DATA KSK & BERKAS</h6>
                                <label>Nomor KSK (16 Digit)</label>
                                <input type="text" name="nomor_ksk" id="f_ksk" class="form-control form-control-sm mb-2" maxlength="16" required>
                                
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <label>RW</label>
                                        <select name="rw_id" id="f_rw" class="form-select form-select-sm">
                                            @foreach($data_rw as $rw)<option value="{{ $rw->id }}">RW {{ $rw->kode_rw }}</option>@endforeach
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label>RT</label>
                                        <select name="rt" id="f_rt" class="form-select form-select-sm">
                                            @foreach(['01','02','03','04','05','06','07','08','09','10','11','12'] as $rtval)<option value="{{ $rtval }}">RT {{ $rtval }}</option>@endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="bg-light p-2 rounded border">
                                    <label class="mb-1 text-dark"><i class="fas fa-file-pdf me-1"></i>UPLOAD SCAN KSK</label>
                                    <input type="file" name="file_ksk" class="form-control form-control-sm mb-2">
                                    
                                    <label class="mb-1 text-dark"><i class="fas fa-file-alt me-1"></i>UPLOAD SERTIFIKAT</label>
                                    <input type="file" name="file_sertifikat" class="form-control form-control-sm">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="panel-step-2" style="display:none">
                    <div class="bg-white p-3 rounded shadow-sm border-top border-4 border-success">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h6 class="mb-0 fw-bold text-success">DAFTAR ANGGOTA KELUARGA</h6>
                                <small class="text-muted">Input Istri, Anak, atau Orang Tua yang tinggal serumah.</small>
                            </div>
                            <button type="button" class="btn btn-success btn-sm px-3 fw-bold" onclick="addAnggotaRow()">
                                <i class="fas fa-plus me-1"></i> TAMBAH ANGGOTA
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm align-middle">
                                <thead class="table-light">
                                    <tr style="font-size: 10px; text-align: center;">
                                        <th>NAMA LENGKAP</th>
                                        <th width="160">NIK</th>
                                        <th width="130">HUBUNGAN</th>
                                        <th width="120">J. KELAMIN</th>
                                        <th width="130">TGL LAHIR</th>
                                        <th>PEKERJAAN</th>
                                        <th width="40"></th>
                                    </tr>
                                </thead>
                                <tbody id="anggota-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer bg-light py-2">
                <button type="button" class="btn btn-secondary btn-sm px-4 fw-bold" id="btnPrev" onclick="moveStep(1)" style="display:none">KEMBALI</button>
                <button type="button" class="btn btn-primary btn-sm px-4 fw-bold" id="btnNext" onclick="moveStep(2)">LANJUT KE ANGGOTA <i class="fas fa-arrow-right ms-1"></i></button>
                <button type="submit" class="btn btn-danger btn-sm px-4 fw-bold" id="btnSimpan" style="display:none"><i class="fas fa-save me-1"></i> SIMPAN DATA WARGA</button>
            </div>
        </form>
    </div>
</div>

<script>
let agIdx = 0;

function moveStep(s) {
    if(s === 1) {
        $('#panel-step-1').show();
        $('#panel-step-2').hide();
        $('#btnNext').show();
        $('#btnPrev, #btnSimpan').hide();
        $('#st-1').addClass('active');
        $('#st-2').removeClass('active');
    } else {
        $('#panel-step-1').hide();
        $('#panel-step-2').show();
        $('#btnNext').hide();
        $('#btnPrev, #btnSimpan').show();
        $('#st-2').addClass('active');
        $('#st-1').removeClass('active');
        
        if($('#anggota-table-body tr').length === 0) {
            addAnggotaRow();
        }
    }
}

function openModalTambah() {
    $('#user_id').val('');
    $('#formStoreUser')[0].reset();
    $('#anggota-table-body').empty();
    $('#modalTitle').html('<i class="fas fa-plus-circle me-1"></i> INPUT DATA WARGA LAMA');
    $('#passHint').show().text('*Default Password: password123');
    moveStep(1);
    new bootstrap.Modal('#modalUser').show();
}

function addAnggotaRow(data = null) {
    agIdx++;
    const row = `
        <tr id="ag-row-${agIdx}">
            <td><input type="text" name="anggota[${agIdx}][nama]" value="${data ? data.nama : ''}" class="form-control form-control-sm text-uppercase" required></td>
            <td><input type="text" name="anggota[${agIdx}][nik]" value="${data ? data.nik : ''}" class="form-control form-control-sm" maxlength="16" required></td>
            <td>
                <select name="anggota[${agIdx}][status_keluarga]" class="form-select form-select-sm">
                    <option value="SUAMI" ${data && data.status_keluarga == 'SUAMI' ? 'selected' : ''}>SUAMI</option>
                    <option value="ISTERI" ${data && data.status_keluarga == 'ISTERI' ? 'selected' : ''}>ISTERI</option>
                    <option value="ANAK" ${data && data.status_keluarga == 'ANAK' ? 'selected' : ''}>ANAK</option>
                    <option value="MENANTU" ${data && data.status_keluarga == 'MENANTU' ? 'selected' : ''}>MENANTU</option>
                    <option value="CUCU" ${data && data.status_keluarga == 'CUCU' ? 'selected' : ''}>CUCU</option>
                    <option value="ORANG TUA" ${data && data.status_keluarga == 'ORANG TUA' ? 'selected' : ''}>ORANG TUA</option>
                    <option value="MERTUA" ${data && data.status_keluarga == 'MERTUA' ? 'selected' : ''}>MERTUA</option>
                    <option value="FAMILI LAIN" ${data && data.status_keluarga == 'FAMILI LAIN' ? 'selected' : ''}>FAMILI LAIN</option>
                    <option value="PEMBANTU" ${data && data.status_keluarga == 'PEMBANTU' ? 'selected' : ''}>PEMBANTU</option>
                </select>
            </td>
            <td>
                <select name="anggota[${agIdx}][jenis_kelamin]" class="form-select form-select-sm">
                    <option value="LAKI-LAKI" ${data && data.jenis_kelamin == 'LAKI-LAKI' ? 'selected' : ''}>LAKI-LAKI</option>
                    <option value="PEREMPUAN" ${data && data.jenis_kelamin == 'PEREMPUAN' ? 'selected' : ''}>PEREMPUAN</option>
                </select>
            </td>
            <td><input type="date" name="anggota[${agIdx}][tanggal_lahir]" value="${data ? data.tanggal_lahir : ''}" class="form-control form-control-sm"></td>
            <td><input type="text" name="anggota[${agIdx}][pekerjaan]" value="${data ? data.pekerjaan : ''}" class="form-control form-control-sm text-uppercase"></td>
            <td class="text-center">
                <button type="button" class="btn btn-link text-danger p-0" onclick="$('#ag-row-${agIdx}').remove()">
                    <i class="fas fa-times-circle"></i>
                </button>
            </td>
        </tr>
    `;
    $('#anggota-table-body').append(row);
}

function editUser(id) {
    $.get("/superadmin/tambah-user/" + id + "/edit", function(res) {
        $('#formStoreUser')[0].reset();
        $('#anggota-table-body').empty();
        $('#user_id').val(res.id);
        $('#f_nis').val(res.nis);
        $('#f_nama').val(res.nama_lengkap);
        
        if(res.profile) {
            $('#f_nik').val(res.profile.nik);
            $('#f_telp').val(res.profile.no_hp);
            $('#f_tmp_lahir').val(res.profile.tempat_lahir);
            $('#f_tgl_lahir').val(res.profile.tanggal_lahir);
            $('#f_jk').val(res.profile.jenis_kelamin);
            $('#f_agama').val(res.profile.agama);
            $('#f_pendidikan').val(res.profile.pendidikan);
            $('#f_status_perkawinan').val(res.profile.status_perkawinan);
            $('#f_pekerjaan').val(res.profile.pekerjaan);
        }
        
        if(res.ksk) {
            $('#f_ksk').val(res.ksk.nomor_ksk);
            $('#f_rw').val(res.ksk.rw_id);
            $('#f_rt').val(res.ksk.rt);
            if(res.ksk.anggota_keluarga) {
                res.ksk.anggota_keluarga.forEach(ag => {
                    if(ag.status_keluarga !== 'KEPALA KELUARGA') {
                        addAnggotaRow(ag);
                    }
                });
            }
        }
        
        $('#modalTitle').html('<i class="fas fa-edit me-1"></i> EDIT DATA: ' + res.nama_lengkap);
        $('#passHint').show().text('*Kosongkan jika tidak ingin mengganti password');
        moveStep(1);
        new bootstrap.Modal('#modalUser').show();
    });
}

$('#formStoreUser').on('submit', function(e) {
    e.preventDefault();
    const btn = $('#btnSimpan');
    const oldHtml = btn.html();
    btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> SEDANG MENYIMPAN...');
    
    $.ajax({
        url: "{{ route('adminrw.tambah_user.store') }}",
        method: "POST",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(res) {
            if(res.status === 'success') {
                alert(res.message);
                location.reload();
            } else {
                alert("GAGAL: " + res.message);
                btn.prop('disabled', false).html(oldHtml);
            }
        },
        error: function(err) {
            btn.prop('disabled', false).html(oldHtml);
            let msg = "Terjadi kesalahan sistem.";
            if(err.responseJSON && err.responseJSON.message) msg = err.responseJSON.message;
            alert("ERROR: " + msg);
        }
    });
});
</script>
@endsection