<div class="app-header bg-header-1">
    <div class="layout-fixed full-h text-center">
        <div class="full-h v-bottom-i pdB15">
            <div class="app-content-header bg-header-1">
                <div class="text-name-header-1 nowrap pdLR40">Estimate Search</div>
                <div class="text-title-header-1 nowrap mgT10">Door form product tables</div>
            </div>
        </div>
    </div>
    <button class="popup-back-button bg-transparent pd0-i biger-3-time" type="button" ng-click="closeTarget('#popupOrderEstimateDoorFormProductTable')"></button>
</div>
<form class="app-content" id="formEstimateDoorProduct" name="formEstimateDoorProduct" ng-submit="validateForm(formEstimateDoorProduct, 'door', 'scrollEstimateformEstimateDoorProduct')" novalidate="">
    <div class="app-content-inner content-pd">
        <button id="submitFormEstimateDoorProduct" style="display:none;" type="submit">Submit</button>
        <ion-scroll on-scroll="scrollContent('scrollEstimateformEstimateDoorProduct')" class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollEstimateformEstimateDoorProduct">
            <div class="box-setting-4 form-field-container no-saperator">
                <div class="content content-in">
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Question1.$invalid  }">Question 1</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Question1.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{Input_value.estimateQuestion1}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-change="DoorFormProduct('Question1')" ng-model="DoorForm.Question1" name="Question1" id="Question1" required>
                                        <option value="">Select</option>
                                        <option value="Door">Door</option>
                                        <option value="Section Section">Section Set</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Model.$invalid  }">Model</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Model.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Model}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-change="DoorFormProduct('Model')" ng-model="DoorForm.Model" name="Model" id="Model" required>
                                        <option value="">Select</option>
                                        <option value="1000">1000</option>
                                        <option value="2000">2000</option>
                                        <option value="3000">3000</option>
                                        <option value="3200">3200</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Construction.$invalid  }">Collection</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Construction.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Construction}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-model="DoorForm.Construction" ng-change="DoorFormProduct('Construction')" name="Construction" id="Construction" required>
                                        <option value="">Select</option>
                                        <option value="{{item}}" ng-repeat="item in Constructiondata">{{item}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Width.$invalid  }">Width</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Width.$invalid  }" ng-click="focusHandle($event)">
                                            <input class="h32px" name="" value="{{DoorForm.Width}}" placeholder="" type="text">
                                            <div class="sign-r clear">
                                                <button class="bg-transparent full-h right pdR10" type="button">
                                                    <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                                </button>
                                            </div>
                                            <select class="field-overlay" ng-model="DoorForm.Width" ng-change="DoorFormProduct('Width')" name="Width" id="Width" required>
                                                <option value="">Select</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Height.$invalid  }">Height</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Height.$invalid  }" ng-click="focusHandle($event)">
                                            <input class="h32px" name="" value="{{DoorForm.Height}}" placeholder="" type="text">
                                            <div class="sign-r clear">
                                                <button class="bg-transparent full-h right pdR10" type="button">
                                                    <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                                </button>
                                            </div>
                                            <select class="field-overlay" ng-model="DoorForm.Height" ng-change="DoorFormProduct('Height')" name="Height" id="Height" required>
                                                <option value="">Select</option>
                                                <option value="{{item}}" ng-repeat="item in Height">{{item}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Color_1.$invalid  }">Color 1</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Color_1.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Color_1}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-change="DoorFormProduct('Color_1')" ng-model="DoorForm.Color_1" name="Color_1" id="Color_1" required>
                                        <option value="">Select</option>
                                        <option value="{{item}}" ng-repeat="item in Color_1">{{item}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm" ng-if="show_estimate_Color2">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Color_2.$invalid  }">Color 2</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Color_2.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Color_2}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-change="DoorFormProduct('Color_2')" ng-model="DoorForm.Color_2" name="Color_2" id="Color_2" required>
                                        <option value="">Select</option>
                                        <option value="{{item}}" ng-repeat="item in Color_2">{{item}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Stamp.$invalid  }">Stamp</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Stamp.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Stamp}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-model="DoorForm.Stamp" name="Stamp" id="Stamp" required>
                                        <option value="">Select</option>
                                        <option value="{{item}}" ng-repeat="item in Stamp">{{item}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Section.$invalid  }">Top Section/ Section Type</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Section.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Section}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay" ng-model="DoorForm.Section" name="Section" id="Section" required>
                                        <option value="">Select</option>
                                        <option value="{{item}}" ng-repeat="item in Section">{{item}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm" ng-if="DoorForm.Question1=='Door'">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Hardware.$invalid  }">Hardware</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Hardware.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{Input_value.Hardware}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay Hardware" disabled  ng-model="DoorForm.Hardware" name="Hardware" id="Hardware">
                                        <option selected value="Standard Hardware">Blank</option>
                                        <option value="Lifetime Hardware">Lifetime Hardware</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm" ng-if="DoorForm.Question1=='Door'">
                        <label class="label-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Struts_Windload.$invalid  }">Struts/ Windload</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formEstimateDoorProduct.Struts_Windload.$invalid  }" ng-click="focusHandle($event)">
                                    <input class="h32px" name="" value="{{DoorForm.Struts_Windload}}" placeholder="" type="text">
                                    <div class="sign-r clear">
                                        <button class="bg-transparent full-h right pdR10" type="button">
                                            <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                        </button>
                                    </div>
                                    <select class="field-overlay Struts_Windload" ng-model="DoorForm.Struts_Windload" name="Struts_Windload" id="Struts_Windload">
                                        <option value="Standard Struts">Standard Struts</option>
                                        <option value="Windload">Windload</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</form>
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="w42px full-h relative">
            <button class="bg-transparent pd0-i full text-left pdL10-i" type="button" onclick="openQuickOption(this)">
                <svg class="h20px" viewBox="0 0 460.713 460.713"> <g> <rect y="115.356" width="302" height="30" fill="#FFFFFF" /> <polygon points="335.786,202.231 398.25,264.694 460.713,202.232  " fill="#FFFFFF" /> <rect y="315.356" width="302" height="30" fill="#FFFFFF" /> <rect y="215.356" width="302" height="30" fill="#FFFFFF" /> </g> </svg>
            </button>
            <div class="quick-popup box-popup-1 display-bottom-left mgB55" onclick="closeQuickOption(this)">
                <div class="popup-content w140px">
                    <ul class="list-item-03">
                        <li ng-click="refreshform()">
                            <div class="layout-fixed">
                                <div class="icon-area">
                                    <svg class="h15px" viewBox="0 0 423.755 423.755"> <path d="M43.84,281.457c-18.585-44.869-18.586-94.29,0-139.159c10.649-25.709,26.678-48.152,46.86-66.135l60.86,60.86V15.099   H29.635l39.88,39.88c-64.293,58.426-88.5,153.2-53.391,237.959c14.167,34.202,37.07,64.159,66.234,86.634   c28.275,21.789,61.873,36.201,97.162,41.677l4.601-29.646C120.778,381.774,68.337,340.597,43.84,281.457z" fill="#FFFFFF" /> <path d="M407.516,292.938c21.652-52.272,21.652-109.848,0-162.12c-14.167-34.202-37.071-64.159-66.234-86.633   C313.007,22.395,279.409,7.983,244.12,2.507l-4.601,29.646c63.342,9.829,115.783,51.005,140.28,110.146   c18.586,44.869,18.586,94.29,0,139.159c-10.649,25.709-26.678,48.152-46.859,66.135l-60.86-60.86v121.924h121.924l-39.801-39.801   C377.118,348.099,395.334,322.348,407.516,292.938z" fill="#FFFFFF" /> </svg>
                                </div>
                                <div class="name-area text-link-1">
                                    Reset all
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="popup-overlay"></div>
            </div>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#popupOrderEstimateDoorFormProductTable');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button type="button" class="button-form-field-1 position-right full" onclick="getElementById('submitFormEstimateDoorProduct').click()">
                <svg class="icon h12px" viewBox="0 0 408 408"> <polygon points="204,0 168.3,35.7 311.1,178.5 0,178.5 0,229.5 311.1,229.5 168.3,372.3 204,408 408,204   " /> </svg>
                Next
            </button>
        </div>
    </div>
</div>