Advertisement
Guest User

Untitled

a guest
Dec 22nd, 2017
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 105.97 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3.  
  4. <head>
  5.     <div th:replace="includes/htmlhead :: htmlhead"></div>
  6.     <div th:replace="fileUpload :: fileUploadIncludeStyle"></div>
  7. </head>
  8.  
  9. <body class="page-container-bg-solid">
  10. <div class="page-wrapper">
  11.     <div th:replace="includes/header :: header(${menu})">...</div>
  12.     <div class="page-wrapper-row full-height">
  13.         <div class="page-wrapper-middle">
  14.             <div class="page-container">
  15.                 <div class="page-content-wrapper">
  16.                     <div class="page-body">
  17.                         <div class="container">
  18.                             <div class="row">
  19.                                 <div class="col-md-12">
  20.                                     <div class="main-box-div">
  21.                                         <div class="title-div" th:text="#{grievance.submission.form}"> </div>
  22.                                         <div class="portlet light bordered" id="formWizard">
  23.                                             <div class="portlet-title">
  24.                                                 <div class="caption">
  25.                                                     <i class=" icon-layers "></i>
  26.                                                     <span class="caption-subject bold uppercase" th:text="#{record.complaint}"></span>
  27.                                                     <span class="step-title">&nbsp;</span>
  28.                                                 </div>
  29.                                             </div>
  30.                                             <div class="portlet-body form">
  31.                                                 <form class="form-horizontal" id="registerAndGrieveForm" action="api/file/upload" method="POST" enctype="multipart/form-data">
  32.                                                     <div class="form-wizard">
  33.                                                         <div class="form-body">
  34.                                                             <ul class="nav nav-pills nav-justified steps">
  35.                                                                 <li>
  36.                                                                     <a href="#tab1" data-toggle="tab" class="step">
  37.                                                                         <span class="number" th:text ="#{number.one}"></span>
  38.                                                                         <span class="desc" th:text ="#{mandatory.info}">
  39.                                                                             <i class="fa fa-check"></i>
  40.                                                                         </span>
  41.                                                                     </a>
  42.                                                                 </li>
  43.                                                                 <li>
  44.                                                                     <a href="#tab2" data-toggle="tab"
  45.                                                                       class="step active">
  46.                                                                         <span class="number" th:text="#{number.two}"></span>
  47.                                                                         <span class="desc" th:text="#{description.of.complaint}">
  48.                                                                             <i class="fa fa-check"></i>
  49.                                                                         </span>
  50.                                                                     </a>
  51.                                                                 </li>
  52.                                                                 <li>
  53.                                                                     <a href="#tab3" data-toggle="tab" class="step">
  54.                                                                         <span class="number" th:text="#{number.three}"> </span>
  55.                                                                         <span class="desc" th:text ="#{verification}">
  56.                                                                             <i class="fa fa-check"></i>
  57.                                                                         </span>
  58.                                                                     </a>
  59.                                                                 </li>
  60.                                                             </ul>
  61.                                                             <div id="bar" class="progress progress-striped" role="progressbar">
  62.                                                                 <div class="progress-bar progress-bar-success"></div>
  63.                                                             </div>
  64.                                                             <div class="tab-content">
  65.                                                                 <div class="alert alert-danger display-none">
  66.                                                                     <button class="close" data-dismiss="alert" th:text="#{enter.missing.info}"></button>
  67.                                                                 </div>
  68.                                                                 <div class="alert alert-success display-none">
  69.                                                                     <button class="close" data-dismiss="alert" th:text="#{correct.info}"></button>
  70.                                                                 </div>
  71.                                                                 <div class="tab-pane active" id="tab1">
  72.                                                                     <h3 class="block" th:text="#{fill.info}"></h3>
  73.                                                                     <div class="form-group">
  74.                                                                         <label class="control-label col-md-4" id="phoneNumberLabel"> <span th:text="#{mobile.number}"></span><span class="required">*</span></label>
  75.                                                                         <div class="col-md-4">
  76.                                                                             <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" onblur="getUser();"/>
  77.                                                                         </div>
  78.                                                                     </div>
  79.                                                                     <div style="display : none;" id="divPinNumber">
  80.                                                                         <div class="form-group">
  81.                                                                             <label class="control-label col-md-4" th:text="#{pin}"><span class="required">*</span></label>
  82.                                                                             <div class="col-md-4">
  83.                                                                                 <input type="password" class="form-control" id="pinNumber" name="pinNumber"/>
  84.                                                                             </div>
  85.                                                                         </div>
  86.  
  87.                                                                         <div class="form-actions">
  88.                                                                             <div class="col-md-offset-4 col-md-8">
  89.                                                                                 <a class="btn green" onclick="doLogIn();" th:text="#{login}"> </a>
  90.                                                                             </div>
  91.                                                                         </div>
  92.                                                                     </div>
  93.  
  94.                                                                     <div id="divRest">
  95.                                                                         <div class="form-group">
  96.                                                                             <label class="control-label col-md-4" id="nameLabel"> <span th:text="#{full.name}"></span><span class="required">*</span></label>
  97.                                                                             <div class="col-md-4">
  98.                                                                                 <input type="text" class="form-control" id="name" name="name"/>
  99.                                                                                 <!--<span class="help-block" th:text="#{provide.full.name}">  </span>-->
  100.                                                                             </div>
  101.                                                                         </div>
  102.                                                                         <div class="form-group">
  103.                                                                             <label class="col-md-4 control-label"><span th:text="#{nationality.label}" th:remove="tag"></span></label>
  104.                                                                             <div class="col-md-8">
  105.                                                                                 <div class="mt-radio-inline">
  106.                                                                                     <label class="mt-radio">
  107.                                                                                         <input name="nationality" value="BANGLADESHI" type="radio">
  108.                                                                                         <span th:text="#{nationality.bangladeshi}" th:remove="tag"></span>
  109.                                                                                         <span ></span>
  110.                                                                                     </label>
  111.                                                                                     <label class="mt-radio">
  112.                                                                                         <input name="nationality" value="OTHER" type="radio">
  113.                                                                                         <span th:text="#{nationality.other}" th:remove="tag"></span>
  114.                                                                                         <span ></span>
  115.                                                                                     </label>
  116.                                                                                 </div>
  117.                                                                             </div>
  118.                                                                         </div>
  119.                                                                         <div class="form-group">
  120.                                                                             <label class="control-label col-md-4" id="nidOrBcnLabel"> <span th:text="#{nid}"></span><span class="required">*</span></label>
  121.                                                                             <div class="col-md-4">
  122.                                                                                 <input type="text" class="form-control" name="nidOrBcn" id="nidOrBcn"/>
  123.                                                                                 <!--<span class="help-block" th:text="#{provide.nid}">  </span>-->
  124.                                                                                 <!--<span class="help-block" th:text="#{provide.nid}">  </span>-->
  125.                                                                             </div>
  126.                                                                         </div>
  127.                                                                         <div class="form-group">
  128.                                                                             <label class="control-label col-md-4" id="emailLabel"> <span th:text="#{email}"></span><span class="required">*</span></label>
  129.                                                                             <div class="col-md-4">
  130.                                                                                 <input name="email" id="email" class="form-control" type="text">
  131.                                                                                 <!--<span class="help-block" th:text="#{provide.email}"> </span>-->
  132.                                                                             </div>
  133.                                                                         </div>
  134.                                                                         <div class="form-group">
  135.                                                                             <label class="control-label col-md-4" id="birthdateLabel" th:text="#{birth.date}"></label>
  136.                                                                             <div class="col-md-4">
  137.                                                                                 <div class="input-group date" id='birthdate'>
  138.                                                                                     <input type="text" class="form-control" name="birthDate" data-date-end-date="0d">
  139.                                                                                     <span class="input-group-addon">
  140.                                                                                     <i class="glyphicon glyphicon-calendar"></i>
  141.                                                                                 </span>
  142.                                                                                 </div>
  143.                                                                             </div>
  144.                                                                         </div>
  145.                                                                         <div class="form-group">
  146.                                                                             <label class="control-label col-md-4" id="occupationLabel" th:text="#{occupation}"></label>
  147.                                                                             <div class="col-md-4">
  148.                                                                                 <select id="occupation" id="occupation" class="select2 form-control input-inline">
  149.                                                                                     <option value="" selected style="display: none;" th:text="#{choose.occupation.type}"></option>
  150.                                                                                     <option th:value="#{occupation.type.business}" th:text="#{occupation.type.business}"></option>
  151.                                                                                     <option th:value="#{occupation.type.govt.service}" th:text="#{occupation.type.govt.service}"></option>
  152.                                                                                     <option th:value="#{occupation.type.private.service}" th:text="#{occupation.type.private.service}"></option>
  153.                                                                                     <option th:value="#{occupation.type.reporter}" th:text="#{occupation.type.reporter}"></option>
  154.                                                                                     <option th:value="#{occupation.type.retired}" th:text="#{occupation.type.retired}"></option>
  155.                                                                                     <option th:value="#{occupation.type.housewife}" th:text="#{occupation.type.housewife}"></option>
  156.                                                                                     <option th:value="#{occupation.type.student}" th:text="#{occupation.type.student}"></option>
  157.                                                                                     <option th:value="#{occupation.type.others}" th:text="#{occupation.type.others}"></option>
  158.                                                                                 </select>
  159.                                                                             </div>
  160.                                                                         </div>
  161.                                                                         <div class="form-group">
  162.                                                                             <label class="control-label col-md-4" id="educationLabel" th:text="#{education}"></label>
  163.                                                                             <div class="col-md-4">
  164.                                                                                 <select id="education" id="education" class="select2 form-control input-inline">
  165.                                                                                     <option value="" selected style="display: none;" th:text="#{choose.occupation.type}"></option>
  166.                                                                                     <option value="#{education.type.illiterate}" th:text="#{education.type.illiterate}"></option>
  167.                                                                                     <option value="#{education.type.literate}" th:text="#{education.type.literate}"></option>
  168.                                                                                     <option value="#{education.type.pec}" th:text="#{education.type.pec}"></option>
  169.                                                                                     <option value="#{education.type.jsc}" th:text="#{education.type.jsc}"></option>
  170.                                                                                     <option value="#{education.type.ssc}" th:text="#{education.type.ssc}"></option>
  171.                                                                                     <option value="#{education.type.hsc}" th:text="#{education.type.hsc}"></option>
  172.                                                                                     <option value="#{education.type.degree}" th:text="#{education.type.degree}"></option>
  173.                                                                                     <option value="#{education.type.technical}" th:text="#{education.type.technical}"></option>
  174.                                                                                     <option value="#{education.type.honors}" th:text="#{education.type.honors}"></option>
  175.                                                                                     <option value="#{education.type.masters}" th:text="#{education.type.masters}"></option>
  176.                                                                                     <option value="#{education.type.phd}" th:text="#{education.type.phd}"></option>
  177.                                                                                 </select>
  178.                                                                             </div>
  179.                                                                         </div>
  180.                                                                         <div class="form-group">
  181.                                                                             <label class="control-label col-md-4" id="genderLabel" th:text="#{gender}"></label>
  182.                                                                             <div class="col-md-4">
  183.                                                                                 <div class="mt-radio-inline">
  184.                                                                                     <label class="mt-radio">
  185.                                                                                         <input name="gender" value="FEMALE" type="radio">
  186.                                                                                         <span th:text="#{female}" th:remove="tag"></span>
  187.                                                                                         <span></span>
  188.                                                                                     </label>
  189.                                                                                     <label class="mt-radio" >
  190.                                                                                         <input name="gender" value="MALE" type="radio">
  191.                                                                                         <span th:text="#{male}" th:remove="tag"></span>
  192.                                                                                         <span></span>
  193.                                                                                     </label>
  194.                                                                                     <label class="mt-radio">
  195.                                                                                         <input name="gender" value="OTHERS" type="radio"> <span th:text="#{other}" th:remove="tag"></span>
  196.                                                                                         <span></span>
  197.                                                                                     </label>
  198.                                                                                 </div>
  199.                                                                             </div>
  200.                                                                         </div>
  201.  
  202.                                                                         <h3 class="block" id="permanentAddressLabel"  th:text="#{permanent.address}"></h3>
  203.                                                                         <div class="form-group">
  204.                                                                             <label class="col-md-4 control-label"></label>
  205.                                                                             <div class="col-md-8">
  206.                                                                                 <div class="mt-radio-inline">
  207.                                                                                     <label class="mt-radio" >
  208.                                                                                         <input value="UPAZILA" type="radio" name="permanentAddressTypeValue">
  209.                                                                                         <span th:text="#{upazilla}" th:remove="tag"></span>
  210.                                                                                         <span ></span>
  211.                                                                                     </label>
  212.                                                                                     <label class="mt-radio" >
  213.                                                                                         <input value="CITY_CORPORATION" type="radio" name="permanentAddressTypeValue">
  214.                                                                                         <span th:text="#{city.corporation}" th:remove="tag"></span>
  215.                                                                                         <span ></span>
  216.                                                                                     </label>
  217.                                                                                 </div>
  218.                                                                                 <div id="permanentAddressTypeValueDiv"></div>
  219.                                                                             </div>
  220.                                                                             <span class="help-inline" style="color: red;"></span>
  221.                                                                         </div>
  222.  
  223.                                                                         <div class="form-group">
  224.                                                                             <label class="col-md-4 control-label" id="permanentAddressHouseLabel"> <span th:text="#{address.details}" th:remove="tag"></span><span class="required">*</span></label>
  225.                                                                             <div class="col-md-8">
  226.                                                                                 <input id="permanentAddressHouse" name="permanentAddressHouse" class="form-control" type="text">
  227.                                                                             </div>
  228.                                                                             <span style="color: red;"></span>
  229.                                                                         </div>
  230.                                                                         <div class="form-group">
  231.                                                                             <label class="col-md-4 control-label " id="permanentAddressStreetLabel"><span th:text="#{address.details.local}" th:remove="tag"></span><span class="required">*</span></label>
  232.                                                                             <div class="col-md-8">
  233.                                                                                 <input id="permanentAddressStreet" name="permanentAddressStreet" class="form-control" type="text">
  234.                                                                             </div>
  235.                                                                             <span style="color: red;"></span>
  236.                                                                         </div>
  237.                                                                         <div class="form-group">
  238.                                                                             <label class="col-md-4 control-label" id="divisionLabel"><span th:text="#{division}" th:remove="tag"></span><span class="required">*</span>
  239.                                                                             </label>
  240.                                                                             <div class="col-md-4">
  241.                                                                                 <select class="select2 form-control" id="permanentAddressDivision" name="permanentAddressDivision">
  242.                                                                                 </select>
  243.                                                                             </div>
  244.                                                                         </div>
  245.                                                                         <div class="form-group">
  246.                                                                             <label class="col-md-4 control-label" id="districtLabel"><span th:text="#{district}" th:remove="tag"></span><span class="required">*</span>
  247.                                                                             </label>
  248.                                                                             <div class="col-md-4">
  249.                                                                                 <select id="permanentAddressDistrict" name="permanentAddressDistrict" class="select2 form-control">
  250.                                                                                 </select>
  251.                                                                             </div>
  252.                                                                         </div>
  253.                                                                         <div class="form-group">
  254.                                                                             <label class="col-md-4 control-label">&nbsp;</label>
  255.                                                                             <div class="col-md-4">
  256.                                                                                 <select id="permanentAddressTypeId" name="permanentAddressTypeId" class="select2 form-control">
  257.                                                                                 </select>
  258.                                                                             </div>
  259.                                                                         </div>
  260.                                                                         <h3 class="block" id="presentAddressLabel">
  261.                                                                             <span th:text="#{present.address}"></span> <input id="sameAsPermanent" type="checkbox"> <span class="small" th:text="#{permanent.present.same}"></span>
  262.                                                                         </h3>
  263.                                                                         <div class="form-group">
  264.                                                                             <label class="col-md-4 control-label"></label>
  265.                                                                             <div class="col-md-8">
  266.                                                                                 <div class="mt-radio-inline">
  267.                                                                                     <label class="mt-radio">
  268.                                                                                         <input name="presentAddressTypeValue" value="UPAZILA" type="radio">
  269.                                                                                         <span th:text="#{upazilla}" th:remove="tag"></span>
  270.                                                                                         <span ></span>
  271.                                                                                     </label>
  272.                                                                                     <label class="mt-radio">
  273.                                                                                         <input name="presentAddressTypeValue" value="CITY_CORPORATION" type="radio">
  274.                                                                                         <span th:text="#{city.corporation}" th:remove="tag"></span>
  275.                                                                                         <span ></span>
  276.                                                                                     </label>
  277.                                                                                 </div>
  278.                                                                                 <div id="presentAddressTypeValueDiv"></div>
  279.                                                                             </div>
  280.                                                                         </div>
  281.  
  282.                                                                         <div class="form-group">
  283.                                                                             <label class="col-md-4 control-label" > <span th:text="#{address.details}" th:remove="tag"></span><span class="required">*</span></label>
  284.                                                                             <div class="col-md-8">
  285.                                                                                 <input id="presentAddressHouse" name="presentAddressHouse" class="form-control" type="text">
  286.                                                                             </div>
  287.                                                                             <span style="color: red;"></span>
  288.                                                                         </div>
  289.                                                                         <div class="form-group">
  290.                                                                             <label class="col-md-4 control-label " id="presentAddressStreetLabel"><span th:text="#{address.details.local}" th:remove="tag"></span> <span class="required">*</span></label>
  291.                                                                             <div class="col-md-8">
  292.                                                                                 <input id="presentAddressStreet" name="presentAddressStreet" class="form-control" type="text">
  293.                                                                             </div>
  294.                                                                             <span style="color: red;"></span>
  295.                                                                         </div>
  296.                                                                         <div class="form-group">
  297.                                                                             <label class="control-label col-md-4"><span th:text="#{division}" th:remove="tag"></span> <span class="required">*</span></label>
  298.                                                                             <div class="col-md-4">
  299.                                                                                 <select name="presentAddressDivision" id="presentAddressDivision" class="select2 form-control">
  300.                                                                                 </select>
  301.                                                                             </div>
  302.                                                                         </div>
  303.                                                                         <div class="form-group">
  304.                                                                             <label class="control-label col-md-4"><span th:text="#{district}" th:remove="tag"></span> <span class="required">*</span></label>
  305.                                                                             <div class="col-md-4">
  306.                                                                                 <select name="presentAddressDistrict" id="presentAddressDistrict" class="select2 form-control">
  307.                                                                                 </select>
  308.                                                                             </div>
  309.                                                                         </div>
  310.                                                                         <div class="form-group">
  311.                                                                             <label class="col-md-4 control-label">&nbsp;</label>
  312.                                                                             <div class="col-md-4">
  313.                                                                                 <select name="presentAddressTypeId" id="presentAddressTypeId" class="select2 form-control">
  314.                                                                                 </select>
  315.                                                                             </div>
  316.                                                                         </div>
  317.  
  318.                                                                     </div>
  319.                                                                 </div>
  320.  
  321.                                                                 <div class="tab-pane" id="tab2">
  322.                                                                     <h3 class="block" th:text="#{description.of.complaint}"></h3>
  323.                                                                     <div class="well">
  324.                                                                         <div class="form-group">
  325.                                                                             <label class="control-label col-md-3" id="serviceTrackingNumberLabel" th:text="#{tracking.number}"></label>
  326.                                                                             <div class="col-md-6">
  327.                                                                                 <input id="serviceTrackingNumber" name="serviceTrackingNumber" class="form-control" type="text">
  328.                                                                                 <span class="help-block" th:text="#{provide.tracking.number.from.form}">  </span>
  329.                                                                             </div>
  330.                                                                         </div>
  331.                                                                         <div class="form-group">
  332.                                                                             <label class="control-label col-md-3" th:text="#{choose.office.from.list}"></label>
  333.                                                                         </div>
  334.  
  335.                                                                         <div class="form-group">
  336.                                                                             <div class="col-md-offset-1 col-md-11">
  337.                                                                                 <select id="officeLayers" class="select2 form-control input-inline">
  338.                                                                                     <option value="" selected style="display: none;" th:text="#{choose.office.type}"></option>
  339.                                                                                     <option value="1" th:text="#{ministry}"></option>
  340.                                                                                     <option value="2" th:text="#{department}"></option>
  341.                                                                                     <option value="3" th:text="#{division}"></option>
  342.                                                                                     <option value="4" th:text="#{district}"></option>
  343.                                                                                     <option value="5" th:text="#{upazilla}"></option>
  344.                                                                                     <option value="6" th:text="#{other}"></option>
  345.                                                                                 </select>
  346.                                                                                 <select id="firstSelection" class=" form-control input-inline" style="display: none;"></select>
  347.                                                                                 <select id="secondSelection" class=" form-control input-inline" style="display: none;"></select>
  348.                                                                                 <select id="thirdSelection" class=" form-control input-inline" style="display: none;"></select>
  349.                                                                             </div>
  350.                                                                         </div>
  351.                                                                     </div>
  352.  
  353.                                                                     <div class="form-group">
  354.                                                                         <label class="control-label col-md-2" id="serviceIdLabel" th:text="#{service}"></label>
  355.                                                                         <div class="col-md-10">
  356.                                                                             <select id="serviceDropDown" name="serviceId" class="select2 form-control"></select>
  357.                                                                             <div class="clearfix">&nbsp;</div>
  358.                                                                             <input id="serviceOthers" name="serviceOthers" class="form-control hide" type="text" th:placeholder="#{service.others}">
  359.                                                                         </div>
  360.                                                                     </div>
  361.  
  362.                                                                     <div class="form-group">
  363.                                                                         <label class="control-label col-md-2" id='serviceReceiverLabel' th:text="#{service.receiver.label}"></label>
  364.                                                                         <div class="col-md-10">
  365.                                                                             <input id="serviceReceiver" name="serviceReceiver" class="form-control" type="text">
  366.                                                                         </div>
  367.                                                                     </div>
  368.  
  369.                                                                     <div class="form-group">
  370.                                                                         <label class="control-label col-md-2" id='relationLabel' th:text="#{service.receiver.relation}"></label>
  371.                                                                         <div class="col-md-8">
  372.                                                                             <div class="mt-radio-inline">
  373.                                                                                 <label class="mt-radio">
  374.                                                                                     <input checked="" name="relation" value="SELF" type="radio"><span th:text="#{service.receiver.relation.self}" th:remove="tag"></span><span></span>
  375.                                                                                 </label>
  376.                                                                                 <label class="mt-radio">
  377.                                                                                     <input name="relation" value="REPRESENTATIVE" type="radio"><span th:text="#{service.receiver.relation.represent}" th:remove="tag"></span><span></span>
  378.                                                                                 </label>
  379.                                                                                 <label class="mt-radio"> <input name="relation" value="RELATIVE" type="radio"><span th:text="#{service.receiver.relation.relative}" th:remove="tag"></span><span></span></label>
  380.                                                                             </div>
  381.                                                                         </div>
  382.                                                                     </div>
  383.  
  384.                                                                     <div class="form-group">
  385.                                                                         <label class="control-label col-md-2" id='submissionDateLabel' th:text="#{application.date}"></label>
  386.                                                                         <div class="col-md-4">
  387.                                                                             <div class='input-group date' id='applicationDate'>
  388.                                                                                 <input type='text' class="form-control" name="submissionDate" data-date-end-date="0d" />
  389.                                                                                 <span class="input-group-addon">
  390.                                                                                     <span class="glyphicon glyphicon-calendar"></span>
  391.                                                                                 </span>
  392.                                                                             </div>
  393.                                                                         </div>
  394.                                                                     </div>
  395.  
  396.                                                                     <div class="form-group">
  397.                                                                         <label class="control-label col-md-2" id='subjectLabel' th:text="#{complaint.subject}"></label>
  398.                                                                         <div class="col-md-10">
  399.                                                                             <input id="subject" name="subject" class="form-control" type="text">
  400.                                                                         </div>
  401.                                                                     </div>
  402.                                                                     <div class="form-group">
  403.                                                                         <label class="control-label col-md-2" id='bodyLabel' th:text="#{description.of.complaint}"></label>
  404.                                                                         <div class="col-md-10">
  405.                                                                             <div id="body" class="summernote"></div>
  406.                                                                         </div>
  407.                                                                     </div>
  408.                                                                     <div th:replace="fileUpload :: fileUpload" id="fileupload"></div>
  409.                                                                     <div class="well hide">
  410.                                                                         <div class="form-group">
  411.                                                                             <div class="col-md-12">
  412.                                                                                 <div class="mt-checkbox-list">
  413.                                                                                     <label class="mt-checkbox" >
  414.                                                                                         <input id="anonymous" type="checkbox">
  415.                                                                                         <span th:text="#{annonymous}" th:remove="tag"></span>
  416.                                                                                         <span></span>
  417.                                                                                     </label>
  418.                                                                                 </div>
  419.                                                                                 <span class="help-block" th:text="#{warning.about.annonymous}">  </span>
  420.                                                                             </div>
  421.                                                                         </div>
  422.                                                                     </div>
  423.                                                                 </div>
  424.                                                                 <div class="tab-pane" id="tab3">
  425.                                                                     <div class="well">
  426.                                                                         <div id="trackingNumberBlock">
  427.                                                                             <h3 class="block" th:text="#{confirm.message}"></h3>
  428.                                                                             <div id="confirmationDiv">
  429.                                                                             </div>
  430.                                                                         </div>
  431.                                                                     </div>
  432.                                                                 </div>
  433.                                                                 <div class="tab-pane" id="tab4">
  434.                                                                 </div>
  435.                                                             </div>
  436.                                                         </div>
  437.                                                         <div class="form-actions">
  438.                                                             <div class="row">
  439.                                                                 <div class="col-md-12">
  440.                                                                     <div class="pull-right">
  441.                                                                         <a href="javascript:;" class="btn default button-previous"th:text="#{go.to.prev.step}">
  442.                                                                             <i class="fa fa-angle-left"></i>
  443.                                                                         </a>
  444.                                                                         <a href="javascript:;" class="btn btn-outline green button-next" th:text="#{go.to.next.step}">
  445.                                                                             <i class="fa fa-angle-right"></i>
  446.                                                                         </a>
  447.                                                                         <a href="javascript:;" class="btn green button-submit" th:text="#{send.complaint}">
  448.                                                                             <i class="fa fa-check"></i>
  449.                                                                         </a>
  450.                                                                     </div>
  451.                                                                 </div>
  452.                                                             </div>
  453.                                                         </div>
  454.                                                     </div>
  455.                                                 </form>
  456.                                             </div>
  457.                                         </div>
  458.                                     </div>
  459.                                 </div>
  460.                             </div>
  461.                         </div>
  462.                     </div>
  463.                 </div>
  464.             </div>
  465.         </div>
  466.     </div>
  467.     <div class="modal fade" id="ajaxProcessingModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
  468.         <div class="modal-dialog">
  469.             <div class="modal-content">
  470.                 <div class="modal-body">
  471.                     <img src="../assets/global/img/loading-spinner-grey.gif" alt="" class="loading">
  472.                     <span th:text="#{processing}"> &nbsp;&nbsp; </span>
  473.                 </div>
  474.             </div>
  475.         </div>
  476.     </div>
  477.  
  478.  
  479.     <div class="modal fade" id="pinNumberModal" tabindex="-1" role="basic" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  480.         <div class="modal-dialog">
  481.             <div class="modal-content">
  482.                 <div class="modal-header">
  483.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  484.                     <h4 class="modal-title" th:text="#{pin.number}"><i class="icon-action-redo"></i> </h4>
  485.                 </div>
  486.                 <div class="modal-body">
  487.                     <!--<form class="horizontal-form">-->
  488.                     <div class="form-body">
  489.                         <div class="row">
  490.                             <div class="form-group">
  491.                                 <label class="control-label col-md-4"> <span th:text="#{pin}"></span><span class="required">*</span></label>
  492.                                 <div class="col-md-4">
  493.                                     <input type="text" class="form-control" id="pinNumberForNewUser" name="pinNumberForNewUser"/>
  494.                                 </div>
  495.                             </div>
  496.                             <div class="form-group">
  497.                                 <label class="control-label col-md-8"><span class="required">*</span><span th:text="#{pin.user.ask}"></span></label>
  498.                             </div>
  499.                         </div>
  500.                     </div>
  501.                     <!--</form>-->
  502.                 </div>
  503.                 <div class="modal-footer">
  504.                     <button type="button" class="btn dark btn-outline btn-primary" data-dismiss="modal" onclick="javascript:loginForPinNumberModal()">প্রেরণ করুন</button>
  505.                     <button type="button" class="btn dark btn-outline" data-dismiss="modal" th:text="#{cancel}"></button>
  506.                 </div>
  507.             </div>
  508.             <!-- /.modal-content -->
  509.         </div>
  510.         <!-- /.modal-dialog -->
  511.     </div>
  512.  
  513.     <!--<div class="modal fade" id="fileUploadModal" tabindex="0" data-backdrop="static" data-keyboard="false">
  514.        <div class="modal-dialog">
  515.            <div class="modal-content">
  516.                <div class="modal-body" id="fileUploadDiv">
  517.                    <div th:replace="fileUpload :: fileUpload"></div>
  518.                </div>
  519.            </div>
  520.        </div>
  521.    </div>-->
  522.     <div th:replace="includes/footer :: footer">...</div>
  523. </div>
  524. <div th:replace="includes/footer_includes :: footer">...</div>
  525. <script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
  526. <script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
  527. <script src="/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
  528. <script src="/assets/global/plugins/bootstrap-summernote/summernote.min.js" type="text/javascript"></script>
  529. <div th:replace="fileUpload :: fileUploadIncludeScript"></div>
  530. <script>
  531.         $(document).ready(function() {
  532.             $("#applicationDate").datepicker({
  533.                 format: 'dd/mm/yyyy',
  534.                 autoclose: true,
  535.                 language: jsLangCodeForLibs
  536.             }); /* format: "dd-mm-yyyy" */
  537.  
  538.             $("#birthdate").datepicker({
  539.                 format: "dd/mm/yyyy",
  540.                 startView: 2,
  541.                 autoclose: true,
  542.                 language: jsLangCodeForLibs
  543.             });
  544.  
  545.             /*$('.summernote').summernote({
  546.                 height: 300
  547.             });*/
  548.  
  549.             $('.summernote').summernote({
  550.                 height: 100,
  551.                 toolbar: [
  552.                     // [groupName, [list of button]]
  553.                     ['style', ['bold', 'italic', 'underline', 'clear', 'fontname']],
  554.                     ['font', ['strikethrough', 'superscript', 'subscript']],
  555.                     ['fontsize', ['fontsize']],
  556.                     ['color', ['color']],
  557.                     ['para', ['ul', 'ol', 'paragraph']],
  558.                     ['Insert', ['table', 'hr']],
  559.                     ['Misc', ['undo', 'redo']]
  560.                 ]
  561.             });
  562.  
  563.             $('.select2').select2({
  564.                 width: '220px',
  565.                 language: jsLangCodeForLibs
  566.             });
  567.  
  568.             /*$('#firstSelection').select2();
  569.             $('#secondSelection').select2();
  570.             $('#thirdSelection').select2();*/
  571.         });
  572.     </script>
  573. <script>
  574.         function getDivision() {
  575.             $.ajax({
  576.                 url: "/api/geo/division",
  577.                 dataType: "text",
  578.                 success: function(result) {
  579.  
  580.                     var json = JSON.parse(result);
  581.                     for (var i = 0; i < json.length; ++i) {
  582.                        if (languageCode == "en") {
  583.                            $("#permanentAddressDivision").append(new Option(json[i].nameEnglish, json[i].id));
  584.                            $("#presentAddressDivision").append(new Option(json[i].nameEnglish, json[i].id));
  585.                        } else {
  586.                            $("#permanentAddressDivision").append(new Option(json[i].nameBangla, json[i].id));
  587.                            $("#presentAddressDivision").append(new Option(json[i].nameBangla, json[i].id));
  588.                        }
  589.  
  590.                    }
  591.                    $("#permanentAddressDivision").change();
  592.                    $("#presentAddressDivision").change();
  593.                }
  594.            });
  595.        };
  596.  
  597.        async function getDistrict(parent, child, grandChild) {
  598.            await $.ajax({
  599.                url: "/api/geo/district/" + parent.val(),
  600.                dataType: "text",
  601.                success: function(result) {
  602.                    var json = JSON.parse(result);
  603.                    child.empty();
  604.                    grandChild.empty();
  605.                    for (var i = 0; i < json.length; ++i) {
  606.                        if (languageCode == "en") {
  607.                            child.append(new Option(json[i].nameEnglish, json[i].id));
  608.                        } else {
  609.                            child.append(new Option(json[i].nameBangla, json[i].id));
  610.                        }
  611.                    }
  612.  
  613.                    //child.select2();
  614.                }
  615.            });
  616.        };
  617.  
  618.        function setPlaceholder(parent, text) {
  619.            parent.append(new Option("-- select " + text + " --", ""));
  620.            parent.prop('selectedIndex', 0);
  621.        };
  622.  
  623.        async function getThana(divId, disId, parent) {
  624.            await $.ajax({
  625.                url: "/api/geo/thana/" + divId + "/" + disId,
  626.                dataType: "text",
  627.                success: function(result) {
  628.                    var json = JSON.parse(result);
  629.                    parent.empty();
  630.                    for (var i = 0; i < json.length; ++i) {
  631.                        if (languageCode == "en") {
  632.                            parent.append(new Option(json[i].nameEnglish, json[i].id));
  633.                        } else {
  634.                            parent.append(new Option(json[i].nameBangla, json[i].id));
  635.                        }
  636.                    }
  637.  
  638.                    //parent.select2();
  639.                }
  640.            });
  641.        };
  642.  
  643.        async function getUpazila(divId, disId, parent) {
  644.            await $.ajax({
  645.                url: "/api/geo/upazila/" + divId + "/" + disId,
  646.                dataType: "text",
  647.                success: function(result) {
  648.                    var json = JSON.parse(result);
  649.                    parent.empty();
  650.                    for (var i = 0; i < json.length; ++i) {
  651.                        if (languageCode == "en") {
  652.                            parent.append(new Option(json[i].nameEnglish, json[i].id));
  653.                        } else {
  654.                            parent.append(new Option(json[i].nameBangla, json[i].id));
  655.                        }
  656.                    }
  657.                    //parent.select2();
  658.                }
  659.            });
  660.        };
  661.  
  662.        async function getCitycorporation(divId, disId, parent) {
  663.            await $.ajax({
  664.                url: "/api/geo/citycorporation/" + divId + "/" + disId,
  665.                dataType: "text",
  666.                success: function(result) {
  667.                    var json = JSON.parse(result);
  668.                    parent.empty();
  669.                    for (var i = 0; i < json.length; ++i) {
  670.                        if (languageCode == "en") {
  671.                            parent.append(new Option(json[i].nameEnglish, json[i].id));
  672.                        } else {
  673.                            parent.append(new Option(json[i].nameBangla, json[i].id));
  674.                        }
  675.                    }
  676.                    //parent.select2();
  677.                }
  678.            });
  679.        };
  680.  
  681.        async function getMunicipality(divId, disId, parent) {
  682.            await $.ajax({
  683.                url: "/api/geo/municipality/" + divId + "/" + disId,
  684.                dataType: "text",
  685.                success: function(result) {
  686.                    var json = JSON.parse(result);
  687.                    parent.empty();
  688.                    for (var i = 0; i < json.length; ++i) {
  689.                        if (languageCode == "en") {
  690.                            parent.append(new Option(json[i].nameEnglish, json[i].id));
  691.                        } else {
  692.                            parent.append(new Option(json[i].nameBangla, json[i].id));
  693.                        }
  694.                    }
  695.                    //parent.select2();
  696.                }
  697.            });
  698.        };
  699.  
  700.        async function getAddressTypeList(parent, val, divId, disId) {
  701.            switch (val) {
  702.                case "THANA":
  703.                    await getThana(divId, disId, parent);
  704.                    break;
  705.                case "UPAZILA":
  706.                    await getUpazila(divId, disId, parent);
  707.                    break;
  708.                case "CITY_CORPORATION":
  709.                    await getCitycorporation(divId, disId, parent);
  710.                    break;
  711.                case "MUNICIPALITY":
  712.                    await getMunicipality(divId, disId, parent);
  713.                    break;
  714.            }
  715.        }
  716.  
  717.        function doProcess() {
  718.  
  719.  
  720.            $("#permanentAddressDivision").change(function() {
  721.                getDistrict($("#permanentAddressDivision"), $("#permanentAddressDistrict"), $("#permanentAddressTypeId"));
  722.            });
  723.  
  724.            $("#presentAddressDivision").change(function() {
  725.                getDistrict($("#presentAddressDivision"), $("#presentAddressDistrict"), $("#presentAddressTypeId"));
  726.            });
  727.  
  728.            $("#permanentAddressDistrict").change(function() {
  729.                $('input[type=radio][name=permanentAddressTypeValue]:checked').prop('checked', false);
  730.                $("#permanentAddressTypeId").empty();
  731.            });
  732.  
  733.            $("#presentAddressDistrict").change(function() {
  734.                $('input[type=radio][name=presentAddressTypeValue]:checked').prop('checked', false);
  735.                $("#presentAddressTypeId").empty();
  736.            });
  737.  
  738.            $('input[type=radio][name=permanentAddressTypeValue]').change(function() {
  739.                var typeValue = $('input[type=radio][name=permanentAddressTypeValue]:checked').val();
  740.                getAddressTypeList($("#permanentAddressTypeId"), typeValue, $("#permanentAddressDivision").val(), $("#permanentAddressDistrict").val());
  741.            });
  742.  
  743.            $('input[type=radio][name=presentAddressTypeValue]').change(function() {
  744.                var typeValue = $('input[type=radio][name=presentAddressTypeValue]:checked').val();
  745.                getAddressTypeList($("#presentAddressTypeId"), typeValue, $("#presentAddressDivision").val(), $("#presentAddressDistrict").val()).then(function() {
  746.  
  747.                    if ($("#sameAsPermanent").is(":checked")) {
  748.                        $("#presentAddressTypeId").val($("#permanentAddressTypeId").val());
  749.                        $("#presentAddressTypeId").change();
  750.                    }
  751.                });
  752.  
  753.            });
  754.  
  755.            $("#sameAsPermanent").change(function() {
  756.                if (this.checked) {
  757.                    $("#presentAddressHouse").val($("#permanentAddressHouse").val());
  758.                    $("#presentAddressHouse").change();
  759.  
  760.                    $("#presentAddressStreet").val($("#permanentAddressStreet").val());
  761.                    $("#presentAddressStreet").change();
  762.  
  763.                    $("#presentAddressDivision").val($("#permanentAddressDivision").val());
  764.                    $("#presentAddressDivision").change();
  765.  
  766.                    getDistrict($("#presentAddressDivision"), $("#presentAddressDistrict"), $("#presentAddressTypeId")).then(function(result) {
  767.                        $("#presentAddressDistrict").val($("#permanentAddressDistrict").val());
  768.                        $("#presentAddressDistrict").change();
  769.  
  770.                        var typeValue = $('input[type=radio][name=permanentAddressTypeValue]:checked').val();
  771.                        $('input[type=radio][name=presentAddressTypeValue]').val([typeValue]);
  772.                        $('input[type=radio][name=presentAddressTypeValue]:checked').change();
  773.  
  774.                        $("#presentAddressTypeId").val($("#permanentAddressTypeId").val());
  775.                    });
  776.                } else {
  777.                    $("#presentAddressDivision").prop('selectedIndex', 0);
  778.                    $("#presentAddressDivision").trigger("change");
  779.                    $("#presentAddressDistrict").trigger("change");
  780.                }
  781.            });
  782.  
  783.            getDivision();
  784.  
  785.        };
  786.        $(document).ready(function() {
  787.            doProcess();
  788.        });
  789.    </script>
  790. <script>
  791.         function getFirstLayers(id) {
  792.             $.getJSON("/api/officelayers/" + id, function(result) {
  793.                     $("#firstSelection").empty();
  794.                     var opt;
  795.                     if (languageCode == "en") {
  796.                         opt = new Option("--Select office--", "");
  797.                     } else {
  798.                         opt = new Option("--অফিস বাছাই করুন--", "");
  799.                     }
  800.                     opt.setAttribute("style", "display: none;");
  801.                     $("#firstSelection").append(opt);
  802.                     $.each(result, function(i, field) {
  803.                         if (languageCode == "en") {
  804.                             $("#firstSelection").append(new Option(field.nameEnglish, field.id));
  805.                         } else {
  806.                             $("#firstSelection").append(new Option(field.nameBangla, field.id));
  807.                         }
  808.                     });
  809.                     $("#firstSelection").css("display", "inline-block");
  810.                 })
  811.                 .done(function() {
  812.  
  813.                 })
  814.                 .fail(function() {
  815.  
  816.                 }).always(function() {
  817.  
  818.                 });
  819.         }
  820.  
  821.         function getZilas() {
  822.             $.getJSON("/api/geo/districts", function(result) {
  823.                     $("#firstSelection").empty();
  824.                     var opt;
  825.                     if (languageCode == "en") {
  826.                         opt = new Option("--Select district--", "");
  827.                     } else {
  828.                         opt = new Option("--জেলা বাছাই করুন--", "");
  829.                     }
  830.                     opt.setAttribute("style", "display: none;");
  831.                     $("#firstSelection").append(opt);
  832.                     $.each(result, function(i, field) {
  833.                         if (languageCode == "en") {
  834.                             $("#firstSelection").append(new Option(field.nameEnglish, field.id));
  835.                         } else {
  836.                             $("#firstSelection").append(new Option(field.nameBangla, field.id));
  837.                         }
  838.                     });
  839.                     $("#firstSelection").css("display", "inline-block");
  840.                 })
  841.                 .done(function() {
  842.  
  843.                 })
  844.                 .fail(function() {
  845.  
  846.                 }).always(function() {
  847.  
  848.                 });
  849.         }
  850.  
  851.         function onGetUpazilaZilaSelectionChange() {
  852.             $.getJSON("/api/geo/upazilas/" + $("#firstSelection").val(), function(result) {
  853.                     $("#secondSelection").empty();
  854.                     $("#thirdSelection").empty();
  855.  
  856.                     $("#secondSelection").css("display", "none");
  857.                     $("#thirdSelection").css("display", "none");
  858.  
  859.                     var opt;
  860.                     if (languageCode == "en") {
  861.                         opt = new Option("--Select upazila--", "");
  862.                     } else {
  863.                         opt = new Option("--উপজেলা বাছাই করুন--", "");
  864.                     }
  865.                     opt.setAttribute("style", "display: none;");
  866.                     $("#secondSelection").append(opt);
  867.                     $.each(result, function(i, field) {
  868.                         if (languageCode == "en") {
  869.                             $("#secondSelection").append(new Option(field.nameEnglish, field.id));
  870.                         } else {
  871.                             $("#secondSelection").append(new Option(field.nameBangla, field.id));
  872.                         }
  873.                     });
  874.                     $("#secondSelection").css("display", "inline-block");
  875.                 })
  876.                 .done(function() {
  877.  
  878.                 })
  879.                 .fail(function() {
  880.  
  881.                 }).always(function() {
  882.  
  883.                 });
  884.         }
  885.  
  886.         function GetOfficesByZila() {
  887.             $.getJSON("/api/officelayers/" + $('#officeLayers').val() + "/" + $("#firstSelection").val(), function(result) {
  888.                     $("#secondSelection").empty();
  889.                     var opt;
  890.                     if (languageCode == "en") {
  891.                         opt = new Option("--Select office--", "");
  892.                     } else {
  893.                         opt = new Option("--অফিস বাছাই করুন--", "");
  894.                     }
  895.                     opt.setAttribute("style", "display: none;");
  896.                     $("#secondSelection").append(opt);
  897.                     $.each(result, function(i, field) {
  898.                         if (languageCode == "en") {
  899.                             $("#secondSelection").append(new Option(field.nameEnglish, field.id));
  900.                         } else {
  901.                             $("#secondSelection").append(new Option(field.nameBangla, field.id));
  902.                         }
  903.                     });
  904.                     $("#secondSelection").css("display", "inline-block");
  905.                 })
  906.                 .done(function() {
  907.  
  908.                 })
  909.                 .fail(function() {
  910.  
  911.                 }).always(function() {
  912.  
  913.                 });
  914.         }
  915.  
  916.         function GetOfficesByUpazila() {
  917.             $.getJSON("/api/officelayers/" + $('#officeLayers').val() + "/" + $("#firstSelection").val() + "/" + $("#secondSelection").val(), function(result) {
  918.                     $("#thirdSelection").empty();
  919.                     var opt;
  920.                     if (languageCode == "en") {
  921.                         opt = new Option("--Select Office--", "");
  922.                     } else {
  923.                         opt = new Option("--অফিস বাছাই করুন--", "");
  924.                     }
  925.                     opt.setAttribute("style", "display: none;");
  926.                     $("#thirdSelection").append(opt);
  927.                     $.each(result, function(i, field) {
  928.                         if (languageCode == "en") {
  929.                             $("#thirdSelection").append(new Option(field.nameEnglish, field.id));
  930.                         } else {
  931.                             $("#thirdSelection").append(new Option(field.nameBangla, field.id));
  932.                         }
  933.                     });
  934.                     $("#thirdSelection").css("display", "inline-block");
  935.                 })
  936.                 .done(function() {
  937.  
  938.                 })
  939.                 .fail(function() {
  940.  
  941.                 }).always(function() {
  942.  
  943.                 });
  944.         }
  945.  
  946.         function getDivisions() {
  947.             $.getJSON("/api/geo/division", function(result) {
  948.                     $("#firstSelection").empty();
  949.                     var opt;
  950.                     if (languageCode == "en") {
  951.                         opt = new Option("--Select division--", "");
  952.                     } else {
  953.                         opt = new Option("--বিভাগ বাছাই করুন--", "");
  954.                     }
  955.                     opt.setAttribute("style", "display: none;");
  956.                     $("#firstSelection").append(opt);
  957.                     $.each(result, function(i, field) {
  958.                         if (languageCode == "en") {
  959.                             $("#firstSelection").append(new Option(field.nameEnglish, field.id));
  960.                         } else {
  961.                             $("#firstSelection").append(new Option(field.nameBangla, field.id));
  962.                         }
  963.                     });
  964.                     $("#firstSelection").css("display", "inline-block");
  965.                 }).done(function() {})
  966.                 .fail(function() {})
  967.                 .always(function() {});
  968.         }
  969.  
  970.         function GetOfficesByDivision() {
  971.             $.getJSON("/api/officelayers/division/" + $("#officeLayers").val() + "/" + $("#firstSelection").val(), function(result) {
  972.                     $("#secondSelection").empty();
  973.                     var opt;
  974.                     if (languageCode == "en") {
  975.                         opt = new Option("--Select office--", "");
  976.                     } else {
  977.                         opt = new Option("--অফিস বাছাই করুন--", "");
  978.                     }
  979.                     opt.setAttribute("style", "display: none;");
  980.                     $("#secondSelection").append(opt);
  981.                     $.each(result, function(i, field) {
  982.                         if (languageCode == "en") {
  983.                             $("#secondSelection").append(new Option(field.nameEnglish, field.id));
  984.                         } else {
  985.                             $("#secondSelection").append(new Option(field.nameBangla, field.id));
  986.                         }
  987.                     });
  988.                     $("#secondSelection").css("display", "inline-block");
  989.                 })
  990.                 .done(function() {})
  991.                 .fail(function() {})
  992.                 .always(function() {});
  993.         }
  994.     </script>
  995. <script>
  996.         function ajaxPost(url, accept, send, postData, onSuccess) {
  997.             $.ajax({
  998.                 type: "POST",
  999.                 url: url,
  1000.                 dataType: accept,
  1001.                 contentType: send,
  1002.                 data: postData,
  1003.                 success: onSuccess
  1004.             });
  1005.         }
  1006.  
  1007.         function onLoginSuccessPostGrievance(data) {
  1008.             $.post("/login?username=" + $("#phoneNumber").val() + "&password=" + "123qwe", postGrievance);
  1009.         }
  1010.  
  1011.         function getGrievance() {
  1012.             var grievance = {};
  1013.             var array = $("#tab3 :input").serializeArray();
  1014.             $.each(array, function() {
  1015.                 grievance[this.name] = this.value || '';
  1016.             });
  1017.             var bodyContent = $("#body").summernote("code");
  1018.             grievance['body'] = bodyContent;
  1019.  
  1020.             var isAnonymous = false;
  1021.             if ($("#anonymous").is(":checked")) {
  1022.                 isAnonymous = true;
  1023.             }
  1024.             grievance["isAnonymous"] = isAnonymous;
  1025.             grievance["serviceType"] = "NAGORIK";
  1026.  
  1027.             var officeId = getOfficeId();
  1028.             grievance["officeId"] = officeId || '';
  1029.  
  1030.  
  1031.             var files = [];
  1032.             $("tr.template-download.fade.in").find("p.name").find("a").each(function(){
  1033.                 files.push($(this).attr("href"))
  1034.             })
  1035.  
  1036.             grievance["files"] = files;
  1037.  
  1038.             var grievance = JSON.stringify(grievance);
  1039.             return grievance;
  1040.         }
  1041.  
  1042.         function postGrievance(data) {
  1043.             var grievance = getGrievance();
  1044.             ajaxPost("/api/grievance", "json", "application/json; charset=utf-8", grievance, showMsgForGrievanceSubmission);
  1045.         }
  1046.  
  1047.         function showMsgForGrievanceSubmission(data) {
  1048.             var isEmpty = jQuery.isEmptyObject(data);
  1049.             closeLoading();
  1050.             if (data.trackingNumber) {
  1051.                 if (languageCode == "en") {
  1052.                     $("#trackingNumberBlock").html("Your complaint has been successfully submitted. Complaint's tracking number: <span class='trackingNumber'>" + data.trackingNumber + "</span>. <br />Please preserve this number to check the status of your complaint. <br /><br /> <a href='/dashboard.do' class='btn btn-primary btn-sm'>Go to my dashboard</a>");
  1053.                 } else {
  1054.                     $("#trackingNumberBlock").html("আপনার অভিযোগটি স্বার্থকভাবে জমা হয়েছে। অভিযোগটির ট্র্যাকিং নম্বর: <span class='trackingNumber'>" + data.trackingNumber + "</span><br />এই নম্বরটি সংরক্ষণ করুন যা ব্যবহার করে পরবর্তীতে আপনি আপনার অভিযোগটির অবস্থা জানতে পারবেন।<br /><br /> <a href='/dashboard.do' class='btn btn-primary btn-sm'>আপনার ড্যাশবোর্ডে যান</a>");
  1055.                 }
  1056.                 $('#formWizard').find('.button-submit').remove();
  1057.             } else {
  1058.                 if (languageCode == "en") {
  1059.                     $("#trackingNumberBlock").html("Sorry! Your complaint could not be submitted, please try again");
  1060.                 } else {
  1061.                     $("#trackingNumberBlock").html("দুঃখিত! আপনার অভিযোগটি জমা হয়নি, আরেকবার চেষ্টা করুন");
  1062.                 }
  1063.             }
  1064.         }
  1065.  
  1066.         function registerComplainant(){
  1067.             var user = getComplainantDTO();
  1068.             ajaxPost("/register", "json", "application/json", user, null);
  1069.         }
  1070.  
  1071.         function doLogIn() {
  1072.             $.post("/login?username=" + $("#phoneNumber").val() + "&password=" + $("#pinNumber").val(), function(data) {
  1073.                var auth = getCookie('Authorization');
  1074.                 if (auth != "") {
  1075.                     $("#divPinNumber").css('display', 'none');
  1076.                     $("#divRest").css('display', 'block');
  1077.                     getJson("/api/complainant/" + $("#phoneNumber").val(), doAutopopulate);
  1078.                 } else {
  1079.                 }
  1080.             });
  1081.         }
  1082.  
  1083.         function loginForPinNumberModal(){
  1084.             $.post("/login?username=" + $("#phoneNumber").val() + "&password=" + $("#pinNumberForNewUser").val(), function(data) {
  1085.                var auth = getCookie('Authorization');
  1086.                 if (auth != "") {
  1087.                     $("#pinNumberModal").modal('hide');
  1088.                 } else {
  1089.  
  1090.                 }
  1091.             });
  1092.         }
  1093.  
  1094.         async function submitGrievance() {
  1095.             var auth = getCookie('Authorization');
  1096.             var userExist = await hasUser();
  1097.             if (!userExist) {
  1098.                 var user = getComplainantDTO();
  1099.                 ajaxPost("/register", "application/json", "application/json", user, null);
  1100.             } else {
  1101.                 postGrievance();
  1102.             }
  1103.         }
  1104.  
  1105.         function getComplainantDTO() {
  1106.             var array = $('#tab1 :input, #tab2 :input').serializeArray();
  1107.             var user = {};
  1108.             $.each(array, function() {
  1109.                 user[this.name] = this.value || '';
  1110.             });
  1111.             var user = JSON.stringify(user);
  1112.             return user;
  1113.         }
  1114.  
  1115.         function doRegister() {
  1116.             var user = getComplainantDTO();
  1117.             ajaxPost("/register", "application/json", "application/json", user, null);
  1118.         }
  1119.  
  1120.         function getJson(url, onGettingJson) {
  1121.             $.getJSON(url, onGettingJson);
  1122.         }
  1123.  
  1124.         function getUser() {
  1125.             getJson("/api/complainant/" + $("#phoneNumber").val(), checkIfUserExist);
  1126.         }
  1127.  
  1128.         async function hasUser() {
  1129.             var hasUSER, user;
  1130.             await $.getJSON("/api/complainant/" + $("#phoneNumber").val(), function(data) {
  1131.                 hasUSER = data.success;
  1132.             });
  1133.             return hasUSER;
  1134.         }
  1135.  
  1136.         function checkIfUserExist(data) {
  1137.             if (data.success == true) {
  1138.                 $("#divPinNumber").css('display', 'block');
  1139.                 $("#divRest").css('display', 'none');
  1140.             } else {
  1141.                 $("#divPinNumber").css('display', 'none');
  1142.                 $("#divRest").css('display', 'block');
  1143.             }
  1144.         }
  1145.  
  1146.         function getCookie(cname) {
  1147.             var name = cname + "=";
  1148.             var decodedCookie = decodeURIComponent(document.cookie);
  1149.             var ca = decodedCookie.split(';');
  1150.             for (var i = 0; i < ca.length; i++) {
  1151.                var c = ca[i];
  1152.                while (c.charAt(0) == ' ') {
  1153.                    c = c.substring(1);
  1154.                }
  1155.                if (c.indexOf(name) == 0) {
  1156.                    return c.substring(name.length, c.length);
  1157.                }
  1158.            }
  1159.            return "";
  1160.        }
  1161.  
  1162.        function addressPopulate(type, divisionId, districtId, addressTypeValue, addressTypeId) {
  1163.            $("#" + type + "AddressDivision").val(divisionId);
  1164.            getDistrict($("#" + type + "AddressDivision"), $("#" + type + "AddressDistrict"), $("#" + type + "AddressTypeId")).then(function(result) {
  1165.                $("#" + type + "AddressDistrict").val(districtId);
  1166.                $('input[type=radio][name=' + type + 'AddressTypeValue]').val([addressTypeValue]);
  1167.                getAddressTypeList($("#" + type + "AddressTypeId"), addressTypeValue, divisionId, districtId).then(function() {
  1168.                    $("#" + type + "AddressTypeId").val(addressTypeId);
  1169.                });
  1170.            });
  1171.        }
  1172.  
  1173.        function doAutopopulate(data) {
  1174.            var presentDivision, presentDistrict, presentTypeValue, presentTypeId;
  1175.            var permanentDivision, permanentDistrict, permanentTypeValue, permanentTypeId;
  1176.            $.each(data, function(name, value) {
  1177.                $('input[type=text][name=' + name + ']').val(value);
  1178.            });
  1179.            $("input[name=gender][value=" + data['gender'] + "]").prop('checked', true);
  1180.            $('select[name="+maleGuardianType+"]').val(data['maleGuardianType']);
  1181.            addressPopulate("present", data['presentAddressDivision'], data['presentAddressDistrict'], data['presentAddressTypeValue'], data['presentAddressTypeId']);
  1182.            addressPopulate("permanent", data['permanentAddressDivision'], data['permanentAddressDistrict'], data['permanentAddressTypeValue'], data['permanentAddressTypeId']);
  1183.        }
  1184.  
  1185.        function doLogIn() {
  1186.            $.post("/login?username=" + $("#phoneNumber").val() + "&password=" + $("#pinNumber").val(), function(data) {
  1187.                var auth = getCookie('Authorization');
  1188.                if (auth != "") {
  1189.                    $("#divPinNumber").css('display', 'none');
  1190.                    $("#divRest").css('display', 'block');
  1191.                    getJson("/api/complainant/" + $("#phoneNumber").val(), doAutopopulate);
  1192.                } else {
  1193.                }
  1194.            });
  1195.        }
  1196.  
  1197.        function populateServiceDropdown(data) {
  1198.            if ($('#serviceDropDown').data('select2')) {
  1199.                $('#serviceDropDown').select2('destroy');
  1200.            }
  1201.            $select = $('#serviceDropDown');
  1202.            $select.html('');
  1203.            if (languageCode == "en") {
  1204.                $select.append('<option value="" disabled selected hidden>***Select Service***</option>');
  1205.             } else {
  1206.                 $select.append('<option value="" disabled selected hidden>***সেবা বাছাই করুন***</option>');
  1207.             }
  1208.  
  1209.             var i = 0;
  1210.  
  1211.             $.each(data.services, function(key, val) {
  1212.                 $select.append('<option value="' + val.id + '">' + val.name + '</option>');
  1213.             });
  1214.  
  1215.             var strOthers = 'অন্যান্য';
  1216.             if (languageCode == "en") {
  1217.                 strOthers = 'Others';
  1218.             }
  1219.  
  1220.             $select.append('<option value="0">' + strOthers + '</option>');
  1221.  
  1222.             localStorage.setItem('services', JSON.stringify(data));
  1223.             $('#serviceDropDown').select2();
  1224.             $('#serviceDropDown').trigger('change');
  1225.         }
  1226.  
  1227.         function populateEmployeeDropDown(data) {
  1228.             $('#employeeDropDown').html('');
  1229.             $select = $('#employeeDropDown');
  1230.             $select.html('');
  1231.             //$select.append('<tbody>');
  1232.             $select.append('<option value="" disabled selected hidden>***Select Employee***</option>');
  1233.             $.each(data.objects, function(key, val) {
  1234.                 $select.append('<option value="' + val.id + '">' + val.name + '</option>');
  1235.             })
  1236.             //$select.append('</tbody>');
  1237.         }
  1238.  
  1239.         function getOfficeId() {
  1240.             var officeId = 0;
  1241.             /*if ($("#thirdSelection").css('display') == 'inline-block') {
  1242.                 officeId = $("#thirdSelection").val();
  1243.             } else if ($("#secondSelection").css('display') == 'inline-block') {
  1244.                 officeId = $("#secondSelection").val();
  1245.             } else if ($("#firstSelection").css('display') == 'inline-block') {
  1246.                 officeId = $("#firstSelection").val();
  1247.             }*/
  1248.             if ($("#thirdSelection").data('select2')) {
  1249.                 officeId = $("#thirdSelection").val();
  1250.             } else if ($("#secondSelection").data('select2')) {
  1251.                 officeId = $("#secondSelection").val();
  1252.             } else if ($("#firstSelection").data('select2')) {
  1253.                 officeId = $("#firstSelection").val();
  1254.             }
  1255.             return officeId;
  1256.         }
  1257.  
  1258.  
  1259.         function officeChangeEventHandler() {
  1260.             var officeId = getOfficeId();
  1261.             var url = '/api/office/service/' + officeId;
  1262.             getJson(url, populateServiceDropdown);
  1263.  
  1264.             /*var url = '/api/office/employee/' + officeId;
  1265.             getJson(url, populateEmployeeDropDown);*/
  1266.         }
  1267.  
  1268.         function clearAllSelection() {
  1269.             $("#firstSelection").empty();
  1270.             $("#secondSelection").empty();
  1271.             $("#thirdSelection").empty();
  1272.             $("#serviceDropDown").empty();
  1273.  
  1274.             $("#firstSelection").css("display", "none");
  1275.             $("#secondSelection").css("display", "none");
  1276.             $("#thirdSelection").css("display", "none");
  1277.         }
  1278.  
  1279.         function clearServiceAndEmployeeDropdown() {
  1280.             $('#serviceDropDown').empty();
  1281.             //$('#employeeDropDown').empty();
  1282.         }
  1283.  
  1284.         function showSuccess(msg) {
  1285.             toastr.success(msg);
  1286.         }
  1287.  
  1288.         function showError(msg) {
  1289.             toastr.error(msg);
  1290.         }
  1291.  
  1292.         function showLoading() {
  1293.             $("#ajaxProcessingModal").modal('show');
  1294.         }
  1295.  
  1296.  
  1297.  
  1298.         function closeFileUploadModal() {
  1299.             //$("#fileUploadModal").modal('hide');
  1300.         }
  1301.  
  1302.         function closeLoading() {
  1303.             $("#ajaxProcessingModal").modal('hide');
  1304.         }
  1305.  
  1306.         function loadConfirmationTab(){
  1307.             var array = $('#tab1 :input, #tab2 :input,#tab3 :input').serializeArray();
  1308.             var files = new Array();
  1309.             $("#divFileUpload").contents().find("td p.name a").each(function() {
  1310.                 var name = $(this).attr("href");
  1311.                 files.push(name);
  1312.             });
  1313.             var userAndComplaint = {}
  1314.             var i = 0;
  1315.             $.each(array, function() {
  1316.                 userAndComplaint[this.name] = this.value || '';
  1317.  
  1318.             });
  1319.             userAndComplaint["files"] = files;
  1320.             console.log(userAndComplaint);
  1321.  
  1322.             $("#confirmationDiv").html('');
  1323.  
  1324.             label = $("#nameLabel").text();
  1325.             label = label.substring(0,label.length-1);
  1326.             value = $("#name").val();
  1327.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1328.  
  1329.             label = $("#nidOrBcnLabel").text();
  1330.             label = label.substring(0,label.length-1);
  1331.             value = $("#nidOrBcn").val();
  1332.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1333.  
  1334.             label = $("#genderLabel").text();
  1335.             value = $("input[name='gender']:checked").parent('label').text().replace(/\s/g, '');
  1336.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1337.  
  1338.             var label = $("#phoneNumberLabel").text();
  1339.             label = label.substring(0,label.length-1);
  1340.             var value = $("#phoneNumber").val();
  1341.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1342.  
  1343.             label = $("#emailLabel").text().substring(0,label.length-1);
  1344.             value = $("#email").val();
  1345.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1346.  
  1347.             //$("#confirmationDiv").append("<h3>"+$("#permanentAddressLabel").text()+"</h3>");
  1348.  
  1349.             var strPermanentAddress = $("#permanentAddressHouse").val() + "<br />";
  1350.             strPermanentAddress += $("#permanentAddressStreet").val() + "<br />";
  1351.             strPermanentAddress += $("#permanentAddressTypeId option:selected").text() + ", ";
  1352.             strPermanentAddress += $("#permanentAddressDistrict option:selected").text() + ", ";
  1353.             strPermanentAddress += $("#permanentAddressDivision option:selected").text();
  1354.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+$("#permanentAddressLabel").text()+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ strPermanentAddress+"</p></div></div>");
  1355.  
  1356.             var strPresentAddress = $("#presentAddressHouse").val() + "<br />";
  1357.             strPresentAddress += $("#presentAddressStreet").val() + "<br />";
  1358.             strPresentAddress += $("#presentAddressTypeId option:selected").text() + ", ";
  1359.             strPresentAddress += $("#presentAddressDistrict option:selected").text() + ", ";
  1360.             strPresentAddress += $("#presentAddressDivision option:selected").text();
  1361.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+$("#presentAddressLabel").text()+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ strPresentAddress+"</p></div></div>");
  1362.  
  1363.             label = $("#birthdateLabel").text();
  1364.             value = $("input[name=birthDate]").val();
  1365.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1366.  
  1367.             label = $("#occupationLabel").text();
  1368.             value = $("#occupation").val();
  1369.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1370.  
  1371.  
  1372.  
  1373.             label = $("#serviceTrackingNumberLabel").text();
  1374.             value = $("#serviceTrackingNumber").val();
  1375.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1376.  
  1377.             label = $("#serviceIdLabel").text();
  1378.             value = $("#serviceDropDown").val();
  1379.             if (value == "others") {
  1380.                 value = $("#serviceOthers").val();
  1381.             }
  1382.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1383.  
  1384.             label = $("#submissionDateLabel").text();
  1385.             value = $("input[name=submissionDate]").val();
  1386.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1387.  
  1388.             label = $("#relationLabel").text();
  1389.             value = $("input[name='relation']:checked").parent('label').text();
  1390.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1391.  
  1392.             label = $("#subjectLabel").text();
  1393.             value = $("#subject").val();
  1394.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'><p class=\"form-control-static\">"+ value+"</p></div></div>");
  1395.  
  1396.             label = $("#bodyLabel").text();
  1397.             value = $("#body").summernote("code");
  1398.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'>"+ value+"</div></div>");
  1399.  
  1400.             $("#confirmationDiv").append("</div>");
  1401.             /*
  1402.             label = $("#fileUploadLabel").text();
  1403.             $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+label+"</label><div class='col-md-8'>"+"</div></div>");
  1404.             $.each(files, function( index, value ) {
  1405.                 $("#confirmationDiv").append("<div class=\"form-group\"><label class=\"control-label col-md-4\">"+value+"</label></div>");
  1406.             });*/
  1407.         }
  1408.  
  1409.         $(document).ready(function() {
  1410.             /*var iframeBody = $("#fileUploadFrame").contents().find("body");
  1411.             var iframeHeader = $("#fileUploadFrame").contents().find("head");
  1412.             var styleTag = iframeBody.append($('#fileUploadDiv'));
  1413.             $('#fileUploadDiv').html('');*/
  1414.  
  1415.             $('#officeLayers').on("change", function() {
  1416.                 /* Following code checks if select2 exists with the dropdowns, if found, resets */
  1417.                 if ($("#firstSelection").data('select2')) {
  1418.                     $("#firstSelection").select2('destroy');
  1419.                 }
  1420.  
  1421.                 if ($("#secondSelection").data('select2')) {
  1422.                     $("#secondSelection").select2('destroy');
  1423.                 }
  1424.  
  1425.                 if ($("#thirdSelection").data('select2')) {
  1426.                     $("#thirdSelection").select2('destroy');
  1427.                 }
  1428.  
  1429.                 clearAllSelection();
  1430.                 clearServiceAndEmployeeDropdown();
  1431.  
  1432.                 switch (this.value) {
  1433.                     case "":
  1434.                         break;
  1435.  
  1436.                     case "1":
  1437.                         getFirstLayers("1");
  1438.                         $("#firstSelection").off("change");
  1439.                         $("#firstSelection").on("change", officeChangeEventHandler);
  1440.  
  1441.                         $("#firstSelection").select2({
  1442.                             width: '220px',
  1443.                             language: jsLangCodeForLibs
  1444.                         });
  1445.                         break;
  1446.  
  1447.                     case "2":
  1448.                         getFirstLayers("2");
  1449.                         $("#firstSelection").off("change");
  1450.                         $("#firstSelection").on("change", officeChangeEventHandler);
  1451.  
  1452.                         $("#firstSelection").select2({
  1453.                             width: '220px',
  1454.                             language: jsLangCodeForLibs
  1455.                         });
  1456.                         break;
  1457.  
  1458.                     case "3":
  1459.                         getDivisions("3");
  1460.                         $("#firstSelection").off("change");
  1461.                         $("#secondSelection").off("change");
  1462.                         $("#firstSelection").on("change", GetOfficesByDivision);
  1463.                         $("#secondSelection").on("change", officeChangeEventHandler);
  1464.  
  1465.                         $("#firstSelection").select2({
  1466.                             width: '220px',
  1467.                             language: jsLangCodeForLibs
  1468.                         });
  1469.  
  1470.                         $("#secondSelection").select2({
  1471.                             width: '220px',
  1472.                             language: jsLangCodeForLibs
  1473.                         });
  1474.                         break;
  1475.  
  1476.                     case "4":
  1477.                         getZilas();
  1478.                         $("#firstSelection").off("change");
  1479.                         $("#secondSelection").off("change");
  1480.                         $("#firstSelection").on("change", GetOfficesByZila);
  1481.                         $("#secondSelection").on("change", officeChangeEventHandler);
  1482.  
  1483.                         $("#firstSelection").select2({
  1484.                             width: '220px',
  1485.                             language: jsLangCodeForLibs
  1486.                         });
  1487.  
  1488.                         $("#secondSelection").select2({
  1489.                             width: '220px',
  1490.                             language: jsLangCodeForLibs
  1491.                         });
  1492.                         break;
  1493.  
  1494.                     case "5":
  1495.                         getZilas();
  1496.                         $("#firstSelection").off("change");
  1497.                         $("#firstSelection").on("change", onGetUpazilaZilaSelectionChange);
  1498.  
  1499.                         $("#secondSelection").off("change");
  1500.                         $("#secondSelection").on("change", GetOfficesByUpazila);
  1501.  
  1502.                         $("#thirdSelection").off("change");
  1503.                         $("#thirdSelection").on("change", officeChangeEventHandler);
  1504.  
  1505.                         $("#firstSelection").select2({
  1506.                             width: '220px',
  1507.                             language: jsLangCodeForLibs
  1508.                         });
  1509.  
  1510.                         $("#secondSelection").select2({
  1511.                             width: '220px',
  1512.                             language: jsLangCodeForLibs
  1513.                         });
  1514.  
  1515.                         $("#thirdSelection").select2({
  1516.                             width: '220px',
  1517.                             language: jsLangCodeForLibs
  1518.                         });
  1519.                         break;
  1520.  
  1521.                     case "6":
  1522.                         getFirstLayers("6");
  1523.                         $("#firstSelection").off("change");
  1524.                         $("#firstSelection").on("change", officeChangeEventHandler);
  1525.  
  1526.                         $("#firstSelection").select2({
  1527.                             width: '220px',
  1528.                             language: jsLangCodeForLibs
  1529.                         });
  1530.                         break;
  1531.                 }
  1532.             });
  1533.  
  1534.             $("a[href='#tab3']").on('click', loadConfirmationTab);
  1535.  
  1536.             $("a.btn.btn-outline.green.button-next").on('click', function(){
  1537.                 if ($("#tab2").hasClass("active")){
  1538.                     loadConfirmationTab();
  1539.                 }
  1540.             });
  1541.  
  1542.             $('#serviceDropDown').on('change', function(e){
  1543.                 if ($(this).val() == "others") {
  1544.                     $('#serviceOthers').removeClass('hide');
  1545.                 } else {
  1546.                     $('#serviceOthers').val('');
  1547.                     $('#serviceOthers').addClass('hide');
  1548.                 }
  1549.             });
  1550.         });
  1551.  
  1552.     </script>
  1553. <script type="text/javascript">
  1554.         $(function() {
  1555.             if (!jQuery().bootstrapWizard) {
  1556.                 return;
  1557.             }
  1558.  
  1559.             var form = $('#registerAndGrieveForm');
  1560.             var error = $('.alert-danger', form);
  1561.             var success = $('.alert-success', form);
  1562.             var requiredText = "";
  1563.  
  1564.             if (languageCode == "en") {
  1565.                 requiredText = "This field is required";
  1566.             } else {
  1567.                 requiredText = "এই তথ্যটি প্রদান করা আবশ্যক";
  1568.             }
  1569.  
  1570.             form.validate({
  1571.                 doNotHideMessage: true,
  1572.                 errorElement: 'span',
  1573.                 errorClass: 'help-block help-block-error',
  1574.                 focusInvalid: false,
  1575.                 rules: {
  1576.                     phoneNumber: {
  1577.                         minlength: 11,
  1578.                         maxlength: 11,
  1579.                         required: true
  1580.                     },
  1581.                     pinNumber: {
  1582.                         minlength: 6,
  1583.                         required: true
  1584.                     },
  1585.                     name: {
  1586.                         minlength: 3,
  1587.                         required: true
  1588.                     },
  1589.                     nidOrBcn: {
  1590.                         required: true
  1591.                     },
  1592.                     permanentAddressStreet: {
  1593.                         required: true
  1594.                     },
  1595.                     permanentAddressDivision: {
  1596.                         required: true
  1597.                     },
  1598.                     permanentAddressDistrict: {
  1599.                         required: true
  1600.                     },
  1601.                     permanentAddressTypeValue: {
  1602.                         required: true
  1603.                     },
  1604.                     permanentAddressTypeId: {
  1605.                         required: true
  1606.                     },
  1607.                     email: {
  1608.                         required: true,
  1609.                         email: true
  1610.                     }
  1611.                 },
  1612.  
  1613.                 messages: {
  1614.                     phoneNumber: {
  1615.                         required: requiredText
  1616.                     },
  1617.                     pinNumber: {
  1618.                         required: requiredText
  1619.                     },
  1620.                     name: {
  1621.                         required: requiredText
  1622.                     },
  1623.                     nidOrBcn: {
  1624.                         required: requiredText
  1625.                     },
  1626.                     permanentAddressStreet: {
  1627.                         required: requiredText
  1628.                     },
  1629.                     permanentAddressDivision: {
  1630.                         required: requiredText
  1631.                     },
  1632.                     permanentAddressDistrict: {
  1633.                         required: requiredText
  1634.                     },
  1635.                     permanentAddressTypeValue: {
  1636.                         required: requiredText
  1637.                     },
  1638.                     permanentAddressTypeId: {
  1639.                         required: requiredText
  1640.                     },
  1641.                     email: {
  1642.                         required: requiredText
  1643.                     }
  1644.                 },
  1645.  
  1646.                 errorPlacement: function(error, element) {
  1647.                     if (element.attr("name") == "permanentAddressTypeValue") {
  1648.                         error.insertAfter("#permanentAddressTypeValueDiv");
  1649.                     } else if (element.attr("name") == "presentAddressTypeValue") {
  1650.                         error.insertAfter("#presentAddressTypeValueDiv");
  1651.                     } else {
  1652.                         error.insertAfter(element);
  1653.                     }
  1654.                 },
  1655.  
  1656.                 invalidHandler: function(event, validator) {
  1657.                     success.hide();
  1658.                     error.show();
  1659.                     App.scrollTo(error, -200);
  1660.                 },
  1661.  
  1662.                 highlight: function(element) {
  1663.                     $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  1664.                 },
  1665.  
  1666.                 unhighlight: function(element) {
  1667.                     $(element).closest('.form-group').removeClass('has-error');
  1668.                 },
  1669.  
  1670.                 success: function(label) {
  1671.                     label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success');
  1672.                 },
  1673.  
  1674.                 submitHandler: function(form) {
  1675.                     success.show();
  1676.                     error.hide();
  1677.                 }
  1678.             });
  1679.  
  1680.             var handleTitle = function(tab, navigation, index) {
  1681.                 var total = navigation.find('li').length;
  1682.                 var current = index + 1;
  1683.                 var stepText = "";
  1684.  
  1685.                 if (current == 1) {
  1686.                     if (languageCode==null || languageCode=="fr") {
  1687.                         stepText = "প্রথম ধাপ";
  1688.                     } else if (languageCode=="en") {
  1689.                         stepText = "Step 1";
  1690.                     }
  1691.                 } else if (current == 2) {
  1692.                     if (languageCode==null || languageCode=="fr") {
  1693.                         stepText = "দ্বিতীয় ধাপ";
  1694.                     } else if (languageCode=="en") {
  1695.                         stepText = "Step 2";
  1696.                     }
  1697.                 } else if (current == 3) {
  1698.                     if (languageCode==null || languageCode=="fr") {
  1699.                         stepText = "তৃতীয় ধাপ";
  1700.                     } else if (languageCode=="en") {
  1701.                         stepText = "Step 3";
  1702.                     }
  1703.                 }
  1704.                 $('.step-title', $('#formWizard')).text(stepText);
  1705.                 jQuery('li', $('#formWizard')).removeClass("done");
  1706.                 var li_list = navigation.find('li');
  1707.                 for (var i = 0; i < index; i++) {
  1708.                    jQuery(li_list[i]).addClass("done");
  1709.                }
  1710.  
  1711.                if (current == 1) {
  1712.                    $('#formWizard').find('.button-previous').hide();
  1713.                } else {
  1714.                    $('#formWizard').find('.button-previous').show();
  1715.                }
  1716.  
  1717.                if (current >= total) {
  1718.                     $('#formWizard').find('.button-next').hide();
  1719.                     $('#formWizard').find('.button-submit').show();
  1720.                 } else {
  1721.                     $('#formWizard').find('.button-next').show();
  1722.                     $('#formWizard').find('.button-submit').hide();
  1723.                 }
  1724.                 App.scrollTo($('.page-title'));
  1725.             }
  1726.  
  1727.             $('#formWizard').bootstrapWizard({
  1728.                 'nextSelector': '.button-next',
  1729.                 'previousSelector': '.button-previous',
  1730.                 onTabClick: function(tab, navigation, index, clickedIndex) {
  1731.                     success.hide();
  1732.                     error.hide();
  1733.                     if (form.valid() == false) {
  1734.                         return false;
  1735.                     }
  1736.                     handleTitle(tab, navigation, clickedIndex);
  1737.                 },
  1738.                 onNext: function(tab, navigation, index) {
  1739.                     success.hide();
  1740.                     error.hide();
  1741.                     if (form.valid() == false) {
  1742.                         return false;
  1743.                     }
  1744.                     handleTitle(tab, navigation, index);
  1745.  
  1746.                     if (index == 1){
  1747.                         var auth = getCookie('Authorization');
  1748.                         if (auth=="") {
  1749.                             registerComplainant()
  1750.                             $("#pinNumberModal").modal('show');
  1751.                             return false;
  1752.                         }
  1753.                     }
  1754.                 },
  1755.                 onPrevious: function(tab, navigation, index) {
  1756.                     success.hide();
  1757.                     error.hide();
  1758.                     handleTitle(tab, navigation, index);
  1759.                 },
  1760.                 onTabShow: function(tab, navigation, index) {
  1761.                     var total = navigation.find('li').length;
  1762.                     var current = index + 1;
  1763.                     var $percent = (current / total) * 100;
  1764.                     $('#formWizard').find('.progress-bar').css({
  1765.                         width: $percent + '%'
  1766.                     });
  1767.                     handleTitle(tab, navigation, index);
  1768.                 }
  1769.             });
  1770.  
  1771.             $('#formWizard').find('.button-previous').hide();
  1772.             $('#formWizard .button-submit').click(function() {
  1773.                 showLoading();
  1774.                 submitGrievance();
  1775.             }).hide();
  1776.         });
  1777.     </script>
  1778. </body>
  1779.  
  1780. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement