@extends ('layouts/template')

@section('content')
<link href="/select2/select2.min.css" rel="stylesheet" />
<script src="/select2/select2.min.js"></script>
<style>
    #hcp-note-activity-filters label {
        font-weight: bold;
    }

    #hcp-note-activity-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: 200px !important;
    }
</style>

<div id="hcp-note-activity" class="p-3 mcp-theme-1">
    <div class="card">

        <div class="card-header p-2 d-flex align-items-center">
            <strong class="mr-4">
                <i class="fas fa-user"></i>
                HCP Note Activity
            </strong>
        </div>
        <div class="card-body p-0 border-0 table-responsive">
            <div class="p-3">
            
            <form id="hcp-note-activity-filters" method="GET" action="{{ route('practice-management.hcp-note-activity') }}" class="filter-container">
                <div class="sm-section" style="width: 250px !important;">
                    <div class="">
                        <label class="mb-1 text-secondary">Pros:</label>
                        <select id="searchForProInput" multiple name="pros_ids[]" class="form-control input-sm">
                            @if(@$filters['pros_ids'])
                                @foreach($rows as $p)
                                    <option value="{{ $p->id }}" selected>{{$p->name_first}} {{$p->name_last}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
               
                <div class="sm-section">
                    <div class="">
                        <label class="mb-1 text-secondary">From Date:</label>
                        <input type="date" name="from_date" class="form-control input-sm" value="{{request()->input('from_date')}}">
                    </div>
                </div>

                <div class="sm-section">
                    <div class="">
                        <label class="mb-1 text-secondary">To Date:</label>
                        <input type="date" name="to_date" class="form-control input-sm" value="{{request()->input('to_date')}}">
                    </div>
                </div>

                <div>
                    <div class="">
                        <label>&nbsp;</label>
                        <div class=" d-flex">
                            <button type="button" onclick="return fastLoad('{{ route("practice-management.hcp-note-activity") }}?' + $('#hcp-note-activity-filters').serialize());" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i> Filter</button>
                            <a href="#" onclick="return fastLoad('{{ route("practice-management.hcp-note-activity") }}');" class="btn btn-link btn-sm text-danger">Clear Filters</a>
                        </div>
                    </div>
                </div>
            </form>
            </div>
            <table class="table table-sm table-striped border-0 p-0 m-0 text-nowrap">
                <thead class="bg-light">
                    <tr>
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => 'First Name', 'key' => 'name_first'])</th>
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => 'Last Name', 'key' => 'name_last'])</th>
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => 'Last Note Created At', 'key' => 'last_note_created_at'])</th>
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => '# Notes This Month', 'key' => 'notes_this_month'])</th>
                        @if(request()->input('from_date') && request()->input('from_date'))
                            <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => '# Notes In the Period', 'key' => 'notes_this_period'])</th>
                        @endif
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => '# Clients', 'key' => 'total_client_count'])</th>
                        <th>@include('app.practice-management._sort_header', ['route' => route("practice-management.hcp-note-activity"), 'label' => '# Active Clients', 'key' => 'active_client_count'])</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $row)
                    <tr class="{{false ? 'bg-light' : ''}}">
                        <td class="text-nowrap border-left-0">
                           {{$row->name_first}}
                        </td>
                        <td>{{$row->name_last}}</td>
                        <td>{{friendly_date_time($row->last_note_created_at)}}</td>
                        <td>{{$row->notes_this_month}}</td>
                        @if(request()->input('from_date') && request()->input('from_date'))
                            <td>{{$row->notes_this_period}}</td>
                        @endif
                        <td>{{$row->total_client_count}}</td>
                        <td>{{$row->active_client_count}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>
    <div class="mt-3">
        {{$rows->appends(request()->input())->links()}}
    </div>

</div>

<script>
    (function() {
        function init() {
            var select2 = $("#searchForProInput").select2({
                placeholder: "Search Pro(s) by Name",
                minimumInputLength: 2,
                ajax: {
                    url: '/pro-suggest',
                    dataType: 'json',
                    type: "GET",
                    quietMillis: 50,
                    data: function (params) {
                        return {
                            term: params.term,
                            json: true
                        };
                    },
                    results: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.completeName,
                                    slug: item.slug,
                                    id: item.id
                                }
                            })
                        };
                    }
                }
            });
        }
        addMCInitializer('hcp-note-activity', init, '#hcp-note-activity');
    }).call(window);
</script>
@endsection