@extends ('layouts.patient')
@section('inner-content')
    <link href="/select2/select2.min.css" rel="stylesheet" />
    <script src="/select2/select2.min.js"></script>
    <div id="flowsheetsComponent">
        <div class="d-flex align-items-center pb-3">
            <h4 class="font-weight-bold m-0">Flowsheets</h4>
            {{-- progams filter --}}
{{--            <select class="ml-4 max-width-200px form-control form-control-sm"--}}
{{--                    onchange="return flowsheetsFilterChanged()">--}}
{{--                <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>All Programs</option>--}}
{{--                @foreach($patient->clientPrograms as $program)--}}
{{--                    <option value="{{$program->uid}}" {{ $filter === $program->uid ? 'selected' : '' }}>--}}
{{--                        {{$program->title}}--}}
{{--                    </option>--}}
{{--                @endforeach--}}
{{--            </select>--}}
        </div>

    </div>

    @if(!$patient->clientPrograms || !count($patient->clientPrograms))
        <div class="mb-3 alert alert-info"><b>{{$patient->displayName()}}</b> is not enrolled into any client programs!</div>
    @else


    <?php
    $dates = [];
    // todo: get from filter/query
    for ($i=30; $i>=0; $i--) {
        $d = date_sub(date_create(), date_interval_create_from_date_string($i . " day" . ($i === 1 ? '' : 's')));
        $dates[] = date_format($d, "Y-m-d");
    }

    function getMeasurementOfTypeForDate($patient, $category, $date) {
        $allMeasurements = $patient->allMeasurements->toArray();
        if(!$allMeasurements) return null;
        $filtered = array_filter($allMeasurements, function($_measurement) use ($category, $date) {
            $measurementDate = date('Y-m-d', strtotime($_measurement['effective_date']));
            return $_measurement['label'] === $category && $measurementDate === $date;
        });
        if($filtered && count($filtered)) {
            $filtered = array_values($filtered);
            return $filtered[0];
        }
        return null;
    }
    ?>

    <div class="d-flex align-items-stretch overflow-hidden flowsheets-table">
        <div class="col-2 px-0 flex-grow-0">
            <table class="table table-sm border border-top-0 m-0">
                <thead>
                <tr class="bg-light font-weight-bold text-secondary">
                    <td class="pl-3">Measurement Type</td>
                </tr>
                </thead>
                @foreach($patient->clientPrograms as $program)
                    <?php
                    $programCategories = explode('|', $program->measurement_labels);
                    $programCategories = array_filter($programCategories, function($_item) {
                        return !empty($_item);
                    });
                    $programICDs = explode('|', $program->icds);
                    $programICDs = array_filter($programICDs, function($_item) {
                        return !empty($_item);
                    });
                    $programMonth = $program->getProgramMonth(strtoupper(date('F')), date('Y'));
                    ?>
                    <tbody data-program-uid="{{$program->uid}}">
                    <tr>
                        <td class="px-3 font-weight-bold text-nowrap">
                            <div class="d-flex align-items-center">
                                <span>{{$program->title}}</span>
                                <a href="#" class="on-hover-opaque expand ml-auto" onclick="return expandProgram('{{$program->uid}}')"><i class="fa fa-plus-circle"></i></a>
                                <a href="#" class="on-hover-opaque collapse ml-auto" onclick="return collapseProgram('{{$program->uid}}')"><i class="fa fa-minus-circle"></i></a>
                            </div>
                        </td>
                    </tr>
                    @foreach($programCategories as $category)
                        <tr>
                            <td class="pl-5 text-nowrap">{{$category}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                @endforeach
            </table>
        </div>
        <div class="flex-grow-1 overflow-auto border-right" style="margin-left: -2px;">
            <table class="table table-sm table-bordered border border-top-0 border-left-0 border-right-0 m-0">
                <thead>
                <tr class="bg-light font-weight-bold text-secondary">
                    @foreach($dates as $date)
                        <td class="text-nowrap border-bottom-0 text-center">{{ $date }}</td>
                    @endforeach
                </tr>
                </thead>
                @foreach($patient->clientPrograms as $program)
                    <?php
                    $programCategories = explode('|', $program->measurement_labels);
                    $programCategories = array_filter($programCategories, function($_item) {
                        return !empty($_item);
                    });
                    ?>
                    <tbody data-program-uid="{{$program->uid}}">
                    <tr>
                        @foreach($dates as $date)
                            <td></td>
                        @endforeach
                    </tr>
                    @foreach($programCategories as $category)
                        <tr>
                            @foreach($dates as $date)
                                <?php
                                $measurement = getMeasurementOfTypeForDate($patient, $category, $date);
                                ?>
                                <td>
                                    @if($measurement)
                                        <?php $m = $measurement; ?>
                                        <div class="text-nowrap text-center">
                                            {{$m['value']}}
                                            <span class="d-none text-secondary text-sm">({{date('H:i', strtotime($m['effective_date']))}})</span>
                                        </div>
                                    @else
                                        <div class="text-nowrap text-center text-secondary-light">
                                            -
                                        </div>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                    </tbody>
                @endforeach
            </table>
        </div>
    </div>

    <script>
        function flowsheetsFilterChanged() {

        }
        function expandProgram(_uid) {
            $('tbody[data-program-uid="' + _uid + '"]').removeClass('collapsed');
            return false;
        }
        function collapseProgram(_uid) {
            $('tbody[data-program-uid="' + _uid + '"]').addClass('collapsed');
            return false;
        }
        (function() {
            function init() {
                window.setTimeout(() => {
                    let td = $('.flowsheets-table').find('td').last().get(0);
                    if(td) {
                        td.scrollIntoView({block: "nearest", behavior: "smooth"});
                    }
                }, 50);
            }
            addMCInitializer('flowsheets', init, '#flowsheetsComponent');
        }).call(window);
    </script>

    @endif
@endsection
