@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">Tambah 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">Pendaftaran Penerima Bantuan Sosial</div>
                </div>
                <div class="card-body">
                    {{-- Tampilkan Error General jika ada --}}
                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

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

                        {{-- 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') }}"
                                        placeholder="3512..." 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') }}"
                                        placeholder="Sesuai KTP" 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') }}" placeholder="Nama Dusun / Jalan" 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') }}"
                                        placeholder="001" required maxlength="3">
                                    @error('rt')
                                        <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') }}"
                                        placeholder="001" required maxlength="3">
                                    @error('rw')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        {{-- SEKSI II: KRITERIA SELEKSI (DINAMIS DARI DATABASE) --}}
                        <div class="row gutters">
                            <div class="col-12">
                                <h6 class="mb-3 text-success font-weight-bold">II. Variabel Kriteria Seleksi</h6>
                                <p class="text-muted small">Silakan pilih kategori yang sesuai untuk warga tersebut.</p>
                            </div>

                            @foreach ($kriterias as $k)
                                <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 @error('kriteria_' . $k->id) is-invalid @enderror" required>
                                            <option value="">-- Pilih {{ $k->nama }} --</option>
                                            @foreach ($k->subKriterias as $sub)
                                                <option value="{{ $sub->nama_sub }}"
                                                    {{ old('kriteria_' . $k->id) == $sub->nama_sub ? 'selected' : '' }}>
                                                    {{ $sub->nama_sub }}
                                                </option>
                                            @endforeach
                                        </select>

                                        @error('kriteria_' . $k->id)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </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 (Multiple Upload)</h6>
                            </div>
                            <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 (KTP, KK, Foto Rumah, dll)
                                    </label>

                                    {{-- Input bantuan untuk interaksi user --}}
                                    <input type="file" id="file-selector" class="form-control-file d-none" multiple
                                        accept=".jpg,.jpeg,.png,.pdf">

                                    {{-- Input asli yang akan dikirim ke Controller --}}
                                    <input type="file" name="files[]" id="real-file-input" class="d-none" multiple>

                                    <small class="text-muted d-block mt-2">Format: JPG, PNG, PDF. Maksimal 2MB per
                                        file.</small>

                                    @error('files')
                                        <div class="text-danger mt-1 small font-weight-bold">{{ $message }}</div>
                                    @enderror
                                    @error('files.*')
                                        <div class="text-danger mt-1 small font-weight-bold">Salah satu file tidak valid (Cek
                                            format/ukuran).</div>
                                    @enderror
                                </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-success px-5"
                                    style="background-color: #32be8f; border: none;">
                                    <i class="icon-save"></i> Simpan Data Warga
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- SCRIPT UNTUK PREVIEW FILE --}}
    <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-top:15px; margin-bottom:15px;"></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);
            });

            // Update input file asli
            realFileInput.files = dataStorage.files;
            // Reset selector agar bisa pilih file yang sama jika dihapus
            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