<% layout('../layouts/main') -%>
<% stylesheet('/css/select2.min.css') %>
<% script('/js/select2.full.min.js') %>
<% script('/js/form-validation/icon.js') -%>
<% block('custom_style', `
<style type="text/css">
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #2a83a7;
    border: 1px solid #2a83a7;
  }
  em{
    color: red
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Edit Icon
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/icon">Icon</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" enctype="multipart/form-data">
      <div class="box-header with-border">
        <h3 class="box-title">Edit Icon</h3>

        <!--<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 -->
      <input type="hidden" name="existImageLink" id="existImageLink" value="<%= doc.iconImage %>" />
      <div class="box-body">


        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Guest Occupents Number</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="occupents" value="<%= doc.name %>" id="occupents" class="form-control required"
                placeholder="Enter Number" type="number" readonly>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <h5 class="text-danger" id="occuents_error"></h5>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="categories">Icon</label><em>*</em>
              <input id="image" name="image" type="file" class="form-control required" accept="image/*" />
              <h5 class="text-danger" id="image_error"></h5>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="timeline-item">
            <div class="timeline-body" id="preview">
              <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="categories">Exist Image</label><em>*</em>
              <img src="<%= doc.imageLink %>" alt="..." class="form-control" style="width: 150px; height: 100px;">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="nav-tabs-custom">
              <ul class="nav nav-tabs">

              </ul>

            </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>
          <!-- <input name="submit" value="Submit" class="btn btn-primary" type="submit"> -->
          <input value="Submit" class="btn btn-primary" type="button" id="submitButton">
        </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 -->