<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
  })
</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
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Add Equipment
        <!--<small>Preview</small>-->
    </h1>
    <ol class="breadcrumb">
        <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="/equipments">Equipment</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 Equipment</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 for="name">Name</label><em>*</em>
                            <input name="name" value="<%= flash.data_name || '' %>" id="name" class="form-control"
                                placeholder="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 class="form-group col-md-6">
                            <label>Equipment Category</label><em>*</em>
                            <select id="equipment_category" multiple="multiple" class="form-control select2"
                                name="equipment_category[]" required onchange="deleteTags()">
                                <% for(eCidx in equipmentCategorys) { %>
                                <option value="<%= equipmentCategorys[eCidx]._id %>" <%- flash.data_equipment_category
                                    && flash.data_equipment_category.includes(equipmentCategorys[eCidx]._id.toString())
                                    ? 'selected="selected"' : '' %>>
                                    <%= equipmentCategorys[eCidx].slug ? equipmentCategorys[eCidx].slug : equipmentCategorys[eCidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_equipment_category')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_equipment_category %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>Equipment Type</label><em>*</em>
                            <select id="equipment_type" multiple="multiple" class="form-control select2"
                                name="equipment_type[]" required onchange="deleteTags()">
                                <% for(eTidx in equipmentTypes) { %>
                                <option value="<%= equipmentTypes[eTidx]._id %>" <%- flash.data_equipment_type &&
                                    flash.data_equipment_type.includes(equipmentTypes[eTidx]._id.toString()) ?
                                    'selected="selected"' : '' %>>
                                    <%= equipmentTypes[eTidx].slug ? equipmentTypes[eTidx].slug : equipmentTypes[eTidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_equipment_type')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_equipment_type %>
                                </h5>
                                <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Price</label><em>*</em>
                            <input name="price" value="<%= flash.data_price || '' %>" id="price" class="form-control"
                                placeholder="Price" data-validation="required" type="number" min="0" 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="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>Owner</label><em>*</em>
                            <select id="owner" class="form-control select2" name="owner" required>
                                <% for(oidx in owner) { %>
                                <option value="<%= owner[oidx]._id %>">
                                    <%= owner[oidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_owner')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_owner %>
                                </h5>
                                <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Facility</label><em></em>
                            <select id="facility" class="form-control select2" multiple="multiple" name="facility[]"
                                 onchange="deleteTags()">
                                <% for(vidx in facility) { %>
                                <option value="<%= facility[vidx]._id %>" <%- flash.data_facility &&
                                    flash.data_facility.includes(facility[vidx]._id.toString()) ? 'selected="selected"'
                                    : '' %>>
                                    <%= facility[vidx].slug ? facility[vidx].slug : facility[vidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_facility')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_facility %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>Zone</label><em>*</em>
                            <select id="zone" class="form-control select2" multiple="multiple" name="zone[]" required
                                onchange="deleteTags()">
                                <% for(zidx in zone) { %>
                                <option value="<%= zone[zidx]._id %>"
                                    <%- flash.data_zone &&
                                    flash.data_zone.includes(zone[zidx]._id.toString()) ? 'selected="selected"' : '' %>>
                                    <%= zone[zidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_zone')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_zone %>
                                </h5>
                                <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Extra Features</label><br>
                            <select id="extra" class="form-control select2" multiple="multiple" name="extra[]"
                                onchange="deleteTags()">
                                <% for(eidx in extras) { %>
                                <option value="<%= extras[eidx]._id %>" <%- flash.data_extras &&
                                    flash.data_extras.includes(extras[eidx]._id.toString()) ? 'selected="selected"' :
                                    '' %>>
                                    <%= extras[eidx].slug ? extras[eidx].slug : extras[eidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_extra')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_extra %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>Benefit</label><br>
                            <select id="benefit" class="form-control select2" multiple="multiple" name="benefit[]"
                                onchange="deleteTags()">
                                <% for(bidx in benefits) { %>
                                <option value="<%= benefits[bidx]._id %>">
                                    <%= benefits[bidx].slug ? benefits[bidx].slug : benefits[bidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_benefit')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_benefit %>
                                </h5>
                                <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Recommend</label><br>
                            <label><input type="radio" <%=flash.data_recommend || false ? 'checked' : '' %>
                                    name="recommend" id="recommend" value="1" class="form-control minimal" />
                                Yes</label>
                            <label><input type="radio" <%=flash.data_recommend || true ? '' : 'checked' %>
                                    name="recommend" id="recommend" value="0" class="form-control minimal" /> No</label>
                            <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_recommend')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_recommend %>
                            </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 href="/equipments" class="btn btn-primary" role="button">Cancel</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 -->