<div class="my-4">
    <div class="d-flex align-items-end mb-3">
        <h4 class="font-weight-bold m-0 text-secondary font-size-16">ERx
            <span v-if="statusFilter === 'open'" class="text-secondary font-weight-normal">(@{{ erxNumOpen }} open)</span>
            <span v-if="statusFilter === 'closed'" class="text-secondary font-weight-normal">(@{{ erxNumClosed }} closed)</span>
            <span v-if="statusFilter === 'all'" class="text-secondary font-weight-normal">(@{{ erxNumOpen }} open, @{{ erxNumClosed }} closed)</span>
        </h4>
        <a class="px-3 c-pointer font-weight-bold"
           v-on:click.prevent="erxShowPopup()">+ New</a>
        <a class="py-0 font-weight-normal c-pointer flex-grow-1 text-right pr-2"
           v-if="!erxCollapsed"
           v-on:click.prevent="erxCollapsed = true">
            <i class="text-secondary fa fa-chevron-up"></i>
        </a>
        <a class="py-0 font-weight-normal c-pointer flex-grow-1 text-right pr-2"
           v-if="erxCollapsed"
           v-on:click.prevent="erxCollapsed = false">
            <i class="text-secondary fa fa-chevron-down"></i>
        </a>
    </div>
    <div class="ticket-section" :class="erxCollapsed ? 'ticket-section-collapsed' : ''">
        <table class="table table-sm tickets-table mb-0 border-bottom">
            <tbody>
            <tr v-for="(item, index) in ticketsByType.erx"
                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="erxShowPopup(item)">
                    <div class="d-flex align-items-center">
                        <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">@{{item.data.medication}}</span>
                            <span class="d-inline-flex align-items-center" v-if="item.data.strength">
                                    <span class="mx-2 text-secondary">•</span>
                                    <span>@{{item.data.strength}}</span>
                                </span>
                            <!--                                <span class="d-inline-flex align-items-center" v-if="item.data.route">
                                                                <span class="mx-2 text-secondary">•</span>
                                                                <span>@{{item.data.route}}</span>
                                                            </span>
                                                            <span class="d-inline-flex align-items-center" v-if="item.data.frequency">
                                                                <span class="mx-2 text-secondary">•</span>
                                                                <span>@{{item.data.frequency}}</span>
                                                            </span>-->
                            <!--
                            <span class="d-inline-flex align-items-center" v-if="item.data.dispense">
                                <span class="mx-2 text-secondary">•</span>
                                <span>Dispense:</span> @{{item.data.dispense}}
                                <span class="text-secondary ml-1" v-html="inWords(item.data.dispense)"></span>
                            </span>
                            <span class="d-inline-flex align-items-center" v-if="item.data.refills">
                                <span class="mx-2 text-secondary">•</span>
                                <span><span>Refills:</span> @{{item.data.refills}}</span>
                            </span>
                            <span class="d-inline-flex align-items-center" v-if="item.data.purpose">
                                <span class="mx-2 text-secondary">•</span>
                                <span><span>Purpose:</span> @{{item.data.purpose}}</span>
                            </span>
                            -->
                            <span class="text-nowrap ml-4 text-secondary" v-html="pharmacy(item.data)"></span>
                            <span class="ml-3 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="erx-popup">
        <form method="POST" action="" class="p-0">
            <h3 class="stag-popup-title mb-0 p-3 bg-light sticky-top">
                <span class="flex-grow-1 text-nowrap overflow-hidden text-ellipsis mr-3">@{{ erxPopupMode === 'add' ? 'Add ERx Ticket' : erxPopupItem.data.medication + '  •  ' + erxPopupItem.data.strength }}</span>
                @include('app.patient.tickets.header-end', ['category' => 'erx'])
            </h3>

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

            <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">ERx</label>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-9">
                        <label class="text-sm text-secondary mb-1">Medication</label>
                        <input type="hidden" v-model="erxPopupItem.data.medication">
                        <input required type="text" data-field="medication" placeholder="Medication"
                               v-model="erxPopupItem.data.medication"
                               class="form-control form-control-sm">
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Strength</label>
                        <input type="hidden" v-model="erxPopupItem.data.strength">
                        <input type="text" data-field="strength" placeholder="Strength"
                               :value="erxPopupItem.data.strength"
                               class="form-control form-control-sm min-width-unset">
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3">
                        <label class="text-sm text-secondary mb-1">Frequency</label>
                        <input type="text" placeholder="Frequency"
                               v-model="erxPopupItem.data.frequency" class="form-control form-control-sm min-width-unset"
                               data-option-list="frequency-options">
                        <div id="frequency-options" class="data-option-list">
                            <div>Once a day</div>
                            <div>Twice a day</div>
                        </div>
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Route</label>
                        <input required type="text" placeholder="Route"
                               v-model="erxPopupItem.data.route" class="form-control form-control-sm min-width-unset"
                               data-option-list="route-options">
                        <div id="route-options" class="data-option-list">
                            <div>PO (by mouth)</div>
                            <div>PR (per rectum)</div>
                            <div>IM (intramuscular)</div>
                            <div>IV (intravenous)</div>
                            <div>ID (intradermal)</div>
                            <div>IN (intranasal)</div>
                            <div>TP (topical)</div>
                            <div>SL (sublingual)</div>
                            <div>BUCC (buccal)</div>
                            <div>IP (intraperitoneal)</div>
                        </div>
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Dispense Amount</label>
                        <input required type="number" placeholder="Dispense Amount"
                               v-model="erxPopupItem.data.dispense" class="form-control form-control-sm min-width-unset">
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Refills</label>
                        <input type="number" placeholder="Refills"
                               v-model="erxPopupItem.data.refills" class="form-control form-control-sm min-width-unset">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label class="text-sm text-secondary mb-1">Purpose</label>
                        <input required type="text"  placeholder="Purpose"
                               data-field="icd" v-model="erxPopupItem.data.purpose" class="form-control form-control-sm">
                    </div>
                </div>

            </div>
            <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">Preferred Pharmacy</label>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-12">
                        <label class="text-sm text-secondary mb-1">Business Name</label>
                        <input type="text" autocomplete="donotdoit" placeholder="Business Name" id="pharmacy-search" v-model="erxPopupItem.data.pharmacyName" class="form-control form-control-sm">
                        <div class="suggestions-outer pharmacy-suggestions position-absolute d-none"></div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-4">
                        <label class="text-sm text-secondary mb-1">City</label>
                        <input type="text" placeholder="City" v-model="erxPopupItem.data.pharmacyCity" class="form-control form-control-sm min-width-unset">
                    </div>
                    <div class="col-2 pl-0">
                        <label class="text-sm text-secondary mb-1">State</label>
                        <input type="text" placeholder="State" v-model="erxPopupItem.data.pharmacyState" class="form-control form-control-sm min-width-unset">
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Phone</label>
                        <input type="text" placeholder="Phone" v-model="erxPopupItem.data.pharmacyPhone" class="form-control form-control-sm min-width-unset">
                    </div>
                    <div class="col-3 pl-0">
                        <label class="text-sm text-secondary mb-1">Fax</label>
                        <input type="text" placeholder="Fax" v-model="erxPopupItem.data.pharmacyFax" class="form-control form-control-sm min-width-unset">
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-12">
                        <label class="text-sm text-secondary mb-1">Address Memo</label>
                        <input type="text" placeholder="Address Memo" autocomplete="donotdoit" v-model="erxPopupItem.data.pharmacyAddressMemo" class="form-control form-control-sm">
                    </div>
                </div>
                <div v-if="erxPopupMode === 'add'" class="d-flex align-items-center justify-content-start mt-3">
                    <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="erxSavePopupItem()">Submit</button>
                    <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
                </div>
            </div>

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

            <!-- comments -->
            @include('app.patient.tickets.comments', ['category' => 'erx'])

        </form>
    </div>
</div>
