@extends('layout.app')

@section('content')
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Home</li>
            <li class="breadcrumb-item"><a href="{{ route('warga.index') }}">Data Warga</a></li>
            <li class="breadcrumb-item active">Edit Warga</li>
        </ol>
    </div>

    <div class="row gutters">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Edit Data Penerima Bantuan Sosial: {{ $warga->nama }}</div>
                </div>
                <div class="card-body">
                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <form action="{{ route('warga.update', $warga->id) }}" method="POST" enctype="multipart/form-data"
                        id="formWarga">
                        @csrf
                        @method('PUT')

                        {{-- SEKSI I: IDENTITAS DIRI --}}
                        <div class="row gutters">
                            <div class="col-12">
                                <h6 class="mb-3 text-success font-weight-bold">I. Identitas Diri</h6>
                            </div>

                            <div class="col-md-4 col-12">
                                <div class="form-group">
                                    <label>NIK (16 Digit)</label>
                                    <input type="text" name="nik"
                                        class="form-control @error('nik') is-invalid @enderror"
                                        value="{{ old('nik', $warga->nik) }}" required maxlength="16">
                                    @error('nik')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-8 col-12">
                                <div class="form-group">
                                    <label>Nama Lengkap Kepala Keluarga</label>
                                    <input type="text" name="nama"
                                        class="form-control @error('nama') is-invalid @enderror"
                                        value="{{ old('nama', $warga->nama) }}" required>
                                    @error('nama')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-8 col-12">
                                <div class="form-group">
                                    <label>Alamat Domisili</label>
                                    <input type="text" name="alamat"
                                        class="form-control @error('alamat') is-invalid @enderror"
                                        value="{{ old('alamat', $warga->alamat) }}" required>
                                    @error('alamat')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-2 col-6">
                                <div class="form-group">
                                    <label>RT</label>
                                    <input type="text" name="rt"
                                        class="form-control @error('rt') is-invalid @enderror"
                                        value="{{ old('rt', $warga->rt) }}" required maxlength="3">
                                    @error('rt')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4 col-12">
                                <div class="form-group">
                                    <label class="text-danger font-weight-bold">Status Keberadaan Warga</label>
                                    <select name="status_bansos_riil"
                                        class="form-control @error('status_bansos_riil') is-invalid @enderror" required>
                                        <option value="aktif"
                                            {{ old('status_bansos_riil', $warga->status_bansos_riil) == 'aktif' ? 'selected' : '' }}>
                                            🟢 Aktif / Masih Ada</option>
                                        <option value="meninggal"
                                            {{ old('status_bansos_riil', $warga->status_bansos_riil) == 'meninggal' ? 'selected' : '' }}>
                                            ⚫ Meninggal Dunia</option>
                                        <option value="pindah"
                                            {{ old('status_bansos_riil', $warga->status_bansos_riil) == 'pindah' ? 'selected' : '' }}>
                                            🟠 Pindah Domisili / Luar Kota</option>
                                        <option value="mampu"
                                            {{ old('status_bansos_riil', $warga->status_bansos_riil) == 'mampu' ? 'selected' : '' }}>
                                            🔵 Sudah Mampu (Kaya)</option>
                                    </select>
                                    @error('status_bansos_riil')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-2 col-6">
                                <div class="form-group">
                                    <label>RW</label>
                                    <input type="text" name="rw"
                                        class="form-control @error('rw') is-invalid @enderror"
                                        value="{{ old('rw', $warga->rw) }}" required maxlength="3">
                                    @error('rw')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        {{-- SEKSI II: KRITERIA --}}
                        <div class="row gutters">
                            <div class="col-12">
                                <h6 class="mb-3 text-success font-weight-bold">II. Variabel Kriteria Seleksi</h6>
                            </div>
                            @foreach ($kriterias as $k)
                                @php
                                    $savedDetail = $warga->details->where('kriteria_id', $k->id)->first();
                                    $currentValue = $savedDetail ? $savedDetail->nilai_asli : '';
                                @endphp
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-dark">{{ $k->kode }}:
                                            {{ $k->nama }}</label>
                                        <select name="kriteria_{{ $k->id }}" class="form-control" required>
                                            <option value="">-- Pilih {{ $k->nama }} --</option>
                                            @foreach ($k->subKriterias as $sub)
                                                <option value="{{ $sub->nama_sub }}"
                                                    {{ old('kriteria_' . $k->id, $currentValue) == $sub->nama_sub ? 'selected' : '' }}>
                                                    {{ $sub->nama_sub }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <hr class="my-4">

                        {{-- SEKSI III: BERKAS PENDUKUNG --}}
                        <div class="row gutters">
                            <div class="col-12">
                                <h6 class="mb-2 text-success font-weight-bold">III. Berkas Pendukung</h6>
                            </div>

                            @if ($warga->dokumen_pendukung && count($warga->dokumen_pendukung) > 0)
                                <div class="col-12 mb-3">
                                    <label class="small font-weight-bold text-muted">File Terpilih (Centang untuk
                                        menghapus):</label>
                                    <div class="row bg-light p-3 rounded border">
                                        @foreach ($warga->dokumen_pendukung as $path)
                                            <div class="col-md-2 col-6 mb-2">
                                                <div
                                                    class="border p-2 rounded text-center bg-white shadow-sm position-relative">
                                                    @if (Str::endsWith($path, '.pdf'))
                                                        <i class="icon-file-text h2 text-danger d-block mb-2"></i>
                                                    @else
                                                        {{-- Perbaikan Path Gambar --}}
                                                        <img src="{{ asset('storage/' . $path) }}"
                                                            class="img-fluid rounded mb-2"
                                                            style="height: 60px; object-fit: cover;"
                                                            onerror="this.src='https://placehold.co/100x100?text=Error'">
                                                    @endif
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" name="hapus_dokumen[]"
                                                            value="{{ $path }}" class="custom-control-input"
                                                            id="del-{{ $loop->index }}">
                                                        <label class="custom-control-label text-danger small"
                                                            for="del-{{ $loop->index }}">Hapus</label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="col-12">
                                <div class="form-group p-4 text-center"
                                    style="border: 2px dashed #32be8f; border-radius: 12px; background: #fafffd;">
                                    <div id="file-preview-container" class="row mb-3 justify-content-center"></div>
                                    <i class="icon-plus-circle h1 text-success opacity-50 d-block"></i>
                                    <label class="d-block mt-2 font-weight-bold" style="cursor: pointer;"
                                        for="file-selector">Pilih Dokumen Tambahan</label>
                                    <input type="file" id="file-selector" class="form-control-file d-none" multiple
                                        accept=".jpg,.jpeg,.png,.pdf">
                                    <input type="file" name="files[]" id="real-file-input" class="d-none" multiple>
                                    <small class="text-muted d-block mt-2">JPG, PNG, PDF. Maks 2MB/file.</small>
                                </div>
                            </div>
                        </div>

                        <div class="row gutters mt-4">
                            <div class="col-12 text-right">
                                <a href="{{ route('warga.index') }}"
                                    class="btn btn-outline-secondary px-4 mr-2">Batal</a>
                                <button type="submit" class="btn btn-primary px-5"
                                    style="background-color: #32be8f; border: none;">Update Data Warga</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        const fileSelector = document.getElementById('file-selector');
        const realFileInput = document.getElementById('real-file-input');
        const previewContainer = document.getElementById('file-preview-container');
        let dataStorage = new DataTransfer();

        fileSelector.addEventListener('change', function() {
            const files = Array.from(this.files);
            files.forEach(file => {
                dataStorage.items.add(file);
                const reader = new FileReader();
                reader.onload = function(e) {
                    const col = document.createElement('div');
                    col.className = 'col-md-2 col-sm-4 col-6 mb-3 position-relative';
                    let icon = file.type === 'application/pdf' ?
                        '<i class="icon-file-text text-danger" style="font-size: 40px; margin:15px 0;"></i>' :
                        `<img src="${e.target.result}" class="img-thumbnail" style="height: 80px; width: 100%; object-fit: cover;">`;

                    col.innerHTML = `
                        <div class="p-2 border rounded bg-white shadow-sm h-100 d-flex flex-column align-items-center justify-content-center">
                            ${icon}
                            <small class="d-block text-truncate mt-1 w-100 text-center" title="${file.name}">${file.name}</small>
                            <button type="button" class="btn btn-danger btn-sm position-absolute rounded-circle btn-remove"
                                    data-name="${file.name}" style="top: -5px; right: 5px; padding: 0px 6px; z-index:10;">&times;</button>
                        </div>`;
                    previewContainer.appendChild(col);
                }
                reader.readAsDataURL(file);
            });
            realFileInput.files = dataStorage.files;
            this.value = '';
        });

        previewContainer.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-remove')) {
                const fileName = e.target.getAttribute('data-name');
                const newDataTransfer = new DataTransfer();
                Array.from(dataStorage.files).forEach(file => {
                    if (file.name !== fileName) newDataTransfer.items.add(file);
                });
                dataStorage = newDataTransfer;
                realFileInput.files = dataStorage.files;
                e.target.closest('.col-md-2').remove();
            }
        });
    </script>
@endsection