<div id="otherApp" v-cloak>
    <div class="d-flex align-items-center pb-2">
        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-file-alt mr-2"></i>Other</h4>
        <span class="mx-2 text-secondary">|</span>
        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('other-popup')">Add</a>
    </div>
    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
        <thead>
        <tr class="bg-light">
            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
            <th class="px-2 text-secondary border-bottom-0">Category</th>
            <th class="px-2 text-secondary border-bottom-0">Title</th>
            <th class="px-2 text-secondary border-bottom-0">Description</th>
            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
                <td class="px-2">@{{ index + 1 }}</td>
                <td class="px-2" v-html="item.category"></td>
                <td class="px-2" v-html="item.title"></td>
                <td class="px-2" v-html="item.description"></td>
                <td class="px-2">
                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('other-popup', item)">Edit</a>
                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>

                    @include('app.patient.partials.ticket_action_links')

                </td>
            </tr>
        </tbody>
    </table>
    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="other-popup">
        <form method="POST" action="" class="overflow-visible">
            <h3 class="stag-popup-title mb-2">
                <span>@{{ popupMode === 'add' ? 'Add Item' : 'Edit Item' }}</span>
                <a href="#" class="ml-auto text-secondary"
                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
            </h3>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Category</label>
                <input required type="text" v-model="popupItem.category" class="form-control form-control-sm">
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Title</label>
                <input required type="text" v-model="popupItem.title" class="form-control form-control-sm">
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Description</label>
                <textarea type="text" rows="3" v-model="popupItem.description" class="form-control form-control-sm"></textarea>
            </div>
            <div class="d-flex align-items-center justify-content-center mt-3">
                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
            </div>
        </form>
    </div>
    @include('app.patient.partials.ticket_update_pro_form',['ticketType'=>'other'])
</div>

<script>
    (function() {
        <?php
        $tickets = $patient->tickets->filter(function($_item) {
            return $_item->category === 'other';
        });

        $items = [];
        foreach ($tickets as $ticket) {
            $item = json_decode($ticket->data);
            $item->uid = $ticket->uid;
            $item->is_open = $ticket->is_open;
            $item->has_assigned_pro_signed = $ticket->has_assigned_pro_signed;
            $item->has_initiating_pro_signed = $ticket->has_initiating_pro_signed;
            $item->has_manager_pro_signed = $ticket->has_manager_pro_signed;
            $item->has_ordering_pro_signed = $ticket->has_ordering_pro_signed;
            $item->is_entry_error = $ticket->is_entry_error;
            $items[] = $item;
        }
        ?>
        function init() {
            let items = [];
            let otherApp = new Vue({
                el: '#otherApp',
                delimiters: ['@{{', '}}'],
                data: {
                    popupMode: 'add',
                    items: {!! json_encode($items) !!},
                    popupItem: {
                        uid: '',
                        is_open: true,
                        category: '',
                        title: '',
                        description: ''
                    },
                    @include('app.patient.partials.ticket_vue_data')
                },
                methods: {
                    showPopup: function(_name, _item) {
                        closeStagPopup();
                        this.popupMode = _item ? 'edit' : 'add';
                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                            uid: '',
                            is_open: true,
                            category: '',
                            title: '',
                            description: '',
                        };
                        let self = this;
                        Vue.nextTick(function() {
                            showStagPopup('other-popup', true);
                        });
                    },
                    savePopupItem: function() {
                        let form = $('#otherApp form').first();
                        if(!form[0].checkValidity()) {
                            form[0].reportValidity();
                            return false;
                        }

                        showMask();
                        let payload = {};
                        if(this.popupMode === 'add') {
                            payload.clientUid = '{{ $patient->uid }}';
                            payload.category = 'other';
                            payload.assignedProUid = '{{ $pro->uid  }}';
                            payload.managerProUid = '{{ $pro->uid  }}';
                            payload.orderingProUid = '{{ $pro->uid  }}';
                            payload.initiatingProUid = '{{ $pro->uid  }}';
                            payload.data = JSON.stringify(this.popupItem);
                        }
                        else {
                            payload.uid = this.popupItem.uid;
                            payload.newData = JSON.stringify(this.popupItem);
                        }

                        $.post(
                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
                            payload,
                            function(_data) {
                                console.log(_data);
                                fastReload();
                            },
                            'json');

                        return false;
                    },

                    closeItem: function(_item) {
                        showMask();
                        $.post('/api/ticket/close', {
                            uid: _item.uid
                        }, function(_data) {
                            fastReload();
                        });
                    },

                    openItem: function(_item) {
                        showMask();
                        $.post('/api/ticket/open', {
                            uid: _item.uid
                        }, function(_data) {
                            fastReload();
                        });
                    },

                    @include('app.patient.partials.ticket_vue_methods',['ticketType'=>'other'])
                },
                mounted: function () {
                    initFastLoad($('#otherApp'));
                }
            })
        }
        addMCInitializer('other', init, '#otherApp');
    })();
</script>
