{{ header }}
<style>
.table a.desc:after {
  content: " \f106";
  font-family: FontAwesome;
  font-size: 14px;
}
.table a.asc:after {
	content: " \f107";
	font-family: FontAwesome;
	font-size: 14px;
}
.col-sm-4{
  display: inline-block;
  float: left;
  width: 32.8%;
}
.text-right{
  text-align: right;
}
.text-left{
  text-align: left;
}
fieldset .col-sm-9{
  width: 74%;
}
.input-group-btn > button {
  padding: 7px !important;
}
</style>
<div id="container" class="container j-container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ breadcrumb.href }}" itemprop="url"><span itemprop="title">{{ breadcrumb.text }}</span></a></li>
    {% endfor %}
  </ul>
  {% if success is defined and success %}
    <div class="alert alert-success success"><i class="fa fa-check-circle"></i> {{ success }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}
  {% if error_warning is defined and error_warning %}
  <div class="alert alert-danger warning"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  <div class="row">{{ column_left }}{{ column_right }}
    {% if column_left and column_right %}
      {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
      {% set class = 'col-sm-9' %}
    {% else %}
      {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }} order-list">{{ content_top }}
      <h1 class="heading-title">{{ heading_title }}</h1>
        <fieldset class="well">
          <div class="form-horizontal row">
              <div class="col-sm-4">
                <div class="form-group">
                  <div class="col-sm-3">
                  <label for="filter_id">{{ column_quote_id }}</label>
                  </div>
                  <div class="col-sm-9">
                    <input class="form-control" type="text" id="filter_id" name="filter_id" value="{{ filter['id']  }}" placeholder="{{ column_quote_id }}">
                  </div>
                </div>

                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <div class="col-sm-3">
                        <label class="control-label" for="filter_added_from">{{ column_added_from }}</label>
                    </div>
                    <div class="col-sm-9">
                      <div class="input-group date">
                        <input class="form-control datepicker" type="text" id="filter_added_from" name="filter_added_from" placeholder="{{ column_added_from  }}" value="{{ filter['added_from'] }}">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                        </span></div>
                    </div>

                  </div>
                  <div class="form-group">
                    <div class="col-sm-3">
                      <label for="filter_status">{{ column_status }}</label>
                    </div>
                    <div class="col-sm-9">
                      <select class="form-control" name="filter_status" id="filter_status">
                        <option></option>
                        <option {% if filter['status'] == 1 %}{{ 'selected' }} {% endif %} value="1">{{ text_approved }}</option>
                        <option {% if filter['status'] == 2 %}{{ 'selected' }} {% endif %} value="2">{{ text_cancelled }}</option>
                        <option {% if filter['status'] == 3 %}{{ 'selected' }} {% endif %} value="3">{{ text_submitted }}</option>
                        <option {% if filter['status'] == 4 %}{{ 'selected' }} {% endif %} value="4">{{ text_under_review }}</option>
                        <option {% if filter['status'] == 5 %}{{ 'selected' }} {% endif %} value="5">{{ text_order_completed }}</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <div class="col-sm-3">
                      <label class="control-label" for="filter_added_to">{{ column_added_to }}</label>
                    </div>
                    <div class="col-sm-9">
                      <div class="input-group date">
                        <input class="form-control datepicker" type="text" id="filter_added_to" name="filter_added_to" placeholder="{{ column_added_to  }}" value="{{ filter['added_to'] }}">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                        </span></div>
                    </div>
                  </div>
                  <div class="form-group"><br>
                      <div class="brn btn-group">
                        <button type="button" id="button-filter-request" class="btn btn-primary pull-left"><i class="fa fa-filter"></i> {{ button_filter }}</button>
                        <a href="{{ clear_filter }}"><button class="btn btn-info pull-left button"><i class="fa fa-paint-brush"></i> {{ button_clear }}</button></a>
                      </div>
                  </div>
                </div>
            </div>
        </fieldset>

          <!-- Filtering  for quotation request end -->
          {% if quotations is defined and quotations %}
          <div class="table-responsive">
            <table class="table table-hover table-bordered list">
              <thead>
                <tr>
                  <th>
                    {% if sort == 'qr.id' %}
                      <a href="{{ sort_id }}" class="{{ order|lower }}">{{ column_quote_id }}</a>
                    {% else %}
                        <a href="{{ sort_id }}">{{ column_quote_id }}</a>
                    {% endif %}
                  </th>
                  <th>
                    {% if sort == 'num_product' %}
                      <a href="{{ sort_num_product }}" class="{{ order|lower }}">{{ column_num_product }}</a>
                    {% else %}
                      <a href="{{ sort_num_product }}">{{ column_num_product }}</a>
                     {% endif %}
                  </th>
                  <th>
                    {% if sort == 'qr.quotation_status' %}
                      <a href="{{ sort_status }}" class="{{ order|lower }}">{{ column_status }}</a>
                    {% else %}
                      <a href="{{ sort_status }}">{{ column_status }}</a>
                    {% endif %}
                  </th>
                  <th>
                    {% if sort == 'total' %}
                      <a href="{{ sort_total }}" class="{{ order|lower }}">{{ column_total }}</a>
                    {% else %}
                      <a href="{{ sort_total }}">{{ column_total }}</a>
                     {% endif %}
                  </th>
                  <th>
                    {% if sort == 'requested_total' %}
                      <a href="{{ sort_requested_total }}" class="{{ order|lower }}">{{ column_request_total }}</a>
                    {% else %}
                      <a href="{{ sort_requested_total }}">{{ column_request_total }}</a>
                     {% endif %}
                  </th>
                  <th>
                    {% if sort == 'approved_total' %}
                      <a href="{{ sort_approved_total }}" class="{{ order|lower }}">{{ column_approved_total }}</a>
                    {% else %}
                      <a href="{{ sort_approved_total }}">{{ column_approved_total }}</a>
                     {% endif %}
                  </th>
                  <th>
                    {% if sort == 'qr.added_date' %}
                      <a href="{{ sort_added_date }}" class="{{ order|lower }}">{{ column_added_date }}</a>
                    {% else %}
                      <a href="{{ sort_added_date }}">{{ column_added_date }}</a>
                     {% endif %}
                    </th>
                  <th class="text-center">{{ column_action }}</th>
                </tr>
              </thead>
              <tbody>
                <form action="">
                  {% for quotation in quotations %}
                     {% set disable = "disabled" %}
                     {% set title = '' %}
                    <tr>
                      <td>{{"#"}}{{ quotation['id']}}</td>
                      <td>{{ quotation['num_product'] }}</td>
                      <td>{% if quotation['quotation_status'] == 1 %}
                         {% set disable = '' %}
                         {% set title = order_message %}
                          {{ text_approved }}
                       {% elseif quotation['quotation_status'] == 2 %}
                         {% set title = cancelled_message %}
                          {{ text_cancelled }}
                        {% elseif quotation['quotation_status'] == 3 %}
                            {% if quotation['order_completed'] is defined and quotation['order_completed'] %}
                                {% set title = order_completed_message %}
                                {{ text_order_completed }}
                            {% else %}
                                {% set title = submitted_message %}
                                {{ text_submitted }}
                            {% endif %}

                        {% elseif quotation['quotation_status'] == 4 %}
                          {% set title = approval_message %}
                           {{ text_under_review }}
                         {% endif %}</td>
                      <td>{{ quotation['total'] }}</td>
                      <td>{{ quotation['request_total'] }}</td>
                      <td>{% if quotation['approved_total'] is defined and quotation['approved_total'] %}{{ quotation['approved_total'] }}{% else %}{{ text_not_approved }}{% endif %}</td>
                      <td>{{ quotation['added_date'] }}</td>
                    <td>
                      <div class="text-center">
                        <a href="{{ quotation['view'] }}" type="button" name="button" class="btn btn-primary" data-toggle="tooltip" title="{{ button_view }}"><i class="fa fa-eye" aria-hidden="true"></i></a>
                          {% if quotation['quotation_status'] == 4 %}
                            <button type="button" name="button" cancel="{{ quotation['cancel'] }}" class="btn btn-danger btn_cancel" data-toggle="tooltip" title="{{ button_cancel }}"><i class="fa fa-times" aria-hidden="true"></i></button>
                          {% else %}
                          <button type="button" name="button" class="btn btn-danger" {% if quotation['quotation_status'] == 2 %} title='{{ button_cancelled }}' {% endif %} disabled ><i class=" fa fa-times" aria-hidden="true"></i></button>
                          {% endif %}
                          {% if quotation['quotation_status'] == 1 %}
                          <a href="{{ quotation['checkout'] }}" style="width:30% !important; height:30px;" class="btn btn-success btn-sm success"><i data-toggle="tooltip"  title="{{ title  }}" class="fa fa-paper-plane" aria-hidden="true"></i></a>
                          {% else %}
                            <button type="button" name="button" class="btn btn-sm btn-success btn-default" {% if disable is defined and disable %} disable {% endif %} style="width:30%; height:30px;"><i data-toggle="tooltip"  title="{{ title  }}" class="fa fa-paper-plane" aria-hidden="true"></i></button>
                          {% endif %}
                      </div>
                    </td>
                    </tr>
                  {% endfor %}
               </form>
              </tbody>
            </table>
          </div>
        {% else %}<h4>{{ empty_quote_text }}</h4>{% endif %}
          <div class="row">
            <div class="col-sm-6 text-left" style="width:100%">{{ pagination }}</div>
            <div class="col-sm-6 text-right" style="width:100%">{{ results }}</div>
          </div>

      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary button">{{ button_continue }}</a></div>
      </div>
      {{ content_bottom }}</div>
  </div>
</div>
<script type="text/javascript">
  $('.date').datetimepicker({
    pickTime: false,
    format: 'YYYY-MM-DD',
  });
  $(document).on('click', '#button-filter-request', function(){
    var url = 'index.php?route=quotemanager/quotation';
    var filter_id = $('input[name=\'filter_id\']').val();
    var filter_num_product = $('input[name=\'filter_num_product\']').val();
    var filter_added_from = $('input[name=\'filter_added_from\']').val();
    var filter_added_to = $('input[name=\'filter_added_to\']').val();
    var filter_status = $('select[name=\'filter_status\']').val();

    if(filter_id){
      url += '&filter_id=' + encodeURIComponent(filter_id);
    }
    if(filter_num_product){
      url += '&filter_num_product=' + encodeURIComponent(filter_num_product);
    }
    if(filter_added_from){
      url += '&filter_added_from=' + encodeURIComponent(filter_added_from);
    }
    if(filter_added_to){
      url += '&filter_added_to=' + encodeURIComponent(filter_added_to);
    }
    if(filter_status){
      url += '&filter_status=' + encodeURIComponent(filter_status);
    }
    location =  url;
  });

  $('.btn_cancel').on('click', function(){
    var url = $(this).attr('cancel');
    $('#modal-request-cancel').modal('show');
    $('#yes_cancel').on('click', function(){
      location = url;
    });
  });
</script>
<div id="modal-request-cancel" class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{ button_cancel }}</h4>
      </div>
      <div class="modal-body">
        <p>{{ text_confirm }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="yes_cancel">{{ text_yes }}</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_no  }}</button>
      </div>
    </div>
  </div>
</div>
{{ footer }}