@extends('layout.app')

@section('content')

{{-- CSS Custom untuk Mempercantik Tampilan Detail --}}
<style>
    .card-custom {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .info-label {
        font-size: 0.65rem;
        color: #868e96;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }
    .info-value {
        font-size: 0.85rem;
        color: #343a40;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .kriteria-box {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 10px 12px;
        height: 100%;
    }
    .kriteria-kode {
        font-size: 0.65rem;
        font-weight: 800;
        color: #17a2b8;
        margin-bottom: 2px;
    }
    .kriteria-nama {
        font-size: 0.75rem;
        color: #495057;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    .kriteria-nilai {
        font-size: 0.85rem;
        font-weight: 700;
        color: #212529;
    }
    .doc-preview {
        transition: transform 0.2s;
        border-radius: 8px;
        overflow: hidden;
    }
    .doc-preview:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }
</style>

<div class="page-header d-flex justify-content-between align-items-center">
    <ol class="breadcrumb m-0">
        <li class="breadcrumb-item">Verifikator</li>
        <li class="breadcrumb-item"><a href="{{ route('verifikasi.index') }}">Manajemen Verifikasi</a></li>
        <li class="breadcrumb-item active text-primary font-weight-bold">Detail Warga</li>
    </ol>

    {{-- Tombol Kembali --}}
    <a href="{{ route('verifikasi.index') }}" class="btn btn-light btn-sm shadow-sm font-weight-bold text-muted border" style="font-size: 0.8rem;">
        <i class="icon-arrow-left mr-1"></i> Kembali ke Daftar
    </a>
</div>

<div class="row gutters mt-3">
    {{-- SISI KIRI: DATA WARGA & KRITERIA --}}
    <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-3">
        <div class="card card-custom">
            <div class="card-header bg-white pt-4 pb-2 border-bottom">
                <h6 class="card-title mb-0 font-weight-bold text-dark" style="font-size: 0.95rem;">
                    <i class="icon-user text-primary mr-2"></i>Profil Calon Penerima
                </h6>
            </div>
            <div class="card-body">

                {{-- Info Identitas Dasar --}}
                <div class="row">
                    <div class="col-12">
                        <div class="info-label">Nama Lengkap</div>
                        <div class="info-value">{{ $warga->nama }}</div>
                    </div>
                    <div class="col-12">
                        <div class="info-label">Nomor Induk Kependudukan (NIK)</div>
                        <div class="info-value"><i class="icon-credit-card text-muted mr-2" style="font-size: 0.8rem;"></i>{{ $warga->nik }}</div>
                    </div>
                    <div class="col-12">
                        <div class="info-label">Alamat Terdaftar</div>
                        <div class="info-value">
                            {{ $warga->alamat }} <br>
                            <span class="badge badge-light border text-muted mt-1" style="font-size: 0.7rem; font-weight: 600;">RT {{ $warga->rt }} / RW {{ $warga->rw }}</span>
                        </div>
                    </div>
                </div>

                <hr class="my-3 border-light">

                {{-- Data Kriteria Dinamis (Looping dari WargaDetail) --}}
                <h6 class="font-weight-bold text-dark mb-3" style="font-size: 0.85rem;">
                    <i class="icon-list text-info mr-2"></i>Variabel Penilaian (Kriteria)
                </h6>
                <div class="row gutters">
                    @forelse($warga->details as $detail)
                        <div class="col-6 mb-3">
                            <div class="kriteria-box">
                                <div class="kriteria-kode">{{ $detail->kriteria->kode }}</div>
                                <div class="kriteria-nama">{{ $detail->kriteria->nama }}</div>
                                <div class="kriteria-nilai text-success">
                                    {{ $detail->subKriteria->nama_sub ?? $detail->nilai_asli ?? '-' }}
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center py-3 bg-light rounded">
                            <span class="text-muted small">Data kriteria tidak ditemukan.</span>
                        </div>
                    @endforelse
                </div>

                <hr class="my-3 border-light">

                {{-- LOGIKA TAMPILAN: FORM KEPUTUSAN vs INFO STATUS --}}
                @if($warga->status_verifikasi == 'pending')

                    {{-- JIKA PENDING: Tampilkan Form --}}
                    <div class="bg-light p-3 rounded" style="border-left: 4px solid #007bff;">
                        <h6 class="font-weight-bold text-primary mb-2" style="font-size: 0.85rem;">Tindakan Verifikasi</h6>
                        <form action="{{ route('verifikasi.proses', $warga->id) }}" method="POST" id="formVerifikasi">
                            @csrf
                            <div class="form-group mb-2">
                                <label class="info-label text-dark">Catatan Evaluasi (Opsional)</label>
                                <textarea name="catatan" class="form-control form-control-sm" rows="2" style="font-size: 0.8rem;" placeholder="Tulis catatan jika berkas kurang/lengkap..."></textarea>
                            </div>
                            <div class="d-flex gap-2 mt-3">
                                {{-- Tombol diubah tipe menjadi 'button' untuk ditangkap oleh JS SweetAlert --}}
                                <button type="button" class="btn btn-success btn-sm flex-grow-1 mr-2 shadow-sm font-weight-bold btn-aksi" data-status="setuju">
                                    <i class="icon-check-circle mr-1"></i> SETUJU
                                </button>
                                <button type="button" class="btn btn-danger btn-sm flex-grow-1 shadow-sm font-weight-bold btn-aksi" data-status="tolak">
                                    <i class="icon-x-circle mr-1"></i> TOLAK
                                </button>
                            </div>
                        </form>
                    </div>

                @else

                    {{-- JIKA SUDAH DIPROSES: Tampilkan Banner Info --}}
                    @php
                        $isSetuju = $warga->status_verifikasi == 'setuju';
                        $bgColor = $isSetuju ? '#d4edda' : '#f8d7da';
                        $borderColor = $isSetuju ? '#28a745' : '#dc3545';
                        $textColor = $isSetuju ? '#155724' : '#721c24';
                        $icon = $isSetuju ? 'icon-check-circle' : 'icon-x-circle';
                    @endphp

                    <div class="p-3 rounded" style="background-color: {{ $bgColor }}; border-left: 4px solid {{ $borderColor }};">
                        <div class="d-flex align-items-center mb-2">
                            <i class="{{ $icon }} mr-2" style="font-size: 1.5rem; color: {{ $borderColor }};"></i>
                            <div>
                                <h6 class="m-0 font-weight-bold" style="color: {{ $textColor }}; font-size: 0.9rem;">
                                    Dokumen {{ strtoupper($warga->status_verifikasi) }}
                                </h6>
                                <small style="color: {{ $textColor }}; font-size: 0.7rem;">{{ $warga->updated_at->format('d M Y, H:i') }}</small>
                            </div>
                        </div>

                        <div class="bg-white p-2 rounded shadow-sm mb-2">
                            <span class="text-muted d-block" style="font-size: 0.7rem;">Diverifikasi Oleh:</span>
                            <span class="font-weight-bold text-dark" style="font-size: 0.8rem;"><i class="icon-user mr-1"></i>{{ $warga->verifikator->nama_lengkap ?? 'Sistem / Verifikator' }}</span>
                        </div>

                        <div class="bg-white p-2 rounded shadow-sm">
                            <span class="text-muted d-block" style="font-size: 0.7rem;">Catatan:</span>
                            <span class="text-dark font-weight-500" style="font-size: 0.8rem;">{{ $warga->catatan ?: 'Tidak ada catatan.' }}</span>
                        </div>
                    </div>

                @endif

            </div>
        </div>
    </div>

    {{-- SISI KANAN: DOKUMEN PENDUKUNG --}}
    <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12 mb-3">
        <div class="card card-custom">
            <div class="card-header bg-white pt-4 pb-2 border-bottom d-flex justify-content-between align-items-center">
                <h6 class="card-title mb-0 font-weight-bold text-dark" style="font-size: 0.95rem;">
                    <i class="icon-folder text-warning mr-2"></i>Lampiran Berkas Warga
                </h6>
                <span class="badge badge-pill badge-primary shadow-sm px-3 py-1" style="font-size: 0.75rem;">
                    {{ count($warga->dokumen_pendukung ?? []) }} File Dilampirkan
                </span>
            </div>
            <div class="card-body">
                <div class="row gutters">
                    @forelse($warga->dokumen_pendukung ?? [] as $file)
                        <div class="col-md-6 col-sm-12 mb-4">
                            <div class="bg-white p-2 border shadow-sm doc-preview">
                                @php $ext = pathinfo($file, PATHINFO_EXTENSION); @endphp

                                @if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png']))
                                    <a href="{{ asset('storage/' . $file) }}" target="_blank">
                                        <div style="height: 180px; width: 100%; display: flex; align-items: center; justify-content: center; background: #e9ecef; border-radius: 6px; overflow: hidden; margin-bottom: 8px;">
                                            <img src="{{ asset('storage/' . $file) }}" alt="Preview" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                        </div>
                                    </a>
                                @else
                                    <div style="height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e9ecef; border-radius: 6px; margin-bottom: 8px;">
                                        <i class="icon-file-text text-danger mb-2" style="font-size: 3rem;"></i>
                                        <span class="font-weight-bold text-secondary text-uppercase" style="font-size: 0.8rem;">{{ $ext }} FILE</span>
                                    </div>
                                @endif

                                <a href="{{ asset('storage/' . $file) }}" target="_blank" class="btn btn-outline-primary btn-sm btn-block font-weight-bold rounded" style="font-size: 0.75rem;">
                                    <i class="icon-external-link mr-1"></i> Buka Layar Penuh
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center py-5">
                            <div class="d-flex flex-column align-items-center justify-content-center">
                                <div class="bg-white rounded-circle shadow-sm d-flex justify-content-center align-items-center mb-3" style="width: 70px; height: 70px;">
                                    <i class="icon-folder-minus text-muted" style="font-size: 2rem;"></i>
                                </div>
                                <h6 class="font-weight-bold text-dark" style="font-size: 0.9rem;">Tidak Ada Lampiran</h6>
                                <p class="text-muted" style="font-size: 0.8rem;">Warga ini tidak menyertakan dokumen pendukung.</p>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
{{-- Include library SweetAlert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Ambil semua tombol dengan class .btn-aksi
        const actionButtons = document.querySelectorAll('.btn-aksi');
        const form = document.getElementById('formVerifikasi');

        actionButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();

                // Ambil status (setuju/tolak) dari atribut data-status
                const status = this.getAttribute('data-status');

                // Atur konfigurasi alert berdasarkan status
                let swalTitle, swalText, swalIcon, swalColor;

                if (status === 'setuju') {
                    swalTitle = "Setujui Dokumen?";
                    swalText = "Apakah Anda yakin dokumen ini VALID dan DISETUJUI?";
                    swalIcon = "success";
                    swalColor = "#28a745";
                } else {
                    swalTitle = "Tolak Dokumen?";
                    swalText = "Apakah Anda yakin dokumen ini TIDAK LENGKAP dan DITOLAK?";
                    swalIcon = "warning";
                    swalColor = "#dc3545";
                }

                // Tampilkan SweetAlert
                Swal.fire({
                    title: swalTitle,
                    text: swalText,
                    icon: swalIcon,
                    showCancelButton: true,
                    confirmButtonColor: swalColor,
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Lanjutkan!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Jika dikonfirmasi, tambahkan input hidden untuk status dan submit form
                        const inputStatus = document.createElement('input');
                        inputStatus.type = 'hidden';
                        inputStatus.name = 'status';
                        inputStatus.value = status;

                        form.appendChild(inputStatus);
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endpush