{% extends 'base.html.twig' %}

{% block body %}


  <div class="container ">
    <div class="main-container">
       {# user notice #}
      {% set flashbagValidMessage = app.session.flashbag.get('user-notice') %}
      {% if flashbagValidMessage is not empty %}
        <div class="errorContainer">
          {% for flashMessage in flashbagValidMessage %}
            <div class="user-message user-notice">{{ flashMessage }}</div>
          {% endfor %}
        </div>
      {% endif %}

      {# warning #}
      {% for flashMessage in app.session.flashbag.get('warning') %}
          <div class="user-message user-warning">{{ flashMessage }}</div>
      {% endfor %}

      {# error #}
      {% set flashbagError = app.session.flashbag.get('error') %}
      {% if flashbagError is not empty %}
        <div class="errorContainer">
          <h3 class="title-error">{% trans %}The following errors have been found:{% endtrans %}</h3>
          {% for flashMessage in flashbagError %}
              <div class="user-message user-error">{{ flashMessage }}</div>
          {% endfor %}
        </div>
      {% endif %}

      <header>
        <h1>Bienvenue</h1>
      </header>
      <section class="filter-hp">
        <div class="row school-wrapper">
          <div class="label col-sm-2">
            Escola
          </div>
          <div class="col-sm-10">
            <select class="schoold-select" name="schoold-select">
              <option value="-1"></option>
              {% for school in schools %}
                <option value="{{ school.id }}" {% if school.id == currentSchoolId %}selected {% endif %} >{{ school.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="course-hp {% if courses and courses|length > 0 %}visible-block{% endif %}">
          <div class="row ">
            <div class="label col-sm-2">
              Course
            </div>
            <div class="col-sm-10" >
              <select class="course-select" name="course-select">
                {% if courses and courses|length > 0 %}
                  <option value="-1"></option>
                  {% for course in courses %}
                    <option value="{{ course.id }}"
                            {% if course.id == currentCourseId %}selected {% endif %} >{{ course.name }}</option>
                  {% endfor %}
                {% endif %}
              </select>
            </div>
          </div>
        </div>
      </section>

      <section class="books-hp {% if storeBooks and storeBooks|length > 0 %}visible-block{% endif %}">

          <table id="books-table" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Subject</th>
                <th>Title</th>
                <th>Editor</th>
                <th>Price</th>
                <th>Stock(reserved)</th>
                <th>Action</th>
                <th>Voucher <input type="checkbox" class="all-voucher" ></th>
                <th>Sell <input type="checkbox" class="all-sell"></th>
              </tr>
            </thead>
            <tbody>
            {% if storeBooks and storeBooks|length > 0 %}
            {% for storeBook in storeBooks %}
              <tr id="book-{{ storeBook.book.id }}" >
                <td>{{ storeBook.book.subject }}</td>
                <td>{{ storeBook.book.title }}</td>
                <td>{{ storeBook.book.editor.name }}</td>
                <td>{{ storeBook.book.price }}</td>
                <td>{{ storeBook.quantity }}({{ storeBook.reservedQuantity }})</td>
                <td><a href="#" class="deleteLine" id="lineid-{{ storeBook.book.id }}"><i class="fa fa-trash"></i></a></td>
                <td>
                    <input type="checkbox" class="voucher-ch" name="voucher"  >
                </td>
                <td>
                  <input type="checkbox" class="voucher-sell" name="sell" {% if storeBook.quantity < 1 %} disabled="disabled" {% endif %}/>
                </td>
              </tr>
            {% endfor %}
            {% endif %}
            </tbody>
          </table>

          <div class="contact-form">
              <div class="row school-wrapper">
                  <div class="label col-sm-2">
                      Contact
                  </div>
                  <div class="col-sm-6">
                      <select class="contact-select js-data-example-ajax" name="contact-select" >
                      </select>
                  </div>
                  <div class="col-sm-4">
                      <a href="#" class="create-contact btn btn-primary">Create new contact</a>
                  </div>
              </div>
              <div class="row create-contact-wrapper">
                  <form id="createContactForm" class="form-horizontal" >
                      <div class="form-group" data-required="true">
                          <label class="col-sm-2 control-label" for="cust-firstname">First Name</label>
                          <div class="col-sm-10">
                              <input type="text" name="firstname" id="cust-firstname" required="required" data-schema-key="name" maxlength="100" class="form-control">
                          </div>
                      </div>
                      <div class="form-group" data-required="true">
                          <label class="col-sm-2 control-label" for="cust-lastname">Last Name</label>
                          <div class="col-sm-10">
                              <input type="text" name="lastname" id="cust-lastname" data-schema-key="name" maxlength="100" class="form-control">
                          </div>
                      </div>
                      <div class="form-group" data-required="true">
                          <label class="col-sm-2 control-label" for="cust-phone">Phone</label>
                          <div class="col-sm-10">
                              <input type="text" name="phone" id="cust-phone" required="required" data-schema-key="name" maxlength="20" class="form-control">
                          </div>
                      </div>
                      <div class="form-group" data-required="true">
                          <label class="col-sm-2 control-label" for="cust-email">Email</label>
                          <div class="col-sm-10">
                              <input type="email" name="email" id="cust-email" data-schema-key="name" maxlength="200" class="form-control">
                          </div>
                      </div>
                      <div class="form-group" data-required="false">
                          <label class="col-sm-2 control-label" for="cust-comment">Comment</label>
                          <div class="col-sm-10">
                              <input type="text" name="comment" id="cust-comment" data-schema-key="name" maxlength="255" class="form-control">
                          </div>
                      </div>
                      <div class="form-group" data-required="true">
                          <label class="col-sm-2 control-label" for="cust-state"></label>
                          <div class="col-sm-10">
                              <div class="checkbox">
                                  <label>
                                      <input type="checkbox" value="true" name="stateSupport" id="cust-state" data-schema-key="stateSupport">
                                      State Support
                                  </label>
                              </div>
                              <span class="help-block"></span>
                          </div>
                      </div>
                      <div class="formcontact-error">
                          <label></label>
                      </div>
                      <div class="form-group">
                          <div class="col-sm-2"></div>
                          <div class="col-sm-10">
                              <button type="submit" class="btn btn-success">
                                  Submit
                              </button>
                          </div>
                      </div>
                  </form>
              </div>
              <div class="row create-contact-success">

              </div>
          </div>

          <div class="confirm-button">
              <a href="#" class="btn btn-primary createOrder">Confirm order!</a>
          </div>

      </section>

    </div>
  </div>
{% endblock %}

{% block javascripts %}
  <script>
    var TWIG_HP = {};
    TWIG_HP.pathAjaxSchoolChange = "{{ path('AjaxSchool') }}";
    TWIG_HP.pathAjaxCourseChange = "{{ path('AjaxCourse') }}";
    TWIG_HP.pathAjaxContactSearch = "{{ path('AjaxContactSearch') }}";
    TWIG_HP.pathAjaxContactCreate = "{{ path('AjaxContactCreate') }}";
    TWIG_HP.pathAjaxOrderCreate = "{{ path('AjaxOrderCreate') }}";
  </script>
  {{ parent() }}
{% endblock %}

{% block title %}{% trans %}TioApp home{% endtrans %}{% endblock %}