<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Laporan Perkembangan - {{ $user->name }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        @page {
            size: A4 portrait;
            margin: 15mm 20mm 15mm 20mm;
        }

        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 11px;
            color: #1e293b;
            line-height: 1.5;
            padding: 10px 30px;
        }

        .header {
            text-align: center;
            border-bottom: 3px solid #0F4C81;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .header h1 { color: #0F4C81; font-size: 18px; margin-bottom: 3px; }
        .header p { color: #64748b; font-size: 10px; }

        .info-box {
            background: #f1f5f9;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 18px;
        }
        .info-box table { width: 100%; }
        .info-box td { padding: 3px 0; }
        .info-box .label { color: #64748b; width: 180px; }
        .info-box .value { font-weight: bold; color: #0F4C81; }

        .stats {
            width: 100%;
            margin-bottom: 18px;
        }
        .stats td {
            width: 50%;
            padding: 10px 14px;
            text-align: center;
            border-radius: 8px;
        }
        .stats .stat-box {
            background: #f1f5f9;
            border-top: 3px solid #0F4C81;
        }
        .stats .stat-box h2 { font-size: 22px; color: #0F4C81; }
        .stats .stat-box p { font-size: 9px; color: #64748b; }

        .section-title {
            color: #0F4C81;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 8px;
            border-bottom: 1px solid #CBD5E1;
            padding-bottom: 4px;
        }

        table.data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 18px;
            font-size: 10px;
        }
        table.data-table th {
            background: #0F4C81;
            color: white;
            padding: 6px 8px;
            text-align: left;
        }
        table.data-table td {
            padding: 5px 8px;
            border-bottom: 1px solid #e2e8f0;
        }
        table.data-table tr:nth-child(even) {
            background: #f8fafc;
        }

        .skor-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 10px;
        }
        .skor-high { background: #d1fae5; color: #065f46; }
        .skor-mid { background: #fef3c7; color: #92400e; }
        .skor-low { background: #fee2e2; color: #991b1b; }

        .dimensi-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 18px;
            font-size: 10px;
        }
        .dimensi-table th {
            background: #1FB6A6;
            color: white;
            padding: 6px 8px;
            text-align: center;
        }
        .dimensi-table td {
            padding: 5px 8px;
            border-bottom: 1px solid #e2e8f0;
            text-align: center;
        }
        .dimensi-table tr:nth-child(even) {
            background: #f0fdfa;
        }

        .footer {
            text-align: center;
            color: #94a3b8;
            font-size: 9px;
            margin-top: 30px;
            border-top: 1px solid #e2e8f0;
            padding-top: 10px;
        }

        .keterangan {
            font-size: 9px;
            color: #64748b;
            margin-bottom: 18px;
        }
        .keterangan table { width: 100%; }
        .keterangan td { padding: 1px 6px; }
    </style>
</head>
<body>

    {{-- HEADER --}}
    <div class="header">
        <h1>Laporan Perkembangan Pasien</h1>
        <p>Sistem Monitoring Perkembangan Pasien Cerebral Palsy · Rumah Sakit Umum Daerah Waras Wiris</p>
    </div>

    {{-- INFO PASIEN --}}
    <div class="info-box">
        <table>
            <tr>
                <td class="label">Nama Pasien</td>
                <td class="value">{{ $user->name }}</td>
            </tr>
            <tr>
                <td class="label">Umur</td>
                <td class="value">
                    @if($user->tanggal_lahir)
                        @php
                            $lahir = \Carbon\Carbon::parse($user->tanggal_lahir);
                            $umurTahun = $lahir->age;
                            $umurBulan = $lahir->diff(now())->m;
                        @endphp
                        {{ $umurTahun }} tahun {{ $umurBulan }} bulan
                    @else
                        -
                    @endif
                </td>
            </tr>
            <tr>
                <td class="label">Alamat</td>
                <td class="value">{{ $user->alamat ?? '-' }}</td>
            </tr>
            <tr>
                <td class="label">Email</td>
                <td class="value">{{ $user->email }}</td>
            </tr>
            <tr>
                <td class="label">Tanggal Cetak</td>
                <td class="value">{{ \Carbon\Carbon::now()->translatedFormat('d F Y, H:i') }}</td>
            </tr>
        </table>
    </div>

    {{-- STATISTIK --}}
    <table class="stats">
        <tr>
            <td>
                <div class="stat-box">
                    <h2>{{ $total }}</h2>
                    <p>Total Penilaian</p>
                </div>
            </td>
            <td>
                <div class="stat-box">
                    <h2>{{ number_format($rataSkor ?? 0, 1) }}%</h2>
                    <p>Rata-rata Skor</p>
                </div>
            </td>
        </tr>
    </table>

    {{-- GRAFIK PERKEMBANGAN --}}
    @if(!empty($chartImage))
    <p class="section-title">Grafik Perkembangan Skor GMFM</p>
    <div style="text-align:center; margin-bottom:18px;">
        <img src="{{ $chartImage }}" style="width:100%; max-width:700px;" alt="Grafik Perkembangan">
    </div>
    @elseif(count($chartLabels) <= 1 && count($chartLabels) > 0)
    <p class="section-title">Grafik Perkembangan Skor GMFM</p>
    <div style="text-align:center; padding:20px; background:#f1f5f9; border-radius:8px; margin-bottom:18px; color:#64748b; font-size:10px;">
        Grafik akan muncul setelah ada minimal 2 data penilaian
    </div>
    @endif

    {{-- TABEL RIWAYAT --}}
    <p class="section-title">Riwayat Monitoring</p>
    <table class="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Tanggal</th>
                <th>Dinilai Oleh</th>
                <th>Skor (%)</th>
                <th>Catatan</th>
            </tr>
        </thead>
        <tbody>
            @forelse($data as $i => $item)
            <tr>
                <td>{{ $i + 1 }}</td>
                <td>{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d M Y') }}</td>
                <td>{{ $item->creator->name ?? '-' }}</td>
                <td>
                    <span class="skor-badge {{ $item->skor >= 80 ? 'skor-high' : ($item->skor >= 60 ? 'skor-mid' : 'skor-low') }}">
                        {{ $item->skor }}%
                    </span>
                </td>
                <td>{{ $item->catatan ?? '-' }}</td>
            </tr>
            @empty
            <tr><td colspan="5" style="text-align:center;">Belum ada data</td></tr>
            @endforelse
        </tbody>
    </table>

    {{-- FOOTER --}}
    <div class="footer">
        Dicetak oleh Sistem Monitoring Perkembangan Pasien · Rumah Sakit Waras Wiris
        <br>Dokumen ini dihasilkan secara otomatis
    </div>

</body>
</html>
