<div data-options="dxView : { name: 'patientAddEdit'} " data-bind="with: $root.patientAddEdit.patient">
    <div class="popout" data-bind="dxPopup: { title: $root.patientAddEdit.title() + ' Patient',
        showTitle: true,
        visible: $root.patientAddEdit.isVisible,
        closeOnOutsideClick: true,
        maxWidth: 1200,
        height: '95%'
        }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div class="patientValidation" data-bind="dxScrollView: { }, dxValidationGroup : { }" style="position: absolute; top: 60px; bottom: 60px; left: 20px; right: 20px; height: auto;">
                <div class="summary" data-bind="dxValidationSummary: {}"></div>

                <section style="height: 100%;" class="flex AddEditPatientFlexContainer">
                    <div class="flexRatio1" style="padding: 10px;">
                        <h3 style="margin-top: 0;" class="sh-form-section baseColourLight">Name</h3>
                        <div style="padding-right: 15px">
                            <div class="flex">
                                <div style="margin-top: 20px;" class="table-container">
                                    <div class="table-row">
                                        <div class="table-cell" data-bind="dxAction: $root.patientAddEdit.showImageMenu">
                                            <!-- ko if: image() -->
                                            <img class="patientImageContainer patient-edit-image" data-bind="attr: { src: 'data:image/png;base64,' + image() }" style="width: 120px; height: 120px; display: inline-block;" />
                                            <!-- /ko -->
                                            <!-- ko ifnot: image() -->
                                            <img class="patientImageContainer patient-edit-image" src="images/User-04_grey_128.png" style="width: 120px; height: 120px; display: inline-block;" />
                                            <!-- /ko -->
                                            <input type="file" id="picBrowse" accept="image/jpeg, image/png" data-bind="visible: false">
                                            <h3 style="position: relative; bottom: 10px; left: -70px; color: #fff;" class="fal fa-pencil"></h3>
                                            <!--<div class="semicircle-image"></div>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="flexRatio1">
                                    <div class="sh-field-label" style="margin-top: 15px;">Title</div>
                                    <div id="addEditTitle" class="sh-field-value" data-bind="shTextBox: { value: title, maxLength: 25, showClearButton: true }"></div>
                                    <!--<div data-bind="css: { error: $parent.familyName.hasError }">-->
                                    <label class="sh-field-label" style="display: inline-block;">Family Name</label>
                                    <span class="isMandatory"></span>
                                    <!--<span data-bind='visible: $parent.familyName.hasError, text: familyName.validationMessage'> </span>-->
                                    <div class="sh-field-value" data-bind="shTextBox: {value: familyName, maxLength: 50 }, dxValidator: shValidation.familyName"></div>
                                    <!--</div>-->
                                    <!--<div data-bind="css: { error: $parent.givenNames.hasError }">-->
                                    <label class="sh-field-label" style="display: inline-block;">Given Name</label>
                                    <!--<span data-bind='visible: $parent.givenNames.hasError, text: givenNames.validationMessage'> </span>-->
                                    <div class="sh-field-value" data-bind="shTextBox: { value: givenNames, maxLength: 72 }"></div>
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>

                        <h3 class="sh-form-section baseColourLight">Address</h3>
                        <!--<div class="addressValidation" data-bind="dxScrollView: { }, dxValidationGroup : { }">-->
                        <div style="padding-right: 15px">
                            <label class="sh-field-label" style="display: inline-block;">Address Line 1</label>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: adr1, maxLength: 72 }, dxValidator: shValidation.addressLine1"></div>

                            <div class="sh-field-label">Address Line 2</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: adr2, maxLength: 50 }"></div>
                            <div class="sh-field-label">Address Line 3</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: adr3, maxLength: 50 }"></div>


                            <label class="sh-field-label" style="display: inline-block;">Town/City</label>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: adr4, maxLength: 72 }, dxValidator: shValidation.addressLine4"></div>
                            <div class="sh-field-label">Postcode</div>
                            <div id="postcode" style="text-transform: uppercase;" class="sh-field-value" data-bind="shTextBox: { value: postcode, maxLength: 30 }"></div>
                            <div class="sh-field-label">Country</div>
                            <div class="sh-field-value" data-bind="shLookup: { dataSource: CompucareOutpatient.db.countries, valueExpr: 'Code', displayExpr: 'Description',
                                    value: country,
                                    usePopover: true,  title: 'Countries',
                                    showCancelButton: false, showClearButton: true, popupHeight: '400px', popupWidth: '400px' }">
                            </div>
                        </div>
                        <!--</div>-->

                        <h3 class="sh-form-section baseColourLight">Next of Kin</h3>
                        <div style="padding-right: 15px; height: fit-content" class="nokValidation" data-bind="dxScrollView: { }, dxValidationGroup : { }">
                            <div class="sh-field-label">Title</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nok.ttl, maxLength: 25 }"></div>

                            <div class="sh-field-label">First Name</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nok.givN, maxLength: 100 }"></div>

                            <div class="sh-field-label">Last Name</div>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nok.famN, maxLength: 100 }, dxValidator: shValidation.lastName"></div>

                            <div class="sh-field-label">Relationship</div>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="dxSelectBox: { dataSource: CompucareOutpatient.db.relationships,
                                                        displayExpr: 'Description', valueExpr: 'Id', placeholder: '',
                                                        value: nok.rId }, dxValidator: shValidation.relationship">
                            </div>

                            <div class="sh-field-label">Telephone</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nok.mTel, maxLength: 25, keyPressAction: $root.patientAddEdit.telKeyPressAction }"></div>

                            <div class="sh-field-label">Email</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nok.em, mode: 'email', maxLength: 200 }"></div>
                        </div>

                        
                        <!--</div>-->

                    </div>
                    <div class="flexRatio1" style="padding: 10px;">

                        <h3 class="sh-form-section baseColourLight">Contact Detail</h3>
                        <div style="padding-right: 15px">
                            <label class="sh-field-label" style="display: inline-block;">Email</label>
                            <span data-bind="visible: $root.patientAddEdit.patient().preferredNotificationMethod() === 3" class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: email, mode: 'email', maxLength: 60 }, dxValidator: $root.emailValidation"></div>

                            <label class="sh-field-label" style="display: inline-block;">Phone</label>
                            <span data-bind="visible: $root.patientAddEdit.patient().preferredNotificationMethod() === 1 || $root.patientAddEdit.patient().preferredNotificationMethod() === 4" class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: telephone, maxLength: 30, keyPressAction: $root.patientAddEdit.telKeyPressAction }, dxValidator: $root.telephoneValidation"></div>

                            <label class="sh-field-label" style="display: inline-block;">Mobile</label>
                            <span data-bind="visible: $root.patientAddEdit.patient().preferredNotificationMethod() === 2" class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="shTextBox: { value: mobile, maxLength: 30, keyPressAction: $root.patientAddEdit.telKeyPressAction }, dxValidator: $root.mobileValidation"></div>


                            <div class="sh-field-label">Has the patient confirmed their notification method?</div>
                            <div style="display: block;">
                                <div class="sh-field-value" data-bind="dxSwitch: {  value: preferredNotificationMethod, switchedOnText: 'Yes', switchedOffText: 'No' }  "></div>
                                <div class="dx-switch-label" data-bind="text: preferredNotificationMethod()? 'Yes' : 'No'"></div>
                            </div>

                            <!-- ko if: preferredNotificationMethod -->
                            <div class="sh-field-label">Preferred notification method</div>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="dxSelectBox: { dataSource: $root.preferredNotificationMethods,
                                                        displayExpr: 'desc', valueExpr: 'id', placeholder: '',
                                                        value: preferredNotificationMethod }, dxValidator: shValidation.preferredNotificationMethod">
                            </div>
                            <!-- /ko -->

                            <h3 class="sh-form-section baseColourLight">Shared Detail</h3>
                            <div class="sh-field-label">Registered GP</div>
                            <div class="sh-field-value" data-bind="shLookup: { dataSource: CompucareOutpatient.db.referrers, valueExpr: 'Id', displayExpr: 'Name',
                                            value: registeredGPId,
                                            onItemClick: $root.patientAddEdit.OnRegisteredGpClick,
                                            onSelectionChanged: $root.patientAddEdit.OnRegisteredGpSelectionChanged,
                                            itemTemplate: $root.patientAddEdit.getGpAddressLookupTemplate,
                                            usePopover: true,
                                            popupHeight: '400px',
                                            title: 'Referrers',
                                            popupWidth: '400px',
                                            showCancelButton: false,
                                            showClearButton: true
                                    }, css: { 'sh-field-value': !$root.patientAddEdit.gpAddress() }">
                            </div>
                            <div data-bind="visible: $root.patientAddEdit.gpAddress, text: $root.patientAddEdit.gpAddress" style="color: grey; margin-bottom: 12px;"></div>

                            <div class="sh-field-label">Registered GP Practice</div>
                            <div class="sh-field-value" data-bind="shLookup: { dataSource: CompucareOutpatient.db.practices, valueExpr: 'Id', displayExpr: 'Name',
                                            value: registeredPracticeId,
                                            usePopover: true,
                                            popupHeight: '400px',
                                            title: 'Referrers',
                                            popupWidth: '400px',
                                            showCancelButton: false,
                                            showClearButton: true,
                                            onSelectionChanged: $root.patientAddEdit.OnRegisteredGpPracticeSelectionChanged,
                                            itemTemplate: $root.patientAddEdit.getGpPracticeLookupTemplate
                                    }, css: { 'sh-field-value': !$root.patientAddEdit.gpPracticeAddress() }">
                            </div>
                            <h3 class="sh-form-section baseColourLight">Identifiers</h3>
                        <div style="padding-right: 15px">
                            <label class="sh-field-label" style="display: inline-block;">NHS Number</label>
                            <div class="sh-field-value" data-bind="shTextBox: { value: nHSNumber, maxLength: 10, keyPressAction: $root.patientAddEdit.nhsKeyPressAction }, dxValidator: shValidation.nhsNumber"></div>

                            <div class="sh-field-label">Case Number</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: caseNumber, maxLength: 100 }"></div>
                            <div class="sh-field-label">Passport Number</div>
                            <div class="sh-field-value" data-bind="shTextBox: { value: passportNumber, maxLength: 15 }"></div>
                            <div data-bind="css: { error: dob.hasError }">
                                <label class="sh-field-label" style="display: inline-block;">Date of Birth</label>
                                <span class="isMandatory"></span>
                                <div class="sh-field-value" data-bind="dxDateBox: { value: dob,
                                                        displayFormat: 'dd/MM/yyyy',
                                                        max: new Date($.now())
                                                        }, dxValidator: shValidation.dob">
                                </div>
                            </div>
                            <div class="sh-field-label">Gender</div>
                            <span class="isMandatory"></span>
                            <div class="sh-field-value" data-bind="dxSelectBox: { dataSource: CompucareOutpatient.db.genders,
                                                        displayExpr: 'Description', valueExpr: 'Id', placeholder: 'Pick a Gender',
                                                        value: gender }, dxValidator: shValidation.gender">
                            </div>
                        </div>
                            <div data-bind="visible: $root.patientAddEdit.gpPracticeAddress, text: $root.patientAddEdit.gpPracticeAddress" style="color: grey;"></div>
                            <div data-bind="visible: $root.patientAddEdit.gpPracticeOrgansationCode, text: $root.patientAddEdit.gpPracticeOrgansationCode" style="color: grey; margin-bottom: 12px;"></div>
                        </div>
                    </div>
                </section>

            </div>

            <div class="footer">
                <div class="align-right button" style="float: right;" data-bind="dxButton: { text: 'Save', onClick: $root.patientAddEdit.save }">
                </div>
            </div>

            <div class="popout" data-bind="dxPopup:  { title: 'Take a picture', showTitle: true,
                visible: $root.patientAddEdit.desktopWebCam.visible,
                closeOnOutsideClick: true,
                width: '440px',
                height: '450px',
                onHidden: $root.patientAddEdit.desktopWebCam.hidden
            }">

                <h5 class="centerText">Please allow your browser access to your camera. This is usually found at the top or bottom of your screen.</h5>
                <video style="position: absolute; top: 55px; left: 45px;" id="video" width="350" height="350" autoplay="" src=""></video>
                <!--<video style="position: absolute; top: 25px; left: 20px;" id="video" width="400" height="400" autoplay></video>-->
                <canvas hidden="hidden" id="canvas"></canvas>
                <div data-bind="visible: $root.patientAddEdit.desktopWebCam.videoIsReady" class="footer">
                    <!-- ko if: $root.patientAddEdit.desktopWebCam.pictureTaken -->
                    <div class="align-right button" style="float: right; margin-left: 10px;" data-bind="dxButton: { text: 'Use Photo', onClick: $root.patientAddEdit.desktopWebCam.usePhoto }"></div>
                    <div class="align-right button" style="float: right;" data-bind="dxButton: { text: 'Retake', onClick: $root.patientAddEdit.desktopWebCam.restart }"></div>
                    <!-- /ko -->
                    <!-- ko ifnot: $root.patientAddEdit.desktopWebCam.pictureTaken -->
                    <div class="align-right button" style="float: right;" data-bind="dxButton: { text: 'Take a picture', onClick: $root.patientAddEdit.desktopWebCam.takePicture }"></div>
                    <!-- /ko -->
                </div>
            </div>

            <div data-bind="dxPopover: { width: 250, height: 300, visible: $root.patientAddEdit.imageMenuVisible, target: '.patient-edit-image', position: 'right' }">
                <div data-options="dxTemplate : { name: 'content' } ">
                    <div style="padding-bottom: 5px;">
                        <!-- ko if: image() -->
                        <img class="patient-edit-image" data-bind="attr: { src: 'data:image/png;base64,' + image() }" style="width: 208px; height: 208px;" />
                        <!-- /ko -->
                        <!-- ko ifnot: image() -->
                        <div class="patient-edit-image" style="width: 208px; height: 208px; display: inline-block; text-align: center; background-color: darkgray;">
                            <h4 style="color: #fff; vertical-align: middle; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">No Patient Image</h4>
                        </div>
                        <!-- /ko -->
                    </div>
                    <div class="imagePickerButtons">
                        <div data-bind="dxAction: $root.patientAddEdit.takeAPicture" title="Take a photo">
                            <h3 class="fal fa-camera"></h3>
                        </div>
                        <div title="Upload a photo" data-bind="dxAction: DevExpress.devices.current().deviceType === 'desktop'? function(){ document.getElementById('picBrowse').click() } : $root.patientAddEdit.getAPicture">
                            <h3 class="fal fa-folder"></h3>
                        </div>
                        <div style="background-color: tomato;" title="Clear photo" data-bind="visible: image(), dxAction: $root.patientAddEdit.clearAPicture ">
                            <h3 class="fal fa-trash"></h3>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
