@extends('layouts.dashboard')

@section('title', 'Laporan Asuransi & Riwayat Penyakit')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="fw-bold text-primary">Proteksi & Kesehatan Anggota</h4>
            <p class="text-muted">Analisis kepemilikan asuransi dan catatan riwayat kesehatan anggota.</p>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-shield-check fs-1 mb-2"></i>
                    <h2 class="fw-bold mb-0">{{ number_format($stats['asuransi_nelayan_y']) }}</h2>
                    <p class="small mb-0 opacity-75">Asuransi Nelayan (Y)</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-info text-white">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-heart-pulse fs-1 mb-2"></i>
                    <h2 class="fw-bold mb-0">{{ number_format($stats['bpjs_ketenagakerjaan_y']) }}</h2>
                    <p class="small mb-0 opacity-75">BPJS Ketenagakerjaan (Y)</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-secondary text-white">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-clipboard2-plus fs-1 mb-2"></i>
                    <h2 class="fw-bold mb-0">{{ number_format($stats['ada_riwayat']) }}</h2>
                    <p class="small mb-0 opacity-75">Anggota dengan Riwayat Penyakit</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-activity me-2"></i>Top 10 Catatan Riwayat Penyakit/Kecelakaan</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4">Deskripsi Riwayat</th>
                                    <th class="text-center">Jumlah Kasus</th>
                                    <th width="300">Tingkat Prevalensi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($riwayat as $r)
                                @php
                                    $totalKasus = $stats['ada_riwayat'] > 0 ? ($r->total / $stats['ada_riwayat']) * 100 : 0;
                                @endphp
                                <tr>
                                    <td class="ps-4 fw-medium">{{ $r->riwayat_penyakit_kecelakaan }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-danger-subtle text-danger px-3 py-2 border border-danger-subtle">
                                            {{ $r->total }} Anggota
                                        </span>
                                    </td>
                                    <td class="pe-4">
                                        <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1" style="height: 6px;">
                                                <div class="progress-bar bg-danger" style="width: {{ $totalKasus }}%"></div>
                                            </div>
                                            <span class="ms-2 small text-muted">{{ round($totalKasus, 1) }}%</span>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="3" class="text-center py-5 text-muted">
                                        <i class="bi bi-emoji-smile d-block fs-2 mb-2"></i>
                                        Tidak ada catatan penyakit atau kecelakaan kerja yang terdata.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-danger-subtle { background-color: #f8d7da; }
</style>
@endsection