<div class="my-4">
    <div class="ticket-section" :class="otherCollapsed ? 'ticket-section-collapsed' : ''">
        <table class="table table-sm tickets-table mb-0 border-bottom">
            <tbody>
            <tr v-for="(item, index) in ticketsByType.other"
                v-if="(statusFilter === 'all' || (statusFilter === 'open' && item.is_open) || (statusFilter === 'closed' && !item.is_open))"
                :class="(item.is_open ? ' ' : 'opacity-60 bg-light ') + (currentItemUid === item.uid ? 'current' : '')">
                <td class="px-2 py-2 c-pointer" v-on:click.prevent="otherShowPopup(item)">
                    <div class="d-flex align-items-baseline">
                        <div class="pro-initials text-uppercase"
                             :title="allProsFlat['pro_' + item.assigned_pro_id].displayedName"
                             :style="'background-color: ' + allProsFlat['pro_' + item.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + item.assigned_pro_id].colors.fc + ';'">
                            @{{allProsFlat['pro_' + item.assigned_pro_id].displayedInitials}}
                        </div>
                        <div class="flex-grow-1 d-inline-flex ml-2 flex-wrap align-items-center">
                            <span class="font-weight-bold text-dark font-size-13"
                                  v-html="item.data.title"></span>
                            <span class="ml-2">
                                <span class="text-secondary">Assigned to:</span>
                                <span>@{{allProsFlat['pro_' + item.assigned_pro_id].displayedName}}</span>
                            </span>
                            <span class="ml-2">
                                <span class="text-secondary">Ordered by:</span>
                                <span>@{{allProsFlat['pro_' + item.ordering_pro_id].displayedName}}</span>
                            </span>
                            <span class="ml-2 font-weight-bold" v-if="item.data.attachments && item.data.attachments.length">
                                <i class="fa fa-paperclip"></i>
                            </span>
                            <span class="text-nowrap ml-auto text-sm" v-if="item.data.due_date">
                                <div title="Due Date" class="pro-initials text-uppercase text-white bg-info"><i class="fa fa-calendar-day"></i></div>
                                <span class="text-secondary ml-1">@{{ item.data.due_date }}</span>
                            </span>
                        </div>
                    </div>
                    <!--
                    <div>
                        <span class="text-secondary text-sm mt-1">Created:</span>
                        @{{ item.created_at }}
                    </div>
                    -->
                </td>

            </tr>
            </tbody>
        </table>
    </div>
    <div v-if="!preparing" class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="other-popup">
        <form method="POST" action="" class="p-0">
            <h3 class="stag-popup-title mb-0 p-3 bg-light sticky-top">
                <span v-if="otherPopupMode === 'add'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">Add Other Ticket</span>
                <span v-if="otherPopupMode === 'edit'" class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3"
                      v-html="otherPopupItem.data.title ? otherPopupItem.data.title : 'Edit Other Ticket'"></span>
                @include('app.patient.tickets.header-end', ['category' => 'other'])
            </h3>

            <!-- common - only applicable for edit -->
            @include('app.patient.tickets.common-fields', ['category' => 'other'])

            <!-- other specific -->
            <div class="p-3 border-bottom">

                <div class="row mb-2">
                    <div class="col-12">
                        <label class="text-secondary mb-0 font-weight-normal font-size-16">Other</label>
                    </div>
                </div>

                <div class="mb-2">
                    <label class="text-sm text-secondary mb-1">Title</label>
                    <input required type="text" v-model="otherPopupItem.data.title" placeholder="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" v-model="otherPopupItem.data.description" placeholder="Description" class="form-control form-control-sm resize-v auto-grow" rows="2"></textarea>
                </div>
                <div class="mb-2">
                    <label class="text-sm text-secondary mb-1">Memo</label>
                    <input type="text" v-model="otherPopupItem.data.memo" placeholder="Memo" class="form-control form-control-sm">
                </div>
            </div>

            <div v-if="otherPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3 p-3 border-bottom">
                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="otherSavePopupItem()">Submit</button>
                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
            </div>

            <!-- attachments -->
            {{--@include('app.patient.tickets.attachments', ['category' => 'other'])--}}

            <!-- bills -->
            <!--<div class="px-3 py-3 border-top" v-if="otherPopupMode !== 'add'">
                <a class="mb-0 font-weight-normal font-size-16 d-flex align-items-center"
                   native target="_blank"
                   open-in-stag-popup
                   popup-style="tall"
                   title="Admin. Bills"
                   :href="'/generic-bill-view/Ticket/' + otherPopupItem.uid">
                    Admin. Bills
                </a>
            </div>-->

            <!-- comments -->
            @include('app.patient.tickets.comments', ['category' => 'other'])
        </form>
    </div>
</div>
