<div style="height: 100%;" data-options="dxView : { name: 'Deliveries', title: 'Deliveries' } ">

    <div data-bind="dxScrollView: {}">

        <div data-bind="with: delivery" style="height: 100%;">

            <div style="margin-top: 10px; margin-left: 10px; margin-right: 20px; width: 600px;">
                <div class="sh-form-section-top">@deliveryDetails</div>

                <table class="detailsTable">
                    <tr>
                        <td style="width: 270px;">@deliveryInstructions:</td>
                        <td>
                            <h5 style="display: inline-block" class="notes-text" data-bind="text: deliveryInstructions "></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@specificRequirements:</td>
                        <td>
                            <h5 style="display: inline-block" class="notes-text" data-bind="text: specificRequirements "></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@prescriptionCollectionMethod:</td>
                        <td>
                            <h5 data-bind="text: prescriptionCollectionMethodName"></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@complimentaryItems:</td>
                        <td>
                            <h5 data-bind="text: hasComplimentaryItems()? 'Yes' : 'No'"></h5>
                            <h5 class="notes-text" data-bind="visible: hasComplimentaryItems, text: complimentaryItems"></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@prescriptionService:</td>
                        <td>
                            <h5 style="display: inline-block" data-bind="text: prescriptionServiceName "></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@exemptionReason:</td>
                        <td>
                            <h5 class="notes-text" style="display: inline-block" data-bind="text: exemptionReasonName "></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@exemptionNotes:</td>
                        <td>
                            <h5 class="notes-text" style="display: inline-block" data-bind="text: exemptionDetails "></h5>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 270px;">@epsNominationReceived:</td>
                        <td>
                            <h5 data-bind="text: epsNominationReceived()? epsNominantionReceivedDate()?
                                'Yes on ' + new moment(epsNominantionReceivedDate()).format('DD-MM-YYYY') : 'Yes' : 'No'"></h5>
                        </td>
                    </tr>
                </table>               

            </div>           

        </div>

    </div>

    <!-- Add/Edit Popup -->
    <div data-bind="shPopup: { toolbarItems: [
         { toolbar: 'bottom', location: 'after', widget: 'dxButton',  options:
            {
               text: '@save',
               onClick: editDelivery.saveClick
            }
         },
         { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
             {
                text: '@cancel',
                onClick: editDelivery.cancelClick
             }
          }],
            visible: editDelivery.visible, closeOnOutsideClick: false, title: 'Edit Order and Delivery Instructions', onShown: editDelivery.onShown }">

        <div data-bind="dxScrollView: {}, dxValidationGroup: {} ">

            <div class="flex flex-row-wrap" data-bind="with: editDelivery.delivery">
                <div class="flexRatio1" style="margin-right: 20px; min-width: 350px;">
                    <div class="sh-form-section-top">@deliveryDetails</div>

                    <p class="sh-field-label">@deliveryInstructions</p>
                    <div id="deliveryInstructions" style="height: 100px;" class="sh-field-value" data-bind="dxTextArea: { value: deliveryInstructions, placeholder: '' }, dxValidator:  null "></div>

                    <p class="sh-field-label">@specificRequirements</p>
                    <div style="height: 100px;" class="sh-field-value" data-bind="dxTextArea: { value: specificRequirements, placeholder: '' }, dxValidator:  null "></div>

                    <p class="sh-field-label">@prescriptionCollectionMethod</p>
                    <div class="sh-field-value" data-bind="shLookup: {
                         dataSource: MyPen.db.Product.PrescriptionCollectionMethod,
                         searchEnabled: true,
                         selectedItem: prescriptionCollectionMethod,
                         value: prescriptionCollectionMethodId,
                         valueExpr: 'Id',
                         searchExpr: 'Name',
                         displayExpr: 'Name',
                         showPopupTitle: false,
                  }, dxValidator: ''"></div>

                    <p class="sh-field-label">@complimentaryItems</p>
                    <div style="display: block;">
                        <div class="sh-field-value" data-bind="dxSwitch: { value: hasComplimentaryItems, switchedOnText: 'Yes', switchedOffText: 'No' }"></div>
                        <div class="dx-switch-label" data-bind="text: hasComplimentaryItems()? 'Yes' : 'No'"></div>
                    </div>                   

                    <!-- ko if: hasComplimentaryItems -->
                    <div style="height: 100px;" class="sh-field-value" data-bind="dxTextArea: { value: complimentaryItems, placeholder: '@ComplimentaryItemNotes' }, dxValidator:  null "></div>
                    <!--/ko-->

                </div>
                <div class="flexRatio1" style="min-width: 280px; margin-right: 20px;">

                    <div class="sh-form-section-top">@prescriptionService</div>
                    <div class="sh-field-value" data-bind="text: prescriptionServiceName? prescriptionServiceName : 'None' "></div>

                    <div class="sh-form-section">@exemptionReason</div>
                    <div class="sh-field-value" data-bind="shLookup: {
                         dataSource: MyPen.db.Product.ExemptionReason,
                         searchEnabled: true,
                         value: exemptionReasonId,
                         valueExpr: 'Id',
                         searchExpr: 'Name',
                         displayExpr: 'Name',
                         showPopupTitle: false,
                  }"></div>

                    <div class="sh-form-section" >@exemptionNotes</div>
                    <div style="height: 100px;" class="sh-field-value" data-bind="dxTextArea: { value: exemptionDetails }, dxValidator:  null "></div>

                    <div class="sh-form-section">@nominationDetails</div>
                    <p class="sh-field-label">@epsNominationReceived</p>
                    <div style="display: block;">
                        <div class="sh-field-value" data-bind="dxSwitch: { value: epsNominationReceived, switchedOnText: 'Yes', switchedOffText: 'No' }"></div>
                        <div class="dx-switch-label" data-bind="text: epsNominationReceived()? 'Yes' : 'No'"></div>
                    </div>

                    <!--ko if: epsNominationReceived-->
                    <p class="sh-field-label">@receivedDate</p>
                    <div class="sh-field-value" data-bind="dxDateBox: { value: epsNominantionReceivedDate, width: '50%', type: 'date' }, dxValidator: ''"></div>
                    <!--/ko-->

                </div>

            </div>
        </div>
    </div>

</div>