<div id="equipmentApp" 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-car-battery mr-2"></i>Equipment/Device</h4>
        <span class="mx-2 text-secondary">|</span>
        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('equipment-popup')">Add</a>
        <select class="ml-auto max-width-300px form-control form-control-sm"
                onchange="fastLoad('/patients/view/{{$patient->uid}}/action-items-equipment/' + this.value, true, false, false)">
            <option value="open" {{ $filter === 'open' ? 'selected' : '' }}>Open tickets</option>
            <option value="closed" {{ $filter === 'closed' ? 'selected' : '' }}>Closed tickets</option>
            <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>All tickets</option>
        </select>
    </div>
    <table class="table table-sm table-bordered mb-0">
        <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">Equipment</th>
            <th class="px-2 text-secondary border-bottom-0">Memo</th>
            <th class="px-2 text-secondary border-bottom-0 width-200px">Collaboration</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60 bg-light'">
                <td class="px-2">@{{ index + 1 }}</td>
                <td class="px-2">
                    <div class="d-flex align-items-center flex-wrap">
                        <div>
                            <a :href="'/patients/view/{{$patient->uid}}/action-items-equipment/view/' + item.uid"
                               v-html="item.items && Array.isArray(item.items) ? item.items[0] : '-'"
                               class="font-weight-bold font-size-13"></a>
                        </div>
                        <span class="mx-2 text-secondary">•</span>
                        <div>
                            <span class="text-secondary">Purpose:</span>
                            <span v-html="item.purpose ? item.purpose : '-'"></span>
                        </div>
                        <div v-if="item.shipping_status" class="d-inline-flex flex-wrap">
                            <span class="mx-2 text-secondary">•</span>
                            <div>
                                <span class="text-secondary">Shipping status:</span>
                                <span v-html="item.shipping_status ? item.shipping_status : '-'"></span>
                            </div>
                            <div v-if="item.tracking_number" class="d-inline-flex flex-wrap">
                                <span class="mx-2 text-secondary">•</span>
                                <div>
                                    <span class="text-secondary">Tracking #:</span>
                                    <span v-html="item.tracking_number ? item.tracking_number : '-'"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span class="text-secondary text-sm mt-1">Created:</span>
                        @{{ item.created_at }}
                    </div>
                </td>
                <td class="px-2">@{{item.memo}}</td>
                @include('app.patient.partials.ticket_vue_collab_column')
                {{--<td class="px-2">
                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('equipment-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="equipment-popup">
        <form method="POST" action="">
            <h3 class="stag-popup-title mb-2">
                <span>@{{ popupMode === 'add' ? 'Add Equipment' : 'Edit Equipment' }}</span>
                <a href="#" class="ml-auto text-secondary"
                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
            </h3>
            <div class="mb-2">
                <div class="d-flex align-items-center mb-1">
                    <label class="text-sm text-secondary mb-0">Equipment</label>
                    {{--<span class="text-sm mx-2 text-secondary">|</span>
                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.items.push('')">Add</a>--}}
                </div>
                <div class="d-flex align-items-center mb-2" v-for="(item, itemIndex) in popupItem.items">
                    <div class="position-relative flex-grow-1">
                        <input required type="text" data-option-list v-model="popupItem.items[itemIndex]" class="form-control form-control-sm">
                        <div class="data-option-list">
                            <div>Weight Scale</div>
                            <div>Pulse Ox</div>
                            <div>Temperature Gun</div>
                        </div>
                    </div>
                    {{--<a v-if="popupItem.items.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.items.splice(itemIndex, 1)">
                        <i class="fa fa-trash-alt"></i>
                    </a>--}}
                </div>
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Purpose</label>
                <input type="text" v-model="popupItem.purpose" class="form-control form-control-sm">
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Memo</label>
                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
            </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'=>'equipment'])
</div>
<script>
    (function() {
        <?php
        $tickets = $patient->tickets->filter(function($_item) use ($filter) {
            $match = $_item->category === 'equipment';
            if($filter !== 'all') {
                $match = $match && ($filter === 'open' ? $_item->is_open : !$_item->is_open);
            }
            return $match;
        });
        $items = [];
        foreach ($tickets as $ticket) {
            $item = json_decode($ticket->data);
            $item->uid = $ticket->uid;
            $item->is_open = $ticket->is_open;
            $item->assigned_pro_id = $ticket->assigned_pro_id;
            $item->manager_pro_id = $ticket->manager_pro_id;
            $item->ordering_pro_id = $ticket->ordering_pro_id;
            $item->initiating_pro_id = $ticket->initiating_pro_id;
            $item->has_assigned_pro_signed = $ticket->has_assigned_pro_signed;
            $item->has_manager_pro_signed = $ticket->has_manager_pro_signed;
            $item->has_ordering_pro_signed = $ticket->has_ordering_pro_signed;
            $item->has_initiating_pro_signed = $ticket->has_initiating_pro_signed;
            $item->is_entry_error = $ticket->is_entry_error;
            $item->created_at = friendly_date_time($ticket->created_at);
            $items[] = $item;
        }
        ?>
        function init() {
            let items = [];
            let equipmentApp = new Vue({
                el: '#equipmentApp',
                delimiters: ['@{{', '}}'],
                data: {
                    popupMode: 'add',
                    items: {!! json_encode($items) !!},
                    popupItem: {
                        uid: '',
                        is_open: true,
                        items: [''],
                        purpose: '',
                        memo: '',
                    },
                    @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,
                            items: [''],
                            purpose: '',
                            memo: '',
                        };
                        showStagPopup('equipment-popup', true);
                    },
                    savePopupItem: function() {
                        let form = $('#equipmentApp form').first();
                        if(!form[0].checkValidity()) {
                            form[0].reportValidity();
                            return false;
                        }

                        showMask();
                        let payload = {};
                        if(this.popupMode === 'add') {
                            payload.clientUid = '{{ $patient->uid }}';
                            payload.category = 'equipment';
                            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'=>'equipment'])
                },
                mounted: function () {
                    initFastLoad($('#equipmentApp'));
                }
            })
        }
        addMCInitializer('equipment', init, '#equipmentApp');
    })();
</script>
