<div data-options="dxView : { name: 'DischargeShared', title: 'DischargeShared' } ">

    <!--include shared add/Edit screens-->
    <div data-options="dxViewPlaceholder: { viewName: 'ProductsAddEdit' }" data-bind="with: productsAddEditVM"></div>
    <!--<div data-options="dxViewPlaceholder: { viewName: 'ConsentForm' }" data-bind="with: consentFormVM"></div>-->

    <!-- Discharge Popup -->
    <div data-bind="shPopup: { visible: visible, closeOnOutsideClick: false, title: '@discharge', width: '600px', showTitle: true, onShown: onShown,
         toolbarItems: [
         { toolbar: 'bottom', location: 'after', widget: 'dxButton',  options:
            {
               text: '@save',
               onClick: saveClick
            }
         },
         { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
             {
                text: '@cancel',
                onClick: cancelClick
             }
          }] }">

        <div style="height: 100%; " id="dischargeValidation" data-bind="dxScrollView: {}, dxValidationGroup: {} ">
            <div id="admissionPopoupValidationSummary" data-options="dxViewPlaceholder: { viewName: 'shValidationSummary' }"></div>

            <p class="sh-field-label">@dischargeDate<span class="isMandatory"></span></p>
            <div id="dischargeDate" class="sh-field-value" data-bind="dxDateBox: { value: discharge().date, placeholder: '@dischargeDate',
                 type: 'date' },
                 dxValidator: validation.dischargeDate "></div>

            <p class="sh-field-label">@skinCondition</p>
            <div class="sh-field-value" data-bind="dxTextArea: { value: discharge().skinCondition, placeholder: '' }"></div>

            <p class="sh-field-label">@canManageStoma</p>
            <div style="display: block;">
                <div class="sh-field-value" data-bind="dxSwitch: { value: discharge().isStomaManaged, switchedOnText: 'Yes', switchedOffText: 'No' }"></div>
                <div class="dx-switch-label" data-bind="text: discharge().isStomaManaged()? 'Yes' : 'No'"></div>
            </div>
            <!--<div style="display: block;" class="sh-field-value" data-bind="dxCheckBox: { value:  discharge().isStomaManaged } "></div>-->
            <!-- ko ifnot: discharge().isStomaManaged() -->
            <div class="sh-field-value" data-bind="dxTextArea: { value: discharge().stomaManagementReason, placeholder: '' }"></div>
            <!-- /ko -->

            <p class="sh-field-label">@areProductsProvided</p>
            <div style="display: block;">
                <div class="sh-field-value" data-bind="dxSwitch: { value: discharge().areProductsProvided, switchedOnText: 'Yes', switchedOffText: 'No' }"></div>
                <div class="dx-switch-label" data-bind="text: discharge().areProductsProvided()? 'Yes' : 'No'"></div>
            </div>
            <!--<div style="display: block;" class="sh-field-value" data-bind="dxCheckBox: { value:  discharge().areProductsProvided }  "></div>-->
            <!-- ko ifnot: discharge().areProductsProvided() -->
            <div class="sh-field-value" data-bind="dxTextArea: { value: discharge().productProvisionReason, placeholder: '' } "></div>
            <!-- /ko -->

            <p class="sh-field-label">@dischargeReason<span class="isMandatory"></span></p>
            <div data-bind="shLookup: {
                         dataSource: MyPen.db.Admission.DischargeReason,
                         value: discharge().dischargeReasonId,
                         valueExpr: 'Id',
                         searchExpr: 'Name',
                         displayExpr: 'Name',
                  }, dxValidator: validation.reason , css: { 'sh-field-value': discharge().dischargeReasonId() !== 2 }"></div>
            <div data-bind="visible: discharge().dischargeReasonId() === 2" style="color: #FF2E12; margin-bottom: 12px;">Discharge Reason will decease the current patient on save</div>

            <p class="sh-field-label">@dischargeDestination</p>
            <div class="sh-field-value" data-bind="shLookup: {
                         dataSource: MyPen.db.Admission.DischargeDestination,
                         value: discharge().dischargeDestinationId,
                         valueExpr: 'Id',
                         searchExpr: 'Name',
                         displayExpr: 'Name',
                  }"></div>

            <p class="sh-field-label">@prescriptionService<span data-bind="css: { isMandatory: discharge().requirePrescriptionService }"></span></p>
            <div data-bind="shLookup: {
                         dataSource: MyPen.db.episodeOfCare.PrescriptionService,
                         value: discharge().prescriptionServiceId,
                         valueExpr: 'Id',
                         searchExpr: 'Name',
                         displayExpr: 'Name',
                 }, dxValidator: validation.prescriptionService"></div>

        </div>
    </div>

    <div data-bind="dxPopover: {
                target: dischargeProblemsPopover.target,
                visible:  dischargeProblemsPopover.visible,
                closeOnOutsideClick: true,
                width: '400px',
                height: '332px',
                showTitle: false,
         toolbarItems: [
         { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
             {
                text: '@cancel',
                onClick: dischargeProblemsPopover.cancelButtonClick
             }
          }]
            }">

        <section>
            <h4 style="color: red; margin-bottom: 20px;">Unable to discharge patient for the following reason(s):</h4>           
            <div data-bind="visible: discharge().requireProductRecording()">
                <div style="display: block;">
                    <div class="icon fa fa-circle-thin" style="color: red; display: inline; font-size: 12px; margin-right: 2px;"></div>
                    <div style="display: inline;" data-bind="text: 'At least one appliance must be recorded.'"></div>
                </div>
                <div class="sh-toolbar-transparent" data-bind="dxToolbar: { items: [
                                                { location: 'after', options: { icon: 'fal fa-plus', text: 'Add Product',
                     onClick: dischargeProblemsPopover.navigateToProducts }, widget: 'dxButton' },
                                     ] }"></div>
            </div>
            <div data-bind="visible: discharge().requireStomaRecording()">
                <div style="display: block;">
                    <div class="icon fa fa-circle-thin" style="color: red; display: inline; font-size: 12px; margin-right: 2px;"></div>
                    <div style="display: inline;" data-bind="text: 'A stoma type must be entered when patient status is set to New Stoma.'"></div>
                </div>
                <div class="sh-toolbar-transparent" data-bind="dxToolbar: { items: [
                                                { location: 'after', options: { icon: 'fal fa-plus', text: 'Add Stoma Type',
                     onClick: dischargeProblemsPopover.navigateToEpisodeOfCare }, widget: 'dxButton' },
                                     ] }"></div>
            </div>
        </section>
    </div>

</div>