@extends('layouts.admin')

@section('title', 'Manajemen Berkas Warga')

@section('content')
<style>
    /* Clean up Bootstrap 5 Table & Modal tweaks */
    .table thead th { background-color: #f8f9fc; color: #4e73df !important; border-bottom: 2px solid #e3e6f0; font-size: 0.8rem; text-transform: uppercase; }
    .preview-container { position: relative; width: 100%; height: 100px; background: #f8fafc; border: 2px dashed #d1d3e2; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .preview-container img { width: 100%; height: 100%; object-fit: cover; }
    .text-dark-bold { color: #3a3b45 !important; font-weight: 700; }
    .alamat-text { font-size: 0.85rem; color: #4e73df; font-weight: 500; }
    
    /* Fix modal backdrop in BS5 if needed */
    .modal-backdrop { opacity: 0.5 !important; }
</style>

<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800"><i class="fas fa-folder-open text-primary mr-2"></i> UPDATE BERKAS FILE ANGGOTA</h1>
    </div>

    {{-- Filter Card --}}
    <div class="card shadow mb-4 border-0">
        <div class="card-body bg-light rounded">
            <form action="{{ route('adminrw.berkas.index') }}" method="GET" id="filterForm">
                <div class="row align-items-end">
                    <div class="col-md-1 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark text-uppercase">Baris</label>
                        <select name="perPage" class="form-select border-0 shadow-sm autosubmit">
                            @foreach([25, 50, 100, 300] as $val)
                                <option value="{{ $val }}" {{ request('perPage') == $val ? 'selected' : '' }}>{{ $val }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark text-uppercase">Pencarian</label>
                        <div class="input-group shadow-sm">
                            <input type="text" name="search" id="liveSearch" class="form-control border-0" placeholder="Nama atau NIS..." value="{{ request('search') }}">
                            <span class="input-group-text bg-white border-0"><i class="fas fa-search text-primary"></i></span>
                        </div>
                    </div>
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark text-uppercase">RT</label>
                        <select name="rt" class="form-select border-0 shadow-sm autosubmit">
                            <option value="all">Semua RT</option>
                            @foreach($data_rt as $rt)
                                <option value="{{ $rt }}" {{ request('rt') == $rt ? 'selected' : '' }}>RT {{ sprintf("%02d", $rt) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark text-uppercase">RW</label>
                        <select name="rw_id" class="form-select border-0 shadow-sm autosubmit">
                            <option value="all">Semua RW</option>
                            @foreach($data_rw as $rw)
                                <option value="{{ $rw->id }}" {{ request('rw_id') == $rw->id ? 'selected' : '' }}>{{ $rw->nama_rw }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                         <a href="{{ route('adminrw.berkas.index') }}" class="btn btn-white border shadow-sm w-100 text-primary font-weight-bold">
                            <i class="fas fa-undo fa-sm mr-1"></i> Reset
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Table Card --}}
    <div class="card shadow mb-4 border-0">
        <div class="card-header py-3 d-flex align-items-center justify-content-between bg-white">
            <h6 class="m-0 font-weight-bold text-dark">Data Dokumen Warga</h6>
            <span class="badge bg-primary shadow-sm p-2 px-3">Total: {{ $warga->total() }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead>
                        <tr>
                            <th class="text-center py-3" width="50">No</th>
                            <th>Nama & NIS</th>
                            <th>Alamat</th> {{-- HEADER SENDIRI --}}
                            <th>Wilayah</th>
                            <th class="text-center">Berkas File</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($warga as $key => $row)
                        <tr>
                            <td class="text-center text-muted fw-bold">{{ $warga->firstItem() + $key }}</td>
                            <td>
                                <div class="text-dark-bold text-uppercase">{{ $row->nama }}</div>
                                <div class="small text-muted fw-bold mt-1">NIS: <span class="text-secondary">{{ $row->nis }}</span></div>
                            </td>
                            <td>
                                <div class="alamat-text">
                                    <i class="fas fa-map-marker-alt text-danger me-1"></i> {{ $row->alamat ?? 'Belum diisi' }}
                                </div>
                            </td>
                            <td>
                                <div class="badge bg-light border text-dark fw-bold">RT {{ sprintf("%02d", $row->rt) }}</div>
                                <div class="small text-muted fw-bold d-block mt-1">{{ $row->nama_rw }}</div>
                            </td>
                            <td class="text-center">
                                <div class="btn-group shadow-sm">
                                    <a href="{{ $row->foto_path ? asset('storage/foto_user/'.$row->foto_path) : '#' }}" target="_blank" class="btn btn-sm {{ $row->foto_path ? 'btn-outline-info' : 'btn-light disabled' }}"><i class="fas fa-image"></i></a>
                                    <a href="{{ $row->ksk_path ? asset('storage/ksk/'.$row->ksk_path) : '#' }}" target="_blank" class="btn btn-sm {{ $row->ksk_path ? 'btn-outline-primary' : 'btn-light disabled' }}"><i class="fas fa-file-invoice"></i></a>
                                    <a href="{{ $row->sertifikat ? asset('storage/sertifikat_user/'.$row->sertifikat) : '#' }}" target="_blank" class="btn btn-sm {{ $row->sertifikat ? 'btn-outline-success' : 'btn-light disabled' }}"><i class="fas fa-certificate"></i></a>
                                </div>
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-warning btn-sm shadow-sm text-dark fw-bold px-3" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#modalUpdate{{ $row->id }}">
                                    <i class="fas fa-edit me-1"></i> Update
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">Data warga tidak ditemukan</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white border-0 py-4 d-flex justify-content-center">
            {{ $warga->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

{{-- MODAL SECTION --}}
@foreach($warga as $row)
<div class="modal fade" id="modalUpdate{{ $row->id }}" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <form action="{{ route('adminrw.berkas.update', $row->id) }}" method="POST" enctype="multipart/form-data">
                @csrf @method('PUT')
                <div class="modal-header border-0 bg-light">
                    <h5 class="modal-title text-dark fw-bold"><i class="fas fa-upload text-warning me-2"></i>Update Berkas: {{ $row->nama }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        {{-- FOTO PROFIL --}}
                        <div class="col-md-4 mb-4 text-center">
                            <label class="small fw-bold text-dark text-uppercase mb-2 d-block">Foto Profil</label>
                            <div class="preview-container mb-2" id="preview-foto-{{ $row->id }}">
                                @if($row->foto_path)
                                    <img src="{{ asset('storage/foto_user/'.$row->foto_path) }}">
                                @else
                                    <i class="fas fa-user fa-2x text-gray-300"></i>
                                @endif
                            </div>
                            <input type="file" name="foto" class="form-control form-control-sm file-input" data-preview="preview-foto-{{ $row->id }}" accept="image/*">
                        </div>
                        
                        {{-- KSK (FIXED: CHECK DATABASE FILE) --}}
                        <div class="col-md-4 mb-4 text-center">
                            <label class="small fw-bold text-dark text-uppercase mb-2 d-block">Kartu Keluarga (KSK)</label>
                            <div class="preview-container mb-2" id="preview-ksk-{{ $row->id }}">
                                @if($row->ksk_path)
                                    @php $extKsk = pathinfo($row->ksk_path, PATHINFO_EXTENSION); @endphp
                                    @if(in_array(strtolower($extKsk), ['jpg', 'jpeg', 'png', 'webp']))
                                        <img src="{{ asset('storage/ksk/'.$row->ksk_path) }}">
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-file-pdf fa-2x text-danger"></i>
                                            <div class="small fw-bold mt-1 d-block text-dark">PDF Terdaftar</div>
                                        </div>
                                    @endif
                                @else
                                    <i class="fas fa-address-card fa-2x text-gray-300"></i>
                                @endif
                            </div>
                            <input type="file" name="ksk" class="form-control form-control-sm file-input" data-preview="preview-ksk-{{ $row->id }}" accept="image/*,application/pdf">
                        </div>

                        {{-- SERTIFIKAT (FIXED: CHECK DATABASE FILE) --}}
                        <div class="col-md-4 mb-4 text-center">
                            <label class="small fw-bold text-dark text-uppercase mb-2 d-block">Sertifikat</label>
                            <div class="preview-container mb-2" id="preview-sertifikat-{{ $row->id }}">
                                @if($row->sertifikat)
                                    @php $extCert = pathinfo($row->sertifikat, PATHINFO_EXTENSION); @endphp
                                    @if(in_array(strtolower($extCert), ['jpg', 'jpeg', 'png', 'webp']))
                                        <img src="{{ asset('storage/sertifikat_user/'.$row->sertifikat) }}">
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-award fa-2x text-success"></i>
                                            <div class="small fw-bold mt-1 d-block text-dark">PDF Terdaftar</div>
                                        </div>
                                    @endif
                                @else
                                    <i class="fas fa-medal fa-2x text-gray-300"></i>
                                @endif
                            </div>
                            <input type="file" name="sertifikat" class="form-control form-control-sm file-input" data-preview="preview-sertifikat-{{ $row->id }}" accept="image/*,application/pdf">
                        </div>
                    </div>
                    <div class="bg-light p-2 rounded border-start border-4 border-warning mt-2 text-center">
                        <small class="text-dark font-italic">Kosongkan jika tidak ada perubahan berkas.</small>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light">
                    <button class="btn btn-secondary btn-sm px-3" type="button" data-bs-dismiss="modal">Batal</button>
                    <button class="btn btn-primary btn-sm px-4 shadow-sm fw-bold" type="submit">
                        <i class="fas fa-save me-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Filter & Search logic
        $('.autosubmit').on('change', function() { $('#filterForm').submit(); });
        let timer = null;
        $('#liveSearch').on('keyup', function() {
            clearTimeout(timer);
            timer = setTimeout(() => { $('#filterForm').submit(); }, 700);
        });

        // LIVE PREVIEW SCRIPT
        $(document).on('change', '.file-input', function() {
            const input = this;
            const previewId = $(this).data('preview');
            const previewContainer = $('#' + previewId);
            
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (file.type.match('image.*')) {
                        previewContainer.html(`<img src="${e.target.result}" style="width:100%; height:100%; object-fit:cover;">`);
                    } else if (file.type === 'application/pdf') {
                        previewContainer.html(`
                            <div class="text-center text-dark">
                                <i class="fas fa-file-pdf fa-2x text-danger"></i>
                                <div class="small fw-bold mt-1">PDF Terpilih</div>
                            </div>
                        `);
                    }
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endpush