{{ header }}
<style media="screen">
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-left {
    text-align: left;
  }

</style>
<div id="container" class="container j-container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
    {% endfor %}
  </ul>
    {% if (success is not empty) %}
      <div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    {% if (error_product is not empty) %}
      <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_product }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
  {% if (status == 4) %}
  <h4 class="alert alert-success text-center success">{{ text_approval }}<h4>
  {% elseif (status == 3) %}
    {% if (order_completed) %}
      <h4 class="alert alert-success text-center success">{{ text_order_completed }}<h4>
    {% else %}
      <h4 class="alert alert-success text-center success">{{ text_submitted_order }}<h4>
    {% endif %}
  {% elseif (status == 2) %}
    <h4 class="alert alert-danger text-center warning">{{ text_cancelled_quote }}<h4>
  {% elseif (status == 1) %}
    <h4 class="alert alert-success text-center success">{{ text_place_order }}<h4>
  {% endif %}
  <div class="row">{{ column_left }}
    {% 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 }}">{{ content_top }}
        <div class="col-sm-12">
          <h2 style="display:inline">{{ heading_title }}</h2>
          <a href="{{ back }}" class="btn btn-default pull-right" style="margin:0 0 1% 0"><i class="fa fa-mail-reply">&nbsp;{{ button_back }}</i></a>
        </div>
			<table class="table table-bordered table-hover list">
				<thead>
					<tr>
						<th>{{ column_id }}</th>
            <th>{{ column_status }}</th>
            <th><{{ column_added_date }}</th>
					</tr>
				</thead>
        <tbody>
          <tr>
            <td>{{ "#"~quotation_id }}</td>
            <td>{% if (status == 1) %} {{ text_approved }} {% elseif (status == 2 ) %} {{ text_cancelled }} {% elseif (status == 3 ) %} {% if (order_completed) %} {{ text_completed }} {% else %} {{ text_submitted }} {% endif %} {% elseif (status == 4 ) %} {{ text_under_review }} {% endif %}</td>
            <td>{{ added_date }}</td>
          </tr>
        </tbody>
			</table>
      <br />
      <div class="table-responsive">
        <table class="table table-bordered table-hover list">
            <thead>
              <tr>
                <th class="text-center">{{ column_image }}</th>
                <th>{{ column_product_name }}</th>
                <th>{{ column_model }}</th>
                <th>{{ column_quantity }}</th>
                <th>{{ column_price }}</th>
                <th>{{ column_total }}</th>
                <th>{{ column_requested_price }}</th>
                <th>{{ column_requested_total }}</th>
                <th>{{ column_approved_price }}</th>
                <th>{{ column_approved_total }}</th>
                {% if (status == 4 ) %}
                <th>{{ column_action }}</th>
                {% endif %}
              </tr>
            </thead>
            <tbody>
        {% if (products is defined) %}
 {% for product in products %}
                  <tr>
                    <td class="text-center"><img src="{{ product['image'] }}"/></td>
                    <td><a href="{{ product['product'] }}">{{ product['name'] }}</a></td>
                    <td>{{ product['model'] }}</td>
                    <td>{{ product['quantity'] }}</td>
                    <td>{{ product['price'] }}</td>
                    <td>{{ product['total'] }}</td>
                    <td>{% if (modified_by == 1 and product['request_price1'] == 0) %}
                      <div class="input-group btn-block" style="max-width: 250px;">
                        <input type="text" class="form-control request" id="{{ product['id'] }}" placeholder="{{ request_price_placeholder}}"/>
                        <span class="input-group-btn"><button pid="{{ product['id'] }}"  type="button" data-toggle="tooltip" title="{{ text_request_price }}" class="btn btn-default request_price"><i class="fa fa-refresh"></i></button><span>
                      </div>
                      <span id="message{{ product['id'] }}"></span>
                    {% else %}
 {{ product['request_price'] }}
 {% endif %}</td>
                    <td>{{ product['request_total'] }}</td>
                    <td>{{ product['approved_price'] }}</td>
                    <td>{{ product['approved_total'] }}</td>
                    {% if (status == 4 ) %}
                    <td><button qid="{{ quotation_id }}" pid="{{ product['product_id'] }}" type="button" class="btn btn-danger product_quote" data-toggle="tooltip" title="{{ text_remove_product }}" name="button"><i class="fa fa-minus-circle"></i></button></td>
                    {% endif %}
                  </tr>
          {% endfor %}
        {% endif %}
            </tbody>
            <tfoot>
              <tr>
                <td colspan="5" class="text-right">{{ column_total }}</td>
                <td class="text-left">{{ total }}</td>
                <td class="text-right">{{ column_requested_total }}</td>
                <td class="text-left">{{ request_total }}</td>
                <td class="text-right">{{ column_approved_total }}</td>
                <td colspan="2" class="text-left">{{ approved_total }}</td>
              </tr>
            </tfoot>
          </table>
      </div>
      <br />
      {% if (status == 1) %}
      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_order }}</a></div>
      </div>
      {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script type="text/javascript">
  $('.request').on('keyup', function(){
    var request_price = $(this).val();
    var id = $(this).attr('id');
    if(request_price==''){
      $('#message'+id+'').text("");
    }else if (request_price != parseFloat(request_price, 10)){
      $('#message'+id+'').text("{{ text_only_digits }}").css({'color':'red'});
      return false;
    }else{
      $('#message'+id+'').text("");
    }
  });

  $('.request_price').on('click', function(){
    var id = $(this).attr('pid');
    var price = parseFloat($('#'+id).val());
    $.ajax({
      url:'index.php?route=quotemanager/product/requestprice',
      type:'post',
      dataType:'json',
      data:{id:id, price:price},
      success:function(response){
        if(response['success'] == 'success'){
          location.reload();
        }
      }
    });

  });
  $(document).ready(function(){
    $('.product_quote').on('click', function(){
      var pid = $(this).attr('pid');
      var qid = $(this).attr('qid');
        $('#modal-remove-product').modal('show');
        $('#yes_remove').on('click', function(){
          $.ajax({
           url : 'index.php?route=quotemanager/quotation/removeproduct',
           type : 'post',
           dataType: 'json',
           data:{pid:pid, qid:qid},
           success:function(json){
             if(json['redirect']){
               location = json['redirect'];
             }
           }
         });
        });
    });
  });
  function getTimezoneName() {
      timezone = jstz.determine()
      return timezone.name();
  }
  document.cookie = 'quotation_customer_timezone=' + getTimezoneName() + ';' + 'expires=' + 24*3600;
</script>
<div id="modal-remove-product" 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">{{ text_remove_product }}</h4>
      </div>
      <div class="modal-body">
        <p>{{ text_confirm }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" name="button" class="btn btn-primary" data-dismiss="modal" id="yes_remove">{{ text_yes }}</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_no }}</button>
      </div>
    </div>
  </div>
</div>
{{ footer }}