<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perkembangan Saya | Sistem Monitoring CP</title>
    <link rel="icon" type="image/png" href="<?php echo e(asset('asset/logo/favicon.png')); ?>">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <style>
        * { font-family: 'Inter', sans-serif; }
        body { background: #eef2f7; }

        .top-navbar {
            background: linear-gradient(135deg, #0f2a4a 0%, #1e3a5f 100%);
            box-shadow: 0 2px 20px rgba(15,42,74,.3);
            padding:12px 20px; display:flex; justify-content:space-between; align-items:center;
            position:sticky; top:0; z-index:40;
        }

        .stat-card { background:#fff; border-radius:18px; padding:22px 24px; box-shadow:0 4px 20px rgba(15,42,74,.08); border:1px solid #e8edf4; }
        .card-section { background:#fff; border-radius:20px; padding:28px; box-shadow:0 4px 24px rgba(15,42,74,.08); margin-bottom:24px; border:1px solid #e8edf4; }
        .section-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
        .section-icon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; flex-shrink:0; }

        .skor-pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 14px; border-radius:20px; font-weight:700; font-size:.82rem; }
        .skor-high { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; }
        .skor-mid  { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; }
        .skor-low  { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; }

        .data-table { width:100%; border-collapse:collapse; }
        .data-table th { background:linear-gradient(135deg,#0f2a4a,#1e3a5f); color:#fff; padding:12px 16px; text-align:left; font-size:.78rem; font-weight:700; letter-spacing:.05em; }
        .data-table th:first-child { border-radius:12px 0 0 0; }
        .data-table th:last-child { border-radius:0 12px 0 0; }
        .data-table td { padding:12px 16px; border-bottom:1px solid #eef2f7; font-size:.87rem; }
        .data-table tr:nth-child(even) td { background:#f8faff; }
        .data-table tr:hover td { background:#eff6ff; transition:background .15s; }
        .data-table tr:last-child td { border-bottom:none; }

        .btn { display:inline-flex; align-items:center; gap:6px; padding:.7rem 1.5rem; border-radius:12px; font-weight:600; font-size:.9rem; cursor:pointer; transition:all .2s; border:none; text-decoration:none; }
        .btn-pdf { background:linear-gradient(135deg,#0d9488,#14b8a6); color:#fff; box-shadow:0 4px 14px rgba(20,184,166,.3); }
        .btn-pdf:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,184,166,.4); }
        .btn-logout { background:rgba(239,68,68,.75); color:#fff; padding:.45rem .9rem; font-size:.8rem; border-radius:10px; border:1px solid rgba(239,68,68,.3); }
        .btn-logout:hover { background:#dc2626; }

        @media (max-width: 640px) {
            .card-section { padding:16px; border-radius:14px; }
            .stat-card { padding:14px 16px; }
            .data-table td, .data-table th { padding:9px 10px; font-size:.8rem; }
            .btn { min-height:42px; }
        }
    </style>
</head>
<body>


<div class="top-navbar">
    <div class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 overflow-hidden" style="background:rgba(255,255,255,.15)">
            <img src="<?php echo e(asset('asset/logo/rs-waras-wiris.png')); ?>" class="w-8 h-8 object-cover rounded-lg" alt="Logo">
        </div>
        <div>
            <div class="font-bold text-sm text-white">RSUD Waras Wiris</div>
            <div class="text-xs" style="color:rgba(255,255,255,.6)">Monitoring Perkembangan Pasien</div>
        </div>
    </div>
    <div class="flex items-center gap-3">
        <div class="text-right hidden sm:block">
            <div class="font-semibold text-sm text-white"><?php echo e(auth()->user()->name); ?></div>
            <div class="text-xs" style="color:rgba(255,255,255,.6)">Pasien</div>
        </div>
        <form method="POST" action="<?php echo e(route('logout')); ?>">
            <?php echo csrf_field(); ?>
            <button class="btn btn-logout">Keluar</button>
        </form>
    </div>
</div>

<div class="max-w-5xl mx-auto px-4 sm:px-5 py-6">

    
    <div class="rounded-2xl p-6 mb-8 text-white relative overflow-hidden" style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
        <div style="position:absolute;right:-20px;top:-20px;width:160px;height:160px;background:rgba(255,255,255,.07);border-radius:50%"></div>
        <div style="position:absolute;right:40px;bottom:-40px;width:120px;height:120px;background:rgba(255,255,255,.05);border-radius:50%"></div>
        <h1 class="text-xl font-bold mb-1">Selamat Datang, <?php echo e(auth()->user()->name); ?></h1>
        <p class="text-blue-200 text-sm">Pantau perkembangan terapi GMFM Anda di sini</p>
    </div>

    
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-8">
        <div class="stat-card flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center font-bold text-white text-lg" style="background:#1e3a5f"><?php echo e($total); ?></div>
            <div>
                <div class="text-2xl font-black" style="color:#1e3a5f">Penilaian</div>
                <div class="text-xs text-slate-500 mt-0.5">Total Sesi Penilaian</div>
            </div>
        </div>
        <div class="stat-card flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center font-bold text-white text-lg" style="background:#14b8a6">%</div>
            <div>
                <div class="text-2xl font-black" style="color:#14b8a6"><?php echo e(number_format($rataSkor ?? 0, 1)); ?>%</div>
                <div class="text-xs text-slate-500 mt-0.5">Rata-rata Skor GMFM</div>
            </div>
        </div>
        <div class="stat-card flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center font-bold text-white text-sm" style="background:#16a34a">Aktif</div>
            <div>
                <div class="text-sm font-bold" style="color:#16a34a">Aktif &amp; Terpantau</div>
                <div class="text-xs text-slate-500 mt-0.5">Status Pemantauan</div>
            </div>
        </div>
    </div>

    
    <?php if(count($chartLabels) > 0): ?>
    <div class="card-section">
        <div class="section-head">
            <div class="w-1 h-8 rounded-full" style="background:#1e3a5f"></div>
            <div>
                <h2 class="font-bold text-lg" style="color:#1e3a5f">Grafik Perkembangan Skor</h2>
                <p class="text-xs text-slate-400">Persentase skor GMFM dari waktu ke waktu</p>
            </div>
        </div>
        <canvas id="chartSkor" height="80"></canvas>
    </div>
    <?php endif; ?>

    
    <?php if(count($dimensiData['per_penilaian']) > 0): ?>
    <div class="card-section">
        <div class="section-head">
            <div class="w-1 h-8 rounded-full" style="background:#14b8a6"></div>
            <div>
                <h2 class="font-bold text-lg" style="color:#1e3a5f">Skor Per Dimensi GMFM</h2>
                <p class="text-xs text-slate-400">Rata-rata skor tiap dimensi per penilaian (skala 1–7)</p>
            </div>
        </div>
        <canvas id="chartDimensi" height="90"></canvas>
    </div>
    <?php endif; ?>

    
    <div class="card-section flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <h3 class="font-bold text-lg" style="color:#1e3a5f">Download Laporan Perkembangan</h3>
            <p class="text-sm text-slate-500 mt-1">File PDF berisi statistik, tabel riwayat, dan grafik perkembangan skor GMFM</p>
        </div>
        <a href="<?php echo e(route('pasien.download.pdf')); ?>" class="btn btn-pdf whitespace-nowrap">
            Download Laporan PDF
        </a>
    </div>

    
    <div class="card-section">
        <div class="section-head">
            <div class="w-1 h-8 rounded-full" style="background:#6366f1"></div>
            <div>
                <h2 class="font-bold text-lg" style="color:#1e3a5f">Riwayat Monitoring</h2>
                <p class="text-xs text-slate-400">Semua catatan penilaian GMFM Anda</p>
            </div>
        </div>

        <div class="overflow-x-auto rounded-xl">
            <div style="min-width:500px">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Dinilai Oleh</th>
                        <th style="text-align:center">Skor (%)</th>
                        <th>Catatan Terapis</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr>
                        <td>
                            <div class="font-semibold text-slate-700"><?php echo e(\Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y')); ?></div>
                        </td>
                        <td class="text-slate-500"><?php echo e($item->creator->name ?? '-'); ?></td>
                        <td style="text-align:center">
                            <span class="skor-pill <?php echo e($item->skor >= 75 ? 'skor-high' : ($item->skor >= 45 ? 'skor-mid' : 'skor-low')); ?>">
                                <?php echo e($item->skor); ?>%
                            </span>
                        </td>
                        <td class="text-slate-500"><?php echo e($item->catatan ?? '—'); ?></td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="4" style="text-align:center;padding:48px;color:#94a3b8">
                            <div style="font-size:2.5rem;margin-bottom:8px">📭</div>
                            Belum ada data monitoring
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
            </div>
        </div>
    </div>

    <div class="text-center text-xs text-slate-400 mt-6">
        © <?php echo e(date('Y')); ?> Sistem Monitoring Pasien CP · RSUD Waras Wiris
    </div>
</div>

<script>
<?php if(count($chartLabels) > 0): ?>
const ctxSkor = document.getElementById('chartSkor').getContext('2d');
new Chart(ctxSkor, {
    type: 'line',
    data: {
        labels: <?php echo json_encode($chartLabels, 15, 512) ?>,
        datasets: [{
            label: 'Skor GMFM (%)',
            data: <?php echo json_encode($chartScores, 15, 512) ?>,
            borderColor: '#1e3a5f',
            backgroundColor: 'rgba(30,58,95,0.08)',
            fill: true, tension: 0.4,
            pointBackgroundColor: '#1e3a5f',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend:{ display:false } },
        scales: {
            y: { beginAtZero:true, max:100, title:{display:true,text:'Skor (%)',font:{size:11}}, grid:{color:'#f0f4f8'} },
            x: { grid:{display:false} }
        }
    }
});
<?php endif; ?>

<?php if(count($dimensiData['per_penilaian']) > 0): ?>
const ctxDimensi = document.getElementById('chartDimensi').getContext('2d');
const colors = ['#1e3a5f','#14b8a6','#6366f1','#f59e0b','#ef4444','#22c55e','#ec4899'];
const datasets = <?php echo json_encode($dimensiData['per_penilaian'], 15, 512) ?>.map((p, i) => ({
    label: p.tanggal,
    data: p.dimensi_scores,
    backgroundColor: colors[i % colors.length] + 'cc',
    borderColor: colors[i % colors.length],
    borderWidth: 1.5,
    borderRadius: 6,
}));
new Chart(ctxDimensi, {
    type: 'bar',
    data: { labels: <?php echo json_encode($dimensiData['dimensi_labels'], 15, 512) ?>, datasets },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero:true, max:7, title:{display:true,text:'Rata-rata Skor (1–7)',font:{size:11}}, grid:{color:'#f0f4f8'} },
            x: { grid:{display:false} }
        },
        plugins: { legend:{ position:'bottom', labels:{ boxWidth:12, font:{size:11} } } }
    }
});
<?php endif; ?>
</script>
</body>
</html>
<?php /**PATH D:\KULIAH\Skripsi\monitoring-cerebral-palsy\resources\views/pasien.blade.php ENDPATH**/ ?>