@extends('layouts.nurse')

@section('content')
<div class="max-w-7xl mx-auto py-8 px-4">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Kick & Hiccup Tracker</h1>
        <p class="text-white/80">Monitor fetal movements for expectant mothers</p>
    </div>

    <!-- Patient Info -->
    <div class="nurse-card p-6 mb-6">
        <h2 class="text-xl font-semibold nurse-text-primary mb-4">Patient: SITI SARAH</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
                <div class="text-3xl font-bold nurse-text-primary mb-2">4</div>
                <div class="text-gray-600">Today's Kicks</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold nurse-text-primary mb-2">2</div>
                <div class="text-gray-600">Today's Hiccups</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold nurse-text-primary mb-2">6</div>
                <div class="text-gray-600">Total Movements</div>
            </div>
        </div>
    </div>

    <!-- Chart -->
    <div class="nurse-card p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-lg font-semibold nurse-text-primary">Weekly Activity</h3>
                <p class="text-gray-600">Baby's movements over the past 7 days</p>
            </div>
            <div class="flex items-center space-x-4 text-sm">
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-pink-400 rounded-full mr-2"></div>
                    <span>Kicks</span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-blue-400 rounded-full mr-2"></div>
                    <span>Hiccups</span>
                </div>
            </div>
        </div>

        <div style="height: 400px;">
            <canvas id="weeklyChart"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Real data from your system
    const weeklyStats = [
        {"date":"Oct 13","day":"Mon","kicks":0,"hiccups":0},
        {"date":"Oct 14","day":"Tue","kicks":0,"hiccups":0},
        {"date":"Oct 15","day":"Wed","kicks":0,"hiccups":0},
        {"date":"Oct 16","day":"Thu","kicks":0,"hiccups":0},
        {"date":"Oct 17","day":"Fri","kicks":7,"hiccups":6},
        {"date":"Oct 18","day":"Sat","kicks":4,"hiccups":2},
        {"date":"Oct 19","day":"Sun","kicks":0,"hiccups":0}
    ];

    const canvas = document.getElementById('weeklyChart');
    const ctx = canvas.getContext('2d');

    const labels = weeklyStats.map(stat => stat.day);
    const kicksData = weeklyStats.map(stat => stat.kicks);
    const hiccupsData = weeklyStats.map(stat => stat.hiccups);

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Kicks',
                data: kicksData,
                borderColor: '#F272B6',
                backgroundColor: 'rgba(242, 114, 182, 0.1)',
                borderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: '#F272B6',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                tension: 0.4,
                fill: true
            }, {
                label: 'Hiccups',
                data: hiccupsData,
                borderColor: '#6A89CC',
                backgroundColor: 'rgba(106, 137, 204, 0.1)',
                borderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: '#6A89CC',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.parsed.y + ' movements';
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1,
                        font: {
                            size: 12,
                            weight: '600'
                        },
                        color: '#6B7280'
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                        drawBorder: false
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 12,
                            weight: '600'
                        },
                        color: '#374151'
                    },
                    grid: {
                        display: false
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });

    console.log('✅ Chart rendered successfully with Chart.js!');
});
</script>
@endsection