
    <link href="/c3/c3.min.css" rel="stylesheet">
    <script src="/c3/d3.v5.min.js" charset="utf-8"></script>
    <script src="/c3/c3.min.js"></script>

    <div id="vitalsGraphComponent" class="stag-chart mb-4 pt-3">
        <h4 class="font-weight-bold mb-1 text-secondary font-size-14 text-center">Blood Pressure</h4>
        <div id="bp-chart" class="mb-4">BP Graph</div>
        <hr class="my-3">
        <h4 class="font-weight-bold mb-1 text-secondary font-size-14 text-center">Weight</h4>
        <div id="weight-chart">Weight Graph</div>
    </div>

    <?php
    $dates = [];
    $startDate = $careMonth->start_date;
    $nextMonthFirstDay = date_format(date_add(date_create($startDate), date_interval_create_from_date_string("1 month")), 'Y-m-d');

    $nextDay = $startDate;
    while ($nextDay !== $nextMonthFirstDay) {
        $dates[] = $nextDay;
        $nextDay = date_format(date_add(date_create($nextDay), date_interval_create_from_date_string('1 day')), 'Y-m-d');
    }

    /** @var \App\Models\Client $patient */

    // BP
    $bpMeasurements = $patient->getNonZeroBpMeasurements->toArray();
    $weightMeasurements = $patient->getNonZeroWeightMeasurements->toArray();

    $bpData = [];
    $weightData = [];

    for ($i=0; $i<count($dates); $i++) {

        $date = $dates[$i];

        // bp
        $bp = array_filter($bpMeasurements, function($_measurement) use ($date) {
            return $_measurement['effective_date'] === $date;
        });
        if(count($bp)) {
            $bp = array_values($bp);
            $bp = $bp[count($bp) - 1];
        }
        else {
            $bp = null;
        }


        if ($bp) {
            $bpData[] = [
                "date" => $date,
                "sbp" => $bp["sbp_mm_hg"],
                "dbp" => $bp["dbp_mm_hg"]
            ];
        }

        // weight
        $weight = array_filter($weightMeasurements, function($_measurement) use ($date) {
            return $_measurement['effective_date'] === $date;
        });
        if(count($weight)) {
            $weight = array_values($weight);
            $weight = $weight[count($weight) - 1];
            $weightData[] = [
                "date" => $date,
                "weight" => $weight["numeric_value"]
            ];
        }

    }

    $bpDates = [];
    $sbpValues = [];
    $dbpValues = [];
    for ($i = 0; $i < count($bpData); $i++) {
        $bpDates[] = $bpData[$i]['date'];
        $sbpValues[] = $bpData[$i]['sbp'];
        $dbpValues[] = $bpData[$i]['dbp'];
    }

    $weightDates = [];
    $weightValues = [];
    for ($i = 0; $i < count($weightData); $i++) {
        $weightDates[] = $weightData[$i]['date'];
        $weightValues[] = $weightData[$i]['weight'];
    }

    ?>

    <script>
        (function() {
            function init() {
                bpChart();
                weightChart();
            }
            function bpChart() {
                window.vgBPChart = c3.generate({
                    bindto: '#bp-chart',
                    data: {
                        x: 'x',
                        // xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
                        columns: [
                            ['x', <?= implode(", ", array_map(function($_x) { return "'" . $_x . "'"; }, $bpDates)) ?>],
                            ['Systolic BP', <?= implode(", ", array_map(function($_x) { return "'" . $_x . "'"; }, $sbpValues)) ?>],
                            ['Diastolic BP', <?= implode(", ", array_map(function($_x) { return "'" . $_x . "'"; }, $dbpValues)) ?>]
                        ]
                    },
                    axis: {
                        x: {
                            type: 'timeseries',
                            tick: {
                                format: '%Y-%m-%d',
                                multiline: true,
                                fit: true,
                                rotate: -45
                            },
                        },
                        y: {
                            show: true,
                            label: {
                                text: 'Blood Pressure (mmHg)',
                                position: 'outer-middle'
                            },
                            min: 60,
                            max: 220
                        },
                    },
                    regions: [
                        {axis: 'y', start: 100, end: 130, class: 'safe-region', label: 'Safe Systolic BP: 100 to 130 mmHg'},
                        {axis: 'y', start: 60, end: 90, class: 'safe-region', label: 'Safe Diastolic BP: 60 to 90 mmHg'}
                    ]
                });
            }
            function weightChart() {
                window.vgWtChart = c3.generate({
                    bindto: '#weight-chart',
                    data: {
                        x: 'x',
                        columns: [
                            ['x', <?= implode(", ", array_map(function($_x) { return "'" . $_x . "'"; }, $weightDates)) ?>],
                            ['Weight', <?= implode(", ", array_map(function($_x) { return "'" . $_x . "'"; }, $weightValues)) ?>]
                        ]
                    },
                    axis: {
                        x: {
                            type: 'timeseries',
                            tick: {
                                format: '%Y-%m-%d',
                                multiline: true,
                                fit: true,
                                rotate: -45
                            },
                        },
                        y: {
                            show: true,
                            label: {
                                text: 'Weight (lbs)',
                                position: 'outer-middle'
                            },
                            min: 70,
                            max: 250
                        },
                    },
                    regions: [
                        // {axis: 'y', start: 100, end: 140, class: 'safe-region', label: 'Safe Weight: 100 to 140 lbs'},
                    ]
                });
            }
            addMCInitializer('vitalsGraph', init, '#vitalsGraphComponent');
        }).call(window);
    </script>
