@extends ('layouts/template')

@section('content')
<style>
	#rm-action-report-filters label {
		font-weight: bold;
	}

	#rm-action-report-filters .mw-100px {
		min-width: 100px;
	}
	.filter-container{
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.filter-container >div {
		width: 165px;
	}
	.filter-container >div:not(:last-child) {
		margin-right: 15px;
	}
	.sm-section {
		width: 150px !important;
	}
    thead.border-bottom-0 tr th {
        border-bottom: none;
    }
</style>
<div id="problems-report" class="p-3 mcp-theme-1">
    <div class="card">

        <div class="card-header px-2 py-1 d-flex align-items-center">
            <strong class="mr-4 py-1">
                <i class="fas fa-user"></i>
                Problems Report
            </strong>
        </div>
        <div class="card-body p-0 border-0 table-responsive">
            <div class="m-2">
                <form method="GET" action="{{ route('practice-management.problems-report') }}">

                    <div class="d-flex align-items-start mt-2">

                        <div class="width-140px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_client') ? 'font-weight-bold text-info' : 'text-secondary'}}">Patient</label>
                            <input type="hidden" name="f_client" value="{{request()->input('f_client')}}">
                            <input type="text"
                                   name="f_client_name"
                                   value="{{request()->input('f_client_name')}}"
                                   target-key="uid"
                                   target-field="f_client"
                                   autocomplete="off"
                                   class="form-control form-control-sm min-width-unset"
                                   stag-suggest
                                   stag-suggest-left
                                   stag-suggest-ep="/client-suggest"
                                   placeholder="Patient">
                        </div>

                        <div class="width-140px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_mcp') ? 'font-weight-bold text-info' : 'text-secondary'}}">Pro</label>
                            <select name="f_mcp"
                                    class="mr-2 form-control form-control-sm min-width-unset pl-0"
                                    provider-search
                                    data-pro-uid="{{request()->input('f_mcp')}}">
                            </select>
                        </div>

                        <div class="width-140px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_problem') ? 'font-weight-bold text-info' : 'text-secondary'}}">Problem</label>
                            <input type="text" name="f_problem" value="{{request()->input('f_problem')}}" class="form-control form-control-sm min-width-unset">
                        </div>

                        <div class="width-100px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_icd') ? 'font-weight-bold text-info' : 'text-secondary'}}">ICD</label>
                            <input type="text" name="f_icd" value="{{request()->input('f_icd')}}" class="form-control form-control-sm min-width-unset">
                        </div>

                        <div class="mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_lr_date') ? 'font-weight-bold text-info' : 'text-secondary'}}">Last Review Date</label>
                            <div class="d-flex align-items-start">
                                <select name="f_lr_date_op"
                                        class="mr-1 form-control form-control-sm min-width-unset width-40px pl-0">
                                    <option {{request()->input('f_lr_date_op') === '=' ? 'selected' : ''}} value="=">&equals;</option>
                                    <option {{request()->input('f_lr_date_op') === '>' ? 'selected' : ''}} value=">">&gt;</option>
                                    <option {{request()->input('f_lr_date_op') === '<' ? 'selected' : ''}} value="<">&lt;</option>
                                    <option {{request()->input('f_lr_date_op') === '>=' ? 'selected' : ''}} value=">=">&ge;</option>
                                    <option {{request()->input('f_lr_date_op') === '<=' ? 'selected' : ''}} value="<=">&le;</option>
                                </select>
                                <input type="date" name="f_lr_date"
                                       value="{{request()->input('f_lr_date')}}"
                                       class="form-control form-control-sm min-width-unset">
                            </div>
                        </div>

                        <div class="width-140px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_lr_by') ? 'font-weight-bold text-info' : 'text-secondary'}}">Last Review By</label>
                            <select name="f_lr_by"
                                    class="mr-2 form-control form-control-sm min-width-unset pl-0"
                                    provider-search
                                    data-pro-uid="{{request()->input('f_lr_by')}}">
                            </select>
                        </div>

                        <div class="mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_lp_date') ? 'font-weight-bold text-info' : 'text-secondary'}}">Last Plan Date</label>
                            <div class="d-flex align-items-start">
                                <select name="f_lp_date_op"
                                        class="mr-1 form-control form-control-sm min-width-unset width-40px pl-0">
                                    <option {{request()->input('f_lp_date_op') === '=' ? 'selected' : ''}} value="=">&equals;</option>
                                    <option {{request()->input('f_lp_date_op') === '>' ? 'selected' : ''}} value=">">&gt;</option>
                                    <option {{request()->input('f_lp_date_op') === '<' ? 'selected' : ''}} value="<">&lt;</option>
                                    <option {{request()->input('f_lp_date_op') === '>=' ? 'selected' : ''}} value=">=">&ge;</option>
                                    <option {{request()->input('f_lp_date_op') === '<=' ? 'selected' : ''}} value="<=">&le;</option>
                                </select>
                                <input type="date" name="f_lp_date"
                                       value="{{request()->input('f_lp_date')}}"
                                       class="form-control form-control-sm min-width-unset">
                            </div>
                        </div>

                        <div class="width-140px mr-2">
                            <label class="mb-0 text-sm {{request()->input('f_lp_by') ? 'font-weight-bold text-info' : 'text-secondary'}}">Last Plan By</label>
                            <select name="f_lp_by"
                                    class="mr-2 form-control form-control-sm min-width-unset pl-0"
                                    provider-search
                                    data-pro-uid="{{request()->input('f_lp_by')}}">
                            </select>
                        </div>

                        <div>
                            <label class="mb-0 text-sm text-secondary">&nbsp;</label>
                            <div class="d-flex align-items-start">
                                <button class="btn-apply btn btn-sm btn-primary mr-2"><i class="fa fa-check"></i></button>
                                <button class="btn-reset btn btn-sm btn-default bg-white text-secondary border"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div> 
            <table class="table table-sm table-striped table-bordered border-0 p-0 m-0">
                <thead class="bg-light border-bottom-0">
                <tr>
                    <th colspan="5"></th>
                    <th class="col-divider"></th>
                    <th class="text-secondary" colspan="3">Last Review</th>
                    <th class="col-divider"></th>
                    <th class="text-secondary" colspan="3">Last Plan</th>
                    <th rowspan="2" class="col-divider"></th>
                    <th rowspan="2" class="text-secondary">Review<br>Trail</th>
                    <th rowspan="2" class="text-secondary">Plan<br>Trail</th>
                </tr>
                    <tr>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Patient', 'key' => 'client_name'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'DOB', 'key' => 'dob'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'MCP', 'key' => 'mcp_name'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Problem', 'key' => 'problem'])</th>
                        <th class="text-nowrap">@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'ICD', 'key' => 'icd'])</th>
                        <th class="col-divider"></th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Date', 'key' => 'last_review_date'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'By', 'key' => 'last_review_by'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Content', 'key' => 'last_review_content'])</th>
                        <th class="col-divider"></th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Date', 'key' => 'last_plan_date'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'By', 'key' => 'last_plan_by'])</th>
                        <th>@include('app.practice-management._sort_header_multi', ['route' => route("practice-management.problems-report"), 'label' => 'Content', 'key' => 'last_plan_content'])</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $row)
                    <tr class="{{false ? 'bg-light' : ''}}">
                        <td class="">
                            <a href="/patients/view/{{$row->client_uid}}">
                                {{$row->client_name}}
                            </a>
                        </td>
                        <td class="text-nowrap">
                            {{$row->dob}}
                        </td>
                        <td>
                            {{$row->mcp_name}}
                        </td>
                        <td>
                            <div class="max-width-200px">
                                {{$row->problem}}
                            </div>
                        </td>
                        <td>
                            {{$row->icd}}
                        </td>
                        <td class="col-divider"></td>
                        <td class="text-nowrap">
                            {{$row->last_review_date}}
                        </td>
                        <td>
                            {{$row->last_review_by}}
                        </td>
                        <td>
                            <div class="inline-html-container max-width-200px max-height-200px overflow-overlay-on-hover">{!! $row->last_review_content !!}</div>
                        </td>
                        <td class="col-divider"></td>
                        <td class="text-nowrap">
                            {{$row->last_plan_date}}
                        </td>
                        <td>
                            {{$row->last_plan_by}}
                        </td>
                        <td>
                            <div class="inline-html-container max-width-200px max-height-200px overflow-overlay-on-hover">{!! $row->last_plan_content !!}</div>
                        </td>
                        <td class="col-divider"></td>
                        <td>
                            <a class="px-1 view-review-log"
                               native target="_blank"
                               open-in-stag-popup
                               popup-style="stag-popup-md"
                               title="Review log for {{$row->problem}}"
                               href="/point/review-log/{{$row->point_uid}}">
                                View
                            </a>
                        </td>
                        <td>
                            <a class="px-1 view-plan-log"
                               native target="_blank"
                               open-in-stag-popup
                               popup-style="stag-popup-md"
                               title="Plan log for {{$row->problem}}"
                               href="/point/plan-log/{{$row->point_uid}}">
                                View
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>
    <div class="d-flex align-items-baseline mt-3">
        {!! $paginator->withQueryString()->links() !!}
        <div class="mb-3">
            <div class="ml-4 mb-3">Showing <b>{{$paginator->firstItem()}}</b> to <b>{{$paginator->lastItem()}}</b> (page {{$paginator->currentPage()}}) of <b>{{$paginator->total()}}</b> problems</div>
        </div>
    </div>

</div>

<script>
    (function() {
        function init() {

            let parent = $('#problems-report');

            parent.find('input[stag-suggest][target-key][target-field]')
                .off('stag-suggest-selected')
                .on('stag-suggest-selected', (_e, _input, _data) => {
                    _input = $(_input);
                    _input.closest('form').find('input[name="' + _input.attr('target-field') + '"]').val(_data[_input.attr('target-key')]);
                });

            parent.find('.btn-apply')
                .off('click.filter')
                .on('click.filter', function() {
                    fastLoad('{{route('practice-management.problems-report')}}?sort_by={{urlencode(request()->input('sort_by'))}}&' + $(this).closest('form').serialize());
                    return false;
                });

            parent.find('.btn-reset')
                .off('click.reset')
                .on('click.reset', function() {
                    fastLoad('{{route("practice-management.problems-report")}}?sort_by={{urlencode(request()->input('sort_by'))}}');
                    return false;
                });
        }
        addMCInitializer('problems-report', init, '#problems-report');
    }).call(window);
</script>

@endsection