@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('css')
    <style>
        .rounded-start-top {
            border-radius: 2rem 0px 0px 0px;
        }
    </style>
@endsection
@section('content')

    {{-- {{pre($abcArray)}} --}}

    @php
        
        $bgColor = $abcArray['overview_data']['0']['color'];
        
        if ($bgColor == 'RED') {
            $bg = '#B66263';
        } elseif ($bgColor == 'GREY') {
            $bg = '#919090';
        } elseif ($bgColor == 'GREEN') {
            $bg = '#3cb371';
        } elseif ($bgColor == 'AMBER') {
            $bg = '#EA6222';
        }
        
    @endphp

    <div class="container-fluid p-3">
        <div class=" col-8 container p-2  text-white border  rounded-start-top" style=" background:{{ $bg }};">
            <div class="d-flex justify-content-center">
                <div class="col-6  text-center">
                    <h6 class="text-white mt-3 mb-3   rounded p-2" style=" background: #ffffff86;">
                        {{ __('dashboard.overview_of_my_control') }}
                    </h6>
                    <p class="m-2 text-white "> {{ $abcArray['overview_data']['0']['comment'] }} </p>
                    <p> {{ __('dashboard.last_updated') }}:</p>

                    @php
                        $displayDate = date('dS F Y', strtotime($abcArray['overview_data']['0']['date']));
                        
                        $date = date('F', strtotime($abcArray['overview_data']['0']['date']));
                        switch ($date) {
                            case 'January':
                                $month = __('dashboard.January');
                                break;
                            case 'February':
                                $month = __('dashboard.February');
                                break;
                            case 'March':
                                $month = __('dashboard.March');
                                break;
                            case 'April':
                                $month = __('dashboard.April');
                                break;
                            case 'May':
                                $month = __('dashboard.May');
                                break;
                            case 'June':
                                $month = __('dashboard.June');
                                break;
                            case 'July':
                                $month = __('dashboard.July');
                                break;
                            case 'August':
                                $month = __('dashboard.August');
                                break;
                            case 'September':
                                $month = __('dashboard.September');
                                break;
                            case 'October':
                                $month = __('dashboard.October');
                                break;
                            case 'November':
                                $month = __('dashboard.November');
                                break;
                            case 'December':
                                $month = __('dashboard.December');
                                break;
                        
                            default:
                                $month = __('dashboard.no_data');
                                break;
                        }
                        $newDate = str_replace($date, $month, $displayDate);
                    @endphp

                    <h3 class=" text-white">{{ $newDate }}</h3>
                    <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>
        </div>

        {{-- asthma_checker_comment --}}

        <a
            href="{{ route('front.patient.overview-details.view', ['question_id' =>  Crypt::encrypt('ASTHMA_CHECKER'), 'color' =>  Crypt::encrypt($abcArray['asthma_checker_comment']['0']['color'])]) }}">
            <div class=" col-8 container p-2 card mt-4 shadow-sm  mb-3  bg-body-tertiary rounded-4">
                <div class="d-flex justify-content-between p-3">
                    <div class="m-2 position-relative"><i
                            class=" position-absolute top-50 start-50 translate-middle fs-2  fa fa-check-circle text-green "></i>
                    </div>
                    <div class="m-2 px-2 ">
                        <p>{{ $abcArray['asthma_checker_comment']['0']['comment'] }}</p>
                    </div>
                    <div class="m-2 position-relative"><i
                            class=" position-absolute top-50 start-50 translate-middle  fa fa-angle-right fs-2  text-black"></i>
                    </div>
                </div>
            </div>
        </a>


        @forelse ($abcArray['question_data'] as $question)
            @php
                if ($question['color'] == 'GREEN') {
                    $icon = ' fa fa-check-circle text-green';
                } elseif ($question['color'] == 'RED') {
                    $icon = ' fa fa-times-circle text-red';
                }
                
            @endphp
            <a
                href="{{ route('front.patient.overview-details.view', ['question_id' =>  Crypt::encrypt($question['question_id']), 'color' =>  Crypt::encrypt($question['color'])]) }}">
                <div class=" col-8 container p-2 card mt-4 shadow-sm  mb-3  bg-body-tertiary rounded-4">
                    <div class="d-flex justify-content-between p-3">
                        <div class="m-2 position-relative"><i
                                class=" position-absolute top-50 start-50 translate-middle fs-2  {{ $icon }} "></i>
                        </div>
                        <div class="m-2 px-2 ">
                            <p>{{ $question['comment'] }}</p>
                        </div>
                        <div class="m-2 position-relative"><i
                                class=" position-absolute top-50 start-50 translate-middle  fa fa-angle-right fs-2  text-black"></i>
                        </div>
                    </div>
                </div>
            </a>
        @empty
        @endforelse
    </div>

@endsection