@extends ('layouts.patient')

@section('inner-content')

    <div class="pt-2 d-flex align-items-start">
        <h6 class="my-0 text-secondary d-flex align-items-center w-100">
            <span class="font-weight-bold text-secondary">Notes</span>
            <span class="mx-2 text-secondary">|</span>
            <div moe>
                <a start show class="py-0 mb-3">Add</a>
                <form url="/api/note/createUsingFreeTextHtml" class="mcp-theme-1"
                      redir="patients/view/{{ $patient->uid }}/notes/view/[data]">
                    <input type="hidden" name="clientUid" value="{{$patient->uid}}">
                    <input type="hidden" name="hcpProUid" value="{{$pro->uid}}">
                    <input type="hidden" name="effectiveDateEST" value="{{ date('Y-m-d') }}">
                    <div class="form-group">
                        <select name="newOrFuOrNa" class="form-control">
                            <option value="NEW">New Patient</option>
                            <option value="FU">Follow Up</option>
                            <option value="NA">N/A</option>
                        </select>
                    </div>
                    <div>
                        <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
                    </div>
                </form>
            </div>
            <select class="ml-auto max-width-300px form-control form-control-sm"
                    onchange="fastLoad('/patients/view/{{$patient->uid}}/notes/' + this.value, true, false, false)">
                <option value="active" {{ $filter === 'active' ? 'selected' : '' }}>Active notes</option>
                <option value="cancelled" {{ $filter === 'cancelled' ? 'selected' : '' }}>Cancelled notes</option>
                <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>All notes</option>
            </select>
        </h6>
    </div>

    <table class="table table-sm table-striped table-bordered mb-0 mt-2 notes-list">
        <thead>
        <tr>
            <th class="px-2 text-secondary border-bottom-0">Effective Date</th>
            <th class="px-2 text-secondary border-bottom-0">New Patient / FU</th>
            <th class="px-2 text-secondary border-bottom-0">HCP</th>
            <th class="px-2 text-secondary border-bottom-0">Signed</th>
            <th class="px-2 text-secondary border-bottom-0 w-50">Content</th>
            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
            <th class="px-2 text-secondary border-bottom-0">Actions</th>
        </tr>
        </thead>
        <tbody>
        <?php
        $records = [];
        switch ($filter) {
            case "active":
                $records = $patient->activeNotes;
                break;
            case "cancelled":
                $records = $patient->cancelledNotes;
                break;
            case "all":
                $records = $patient->notes;
                break;
        }
        ?>
        @foreach ($records as $note)
            <tr class="{{ $note->is_cancelled ? 'cancelled-item always-clickable' : '' }}">
                <td class="px-2">
                    <span class="font-weight-bold">
                        {{ friendly_date_time($note->effective_dateest, false) }}
                    </span>
                    <span class="ml-1">{{ $note->is_cancelled ? '[cancelled]' : '' }}</span>
                </td>
                <td class="px-2">
                    {{ $note->new_or_fu_or_na === 'NEW' ? 'New Patient' : $note->new_or_fu_or_na }}
                </td>
                <td class="px-2">
                    {{$note->hcpPro ? $note->hcpPro->name_display: '-'}}
                </td>
                <td class="px-2">
                    {!! $note->hcpPro && $note->is_signed_by_hcp ? '<b class="text-success">Yes</b>' : 'No' !!}
                </td>
                <td class="px-2 note-summary">
                    <div class="note-section-content-html-outer">
                        {!! $note->summary() !!}
                    </div>
                </td>
                <td class="px-2">
                    <div class="position-relative c-pointer text-center stag-tooltip">
                        <i class="fa fa-info-circle"></i>
                        <div class="position-absolute bg-white border rounded p-2 stag-tooltip-content">
                            <div class="text-nowrap small text-left pb-1">Created on <b>{{ friendly_date_time($note->created_at, true) }}</b></div>
                            <div class="text-nowrap small text-left">Created by <b>{{ $note->createdSession->pro->displayName() }}</b></div>
                        </div>
                    </div>
                </td>
                <td class="px-2">
                    <div class="d-flex align-items-center">
                        <a href="/patients/view/{{ $patient->uid }}/notes/view/{{ $note->uid }}" class="font-weight-bold">Open</a>
                        @if($note->new_or_fu_or_na !== 'NEW')
                        <span class="px-2 text-secondary">|</span>
                        <a href="#" class="text-primary trigger-clone" data-uid="{{$note->uid}}">Clone</a>
                        @endif
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <script>
        (function() {
            function initNotesList() {

                // truncate content
                $('.note-section-content-html').each(function() {
                    if($.trim($(this).text()) === '') $(this).remove();
                    $(this).find('p, div').each(function() {
                        if($.trim($(this).text()) === '') $(this).remove();
                    });
                });
                $('.note-section-content-html-outer').each(function() {
                    let pCount = 0;
                    $(this).find('p').each(function() {
                        pCount++;
                        if(pCount > 3) {
                            $(this).hide();
                        }
                    });
                    if(pCount > 3) {
                        $('<p/>').text('…').appendTo(this);
                    }
                });

                $('.trigger-clone')
                    .off('click.clone')
                    .on('click.clone', function() {
                        $.post('/api/note/clone', {
                            uid: $(this).attr('data-uid')
                        }, function(_data) {
                            if(_data) {
                                if(_data.success) {
                                    toastr.success('Note cloned successfully');
                                    fastLoad('/patients/view/{{$patient->uid}}/notes/view/' + _data.data);
                                }
                                else {
                                    toastr.error(_data.message);
                                }
                            }
                            else {
                                toastr.error('Unable to clone the note!');
                            }
                        }, 'json');
                    });
            }
            addMCInitializer('notes-list', initNotesList);
        })();
    </script>
@endsection
