<?php
/** @var App\Models\Note $note */
/** @var App\Models\Pro $pro */
/** @var App\Models\Section $section */
/** @var $allSections */
?>
@extends ('layouts.patient')

@section('inner-content')
    <div class="card mb-0">
        <div class="card-body p-0">
            <div>
                <div class="">
                    <div>
                        <?php
                        $shortCutsObject = [];
                        foreach ($pro->shortcuts as $shortcut) {

                            // %replaceables%
                            $shortcut->text = str_replace("%AGE%", $patient->age_in_years, $shortcut->text);
                            $shortcut->text = str_replace("%GENDER%", $patient->sex, $shortcut->text);
                            $shortcut->text = str_replace("%NAME%", $patient->displayName(), $shortcut->text);

                            $shortCutsObject[] = [
                                "name" => $shortcut->shortcut,
                                "value" => $shortcut->text
                            ];
                        }
                        ?>
                        <script>window.userShortcuts = <?= json_encode($shortCutsObject); ?>;</script>
                        <?php
                        $shortcuts = "";
                        $latestSectionTS = 0;
                        ?>
                        @include('app.patient.sections.client-section-list')
                    </div>
                </div>

                <span class="d-none latest-section-ts">{{ $latestSectionTS }}</span>
            </div>
        </div>
    </div>
    <div class="note-templates-underlay"></div>
    @include('app.patient.note.dashboard_script')
@endsection

@section('left-nav-content')
    <div class="left-nav-content" id="client-sections-app">
        <div class="note-widget-title px-2 py-1">Note Sections</div>
        <input type="search" class="d-block w-100 border-0 outline-0 px-2 py-1"
               v-model="q" placeholder="Filter">
        <div class="border-top py-1">
            <div v-for="section in sections"
                 v-show="section.title.toLowerCase().indexOf(q.toLowerCase()) !== -1">
                <div class="d-flex pr-1 align-items-center note-widget-item c-pointer"
                     :title="section.title + ' - Click to remove'"
                     v-if="section.used"
                     v-on:click.once="remove(section.section_uid)">
                    <span class="mx-2">
                        <a class="font-12 text-secondary" href="#">
                            <i class="fa fa-minus-circle"></i>
                        </a>
                    </span>
                    <span class="font-smaller text-ellipsis">
                        @{{section.title}}
                    </span>
                </div>
                <div class="d-flex pr-1 align-items-center note-widget-item c-pointer"
                     :title="section.title + ' - Click to add'"
                     v-if="!section.used"
                     v-on:click.once="add(section.uid, section.internal_name)">
                    <span class="mx-2">
                        <a class="font-12" href="#">
                            <i class="fa fa-plus-circle"></i>
                        </a>
                    </span>
                    <span class="font-smaller text-ellipsis">
                        @{{section.title}}
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function() {
            function initSectionsWidget() {
                var allSections = <?= json_encode($allSections) ?>;
                new Vue({
                    el: '#client-sections-app',
                    delimiters: ['@{{', '}}'],
                    data: {
                        q: '',
                        sections: allSections
                    },
                    methods: {
                        add: function(_uid, _section) {
                                $.post('/api/section/createForClient', {
                                    clientUid: '{{$patient->uid}}',
                                    sectionTemplateUid: _uid,
                                }, function(_data) {
                                    if(_data) {
                                        if(_data.success) {
                                            fastReload();
                                        }
                                        else {
                                            toastr.error(_data.message);
                                        }
                                    }
                                    else {
                                        toastr.error('Unable to add section!');
                                    }
                                }, 'json');
                        },
                        remove: function(_uid) {
                            $.post('/api/section/deactivate', {
                                uid: _uid,
                                memo: 'Deactivated from note',
                            }, function(_data) {
                                if(_data) {
                                    if(_data.success) {
                                        fastReload();
                                    }
                                    else {
                                        toastr.error(_data.message);
                                    }
                                }
                                else {
                                    toastr.error('Unable to remove section!');
                                }
                            }, 'json');
                        }
                    }
                });

                $('div[embed]').each(function() {
                    $(this).load($(this).attr('embed'));
                });
            }
            addMCInitializer('client-sections-widget', initSectionsWidget, '#client-sections-app');
        })();
    </script>
@endsection
