<% layout('../layouts/main') -%>
<link rel="stylesheet" type="text/css" href="/intl-tel-input/css/intlTelInput.css">
<% script('https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js') -%>

<% script('/js/form-validation/user.js') -%>


<!-- Content Header (Page header) -->
<section class="content-header">
     <h1>
          Edit User
          <!--<small>Preview</small>-->
     </h1>
     <ol class="breadcrumb">
          <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
          <!-- <li><a href="/user">User</a></li> -->
          <li class="active">Edit</li>
     </ol>
</section>

<!-- Main content -->
<section class="content">
     <% if (Object.prototype.hasOwnProperty.call(flash, 'success')) { %>
          <div class="alert alert-success alert-dismissible" role="alert">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <%= flash.success %>
          </div>
     <% } %>
     <% if (Object.prototype.hasOwnProperty.call(flash, 'error')) { %>
          <div class="alert alert-danger alert-dismissible" role="alert">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <%= flash.error %>
          </div>
     <% } %>
     
     <div class="box box-primary">
          <form role="form" class="has-validation-callback" method="POST" id=signup>
               <input type="hidden" name="countryCode" id="countryCode" value="<%= user.countryCode || '' %>" />
               <input type="hidden" name="countryISO2" id="countryISO2" value="<%= user.countryISO2 || '' %>" />
               <input type="hidden" name="splitNumber" id="splitNumber" value="<%= user.phone || '' %>" />
               <input type="hidden" name="preNumber" id="preNumber" value="<%= user.phone || '' %>" />
               <div class="box-header with-border">
                    <h3 class="box-title">Edit Customer</h3>
                    <input name="userType" type="hidden" value="<%= userType %>">

                    <!--<div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
        </div>-->
               </div>
               <!-- /.box-header -->
               <div class="box-body">
                    <div class="row">
                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="email">Title</label>
                                   <select name="title" id="email" class="form-control" required>
                                        <option value="">Select Title</option>
                                        <option value="Mr"
                                             <%= userDetail.title && userDetail.title === "Mr" ? "selected" : "" %>>Mr
                                        </option>
                                        <option value="Mrs"
                                             <%= userDetail.title && userDetail.title === "Mrs" ? "selected" : "" %>>Mrs
                                        </option>
                                        <option value="Miss"
                                             <%= userDetail.title && userDetail.title === "Miss" ? "selected" : "" %>>
                                             Miss
                                        </option>
                                   </select>
                                   <!--<span
                                             class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_email')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_email %>
                                   </h5>
                                   <% } %>
                              </div>

                              <div class="form-group col-md-6">
                                   <label for="name">Name</label>
                                   <input name="name" value="<%= user.name || '' %>" id="name" class="form-control"
                                        placeholder="Name" type="text" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_name %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="displayName">Display Name</label>
                                   <input name="displayName" value="<%= user.displayName || '' %>" id="displayName" class="form-control"
                                        placeholder="Display Name" type="text">
                              </div>

                              <div class="form-group col-md-6">
                                   <label for="dateOfBirth">Birthday (DD/MM/YYYY)</label>
                                   <input name="dateOfBirth" value="<%= user.dob || '' %>" id="dateOfBirth" class="form-control"
                                        placeholder="Birthday (DD/MM/YYYY)" type="text" readonly>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="col-md-6">
                                   <label for="phonne">Phone Number</label>
                                   <input name="phone" value="<%= user.phone ? user.phone : '' %>" id="phone" class="form-control"
                                        placeholder="Phone Number" type="tel" required onkeypress="return event.charCode >= 48" onkeyup="myFunction()">
                                   <h5 class="text-danger" id="phone_error" style="display: none;"><i class="fa fa-exclamation-triangle"></i></h5>
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
                                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                             <%= flash.errors_name %>
                                        </h5>
                                   <% } %>
                              </div>

                              <div class="form-group col-md-6">
                                   <label for="password">Password</label>
                                   <input name="password" value="" id="password" class="form-control"
                                        placeholder="Password" type="password">
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="phone">Phone</label>
                                   <input name="phone" value="<%= userDetail.phone1 ? userDetail.phone1 : '' %>"
                                        id="phone" class="form-control" placeholder="Phone" type="number" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_phone %>
                                   </h5>
                                   <% } %>
                              </div>

                              <div class="form-group col-md-6">
                                   <label for="phone2">Alt Phone</label>
                                   <input name="phone2" value="<%= userDetail.phone2 ? userDetail.phone2 : '' %>"
                                        id="phone2" class="form-control" placeholder="Alt Phone" type="number">
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone2')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_phone2 %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="email">Email</label>
                                   <input name="email" value="<%= user.email || '' %>" id="email" class="form-control"
                                        placeholder="Email" type="email" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_email')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_email %>
                                   </h5>
                                   <% } %>
                              </div>
                              <div class="form-group col-md-6">
                                   <label for="address">Address</label>
                                   <input name="address" value="<%= userDetail.address ? userDetail.address : '' %>"
                                        id="address" class="form-control" placeholder="Address" type="text" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_address')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_address %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="city">City</label>
                                   <input name="city" value="<%= userDetail.city ? userDetail.city : '' %>" id="city"
                                        class="form-control" placeholder="City" type="text" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_city')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_city %>
                                   </h5>
                                   <% } %>
                              </div>

                              <div class="form-group col-md-6">
                                   <label for="pin">Zip Code</label>
                                   <input name="pin" value="<%= userDetail.pin ? userDetail.pin : '' %>" id="pin"
                                        class="form-control" placeholder="Zip Code" type="number" required>
                                   <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_pin')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_pin %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-12">
                                   <label for="country">Country</label>
                                   <select name="country" value="<%= userDetail.country ? userDetail.country : '' %>"
                                        id="country" class="form-control" required>
                                        <option value="">Select Country</option>
                                        <% for(let c in countryList) { %>
                                        <option value="<%= countryList[c]._id %>"
                                             <%- userDetail ? (userDetail.country === countryList[c]._id ? "selected" : "") : "" %>>
                                             <%= countryList[c].name %>
                                        </option>
                                        <% } %>
                                        </option>
                                   </select>
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_email')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_email %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>

                         <div class="col-md-12">
                              <div class="form-group col-md-6">
                                   <label for="role">Role</label>
                                   <select id="role" class="form-control" name="roleId" required>
                                        <%
                                for(let r in roles) { console.log("I have reached here: ", roles); %>
                                        <option value="<%= roles[r]._id %>" <%-
                                    user.role.toString().includes(roles[r]._id.toString()) ? 'selected="selected"' : ''
                                    %>>
                                             <%= roles[r].name %>
                                        </option>
                                        <%}
                                %>
                                   </select>
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_role')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_role %>
                                   </h5>
                                   <% } %>
                              </div>
                              <div class="form-group col-md-6">
                                   <label for="language">Language</label>
                                   <select id="language" class="form-control" name="lang" required>
                                        <%
                                for(let l in lang) { %>
                                        <option value="<%= lang[l]._id %>" <%-
                                    user.lang.toString().includes(lang[l]._id.toString()) ? 'selected="selected"' :
                                    '' %>>
                                             <%= lang[l].name %>
                                        </option>
                                        <%}
                                %>
                                   </select>
                                   <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_language')) { %>
                                   <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                        <%= flash.errors_language %>
                                   </h5>
                                   <% } %>
                              </div>
                         </div>
                    </div>
               </div>
               <!-- /.row -->
               <div class="box-footer">
                    <div class="pull-left">
                         <p class="text-success">
                         </p>
                    </div>
                    <div class="pull-right">
                         <a onclick="goBack()" class="btn btn-primary" role="button">Cancel</a>
                         <!-- <a href="/signup" class="btn btn-primary" role="button">Submit</a> -->
                         <input name="submit" value="Submit" class="btn btn-primary" type="submit">
                    </div>
               </div>
               <!--<div class="box-footer">
          Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
          the plugin.
      </div>-->
          </form>
     </div>
     <!-- /.box -->
</section>
<!-- /.content -->