@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('css')
    <link rel="stylesheet" href="{{ asset('patientAssets') }}/css/wellnessDial.css">
@endsection
@section('content')



    <div class="container p-0 m-0 overflow-hidden">
        <nav class="navbar  ">
            <div class="d-flex ">
                <a href="{{ route('front.patient.dashboard') }}">
                    <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 ">
                    Feeling Unwell
                </h5>
            </div>
        </nav>

        <p id="lang" hidden>{{ app()->getLocale() }}</p>

        <div class="container py-3 vh-100 d-flex flex-column justify-content-lg-start justify-content-start">
            <form action="{{ route('front.patient.feeling-state.store') }}" method="POST">
                @csrf
                <div class="row" >
                    <input type="hidden" name="feelingState" id="feelingState">
                    <input type="hidden" name="feelingStateVal" id="feelingStateVal">

                    <div class="col-md-2 col-lg-3"></div>
                    <div class="col-md-8 col-lg-6 rounded-3">
                        <div>
                            <p class="fs-3 text-center"> {{ __('wellnessDial.noSelectText') }}
                            </p>
                        </div>
                        <div class="d-flex justify-content-center">
                            <div id="chart-box" style="--chartW:320px;" class="mt-3 border border-2 p-4 rounded-circle">
                                <span id="middelBox">
                                    <div id="needleBlack"></div>
                                    <div id="needle">
                                        <?xml version="1.0" standalone="no"?>
                                        <!DOCTYPE svg
                                            PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                                        <svg version="1.0" id="needleSVG" xmlns="http://www.w3.org/2000/svg"
                                            width="49.000000pt" height="511.000000pt" viewBox="0 0 49.000000 511.000000"
                                            preserveAspectRatio="xMidYMid meet">
                                            <g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"
                                                fill="#000000" stroke="none">
                                                <path d="M240 4973 c0 -60 -225 -4708 -236 -4875 l-6 -98 246 0 c135 0 246 3
                                      246 7 0 3 -14 292 -30 642 -38 796 -82 1744 -115 2446 -14 297 -39 824 -55
                                      1170 -17 347 -30 660 -30 698 0 38 -4 67 -10 67 -5 0 -10 -26 -10 -57z" />
                                            </g>
                                        </svg>
                                    </div>
                                </span>
                                <canvas id="myChart"></canvas>
                            </div>
                        </div>
                        <div>
                            <div class="text-dark pt-3">
                                <ul class=" text-start  pb-2">
                                    <li class="m-2">
                                        <p class="text-center " id="colorText">
                                            {{-- {!! __('wellnessDial.noselect') !!} --}}
                                        </p>
                                    </li>

                                    <li class="m-2">
                                        <p class="text-center " id="Text"> </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <button type="submit" id="submitBtn-1"
                                class=" border-0 p-2 bg-darkBlue text-white text-center rounded-pill w-100 "
                                disabled>{{ __('wellnessDial.confirm') }}</button>
                        </div>
                    </div>
                    <div class="col-md-2 col-lg-3"></div>
                </div>
            </form>
        </div>

    </div>

@section('js')
<script nonce="{{ $cspNonce }}">
    $(document).ready(function() {
        getDialContent('none');
    });
    let url = '{{ route('front.patient.get-dial-data', ['slug' => 'Parameter']) }}';

    const getDialContent = (slug) => {
        let btnDiseble = false;
        let nurl = url.replace("Parameter", slug);
        let color;
        $.ajax({
            type: "GET",
            url: nurl,
            success: function(response) {
                switch (response.feeling_status) {
                    case "Well":
                        color = "#abc44f";
                        $("#feelingState").val('1');
                        break;
                    case "Mild":
                        color = "#f5cf46";
                        $("#feelingState").val('2');
                        break;
                        // case "Moderate":
                        //     color = "#e66730";
                        //     $("#feelingState").val('3');
                        //     break;
                    case "Severe":
                        color = "#e23926";
                        $("#feelingState").val('4');
                        break;
                    default:
                        break;
                }
                if (slug === 'none') {
                    document.getElementById('colorText').innerHTML = response.dial_info;
                } else {
                    $("#feelingStateVal").val(response.feeling_status);
                    document.getElementById('colorText').innerHTML =
                        ` <p class="m-0 p-0" style="color:${color} ">
                            ${response.dial_title}
                        </p> 
                      ${response.dial_description}`;
                }
            }
        });
    }
</script>
    <script src="{{ asset('patientAssets') }}/js/chart.js"></script>
    <script src="{{ asset('patientAssets') }}/js/circle.js"></script>
@endsection
@endsection