@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('css')
    <style>
        .bg-success {
            background-color: rgb(45, 156, 88) !important;
        }

        .circle {
            background: grey;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            padding: 1rem
        }

        .custom-chart {
            overflow-x: scroll;
        }

        .bg-red {
            background: #B66263;
        }

        .bg-green {
            background: #3cb371;
        }
    </style>
@endsection
@section('content')
    @php
        switch (Crypt::decrypt($_GET['question_id'])) {
            case 'ASTHMA_CHECKER':
                $title = __('dashboard.copd_checker');
                $grapgTitle = __('dashboard.copd_checker');
                break;

            case '1':
                $title = __('dashboard.annual_review');
                $grapgTitle = __('dashboard.copd_checker');
                break;

            case '2':
                $title = __('dashboard.annual_review');
                $grapgTitle = __('dashboard.annual_review');
                break;

            case '3':
                $title = __('dashboard.picking_up_prescription');
                $grapgTitle = __('dashboard.prescription_results');
                break;

            case '4':
                $title = __('dashboard.inhaler_technique');
                $grapgTitle = __('dashboard.inhaler_technique_results');
                break;

            case '5':
                $title = __('dashboard.salbutamol_use');
                $grapgTitle = __('dashboard.salbutamol_results');
                break;

            case '6':
                $title = __('dashboard.gp_visits');
                $grapgTitle = __('dashboard.gp_visit_results');
                break;

            case '7':
                $title = __('dashboard.a_and_e_visit');
                $grapgTitle = __('dashboard.ae_visit_results');
                break;

            case '8':
                $title = __('dashboard.hospital_visit');
                $grapgTitle = __('dashboard.hospital_visit_results');
                break;

            case '9':
                $title = __('dashboard.antibiotics');
                $grapgTitle = __('dashboard.antibiotics_results');
                break;

            case '10':
                $title = __('dashboard.oral_steroids');
                $grapgTitle = __('dashboard.oral_steroid_results');
                break;

            case '11':
                $title = __('dashboard.smoking');
                $grapgTitle = __('dashboard.smoking_results');
                break;

            case '12':
                $title = __('dashboard.vaping');
                $grapgTitle = __('dashboard.vaping_results');
                break;

            case '13':
                $title = __('dashboard.physical_activity');
                $grapgTitle = __('dashboard.physical_activity_results');
                break;

            default:
                $title = __('dashboard.copd_checker');
                $grapgTitle = __('dashboard.copd_checker');
                break;
        }
    @endphp
    {{-- {{ pre($finale) }} --}}
    <div class="container-fluid p-3 bg-light">
        <nav class="navbar  bg-white">
            <div class="d-flex ">
                <a href="{{ route('front.patient.overview-checker.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  mt-1">
            <div class="col-md-6 ">
                <div class="mt-4 mb-4">
                    <img class=" object-fit-fill  img-fluid  "
                        src="{{ s3Url('uploads/patient') }}/img_asthma_checker_header.webp">
                </div>
            </div>
        </div>

        {{-- {{ pre($finale['video_data']) }} --}}

        @php
            if ($finale['overview'][0]['color'] == 'GREEN') {
                $bg = 'text-white  bg-green ';
                $icon = ' fa fa-check-circle fs-4 ';
            } elseif ($finale['overview'][0]['color'] == 'RED') {
                $bg = 'text-white  bg-red';
                $icon = 'fa fa-times   ';
            }
            $comments = explode('@', $finale['overview'][0]['comment']);
        @endphp
        <div class="d-flex justify-content-center  mt-3">
            <div class="col-md-6 {{ $bg }} card  p-3  ">
                <div class="d-flex justify-content-start p-2">
                    <div class="m-2 position-relative"><i
                            class=" position-absolute top-0 start-0 translate-middle  my-1 {{ $icon }} "></i>
                    </div>
                    <div class="mx-2 px-2">
                        @forelse ($comments as $comment)
                            <p class="text-break">{{ $comment }}</p>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="container col-lg-6 text-center p-3 mt-2 ">

            <p class="fw-bold  text-black "> {{ __('dashboard.update_asthma_checker_instructions') }}</p>

            <a href="{{ route('front.patient.checker-question.view', ['is_edit' => Crypt::encrypt('YES'), 'slug' => Crypt::encrypt('NEW')]) }}"
                class="btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold">{{ __('dashboard.update_checker') }}</a>

        </div>

        <div class="d-flex justify-content-center  mt-3">
            <div class="col-lg-6 col-md-8  card  p-3  ">
                {!! $finale['overview'][0]['description'] !!}
            </div>
        </div>

        {{-- {{pre($finale['graph_1'])}} --}}
        @if (Crypt::decrypt($_GET['question_id']) != 1)
            @isset($finale['graph_1'])
                <div class="container card col-lg-6 p-4 mt-3">
                    <h4>{{ $grapgTitle }}</h4>
                    <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>
                    @if (in_array(Crypt::decrypt($_GET['question_id']), ['6', '7', '8', '9', '10', 'MRC_TEST', 'CAT_TEST']))
                        <canvas id="myChart"></canvas>
                    @else
                        <div class="custom-chart  mt-4">
                            <div class="d-flex justify-content-evenly">
                                @forelse ($finale['graph_1'] as $graph)
                                    @php
                                        if ($graph['color'] == 'RED') {
                                            $color = '#B66263';
                                        } elseif ($graph['color'] == 'GREEN') {
                                            $color = '#3cb371';
                                        } else {
                                            $color = $graph['color'];
                                        }
                                    @endphp
                                    <div class="">
                                        <div role="button" class="circle" style="background:{{ $color }}"
                                            id="circle_{{ strtolower($graph['month']) }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                            data-bs-title="{{ $graph['string'] }}">
                                        </div>
                                        <hr class="bg-dark">
                                        <p class="text-center ">{{ substr($graph['month'], 0, 3) }}</p>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </div>
                    @endif
                </div>
            @endif

            <div class="d-flex justify-content-center  mt-3">
                <div class="col-md-6 card mt-4 mb-4 ">
                    <a
                        href="{{ route('front.patient.overview-all-data.view', ['question_id' => $_GET['question_id'], 'sub_title' => Crypt::encrypt($grapgTitle)]) }}">
                        <p class="m-2 p-2">{{ __('dashboard.View_all_data') }} </p>
                    </a>
                </div>
            </div>
        @endisset
        @if (!empty($finale['video_data']))
            <div align="center" class=" mb-4 mt-4">
                <div class=" col-6">
                    <div class="card-image border-radius-lg position-relative">
                        <a
                            href="{{ route('front.patient.get-asthma-test-video', ['question_id' => $_GET['question_id'], 'video_id' => Crypt::encrypt($finale['video_data'][0]['id'])]) }}">
                            <div class="rounded p-1 blur-shadow-image thumbnail">
                                <i class="fa fa-play-circle fa-4x playBtn"></i>
                                <img class="w-100  img  img-fluid border-radius-lg "
                                    src="{{ $finale['video_data'][0]['thmub_url'] }}"
                                    style="aspect-ratio:16/9;object-fit: fill;">
                            </div>
                        </a>
                    </div>
                    <div class="card-body text-start ">
                        <h4 class="mt-2">{{ $finale['video_data'][0]['title'] }} </h4>
                    </div>
                    <div class="card-footer text-start d-flex ">
                        <small class="fs-5">{{ sprintf('%02d', $finale['video_data'][0]['min']) }}
                            {{ __('dashboard.minutes') }}
                            {{ sprintf('%02d', $finale['video_data'][0]['sec']) }}
                            {{ __('dashboard.second') }}</small>
                    </div>
                </div>
            </div>
        @endif
        <div class="text-center">
            <a href="{{ route('front.patient.education.educationExAll') }}"
                class="btn btn-dark bgDarkBlue px-6  mx-3 mt-2 btn-md fw-bold">{{ __('dashboard.All_videos') }}</a>
        </div>
    </div>

    @section('js')

        <script nonce="{{ $cspNonce }}">
            function setTooltip() {
                tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
                tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
            }
            setTooltip();
        </script>
        @if (in_array(Crypt::decrypt($_GET['question_id']), ['6', '7', '8', '9', '10', 'MRC_TEST', 'CAT_TEST']))
            <script nonce="{{ $cspNonce }}" src="{{ asset('patientAssets') }}/js/chart.js"></script>
            <script nonce="{{ $cspNonce }}">
                const ctx = document.getElementById('myChart');

                const labels = [];
                const data = [];
                const backgroundColor = [];

                @foreach ($finale['graph_1'] as $month)
                    labels.push('{{ $month['month'] }}');
                    data.push('{{ $month['value'] }}')
                    backgroundColor.push('{{ $month['color'] }}')
                @endforeach

                let lineChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: data,
                            borderWidth: 1,
                            backgroundColor: backgroundColor,
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            legend: {
                                display: 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() {
                    let slug;
                    if ('{{ Crypt::decrypt($_GET['question_id']) }}' == '7' ||
                        '{{ Crypt::decrypt($_GET['question_id']) }}' == '8') {
                        slug = "GRAPH_2";
                    }
                    Year = $('#year').html();
                    let thisYear = $('#year').html(Year - 1);
                    $.ajax({
                        type: "get",
                        url: '{{ route('front.patient.get-graph-data.view') }}',
                        data: {
                            "year": thisYear.html(),
                            "question_id": '{{ Crypt::decrypt($_GET['question_id']) }}',
                            "slug": slug,
                        },
                        dataType: "json",
                        success: function(response) {
                            $.each(response.data.graph_1, function(indexInArray, data) {
                                labels[indexInArray] = (data.month);
                                data[indexInArray] = (data.value);
                                backgroundColor[indexInArray] = (data.color);
                            });
                            lineChart.data.datasets.data = data;
                            lineChart.data.datasets.label = labels;
                            lineChart.data.datasets.backgroundColor = backgroundColor;
                            lineChart.update();
                            console.log(response.data.graph_1);
                        }
                    });
                    // console.log(Year);
                });
                $('#plusYear').on('click', function() {
                    Year = $('#year').html();
                    if (CYear == Year) {
                        return;
                    } else {
                        let slug;
                        if ('{{ Crypt::decrypt($_GET['question_id']) }}' == '7' ||
                            '{{ Crypt::decrypt($_GET['question_id']) }}' == '8') {
                            slug = "GRAPH_2";
                        }
                        Year = parseInt($('#year').html());
                        let thisYear = $('#year').html((`${Year+1}`));
                        $.ajax({
                            type: "get",
                            url: '{{ route('front.patient.get-graph-data.view') }}',
                            data: {
                                "year": thisYear.html(),
                                "question_id": '{{ Crypt::decrypt($_GET['question_id']) }}',
                                "slug": slug,
                            },
                            dataType: "json",
                            success: function(response) {
                                $.each(response.data.graph_1, function(indexInArray, data) {
                                    labels[indexInArray] = (data.month);
                                    data[indexInArray] = (data.value);
                                    backgroundColor[indexInArray] = (data.color);
                                });
                                lineChart.data.datasets.data = data;
                                lineChart.data.datasets.label = labels;
                                lineChart.data.datasets.backgroundColor = backgroundColor;
                                lineChart.update();
                            }
                        });
                    }
                });

                // console.log(labels);
                // console.log(data);
                // console.log(backgroundColor);
            </script>
        @else
            <script nonce="{{ $cspNonce }}">
                $(document).ready(function() {
                    let Year = $('#year').html();
                    let CYear = new Date().getFullYear();
                    $('#minusYear').on('click', function() {
                        let slug;
                        if (!('{{ Crypt::decrypt($_GET['question_id']) }}' == '1' ||
                                '{{ Crypt::decrypt($_GET['question_id']) }}' == '2')) {
                            slug = "GRAPH_1";
                        }
                        Year = $('#year').html();
                        let thisYear = $('#year').html(Year - 1);
                        $.ajax({
                            type: "get",
                            url: '{{ route('front.patient.get-graph-data.view') }}',
                            data: {
                                "year": thisYear.html(),
                                "question_id": '{{ Crypt::decrypt($_GET['question_id']) }}',
                                "slug": slug,

                            },
                            dataType: "json",
                            success: function(response) {
                                response.data.graph_1.forEach(data => {
                                    circle = document.querySelector(
                                        `#circle_${data.month.toLowerCase()}`);
                                    if (data.color == "RED") {
                                        circle.style.background = "#B66263";

                                    } else if (data.color == "GREEN") {
                                        circle.style.background = "#3cb371";

                                    } else {
                                        circle.style.background = data.color;
                                    }
                                    $(circle).attr('data-bs-title', `${data.string}`);

                                });
                                // update tooltip
                                setTooltip();
                            }
                        });
                        // console.log(Year);
                    });
                    $('#plusYear').on('click', function() {
                        Year = $('#year').html();
                        if (CYear == Year) {
                            return;
                        } else {
                            let slug;
                            if ('{{ Crypt::decrypt($_GET['question_id']) }}' == '7' ||
                                '{{ Crypt::decrypt($_GET['question_id']) }}' == '8') {
                                slug = "GRAPH_2";
                            }
                            Year = parseInt($('#year').html());
                            let thisYear = $('#year').html((`${Year+1}`));
                            $.ajax({
                                type: "get",
                                url: '{{ route('front.patient.get-graph-data.view') }}',
                                data: {
                                    "year": thisYear.html(),
                                    "question_id": '{{ Crypt::decrypt($_GET['question_id']) }}',
                                    "slug": slug,
                                },
                                dataType: "json",
                                success: function(response) {
                                    response.data.graph_1.forEach(data => {
                                        circle = document.querySelector(
                                            `#circle_${data.month.toLowerCase()}`);
                                        if (data.color == "RED") {
                                            circle.style.background = "#B66263";

                                        } else if (data.color == "GREEN") {
                                            circle.style.background = "#3cb371";

                                        } else {
                                            circle.style.background = data.color;
                                        }
                                        $(circle).attr('data-bs-title', `${data.string}`);
                                    });
                                    // update tooltip
                                    setTooltip();
                                }
                            });
                        }
                    });


                });
            </script>
        @endif

    @endsection
@endsection