@extends('Front.PatientLayout.mainLayout')
@section('title', 'Expert Patient')
@section('css')
    <link rel="stylesheet" href="{{ asset('patientAssets') }}/css/home.css">
@endsection
@section('content')
    <div class="container-fluid m-0 p-0 bg-light">
        <nav class="navbar  bg-white sticky-top ">
            <div class="d-flex ">
                <a href="{{ route('front.patient.dashboard') }}">
                    <i class="mt-3 fa fa-arrow-left   fs-4 float-start ms-2">
                    </i></a>
                <h5 class="m-2 p-2 text-center ">
                    {{ __('Gamification.title2') }}
                </h5>
            </div>
        </nav>

        <div class="modal fade fade-right" id="completeMonthModal" tabindex="-1" role="dialog"
            aria-labelledby="completeMonthModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="d-flex justify-content-end p-2 cursor-pointer">
                            <i class="fa fa-times" aria-hidden="true" data-bs-dismiss="modal" aria-label="Close"></i>
                        </div>
                        <div class="my-4 d-flex justify-content-center flex-wrap text-center">
                            <div style="width: 7rem; height: 7rem; position: relative;"
                                class="month month{{ $data['month'] - 1 }}Bg">
                                <img src="{{ asset('patientAssets') }}/img/expert.png" alt=""
                                    class="w-50 img-fluid pop-out-image  position-absolute top-0 start-100 translate-middle">
                                <h1 class="my-1 text-white">{{ $data['month'] - 1 }}</h1>
                            </div>
                            <div class="col-12">
                                <h2>Congratulations!</h2>
                                <p class="p-2" id="popup_txt"></p>
                                <button data-bs-dismiss="modal" aria-label="Close"
                                    class="btn btn-dark bgDarkBlue btn-md fw-bold">
                                    {{ __('Gamification.process_to_month') }} {{ $data['month'] }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="d-flex justify-content-center my-3 flex-wrap text-center">
                <div class="col-12  col-lg-8">
                    <h5 class="my-2">{{ __('Gamification.month') }}: {{ $data['month'] }}</h5>
                    <h3 class="my-3">{{ __('Gamification.page_1_title') }}</h3>
                    <p class="my-3">{{ __('Gamification.description_1') }}</p>
                    <div class="col-12 text-center">
                        <a href="{{ route('front.patient.expert.findout') }}"
                            class="btn btn-dark bgDarkBlue  btn-md fw-bold ">{{ __('Gamification.findOutMore') }}</a>
                    </div>
                    <center>
                        <div class="mt-5 ">
                            <div style="inline-size: 500px">
                                <canvas id="expertChart"></canvas>
                            </div>
                        </div>
                    </center>
                    <div class=" text-start mt-5">
                        <h4>Month {{ $data['month'] }} </h4>
                        {{-- <p class="">{!! $data['monthContent']['content'] !!}</p> --}}
                        <div class="my-4 card text-start text-dark">
                            <div class="card-body">
                                <h4 class="">{{ __('Gamification.edu') }}</h4>
                                <ul class="my-2 list-group list-group-flush">
                                    @foreach ($data['educationTask'] ?? [] as $edu)
                                        <li class="list-group-item d-flex justify-content-between my-2 ">
                                            <div class="">
                                                <span>
                                                    @if ($edu->is_completed)
                                                        <i class="fa fa-check-circle fs-3 mx-3" aria-hidden="true"></i>
                                                    @else
                                                        <i class="fa fa-circle-o fs-3 mx-3" aria-hidden="true"></i>
                                                    @endif
                                                </span>
                                                <span>
                                                    {{ $edu->name }}
                                                </span>
                                            </div>
                                            <a
                                                href="{{ $edu->is_completed ? '#' : route('front.patient.gamification.educationVideo', encrypt($edu->id)) }}">
                                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="my-4 card text-start text-dark">
                            <div class="card-body">
                                <h4 class="">{{ __('Gamification.monitoring') }}</h4>
                                <ul class="my-2 list-group list-group-flush">
                                    @foreach ($data['monitoringTask'] ?? [] as $mon)
                                        @php
                                            $checkerCondution =
                                                $mon['is_completed'] ||
                                                ($mon['id'] == $data['monitoringTask'][0]['id'] &&
                                                    $mon['type'] == 2 &&
                                                    $data['month'] == 1 &&
                                                    $data['firstChecker'] == 1);

                                            $link = match ($mon['type']) {
                                                2 => $checkerCondution ? '#' : $data['checkerRoute'],
                                                3 => $mon['is_completed']
                                                    ? '#'
                                                    : route('front.patient.wellness-dail.view'),
                                                4 => $mon['is_completed']
                                                    ? '#'
                                                    : route('front.patient.get-spo2-measure.view'),
                                                default => '#',
                                            };
                                        @endphp
                                        <li class="list-group-item d-flex justify-content-between my-2 ">
                                            <div class="">
                                                <span>
                                                    @if ($checkerCondution)
                                                        <i class="fa fa-check-circle fs-3 mx-3" aria-hidden="true"></i>
                                                    @else
                                                        <i class="fa fa-circle-o fs-3 mx-3" aria-hidden="true"></i>
                                                    @endif
                                                </span>
                                                <span>
                                                    {{ $mon['name'] }}
                                                </span>
                                            </div>
                                            <a href="{{ $link }}">
                                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    @endforeach

                                </ul>
                            </div>
                        </div>
                        <div class="my-4 card text-start text-dark">
                            <div class="card-body">
                                <h4 class="">{{ __('Gamification.test_konw') }}</h4>
                                <ul class="my-2 list-group list-group-flush">

                                    @foreach ($data['quizTask'] ?? [] as $quiz)
                                        <li class="list-group-item d-flex justify-content-between my-2 ">
                                            <div class="">
                                                <span>
                                                    @if ($quiz->is_completed)
                                                        <i class="fa fa-check-circle fs-3 mx-3" aria-hidden="true"></i>
                                                    @else
                                                        <i class="fa fa-circle-o fs-3 mx-3" aria-hidden="true"></i>
                                                    @endif
                                                </span>
                                                <span>
                                                    {{ $quiz->name }}
                                                </span>
                                            </div>
                                            <a
                                                href="{{ $quiz->is_completed ? '#' : route('front.patient.quiz.questions', [encrypt($quiz->id), $data['month']]) }}">

                                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    @endforeach

                                </ul>
                            </div>
                        </div>

                        <div class="col-12 text-center">
                            <a href="{{ route('front.patient.dashboard') }}"
                                class="btn btn-dark bgDarkBlue  btn-md fw-bold ">{{ __('Gamification.rtnHome') }}</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@section('js')
    <script nonce="{{ $cspNonce }}">
        const totalTask = {{ $data['totalTask'] }}
        const completedTasks = {{ $data['completedTasks'] }}
        const UserTask = {{ Js::from($data['UserTask']) }}
        const currentLevel = "{{ $data['currentLevel'] }}"
        const nextLevel = "{{ $data['nextLevel'] }}"
        let userId = UserTask.user_id;
    </script>

    <script nonce="{{ $cspNonce }}" src="{{ asset('patientAssets') }}/js/chart.js"></script>
    <script nonce="{{ $cspNonce }}" src="{{ asset('patientAssets') }}/js/newExpertChart.js"></script>
@endsection
@endsection