<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<% script('https://cdn.ckeditor.com/4.11.1/full-all/ckeditor.js') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
      $('textarea').each(function() {
        var editor = CKEDITOR.replace(this);
        editor.on('required', function( evt ) {
            editor.showNotification( 'This field is required.', 'warning' );
            evt.cancel();
        });
      })
  })
</script>
`) %>

<% 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
  }

  .select-sim {
  width: 200px;
  height: 60px;
  line-height: 55px;
  vertical-align: middle;
  position: relative;
  background: #bedded;
  border: 1px solid #ccc;
  overflow: hidden;
}

.select-sim::after {
  content: "▼";
  font-size: 0.5em;
  font-family: arial;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0, -50%);
}

.select-sim:hover::after {
  content: "";
}

.select-sim:hover {
  overflow: visible;
}

.select-sim:hover .options .option label {
  display: inline-block;
  margin-left: 5px;
}

.select-sim:hover .options {
  background: white;
  border: 1px solid #ccc;
  position: relative;;
  /* top:-1px; */
  /* left:-1px; */
  width: 100%;
  height: 140px;
  overflow-y: scroll;
}

.select-sim .options .option {
  overflow: hidden;
}

.select-sim:hover .options .option {
  height: 60px;
  overflow: hidden;
}

.select-sim .options .option img {
  vertical-align: middle;
}

.select-sim .options .option label {
  display: none;
}

.select-sim .options .option input {
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  float: left;
  display: inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display: block;
  width:100%;
  margin-left: 5px;
}

.select-sim:hover .options .option input + label {
  background: #E9F588;
  display: block;
}

.select-sim:hover .options .option input:checked + label {
  background: #7edabc;
  /* background: #fffff0; */
}
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Add Deal
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i>Home</a></li>
    <li><a href="/hotels"><i class="fa fa-dashboard"></i>Hotel</a></li>
    <li class="active">Add</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <h3 class="box-title">New Deal</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 -->
      <div class="box-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label>Name</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="name" value="<%= doc.name || '' %>" id="name" class="form-control" placeholder="Deal Name"
                data-validation="required" 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>
        <div class="row">
          <div class="col-md-12">
            <div class="nav-tabs-custom">
              <ul class="nav nav-tabs">
                <% for (var i=0; i<language.length; i++) {
                      if(i == 0) {%>
                <li class="active"><a href="<%= '#'+language[i].name %>" data-toggle="tab"><%= language[i].name %></a>
                </li>
                <% } else { %>
                <li><a href="<%= '#'+language[i].name %>" data-toggle="tab"><%= language[i].name %></a>
                </li>
                <% } } %>
                <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
              </ul>
              <div class="tab-content">
                <% for (var i=0; i<language.length; i++) {
                      if(i == 0) {%>
                <div class="tab-pane active" id="<%= language[i].name %>">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group col-md-6">
                        <label>Deal Tag</label><em>*</em>
                        <% var ele = language[i].lang+'_tag' %>
                        <input name="<%= language[i].lang+'_tag'%>" value="<%= doc.tag[ele] || '' %>" id="tag"
                          class="form-control" placeholder="Deal Tag" data-validation="required" type="text" required>
                        <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_tag')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_tag %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group col-md-12">
                        <label>Deal Description</label><em>*</em>
                        <% var ele = language[i].lang+'_description' %>
                        <textarea name="<%= language[i].lang+'_description'%>"
                          value="<%= flash.data_description || '' %>" id="description" class="form-control"
                          placeholder="Deal Description" data-validation="required"
                          type="text" required><%= doc.description[ele] %></textarea>
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_description')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_description %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                </div>
                <% } else { %>
                <div class="tab-pane" id="<%= language[i].name %>">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group col-md-6">
                        <label>Deal Tag</label><em>*</em>
                        <% var ele = language[i].lang+'_tag' %>
                        <input name="<%= language[i].lang+'_tag'%>" value="<%= doc.tag[ele] || '' %>" id="tag"
                          class="form-control" placeholder="Deal Tag" data-validation="required" type="text" required>
                        <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_tag')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_tag %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group col-md-12">
                        <label>Deal Description</label><em>*</em>
                        <% var ele = language[i].lang+'_description' %>
                        <textarea name="<%= language[i].lang+'_description'%>"
                          value="<%= flash.data_description || '' %>" id="description" class="form-control"
                          placeholder="Deal Description" data-validation="required"
                          type="text" required><%= doc.description[ele] %></textarea>
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_description')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_description %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                </div>
                <% } } %>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label>Price</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="price" value="<%= doc.price || '' %>" id="price" class="form-control" placeholder="Price"
                data-validation="required" type="number" step=".01" required>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_price')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_price %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Image(s)</label>
            <div class="timeline-item">
              <div class="timeline-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="select-sim" id="select-pic">
                      <div class="options">
                        <% 
                        for(var i=0; len=pics.length, i < len; i++) { %>
                        <div class="option">
                          <input type="radio" name="pic" value="<%= pics[i].pic.name %>"
                            id="<%= 'pic-' + pics[i].pic.name %>" <%- pics[i].pic.name == doc.pic ? 'checked' : '' %> />
                          <label for="<%= 'pic-' + pics[i].pic.name %>">
                            <img height="50" width="60" src="<%='/images/' + pics[i].pic.name %>" alt="" />
                            &nbsp;&nbsp;&nbsp;<%= pics[i].pic.name %>
                          </label>
                        </div>
                        <% 
                        }
                        %>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.row -->
      <div class="box-footer">
        <div class="pull-left">
          <p class="text-success">
          </p>
        </div>
        <div class="pull-right">
          <a href="<%= '/hotels/deal/' + doc.referId %>" class="btn btn-primary" role="button">Cancel</a>
          <input 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 -->