<title>
  <%= i18n.__('addArea') %>
</title>

<link rel="stylesheet" type="text/css" href="/admin/app-assets/css/plugins/forms/validation/form-validation.css" />

<div class="app-content content">
  <div class="content-overlay"></div>
  <div class="header-navbar-shadow"></div>
  <div class="content-wrapper">
    <!--content wrapper -->
    <div class="content-header row">
      <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
          <div class="col-12">
            <h2 class="content-header-title float-left mb-0"></h2>
            <div class="breadcrumb-wrapper col-12">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="/dashboard/areas">
                    <%= i18n.__('areas') %>
                  </a>
                </li>
                <li class="breadcrumb-item active">
                  <%= i18n.__('common.add') %>
                </li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--end of content wrapper -->
    <!-- // Basic multiple Column Form section start -->
    <section id="multiple-column-form">
      <div class="row match-height">
        <div class="col-12">
          <div class="card">
            <div class="card-content">
              <div class="card-body">
                <form id="addArea" method="POST" action="/dashboard/areas/addArea"
                  class="store form-horizontal needs-validation" novalidate>
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                  <div class="form-body">
                    <div class="row">
                      <% languages.forEach((lang)=>{%>
                        <div class="col-md-6 col-12">
                          <div class="form-group">
                            <label for="first-name-column">
                              <%= i18n.__("name_"+lang);%>
                            </label>
                            <div class="controls">
                              <input oninput="validateInput(this)" type="text" name="[<%= lang%>]" class="form-control"
                                placeholder="<%=
                            i18n.__(" name_"+lang);%>" required >
                              <div class="invalid-feedback">
                                * <%= i18n.__("require");%>
                                  <%= i18n.__("name_"+lang);%>
                              </div>
                            </div>
                          </div>
                        </div>
                        <%})%>
                          <!--                                             
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="first-name-column"> احداثيات الطول </label>
                                                        <div class="controls">
                                                            <input type="text" name="longitude"  id="longitude" class="form-control" placeholder="احداثيات الطول" required  >
                                                            <div class="invalid-feedback">
                                                                * احداثيات الطول
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="first-name-column"> احداثيات العرض </label>
                                                        <div class="controls">
                                                            <input type="text" name="latitude"  id="latitude" class="form-control" placeholder="احداثيات العرض"  required >
                                                            <div class="invalid-feedback">
                                                                * احداثيات العرض
                                                            </div>                                           
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="first-name-column"> العنوان</label>
                                                        <div class="controls">
                                                            <input type="text" name="address"   id="address" class="form-control" placeholder="العنوان"  required >
                                                            <div class="invalid-feedback">
                                                                * العنوان
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>  -->

                          <div class="col-md-6 col-12">
                            <div class="form-group">
                              <label for="first-name-column">
                                <%= i18n.__('cities') %>
                              </label>
                              <div class="controls">
                                <select name="translateId" id="menu_idInput"
                                  class="form-control js-example-basic-multiple" required>
                                  <option value>
                                    <%= i18n.__('city') %>
                                  </option>
                                  <% cities.map((item)=>{%>
                                    <option value="<%=item.id%>">
                                      <%=item.name[language]%>
                                    </option>
                                    <%})%>
                                </select>
                                <div class="invalid-feedback">
                                  <%= i18n.__('pleaseEnterCity') %>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-12 d-flex justify-content-center mt-3">
                            <button type="submit" class="btn btn-primary mr-1 mb-1 submit_button">
                              <%= i18n.__('common.add') %>
                            </button>
                            <a href="<%=referer%>" type="reset" class="btn btn-outline-warning mr-1 mb-1">
                              <%= i18n.__('referer') %>
                            </a>
                          </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<%- include('includes.ejs') %>