@extends('admin.layouts.app')

@section('title', 'Penilaian Warga')

@section('content')
@php
    $kriteriaList = \App\Models\Kriteria::orderBy('kode')->get();
@endphp
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Penilaian Warga</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="bi bi-clipboard-check me-2"></i>Penilaian Warga</h2>
            <p class="text-muted mb-0">Kelola penilaian kriteria untuk calon penerima BLT-DD</p>
        </div>
        <div class="d-flex gap-2">
            @if ($periodeAktif)
            <a href="{{ route('admin.penilaian.export', $periodeAktif->id) }}" class="btn btn-outline-success">
                <i class="bi bi-file-earmark-arrow-down me-1"></i> Export Excel
            </a>
            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="bi bi-file-earmark-arrow-up me-1"></i> Import Excel
            </button>
            @endif
            <a href="{{ route('admin.penilaian.create') }}" class="btn btn-success">
                <i class="bi bi-plus-circle me-2"></i>Tambah Penilaian
            </a>
        </div>
    </div>


    @if ($periodeAktif && \Carbon\Carbon::parse($periodeAktif->tanggal_selesai)->endOfDay()->isPast())
    <div class="alert alert-warning border-warning shadow-sm mb-4">
        <i class="bi bi-exclamation-triangle-fill me-2 text-warning"></i>
        <strong>Perhatian:</strong> Masa aktif periode seleksi <strong>{{ $periodeAktif->nama }}</strong> telah berakhir pada {{ \Carbon\Carbon::parse($periodeAktif->tanggal_selesai)->format('d/m/Y') }}. Anda masih dapat menyesuaikan penilaian warga sebelum penerima ditetapkan secara final pada menu Proses SAW.
    </div>
    @endif

    <!-- Info Periode -->
    @if ($periodeAktif)
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="mb-2"><i class="bi bi-calendar-event text-success me-2"></i>Periode Aktif</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <small class="text-muted">Nama Periode</small>
                            <p class="mb-0 fw-bold">{{ $periodeAktif->nama }}</p>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Tanggal</small>
                            <p class="mb-0">{{ \Carbon\Carbon::parse($periodeAktif->tanggal_mulai)->format('d/m/Y') }} -
                                {{ \Carbon\Carbon::parse($periodeAktif->tanggal_selesai)->format('d/m/Y') }}
                            </p>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Kuota Penerima</small>
                            <p class="mb-0">{{ $periodeAktif->kuota_penerima }} orang</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="d-flex flex-column gap-2">
                        <span class="badge bg-success fs-6">{{ $warga->count() }} Warga Dinilai</span>
                        @if ($periodeAktif->status == 'aktif')
                        <span class="badge bg-primary fs-6">Status: {{ ucfirst($periodeAktif->status) }}</span>
                        @else
                        <span class="badge bg-secondary fs-6">Status: {{ ucfirst($periodeAktif->status) }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Table Card -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Daftar Warga yang Sudah Dinilai</h5>
                <span class="badge bg-secondary">Total: {{ $warga->count() }} warga</span>
            </div>
        </div>
        <div class="card-body p-0">
            @if ($warga->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead class="table-success">
                    <thead class="table-success">
                        <tr>
                            <th width="50" class="text-center">No</th>
                            <th>Nama Warga</th>
                            <th>NIK</th>
                            <th>Alamat</th>
                            <th>Dusun/RW</th>
                            <th class="text-center" colspan="{{ $kriteriaList->count() }}">Nilai Kriteria</th>
                            <th width="150" class="text-center">Aksi</th>
                        </tr>
                        <tr class="table-light">
                            <th colspan="5"></th>
                            @foreach ($kriteriaList as $k)
                            <th class="text-center small" title="{{ $k->nama }}">{{ $k->kode }}</th>
                            @endforeach
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($warga as $index => $w)
                        @php
                        // Ambil nilai per kriteria (gunakan relasi 'penilaian' sesuai Model Warga)
                        $nilaiKriteria = $w->penilaian->keyBy('kriteria_id');
                        @endphp
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td><strong>{{ $w->nama }}</strong></td>
                            <td>{{ $w->nik }}</td>
                            <td>{{ Str::limit($w->alamat, 30) }}</td>
                            <td>{{ $w->dusun }}, RW {{ $w->rw }}</td>

                            <!-- Nilai Kriteria Dinamis -->
                            @foreach ($kriteriaList as $k) 
                                <td class="text-center">
                                @if ($nilaiKriteria->has($k->id))
                                <span class="badge bg-primary">{{ $nilaiKriteria[$k->id]->nilai }}</span>
                                @else
                                <span class="text-muted">-</span>
                                @endif
                                </td>
                            @endforeach

                                <td class="text-center">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('admin.penilaian.show', $w->id) }}" class="btn btn-info" title="Detail">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.penilaian.edit', $w->id) }}" class="btn btn-warning" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ route('admin.penilaian.destroy', $w->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus penilaian warga ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm" title="Hapus">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="text-center py-5">
                <i class="bi bi-inbox display-1 text-muted"></i>
                <h5 class="mt-3">Belum Ada Penilaian</h5>
                <p class="text-muted">Silakan tambah penilaian warga untuk periode aktif</p>
                <a href="{{ route('admin.penilaian.create') }}" class="btn btn-success mt-2">
                    <i class="bi bi-plus-circle me-2"></i>Tambah Penilaian
                </a>
            </div>
            @endif
        </div>
    </div>

    <!-- Info Footer -->
    <div class="card shadow-sm border-0 mt-4">
        <div class="card-body">
            <h6 class="mb-3"><i class="bi bi-info-circle text-primary me-2"></i>Keterangan Kriteria</h6>
            <div class="row">
                @php
                    $chunks = $kriteriaList->chunk(ceil($kriteriaList->count() / 2));
                @endphp
                @foreach ($chunks as $chunk)
                <div class="col-md-6">
                    <ul class="list-unstyled mb-0">
                        @foreach ($chunk as $k)
                        <li><strong>{{ $k->kode }}:</strong> {{ $k->nama }}</li>
                        @endforeach
                    </ul>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>


{{-- Modal Import Excel --}}
@if ($periodeAktif)
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('admin.penilaian.import') }}" method="POST" enctype="multipart/form-data" id="formImport">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="importModalLabel">
                        <i class="bi bi-file-earmark-arrow-up me-2"></i>Import Data Penilaian
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info border-0 small">
                        <i class="bi bi-info-circle-fill me-1"></i>
                        <strong>Petunjuk:</strong>
                        <ul class="mb-0 mt-1">
                            <li>Gunakan file hasil <strong>Export Excel</strong> sebagai template.</li>
                            <li>Pastikan kolom <strong>NIK</strong> sesuai dengan data warga yang ada di sistem.</li>
                            <li>Nilai kriteria (C1-C5) harus berupa angka <strong>1-5</strong> atau format deskriptif (misal: "1 - Tidak bekerja").</li>
                            <li>Data yang sudah ada akan <strong>diperbarui</strong> (update), bukan duplikasi.</li>
                        </ul>
                    </div>
                    <div class="mb-3">
                        <label for="importFile" class="form-label fw-semibold">Pilih File Excel</label>
                        <input type="file" class="form-control" id="importFile" name="file" accept=".xlsx,.xls" required>
                        <div class="form-text">Format: .xlsx atau .xls (maks. 5MB)</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i>Batal
                    </button>
                    <button type="submit" class="btn btn-primary" id="btnImport">
                        <i class="bi bi-upload me-1"></i>Import Sekarang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
    document.getElementById('formImport')?.addEventListener('submit', function() {
        const btn = document.getElementById('btnImport');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Mengimpor...';
    });
</script>
@endpush

@push('styles')
<style>
    .table th {
        font-weight: 600;
        white-space: nowrap;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
    }
</style>
@endpush
@endsection