<!--suppress JSAnnotator -->
<template>
  <div class="page" data-name="new-request-quote">
    {{#unless isHideCloseBtn}}
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left"></div>
        <div class="title sliding">{{PageTitle}}</div>
        <div class="right">
          {{#unless isHideCloseBtn}}
          <a href="#" class="link popup-close" data-popup=".popup-fullscreen-newtemplate">
            <i class="f7-icons">close</i>
          </a>
          {{/unless}}
        </div>
      </div>
    </div>
    {{/unless}}

    <div class="page-content bg-color-lightgray  ">
      <div class="content-wrapper with-sidebar  sidebar-opened ">
        <form name="OrderEditForm" class="page-content no-padding content-sidebar left">
          {{#unless TemplateName}}
		  <div class="bottom-section-wrapper   bottom-section-button-wrapper bg-color-white">
            <div class="row">
              <label for="submit-form-new-order" class="col button button-fill color-green elevation-2"
                tabindex="0">
                {{SubmitButtonName}}
		      </label>
            </div>
          </div>
		{{/unless}}
		
          <input type="submit" id="submit-form-new-order" class="display-none" />
          <div class="list no-margin no-hairlines ">
            <ul>
              {{#if TemplateName}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-imei "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG11 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG11 }}" name="TemplateName"
                      value="{{TemplateName}}" maxlength="200" required validate class="text-transform-uppercase">
                  </div>
                </div>
              </li>
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG15 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG15 }}" name="TrackingNo"
                      value="{{TrackingNo}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG05 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG05 }}" name="InvoiceNo"
                      value="{{Invoice}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-email "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG08 }}</div>
                  <div class="item-input-wrap ">
                    <input type="email" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG08 }}" name="Email"
                      value="{{Email}}" maxlength="200" required validate>
                  </div>
                </div>
              </li>
              
			  {{#unless TemplateName}}
			  
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category1" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory1">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther1}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType1">
                        {{#TypeDeviceList1}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList1}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther1}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other1"
                      value="{{Other1}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect1">
                        {{#QuantityList1}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList1}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ1}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ1"
                      value="{{OtherQ1}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  
			  
			  
			  
			  {{#if showDevice2}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category2" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory2">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther2}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType2">
                        {{#TypeDeviceList2}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList2}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther2}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other2"
                      value="{{Other2}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect2">
                        {{#QuantityList2}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList2}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ2}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ2"
                      value="{{OtherQ2}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  
			  
			  
			  {{#if showDevice3}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category3" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory3">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther3}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType3">
                        {{#TypeDeviceList3}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList3}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther3}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other3"
                      value="{{Other3}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect3">
                        {{#QuantityList3}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList3}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ3}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ3"
                      value="{{OtherQ3}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  
			  
			  
			  {{#if showDevice4}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category4" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory4">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther4}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType4">
                        {{#TypeDeviceList4}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList4}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther4}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other4"
                      value="{{Other4}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect4">
                        {{#QuantityList4}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList4}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ4}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ4"
                      value="{{OtherQ4}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice5}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category5" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory5">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther5}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType5">
                        {{#TypeDeviceList5}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList5}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther5}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other5"
                      value="{{Other5}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect5">
                        {{#QuantityList5}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList5}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ5}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ5"
                      value="{{OtherQ5}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice6}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category6" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory6">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther6}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType6">
                        {{#TypeDeviceList6}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList6}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther6}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other6"
                      value="{{Other6}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect6">
                        {{#QuantityList6}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList6}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ6}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ6"
                      value="{{OtherQ6}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice7}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category7" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory7">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther7}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType7">
                        {{#TypeDeviceList7}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList7}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther7}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other7"
                      value="{{Other7}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect7">
                        {{#QuantityList7}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList7}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ7}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ7"
                      value="{{OtherQ7}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice8}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category8" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory8">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther8}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType8">
                        {{#TypeDeviceList8}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList8}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther8}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other8"
                      value="{{Other8}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect8">
                        {{#QuantityList8}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList8}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ8}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ8"
                      value="{{OtherQ8}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice9}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category9" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory9">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther9}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType9">
                        {{#TypeDeviceList9}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList9}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther9}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other9"
                      value="{{Other9}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect9">
                        {{#QuantityList9}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList9}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ9}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ9"
                      value="{{OtherQ9}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice10}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category10" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory10">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther10}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType10">
                        {{#TypeDeviceList10}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList10}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther10}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other10"
                      value="{{Other10}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect10">
                        {{#QuantityList10}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList10}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ10}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ10"
                      value="{{OtherQ10}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice11}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category11" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory11">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther11}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType11">
                        {{#TypeDeviceList11}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList11}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther11}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other11"
                      value="{{Other11}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect11">
                        {{#QuantityList11}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList11}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ11}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ11"
                      value="{{OtherQ11}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice12}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category12" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory12">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther12}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType12">
                        {{#TypeDeviceList12}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList12}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther12}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other12"
                      value="{{Other12}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect12">
                        {{#QuantityList12}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList12}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ12}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ12"
                      value="{{OtherQ12}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  {{#if showDevice13}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-category13" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceCategory13">
                        {{#CategoryDeviceList}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/CategoryDeviceList}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG04}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#unless ShowOther13}}
			  <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                    <i class="f7-icons icon-input"></i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title item-label"></div>
                    <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="DeviceType13">
                        {{#TypeDeviceList13}}
                        <option value="{{Value}}" {{#if Selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/TypeDeviceList13}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{/unless}}
			  {{#if ShowOther13}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG09 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="Other13"
                      value="{{Other13}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
              <li>
                <div class="item-content item-input">
                  <div class="item-media text-color-lightgray">
                  </div>
                  <div class="item-inner">

                    <a class="item-link smart-select smart-select-init custom-smart-select smart-select-quantity"
                      data-open-in="popover" data-close-on-select="true">
                      <select name="QuantitySelect13">
                        {{#QuantityList13}}
                        <option value="{{Value}}" {{#if selected}} selected {{/if}} {{#if disabled}} disabled {{/if}}>
                          {{Name}}</option>
                        {{/QuantityList13}}
                      </select>
                      <div class="item-inner">
                        <div class="item-title item-label">{{@global.LANGUAGE.REQUEST_QUOTE_MSG16}}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
			  {{#if ShowOtherQ13}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG16 }}</div>
                  <div class="item-input-wrap ">
                    <input type="text" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG12 }}" name="OtherQ13"
                      value="{{OtherQ13}}" maxlength="200" required validate class="">
                  </div>
                </div>
              </li>
			  {{/if}}
			  {{/if}}
			  
			  
			  <li class="item-content item-input add-product-li" style="margin-top:15px">
                <div class="item-media text-color-lightgray"></div>
				<div class="item-inner">
				  <div class="bottom-section-wrapper  bg-color-white add-product" style="padding: 12px">
					<div class="row">
					  <label for="add-product" class="col button button-fill color-black elevation-2 "
						tabindex="0">
						Add to order
					  </label>
					</div>
					</div>
				  </div>
              </li>
			  
			  
			  {{/unless}}
			  {{#if TemplateName}}
			  <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-input "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG24}}</div>
                  <div class="item-input-wrap ">
                    <textarea name="DeviceTypes" rows="10" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG24}}"
                      maxlength="1000" value="">{{DeviceTypes}}</textarea>
                  </div>
                </div>
              </li>
			  {{/if}}
              <li class="item-content item-input ">
                <div class="item-media text-color-lightgray"><i class="f7-icons icon-report-overview "></i></div>
                <div class="item-inner">
                  <div class="item-title item-label"> {{@global.LANGUAGE.REQUEST_QUOTE_MSG10}}</div>
                  <div class="item-input-wrap ">
                    <textarea name="Description" rows="10" placeholder="{{@global.LANGUAGE.REQUEST_QUOTE_MSG10}}"
                      maxlength="400" value="">{{Description}}</textarea>
                  </div>
                </div>
              </li>
            </ul>
          </div>

        </form>

        <div class="content">
          <div id="mapTemplate" class="task-map">
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  // script must return component object
  return {
    data: function () {
      var self = this;
      var ret = {};
	  var categoryDeviceList = Protocol.Helper.getDeviceCategoryRequestList(); 
      var typeDeviceList = [] //Protocol.Helper.getDeviceTypeRequestList();
      var quantityList = [] //Protocol.Helper.getQuantityRequestList();
    
      if (self.$route.query.code) {
        let ordersList = self.$app.methods.getFromStorage('historyOrdersList');
        if (ordersList && ordersList.length) {
          let order = self.$app.methods.findObjectByKey(ordersList, 'QuoteCode', self.$route.query.code);
          ret.order = order ? order : {};
          ret.TemplateName = order?.OrderId
          ret.Description = order.QuoteRemarks
          ret.Name = order.CustomerName
          ret.Email = order.QuoteEmail
		  ret.TrackingNo = order.TrackingNo
		  ret.Invoice = order.InvoiceNo
		  
		  let deviceTypes = ''
		  order?.DeviceTypes.forEach((element, index) => {
			deviceTypes += element.DeviceType + ': ' + element.Quantity + '\n'
		  })
		 	
		  ret.DeviceTypes = deviceTypes
        }
      }
      ret.PageTitle = self.$route.query.code ? LANGUAGE.REQUEST_QUOTE_MSG23 : LANGUAGE.REQUEST_QUOTE_MSG07;

      /*~~if (self.$route.query.code &&  ret.order) {
        let deviceTypeIndex = typeDeviceList.findIndex(x => x.Value == ret.order.JobType);
   
        if (deviceTypeIndex != -1) {
          typeDeviceList[deviceTypeIndex].Selected = true;
        }
      }*/
   
      ret.MapTemplate = false;
	  ret.CategoryDeviceList = categoryDeviceList
      ret.TypeDeviceList1 = [] //typeDeviceList;
      ret.QuantityList1 = [];
      ret.TypeDeviceList2 = [] //typeDeviceList;
      ret.QuantityList2 = [];
      ret.TypeDeviceList3 = [] //typeDeviceList;
      ret.QuantityList3 = [];
      ret.TypeDeviceList4 = [] //typeDeviceList;
      ret.QuantityList4 = [];
      ret.TypeDeviceList5 = [] //typeDeviceList;
      ret.QuantityList5 = [];
      ret.TypeDeviceList6 = [] //typeDeviceList;
      ret.QuantityList6 = [];
      ret.TypeDeviceList7 = [] //typeDeviceList;
      ret.QuantityList7 = [];
      ret.TypeDeviceList8 = [] //typeDeviceList;
      ret.QuantityList8 = [];
      ret.TypeDeviceList9 = [] //typeDeviceList;
      ret.QuantityList9 = [];
      ret.TypeDeviceList10 = [] //typeDeviceList;
      ret.QuantityList10 = [];
      ret.TypeDeviceList11 = [] //typeDeviceList;
      ret.QuantityList11 = [];
      ret.TypeDeviceList12 = [] //typeDeviceList;
      ret.QuantityList12 = [];
      ret.TypeDeviceList13 = [] //typeDeviceList;
      ret.QuantityList13 = [];
      ret.SubmitButtonName = self.$route.query.code ? LANGUAGE.REQUEST_QUOTE_MSG46 : LANGUAGE.REQUEST_QUOTE_MSG13
	  ret.showDevice2 = false
	  ret.showDevice3 = false
	  ret.showDevice4 = false
	  ret.showDevice5 = false
	  ret.showDevice6 = false
	  ret.showDevice7 = false
	  ret.showDevice8 = false
	  ret.showDevice9 = false
	  ret.showDevice10 = false
	  ret.showDevice11 = false
	  ret.showDevice12 = false
	  ret.showDevice13 = false
	  ret.Other1 = ''
	  ret.OtherQ1 = ''
	  ret.ShowOther1 = false
	  ret.ShowOtherQ1 = false
	  ret.Other2 = ''
	  ret.OtherQ2 = ''
	  ret.ShowOther2 = false
	  ret.ShowOtherQ2 = false
	  ret.Other3 = ''
	  ret.OtherQ3 = ''
	  ret.ShowOther3 = false
	  ret.ShowOtherQ3 = false
	  ret.Other4 = ''
	  ret.OtherQ4 = ''
	  ret.ShowOther4 = false
	  ret.ShowOtherQ4 = false
	  ret.Other5 = ''
	  ret.OtherQ5 = ''
	  ret.ShowOther5 = false
	  ret.ShowOtherQ5 = false
	  ret.Other6 = ''
	  ret.OtherQ6 = ''
	  ret.ShowOther6 = false
	  ret.ShowOtherQ6 = false
	  ret.Other7 = ''
	  ret.OtherQ7 = ''
	  ret.ShowOther7 = false
	  ret.ShowOtherQ7 = false
	  ret.Other8 = ''
	  ret.OtherQ8 = ''
	  ret.ShowOther8 = false
	  ret.ShowOtherQ8 = false
	  ret.Other9 = ''
	  ret.OtherQ9 = ''
	  ret.ShowOther9 = false
	  ret.ShowOtherQ9 = false
	  ret.Other10 = ''
	  ret.OtherQ10 = ''
	  ret.ShowOther10 = false
	  ret.ShowOtherQ10 = false
	  ret.Other11 = ''
	  ret.OtherQ11 = ''
	  ret.ShowOther11 = false
	  ret.ShowOtherQ11 = false
	  ret.Other12 = ''
	  ret.OtherQ12 = ''
	  ret.ShowOther12 = false
	  ret.ShowOtherQ12 = false
	  ret.Other13 = ''
	  ret.OtherQ13 = ''
	  ret.ShowOther13 = false
	  ret.ShowOtherQ13 = false
	  ret.GlobalIdx = 0
	  
      return ret;
    },
    methods: {
      showOnMap: function (data) {
        let self = this;

        if (data.IMEI && POSINFOASSETLIST && POSINFOASSETLIST[data.IMEI] && POSINFOASSETLIST[data.IMEI].markerIdDashboard) {
          var marker = self.AllMarkersGroup.getLayer(POSINFOASSETLIST[data.IMEI].markerIdDashboard);
          self.AllMarkersGroup.zoomToShowLayer(marker, function () {
            if (self.MapTemplate.getZoom() < 15) {
              self.MapTemplate.setView(marker.getLatLng(), 15)
            }
            marker.openPopup();
          });
        } else {
          self.$app.methods.customNotification({
            title: data.Name ? data.Name : data.IMEI,
            text: LANGUAGE.PROMPT_MSG031
          });
        }
      },

      saveOrder: function (url, data) {
        var self = this;
        self.$app.preloader.show();
		var form = $('body').find('[name = "OrderEditForm"]');
		//console.log('url',url, data)
		  /*~~let email = form.find('[name="Email"]').val()
          let note = form.find('[name="Description"]').val()
          let device1 = form.find('[name="DeviceType1"]').val()
          let quantity1 = form.find('[name="QuantitySelect1"]').val()
          let device2 = form.find('[name="DeviceType2"]').val()
          let quantity2 = form.find('[name="QuantitySelect2"]').val()
          let device3 = form.find('[name="DeviceType3"]').val()
          let quantity3 = form.find('[name="QuantitySelect3"]').val()
          let device4 = form.find('[name="DeviceType4"]').val()
          let quantity4 = form.find('[name="QuantitySelect4"]').val()
          let device5 = form.find('[name="DeviceType5"]').val()
          let quantity5 = form.find('[name="QuantitySelect5"]').val()
          let device6 = form.find('[name="DeviceType6"]').val()
          let quantity6 = form.find('[name="QuantitySelect6"]').val()
          let device7 = form.find('[name="DeviceType7"]').val()
          let quantity7 = form.find('[name="QuantitySelect7"]').val()
          let device8 = form.find('[name="DeviceType8"]').val()
          let quantity8 = form.find('[name="QuantitySelect8"]').val()
          let device9 = form.find('[name="DeviceType9"]').val()
          let quantity9 = form.find('[name="QuantitySelect9"]').val()
          let device10 = form.find('[name="DeviceType10"]').val()
          let quantity10 = form.find('[name="QuantitySelect10"]').val()
          let device11 = form.find('[name="DeviceType11"]').val()
          let quantity11 = form.find('[name="QuantitySelect11"]').val()
          let device12 = form.find('[name="DeviceType12"]').val()
          let quantity12 = form.find('[name="QuantitySelect12"]').val()
          let device13 = form.find('[name="DeviceType13"]').val()
          let quantity13 = form.find('[name="QuantitySelect13"]').val()
		  
			self.$app.request.post('https://helper.quiktrak.com.au/andy/get-quote.php', {
				MajorToken: self.$root.MajorToken,
				MinorToken: self.$root.MinorToken,
				Email: email,
				DeviceType1: device1,
				QuantityType1: quantity1,
				DeviceType2: device2,
				QuantityType2: quantity2,
				Note: note
			}, function (result, xhr, status) {
				  
			},
			  function (xhr, status) {
				console.log('Error occured during  creating order');
			  },
			  'json');*/
		  
		
        self.$app.request.post(url, data, function (result, xhr, status) {
          self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                    });
          if (result && result.MajorCode === '000') {
           self.$app.popup.close('.popup-fullscreen-newtemplate') 

           leftView.router.refreshPage();

          }
        },
          function (xhr, status) {
            console.log('Error occured during  creating order');
          },
          'json');
      },
    },

    on: {
      pageMounted: function () {
        let self = this;
    
      },
      pageInit: function (e, page) {
        let self = this;


        $$(document).on("smartselect:close", ".smart-select-category1", e => {
          //checked options
          $$(".smart-select-category1 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList1: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther1: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther1: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther1: false
							});
						}
				
				self.$setState({
				  QuantityList1: newQuantityList
				});
			}
          })
        });
		
		$$(document).on("smartselect:close", ".smart-select-category2", e => {
          //checked options
          $$(".smart-select-category2 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList2: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther2: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther2: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther2: false
							});
						}
				
				self.$setState({
				  QuantityList2: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category3", e => {
          //checked options
          $$(".smart-select-category3 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList3: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther3: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther3: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther3: false
							});
						}
				
				self.$setState({
				  QuantityList3: newQuantityList
				});
			}
          })
        });
		
		
		
		$$(document).on("smartselect:close", ".smart-select-category4", e => {
          //checked options
          $$(".smart-select-category4 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList4: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther4: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther4: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther4: false
							});
						}
				
				self.$setState({
				  QuantityList4: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category5", e => {
          //checked options
          $$(".smart-select-category5 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList5: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther5: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther5: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther5: false
							});
						}
				
				self.$setState({
				  QuantityList5: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category6", e => {
          //checked options
          $$(".smart-select-category6 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList6: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther6: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther6: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther6: false
							});
						}
				
				self.$setState({
				  QuantityList6: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category7", e => {
          //checked options
          $$(".smart-select-category7 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList7: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther7: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther7: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther7: false
							});
						}
				
				self.$setState({
				  QuantityList7: newQuantityList
				});
			}
          })
        });
		
		
		
		$$(document).on("smartselect:close", ".smart-select-category8", e => {
          //checked options
          $$(".smart-select-category8 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList8: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther8: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther8: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther8: false
							});
						}
				
				self.$setState({
				  QuantityList8: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category9", e => {
          //checked options
          $$(".smart-select-category9 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList9: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther9: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther9: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther9: false
							});
						}
				
				self.$setState({
				  QuantityList9: newQuantityList
				});
			}
          })
        });
		
		
		
		$$(document).on("smartselect:close", ".smart-select-category10", e => {
          //checked options
          $$(".smart-select-category10 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList10: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther10: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther10: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther10: false
							});
						}
				
				self.$setState({
				  QuantityList10: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category11", e => {
          //checked options
          $$(".smart-select-category11 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList11: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther11: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther11: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther11: false
							});
						}
				
				self.$setState({
				  QuantityList11: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category12", e => {
          //checked options
          $$(".smart-select-category12 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList12: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther12: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther12: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther12: false
							});
						}
				
				self.$setState({
				  QuantityList12: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-category13", e => {
          //checked options
          $$(".smart-select-category13 select option").forEach((el, index) => {
            let checkedCategoryCode = $$(el).is(":checked") ? el.value : '';
			if(checkedCategoryCode){
				let typeDeviceListNew = Protocol.Helper.getDeviceTypeRequestList();
				let newTypeDeviceList = typeDeviceListNew.filter(x => x.Category == checkedCategoryCode);
				
				self.$setState({
				  TypeDeviceList13: newTypeDeviceList
				});
				
				let quantityListNew = Protocol.Helper.getQuantityRequestList()
				let newQuantityList = []
				
				if(checkedCategoryCode == 'c5'){
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther13: true
							});
						}else if(checkedCategoryCode == 'c4'){
							newQuantityList = quantityListNew.filter(x => x.Value % 2 == 0);
							self.$setState({
							  ShowOther13: false
							});
						}else{
							newQuantityList = quantityListNew.filter(x => x.Value % 25 == 0);
							self.$setState({
							  ShowOther13: false
							});
						}
				
				self.$setState({
				  QuantityList13: newQuantityList
				});
			}
          })
        });
		
		
		$$(document).on("smartselect:close", ".smart-select-quantity", e => {
          $$(".smart-select-quantity select option").forEach((el, index) => {
            let checkedQuantityCode = $$(el).is(":checked") ? el.value : '';
			if(checkedQuantityCode){
				switch(self.GlobalIdx){
					case 0:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ1: true
							});
						}else{
							self.$setState({
							  ShowOtherQ1: false
							});
						}
						break;
					case 1:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ2: true
							});
						}else{
							self.$setState({
							  ShowOtherQ2: false
							});
						}
						break;
					case 2:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ3: true
							});
						}else{
							self.$setState({
							  ShowOtherQ3: false
							});
						}
						break;
					case 3:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ4: true
							});
						}else{
							self.$setState({
							  ShowOtherQ4: false
							});
						}
						break;
					case 4:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ5: true
							});
						}else{
							self.$setState({
							  ShowOtherQ5: false
							});
						}
						break;
					case 5:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ6: true
							});
						}else{
							self.$setState({
							  ShowOtherQ6: false
							});
						}
						break;
					case 6:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ7: true
							});
						}else{
							self.$setState({
							  ShowOtherQ7: false
							});
						}
						break;
					case 7:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ8: true
							});
						}else{
							self.$setState({
							  ShowOtherQ8: false
							});
						}
						break;
					case 8:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ9: true
							});
						}else{
							self.$setState({
							  ShowOtherQ9: false
							});
						}
						break;
					case 9:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ10: true
							});
						}else{
							self.$setState({
							  ShowOtherQ10: false
							});
						}
						break;
					case 10:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ11: true
							});
						}else{
							self.$setState({
							  ShowOtherQ11: false
							});
						}
						break;
					case 11:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ12: true
							});
						}else{
							self.$setState({
							  ShowOtherQ12: false
							});
						}
						break;
					case 12:
						if(checkedQuantityCode == 1000000){
							self.$setState({
							  ShowOtherQ13: true
							});
						}else{
							self.$setState({
							  ShowOtherQ13: false
							});
						}
						break;
				}
				
			}
          })
        });


		$$(document).on("click", ".add-product", e => {
			globalIdx = self.GlobalIdx + 1;
			
			self.$setState({
				GlobalIdx: globalIdx
			});
			console.log(self.GlobalIdx)
			switch(self.GlobalIdx){
				case 1:
					self.$setState({
					  showDevice2: true
					});
					break;
				case 2:
					self.$setState({
					  showDevice3: true
					});
					
					$$(document).find(".add-product-li").addClass('display-none')
					break;
				/*case 3:
					self.$setState({
					  showDevice4: true
					});
					
					break;
				case 4:
					self.$setState({
					  showDevice5: true
					});
					break;
				case 5:
					self.$setState({
					  showDevice6: true
					});
					break;
				case 6:
					self.$setState({
					  showDevice7: true
					});
					break;
				case 7:
					self.$setState({
					  showDevice8: true
					});
					break;
				case 8:
					self.$setState({
					  showDevice9: true
					});
					break;
				case 9:
					self.$setState({
					  showDevice10: true
					});
					break;
				case 10:
					self.$setState({
					  showDevice11: true
					});
					break;
				case 11:
					self.$setState({
					  showDevice12: true
					});
					break;
				case 12:
					self.$setState({
					  showDevice13: true
					});
					break;*/
			}
		})
		

        let searchAddressButtonEl = page.$el.find('.input-search-button');
        var form = page.$el.find('[name = "OrderEditForm"]');

		
        $$(form).on('submit', function (e) {
          e.preventDefault();
          let email = form.find('[name="Email"]').val()
          let note = form.find('[name="Description"]').val()
          let device1 = form.find('[name="Other1"]').val() ? form.find('[name="Other1"]').val() : form.find('[name="DeviceType1"]').val()
          let quantity1 = form.find('[name="OtherQ1"]').val() ? form.find('[name="OtherQ1"]').val() : form.find('[name="QuantitySelect1"]').val()
          let device2 = form.find('[name="Other2"]').val() ? form.find('[name="Other2"]').val() : form.find('[name="DeviceType2"]').val()
          let quantity2 = form.find('[name="OtherQ2"]').val() ? form.find('[name="OtherQ2"]').val() : form.find('[name="QuantitySelect2"]').val()
          let device3 = form.find('[name="Other3"]').val() ? form.find('[name="Other3"]').val() : form.find('[name="DeviceType3"]').val()
          let quantity3 = form.find('[name="OtherQ3"]').val() ? form.find('[name="OtherQ3"]').val() : form.find('[name="QuantitySelect3"]').val()
          let device4 = form.find('[name="Other4"]').val() ? form.find('[name="Other4"]').val() : form.find('[name="DeviceType4"]').val()
          let quantity4 = form.find('[name="OtherQ4"]').val() ? form.find('[name="OtherQ4"]').val() : form.find('[name="QuantitySelect4"]').val()
          let device5 = form.find('[name="Other5"]').val() ? form.find('[name="Other5"]').val() : form.find('[name="DeviceType5"]').val()
          let quantity5 = form.find('[name="OtherQ5"]').val() ? form.find('[name="OtherQ5"]').val() : form.find('[name="QuantitySelect5"]').val()
          let device6 = form.find('[name="Other6"]').val() ? form.find('[name="Other6"]').val() : form.find('[name="DeviceType6"]').val()
          let quantity6 = form.find('[name="OtherQ6"]').val() ? form.find('[name="OtherQ6"]').val() : form.find('[name="QuantitySelect6"]').val()
          let device7 = form.find('[name="Other7"]').val() ? form.find('[name="Other7"]').val() : form.find('[name="DeviceType7"]').val()
          let quantity7 = form.find('[name="OtherQ7"]').val() ? form.find('[name="OtherQ7"]').val() : form.find('[name="QuantitySelect7"]').val()
          let device8 = form.find('[name="Other8"]').val() ? form.find('[name="Other8"]').val() : form.find('[name="DeviceType8"]').val()
          let quantity8 = form.find('[name="OtherQ8"]').val() ? form.find('[name="OtherQ8"]').val() : form.find('[name="QuantitySelect8"]').val()
          let device9 = form.find('[name="Other9"]').val() ? form.find('[name="Other9"]').val() : form.find('[name="DeviceType9"]').val()
          let quantity9 = form.find('[name="OtherQ9"]').val() ? form.find('[name="OtherQ9"]').val() : form.find('[name="QuantitySelect9"]').val()
          let device10 = form.find('[name="Other10"]').val() ? form.find('[name="Other10"]').val() : form.find('[name="DeviceType10"]').val()
          let quantity10 = form.find('[name="OtherQ10"]').val() ? form.find('[name="OtherQ10"]').val() : form.find('[name="QuantitySelect10"]').val()
          let device11 = form.find('[name="Other11"]').val() ? form.find('[name="Other11"]').val() : form.find('[name="DeviceType11"]').val()
          let quantity11 = form.find('[name="OtherQ11"]').val() ? form.find('[name="OtherQ11"]').val() : form.find('[name="QuantitySelect11"]').val()
          let device12 = form.find('[name="Other12"]').val() ? form.find('[name="Other12"]').val() : form.find('[name="DeviceType12"]').val()
          let quantity12 = form.find('[name="OtherQ12"]').val() ? form.find('[name="OtherQ12"]').val() : form.find('[name="QuantitySelect12"]').val()
          let device13 = form.find('[name="Other13"]').val() ? form.find('[name="Other13"]').val() : form.find('[name="DeviceType13"]').val()
          let quantity13 = form.find('[name="OtherQ13"]').val() ? form.find('[name="OtherQ13"]').val() : form.find('[name="QuantitySelect13"]').val()

          // var userInfo = self.$app.methods.getFromStorage('userInfo');
          /*var data = {
            ContactName: name,
            ContactEmail: phone,
            CustomerCode: self.$root.MajorToken,
            TemplateName: orderName,
            JobType: jobType,
            Note: note
          };*/
		  
		  let deviceTypes = []
		  if(device1 && quantity1){
			deviceTypes.push({"DeviceType":device1,"Quantity":quantity1})
		  }
		  if(device2 && quantity2){
			deviceTypes.push({"DeviceType":device2,"Quantity":quantity2})
		  }
		  if(device3 && quantity3){
			deviceTypes.push({"DeviceType":device3,"Quantity":quantity3})
		  }
		  if(device4 && quantity4){
			deviceTypes.push({"DeviceType":device4,"Quantity":quantity4})
		  }
		  if(device5 && quantity5){
			deviceTypes.push({"DeviceType":device5,"Quantity":quantity5})
		  }
		  if(device6 && quantity6){
			deviceTypes.push({"DeviceType":device6,"Quantity":quantity6})
		  }
		  if(device7 && quantity7){
			deviceTypes.push({"DeviceType":device7,"Quantity":quantity7})
		  }
		  if(device8 && quantity8){
			deviceTypes.push({"DeviceType":device8,"Quantity":quantity8})
		  }
		  if(device9 && quantity9){
			deviceTypes.push({"DeviceType":device9,"Quantity":quantity9})
		  }
		  if(device10 && quantity10){
			deviceTypes.push({"DeviceType":device10,"Quantity":quantity10})
		  }
		  if(device11 && quantity11){
			deviceTypes.push({"DeviceType":device11,"Quantity":quantity11})
		  }
		  if(device12 && quantity12){
			deviceTypes.push({"DeviceType":device12,"Quantity":quantity12})
		  }
		  if(device13 && quantity13){
			deviceTypes.push({"DeviceType":device13,"Quantity":quantity13})
		  }
		  
		var data =  {
			email,
			CustomerCode:self.$root.MajorToken,
			InvoiceNo:"",
			TrackingNo:"",
			Remarks:note,
			DeviceTypes: deviceTypes
		}
		  
          let url = API_URL.ADD_REQUEST_QUOTE
 
          /*if (self.$route.query.code) {
              url = API_URL.JOB_TEMPLATE_EDIT;
              data.ID = self.$route.query.code;
          }*/
			console.log('data',data)
          self.saveOrder(url, data);
          
          // self.saveUserDetails(data, otherData);

          return false;
        });

		/*form.on('change', 'input[name="cy"]', function(e){
			console.log(e.target.value)
			if (e.target.value == 2) {
				self.showPromptSetOverspeedVal(form.find('input[name="overspeed-type"]'));
			}
		});*/
		
		
        self.MapTemplate = Protocol.Helper.createMap({ target: 'mapTemplate', latLng: [38.530015, -101.649213], zoom: 4 });


      },
      pageAfterIn(e, page) {
        page.router.clearPreviousHistory();
      },
      pageAfterOut: function () {
        // page has left the view
        var self = this;
    

      },
      pageBeforeRemove: function () {
        var self = this;
        self.MapTemplate.off()
        self.MapTemplate.remove()

       
        //console.log('here');
      }

    }
  };
</script>