@extends('Front.PatientLayout.mainLayout')
@section('title', 'checkerhistory')
@section('css')
    <style>
        .rule {
            border-left: 2px solid gray;
            margin: 0 auto;
            height: 100px;
            position: relative;
        }

        .dot {
            transform: translateY(-50%);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            background-color: rgb(238, 110, 110);
        }

        .grey {
            background: #E8E6E5;
        }

        .red {
            background: #fdd0d0;
        }

        .green {
            background: #DEF5E5;

        }
    </style>
@endsection
@section('content')
    <div class="container-fluid p-3">
        {{-- <nav class="navbar  bg-white">
            <div class="d-flex">
                <a href="{{ route('front.patient.dashboard') }}">
                    <i class="mt-2 p-2 fa fa-arrow-left  fs-4  ms-2 ">
                    </i></a>
            </div>
        </nav> --}}
        <div class="  p-3 position-relative">
            <a href="{{ route('front.patient.dashboard') }}">
                <i class="mt-2 p-2 fa fa-arrow-left  fs-4 ">
                </i></a>
            <div class="position-absolute top-50 start-50 translate-middle">
                <select class="form-select ms-2 mt-2 p-2" name="year" id="year">
                    <option> Year List </option>
                    @for ($year = 2021; $year <= date('Y'); $year++)
                        <option value='{{ $year }}' {{ $year == date('Y') ? 'selected' : ' ' }}>{{ $year }}
                        </option>
                    @endfor

                </select>
            </div>
        </div>

        {{-- {{ pre($data,1) }} --}}

        <div class="container-fluid mt-3 " id="maindiv">
            <div class="oldDiv" id='oldDiv'>
                @foreach ($data as $k => $data)
                    @php
                        if (decrypt($data['color']) == 'RED') {
                            $bg = 'rgb(253,208,208)';
                        } elseif (decrypt($data['color']) == 'GREEN') {
                            $bg = 'rgb(60, 179, 113)';
                        } else {
                            $bg = '#E8E6E5';
                        }

                        if ($data['title'] == '') {
                            $string = $data['content'];
                        } else {
                            $string = (string) $data['title'];
                        }

                    @endphp
                    <a href="{{ route('front.patient.checkerhistory.getans', [
                        'asthma_id' => $data['asthma_id'],
                        'color' => $data['color'],
                        'month' => $data['month'],
                        'year' => $data['year'],
                        'string' => $string,
                    ]) }}"
                        class="d-flex">
                        <h5 id='month-{{ $k }}' class="d-flex align-items-center m-2 w-5">
                            @if (app()->getLocale() == 'en')
                                {{ Str::substr(decrypt($data['month_name']), 0, 3) }}
                            @else
                                {{ Str::substr(decrypt($data['month_name']), 0, 4) }}
                            @endif
                        </h5>
                        <div class="position-relative">
                            <div class="rule"></div>
                            <div class="dot position-absolute top-50 start-50 translate-middle"
                                style="background-color:{{ $bg }}!important;"></div>
                        </div>
                        <p id='title-{{ $k }}'
                            class="w-95 text-black border border-0  rounded-4 m-2 p-3 {{ $bg }}"
                            style="background-color:{{ $bg }}">
                            {{ decrypt($string) }}
                        </p>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ $cspNonce }}">
        function getMonthShortName(monthNo) {
            const date = new Date();
            date.setMonth(monthNo - 1);
            // Use the browser's default locale
            return date.toLocaleString([], {
                month: 'short'
            });
        }
    </script>
    <script nonce="{{ $cspNonce }}">
        $("#year").change(function(e) {
            Getdata(this);
        });

        function Getdata(year) {
            let main = document.getElementById('maindiv');

            let output = '';
            var year = year.value;

            var url = "{{ route('front.patient.checkerhistory.view') }}";
            if (year != "") {
                $.ajax({
                    type: 'get',
                    url: url,
                    data: {
                        year: year,
                        history: true,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        let old = $('.oldDiv');
                        if (old) {
                            old.remove();
                        }

                        let route =
                            "{{ route('front.patient.checkerhistory.getans', ['asthma_id' => 'asthmaId', 'month' => 'monthName', 'year' => 'thisYear', 'color' => 'thisColor', 'string' => 'thisString']) }}";
                        $.each(data.data, function(i, e) {
                            @if (app()->getLocale() == 'en')
                                j_m = getMonthShortName(e.j_month);
                            @else
                                j_m = (e.j_month_name).slice(0, 4);
                            @endif

                            if (e.j_color == 'GREY') {
                                color = "#E8E6E5";
                            } else if (e.j_color == "RED") {
                                color = "rgb(253,208,208)";
                            } else if (e.j_color == 'GREEN') {
                                color = "rgb(60, 179, 113)";
                            }

                            if (e.j_title == "") {
                                string = e.j_content;
                                urlString = e.content;
                            } else {
                                string = e.j_title.toString();
                                urlString = e.title;
                            }


                            url = route.replace('asthmaId', e.asthma_id)
                                .replace(
                                    'monthName', e.month)
                                .replace('thisYear', e.year).replace("thisColor", e.color).replace(
                                    "thisString", urlString);
                            let output = `
                            <a href="${url}">
                            <div class="d-flex oldDiv">
                                    <h5 id='month' class="d-flex align-items-center m-2 w-5"> ${j_m} </h5>
                                   <div class="position-relative">
                                    <div class="rule"></div>
                                    <div class="dot position-absolute top-50 start-50 translate-middle" style="background-color:${color}!important;"></div>
                                    </div>
                                    <p id='title' class="w-95 text-black border border-0  rounded-4 m-2 p-3 "style="background-color:${color}!important;">
                                        ${string}</p>
                                </div></a>
                                `;

                            $(main).append(output);

                            // reset
                            output = "";
                        });
                    },
                    error: function() {
                        alert("error");
                    }
                });
            }
        }
    </script>

@endsection