@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('content')
    {{-- {{pre($Finaldata)}} --}}
    {{-- {{ pre($mrc) }} --}}

    @php
        if (Crypt::decrypt($_GET['cat_name']) == 'Do an COPD Assessment sum') {
            $title = __('test.result');
            $subTitle = __('test.test_assessment_title');
            $subTitle1 = __('test.test_assessment_sub1');
            $subTitle2 = __('test.test_assessment_sub2');
            $route = route('front.patient.take-assesment-test.view');
            $img = '/ic_new_resullt_image.webp';
            $routeBtn = __('test.take_test');
        } elseif (Crypt::decrypt($_GET['cat_name']) == 'Measure SP02') {
            $title = __('test.test_oxygen_title');
            $subTitle = __('test.test_oxygen_title');
            $img = '/ic_new_resullt_image.webp';
            $route = route('front.patient.get-spo2-measure.view');
            $routeBtn = __('test.take_test');
            $subTitle1 = __('test.test_oxygen_sub1');
            $subTitle2 = __('test.test_oxygen_sub2');
        } elseif (Crypt::decrypt($_GET['cat_name']) == 'Perform Spirometry') {
            $title = __('dashboard.mrc_breathlessness_grade');
            $subTitle = __('dashboard.mrc_breathlessness_grade_results');
            $route = route('front.patient.get-mrc-test.view', ['is_edit' => Crypt::encrypt('NO')]);
            $img = '/img_asthma_checker_header.webp';
            $routeBtn = __('test.take_test');
        }
    @endphp
    <div class="container-fluid p-3">
        <nav class="navbar d-flex ">
            <div class=" d-flex ">
                <a href="{{ route('front.patient.test-count.view') }}">
                    <i class="mt-2 p-2 fa fa-arrow-left  fs-4 float-start ms-2 ">
                    </i></a>
                <h5 class="m-2 p-2 text-center ">
                    {{ $title }}
                </h5>
            </div>
        </nav>
        <div class="d-flex justify-content-center ">
            <div class="col-md-6 ">
                <div class="mt-4 mb-4 ">
                    <img class=" img-fluid" src="{{ s3Url('uploads/patient') . $img }}">
                </div>
            </div>
        </div>
        <div class="container-fluid mt-3 p-2">
            @if (!empty($mrc['description']))
                <p class="fs-3 p-3"> {!! $mrc['description'] !!}</p>

                <div class="float-end text-dark fw-bold"><i class="fa fa-plus-circle  mx-2 fs-5"></i><a
                        href="{{ $route }}">
                        {{ $routeBtn }} </a></div>

                {{-- {{ pre($mrcGraph) }} --}}
                <div class="container card col-lg-8 p-4 mt-5">
                    <div class="d-flex justify-content-between mt-4">
                        <div id="loaderClass" class="position-absolute top-50 start-50 translate-middle d-none">
                            <div class="spinner-border text-dark  " role="status">
                                <span class="visually-hidden ">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-4">
                        <i id="minusYear" role="button" class=" fa fa-arrow-circle-left fs-3 text-dark"></i>
                        <p id="year" class="fw-bold text-dark">{{ date('Y') }}</p>
                        <i id="plusYear" role="button" class="fa fa-arrow-circle-right fs-3 text-dark"></i>
                    </div>
                    {{-- mrcChart --}}
                    <canvas class="mt-3" id="mrcChart"></canvas>

                </div>
            @else
                <p class="fs-3">{{ $subTitle }}</p>
                <p class="text-center">
                    {{ $subTitle1 }}
                </p>
                <p class="text-center">
                    {{ $subTitle2 }}
                </p>

                {{-- <span id="tempWeek" class="d-none"></span> --}}
                <div class="container-fluid d-flex justify-content-center mt-3 p-2">
                    <div class="col-10 nav-wrapper position-relative end-0">
                        <div class="d-flex">
                            <div class="col-4 text-drak text-center p-2">
                                <input type="radio" class="btn-check " autocomplete="off" name="filter" id="getWeekPara"
                                    data-start-date="{{ Carbon\Carbon::now()->startOfWeek()->format('Y-m-d') }}"
                                    data-end-date="{{ Carbon\Carbon::now()->endOfWeek()->format('Y-m-d') }}">
                                <label class="col-12  border-2 border-light btn btn-custom-dark "
                                    for="getWeekPara">W</label>
                            </div>
                            <div class="col-4 text-drak text-center  p-2">
                                <input type="radio" class="btn-check " autocomplete="off" name="filter" id="getMonthPara"
                                    data-month="{{ date('m') }}" data-start-date="{{ date('01-m-Y') }}"
                                    data-end-date="{{ date('t-m-Y') }}" @checked(true)>
                                <label class="col-12  border-2 border-light btn btn-custom-dark "
                                    for="getMonthPara">M</label>
                            </div>
                            <div class="col-4 text-drak text-center  p-2">
                                <input type="radio" class="btn-check " autocomplete="off" name="filter" id="getYearPara"
                                    data-start-date="{{ date('01-m-Y') }}" data-end-date="{{ date('t-m-Y') }}">
                                <label class="col-12  border-2 border-light btn btn-custom-dark "
                                    for="getYearPara">Y</label>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="bg-dark ">
                <div class="float-end text-dark fw-bold"><i class="fa fa-plus-circle  mx-2 fs-5"></i><a
                        href="{{ $route }}">
                        {{ $routeBtn }} </a></div>

                <div class="container card col-lg-8 p-4 mt-3 position-relative">
                    <div class="d-flex justify-content-between mt-4">
                        <div id="loaderClass" class="position-absolute top-50 start-50 translate-middle d-none">
                            <div class="spinner-border text-dark  " role="status">
                                <span class="visually-hidden ">Loading...</span>
                            </div>
                        </div>
                        <i id="minusData" role="button" class=" fa fa-arrow-circle-left fs-3 text-dark"></i>
                        <p id="displayTime" class="fw-bold text-dark">{{ date('F Y') }}</p>
                        <i id="plusData" role="button" class="fa fa-arrow-circle-right fs-3 text-dark"></i>
                    </div>
                    <canvas class="mt-3" id="resultChart"></canvas>
                </div>
            @endif
        </div>

        <div class="mt-5">
            <a href="{{ route('front.patient.get-result-all.view', ['category' => $_GET['cat_name']]) }}"
                class=" d-flex justify-content-between">
                <p class="fs-4 fw-bold">{{ __('dashboard.show_all_data') }}
                </p>
                <i class="fs-3 fa fa-angle-right"></i>
            </a>
        </div>

        @if (!empty($mrc['description']))
            <div class="text-center">
                <a href="{{ route('front.patient.education.educationExAll') }}"
                    class="btn btn-dark bgDarkBlue  mx-3 mt-2 btn-md fw-bold ">{{ __('dashboard.All_videos') }}
                </a>
            </div>
        @endif
    </div>
@section('js')
    <script src="{{ asset('patientAssets') }}/js/chart.js"></script>
    @if (!empty($mrc['description']))
        <script nonce="{{ $cspNonce }}">
            const ctx1 = document.getElementById('mrcChart');

            let monthLabels = [];
            let mrcData = [];
            let mrcBackgroundColor = [];
            let mrcString = [];
            @foreach ($mrcGraph as $mrcG)
                monthLabels.push('{{ $mrcG['month'] }}');
                mrcData.push('{{ $mrcG['value'] }}');
                mrcBackgroundColor.push('{{ $mrcG['color'] }}');
                mrcString.push("{{ $mrcG['string'] }}");
            @endforeach

            let mrcChart = new Chart(ctx1, {
                type: 'bar',
                data: {
                    labels: monthLabels,
                    datasets: [{
                        data: mrcData,
                        label: mrcString,
                        barThickness: 10,
                        pointStyle: 'circle',
                        backgroundColor: mrcBackgroundColor,
                    }]
                },
                options: {
                    responsive: true,

                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: false,
                        tooltip: {
                            usePointStyle: true,
                            callbacks: {
                                title: () => {
                                    return "";
                                },
                                label: (item) => {
                                    let textLabel = item.dataset.label;
                                    return [textLabel[item.dataIndex]];
                                },
                            },
                            label: false,
                        }
                    }
                }
            });

            let Year = $('#year').html();
            let CYear = new Date().getFullYear();
            $('#minusYear').on('click', function() {
                $("#loaderClass").removeClass('d-none');
                Year = $('#year').html();
                let thisYear = $('#year').html(Year - 1);
                $.ajax({
                    type: "get",
                    url: '{{ route('front.patient.get-mrc-graph.json') }}',
                    data: {
                        "year": thisYear.html(),
                    },
                    success: function(response) {
                        response.data.forEach((data, index) => {
                            monthLabels[index] = (data.month);
                            mrcData[index] = (data.value);
                            mrcString[index] = (data.string);
                            mrcBackgroundColor[index] = (data.color);
                        });
                        mrcChart.data.datasets.data = mrcData;
                        mrcChart.data.datasets.label = mrcString;
                        mrcChart.data.datasets.backgroundColor = mrcBackgroundColor;
                        mrcChart.update();
                        $("#loaderClass").addClass('d-none');

                    }
                });

            });
            $('#plusYear').on('click', function() {
                Year = $('#year').html();
                if (CYear == Year) {
                    return;
                } else {
                    $("#loaderClass").removeClass('d-none');

                    Year = parseInt($('#year').html());
                    let thisYear = $('#year').html((`${Year+1}`));
                    $.ajax({
                        type: "get",
                        url: '{{ route('front.patient.get-mrc-graph.json') }}',
                        data: {
                            "year": thisYear.html(),
                        },
                        success: function(response) {
                            response.data.forEach((data, index) => {
                                monthLabels[index] = (data.month);
                                mrcData[index] = (data.value);
                                mrcString[index] = (data.string);
                                mrcBackgroundColor[index] = (data.color);
                            });
                            mrcChart.data.datasets.data = mrcData;
                            mrcChart.data.datasets.label = mrcString;
                            mrcChart.data.datasets.backgroundColor = mrcBackgroundColor;
                            mrcChart.update();
                            $("#loaderClass").addClass('d-none');
                        }
                    });
                }
            });
        </script>
    @else
        <script nonce="{{ $cspNonce }}">
            @if (Crypt::decrypt($_GET['cat_name']) == 'Do an COPD Assessment sum')
                cat_name = "Do an COPD Assessment sum";
            @else
                cat_name = "Measure SP02";
            @endif
            getMonthPara($("#getMonthPara"));
            const ctx = document.getElementById('resultChart');
            let label = [];
            let val = [];

            let data = {
                labels: label,
                datasets: [{
                    data: val,
                    fill: false,
                    tension: 0.2,
                    backgroundColor: '#144272',
                    radius: 5,
                    borderColor: '#0d3675'
                }],

            };
            //  data.datasets[0].data = data.datasets[0].data.filter(function(value, index, arr) {

            // });

            let resultChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    spanGaps: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: false,
                        }

                    }
                },
            });

            $(document).on('click', "#getWeekPara", function() {
                getWeekPara(this);
            })
            $(document).on('click', "#getMonthPara", function() {
                getMonthPara(this);
            })
            $(document).on('click', "#getYearPara", function() {
                getYearPara(this);
            })

            function getWeekPara(para) {
                $("#loaderClass").removeClass('d-none');
                startWeekDate = $(para).attr("data-start-date");
                endWeekDate = $(para).attr("data-end-date");
                $("#displayTime").html(`${startWeekDate} to ${endWeekDate}`);
                getGraphData('week', cat_name, startWeekDate, endWeekDate);
            }

            function getMonthPara(para) {
                $("#loaderClass").removeClass('d-none');
                $("#displayTime").html("{{ date('F Y') }}");
                CurrstartDate = $(para).attr("data-start-date");
                CurrendDate = $(para).attr("data-end-date");
                let month = $(para).attr("data-month");
                let Cmonth = "{{ date('F') }}";
                PCYear = new Date().getFullYear();
                getGraphData('month', cat_name, CurrstartDate, CurrendDate);

                // getFormatedDate(CurrstartDate, "DD-MM-YYYY");

            }

            let month = $("#getMonthPara").attr("data-month");
            let Cmonth = "{{ date('F') }}";
            week = $('#getWeekPara');
            startWeekDate = $(week).attr("data-start-date");
            // endWeekDate = $(week).attr("data-end-date");
            $('#minusData').on('click', function() {

                // tempWeek = ('#tempWeek').html();

                weekDate = $("#displayTime").html().slice(0, 10);
                weekDay = weekDate.slice(8, 10);
                weekMonth = weekDate.slice(5, 7);
                weekYear = weekDate.slice(0, 4);
                ndate = new Date(`${weekYear}-${weekMonth}-${weekDay}`);

                if ($('#getWeekPara').is(':checked')) {

                    let startDate = new Date(ndate.setDate(ndate.getDate() - 7));
                    let endDate = new Date(ndate.setDate(ndate.getDate() + 6));
                    getGraphData('week', cat_name, (startDate).toLocaleDateString('en-CA'), (endDate)
                        .toLocaleDateString('en-CA'));
                    $("#displayTime").html(`${(startDate).toLocaleDateString('en-CA')} to ${(endDate)
                        .toLocaleDateString('en-CA')}`);
                }

                if ($('#getMonthPara').is(':checked')) {
                    $("#loaderClass").removeClass('d-none');
                    const monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"
                    ];
                    month = month -= 1;
                    if (month == 0) {
                        month = 12;
                        PCYear -= 1;
                    }

                    let startDate = new Date(`${PCYear}-0${month}-01`);

                    let endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);

                    getGraphData('month', cat_name, (startDate).toLocaleDateString('en-CA'), (endDate)
                        .toLocaleDateString('en-CA'));
                    $("#displayTime").html(`${monthNames[startDate.getMonth()]} ${PCYear}`);
                }

                if ($('#getYearPara').is(':checked')) {
                    $("#loaderClass").removeClass('d-none');
                    PCYear -= 1;
                    month = "{{ date('m') }}";
                    startYear = new Date(`${PCYear}-0${month}-01`);
                    endYear = new Date(startYear.getFullYear(), startYear.getMonth() + 1, 0);
                    $("#displayTime").html(`${PCYear}`);
                    getGraphData('year', cat_name, startYear.toLocaleDateString('en-CA'), endYear
                        .toLocaleDateString('en-CA'));

                }

            });

            $('#plusData').on('click', function() {
                if (startWeekDate == $("#displayTime").html().slice(0, 10)) {
                    return;
                }
                weekDate = $("#displayTime").html().slice(0, 10);
                weekDay = weekDate.slice(8, 10);
                weekMonth = weekDate.slice(5, 7);
                weekYear = weekDate.slice(0, 4);
                ndate = new Date(`${weekYear}-${weekMonth}-${weekDay}`);
                if ($('#getWeekPara').is(':checked')) {
                    $("#loaderClass").removeClass('d-none');
                    let startDate = new Date(ndate.setDate(ndate.getDate() + 7));
                    let endDate = new Date(ndate.setDate(ndate.getDate() + 6));
                    getGraphData('week', cat_name, (startDate).toLocaleDateString('en-CA'), (endDate)
                        .toLocaleDateString('en-CA'));
                    $("#displayTime").html(`${(startDate).toLocaleDateString('en-CA')} to ${(endDate)
                        .toLocaleDateString('en-CA')}`);
                }

                if ($('#getMonthPara').is(':checked')) {


                    if (month == new Date().getMonth() + 1 && PCYear == new Date().getFullYear()) {
                        return;
                    }
                    $("#loaderClass").removeClass('d-none');
                    const monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"
                    ];
                    month = month += 1;
                    if (month == 13) {
                        month = 1;
                        PCYear += 1;
                    }
                    let startDate = new Date(`${PCYear}-0${month}-01`);
                    let endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);

                    getGraphData('month', cat_name, (startDate).toLocaleDateString('en-CA'), (endDate)
                        .toLocaleDateString('en-CA'));
                    $("#displayTime").html(`${monthNames[startDate.getMonth()]} ${PCYear}`);
                }
                if ($('#getYearPara').is(':checked')) {

                    if (PCYear == new Date().getFullYear()) {
                        return;
                    }
                    PCYear += 1;
                    month = "{{ date('m') }}";
                    $("#loaderClass").removeClass('d-none');
                    startYear = new Date(`${PCYear}-0${month}-01`);
                    endYear = new Date(startYear.getFullYear(), startYear.getMonth() + 1, 0);
                    $("#displayTime").html(`${PCYear}`);
                    getGraphData('year', cat_name, startYear.toLocaleDateString('en-CA'), endYear
                        .toLocaleDateString('en-CA'));
                }
            });

            function getYearPara(para) {
                $("#loaderClass").removeClass('d-none');
                $("#displayTime").html("{{ date('Y') }}")
                PCYear = new Date().getFullYear();
                CurrstartDate = $(para).attr("data-start-date");
                CurrendDate = $(para).attr("data-end-date");
                getGraphData('year', cat_name, CurrstartDate, CurrendDate);
            }

            function getGraphData(filtertype, cat_name, startdate, enddate) {
                dataLabel = [];
                dataVal = [];
                $.ajax({
                    type: "get",
                    url: '{{ route('front.patient.get-result-data.json') }}',
                    data: {
                        'filtertype': filtertype,
                        'cat_name': cat_name,
                        'startdate': startdate,
                        'enddate': enddate,
                    },
                    dataType: "json",
                    success: function(data) {
                        data.data.forEach((element, i) => {
                            dataLabel.push(element.date);
                            dataVal.push((element.ans_value != "") ? parseInt(element.ans_value) : 0);

                        });
                        resultChart.data.datasets[0].data = dataVal.map(val => (val == 0) ? null : val);
                        resultChart.data.labels = dataLabel;
                        resultChart.update();
                        $("#loaderClass").addClass('d-none');
                    }
                });
            }
        </script>
    @endif

@endsection
@endsection