{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-add_quotation" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
                {% endfor %}
            </ul>
            {% if error_warning is defined and error_warning %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
            {% endif %}
            {% if error_product is defined and error_product %}
            <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 %}
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-add_quotation" class="form-horizontal">
                  <input type="hidden" name="request_status" value="{% if request_status is defined %}{{ request_status }}{% endif %}">
                  <input type="hidden" id="request_id" name="request_id" value="{% if quotation_request['id'] is defined and quotation_request['id'] %}{{ quotation_request['id'] }}{% else %}{{ '0' }}{% endif %}">
                  <div class="panel-group" id="quotation">
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#quotation" href="#store-details">{{ customer_details }}</a>
                        </h4>
                      </div>
                      <div id="store-details" class="panel-collapse collapse  {% if active_class is not defined %} {{ 'in' }}{% endif %}" {% if active_class is defined %} {{ "aria-expanded='false'" }}{% endif %}>
                        <!--Customer Details  -->
                        <div class="panel-body">
                          <div class="form-group">
                              <label class="col-sm-2 control-label" for="input-store">{{ column_store }}</span></label>
                              <div class="col-sm-10">
                                  <select name="store" id="input-store" class="form-control">
                                    {% if stores is defined and stores %}
                                      {% for store in stores %}
                                          <option {% if quotation_request['store_id'] is defined and quotation_request['store_id'] == store['store_id'] %} {{ 'selected' }} {% endif %} value="{{ store['store_id'] }}">{{ store['name'] }}</option>
                                        {% endfor %}
                                       {% elseif quotation_request['store_name'] is defined and quotation_request['store_id'] is defined %}
                                      <option value="{{ quotation_request['store_id'] }}">{{ quotation_request['store_name'] }}</option>
                                      <option value='0'>{{ store_default  }}</option>
                                     {% endif %}
                                  </select>
                              </div>
                          </div>
                          <div class="form-group required">
                            <label for="customer_email" class="col-sm-2 control-label">{{ column_customer_email }}</label>
                            <div class="col-sm-10">
                              <div class="input-group">
                                <span class="input-group-addon">
                                  <span class="fa fa-angle-double-down"></span>
                                </span>
                              <input type="text" class="form-control" id="customer_email" placeholder="{{ placeholder_customer_email }}" value="{% if customer['email'] is defined and customer['email'] %}{{ customer['email'] }} {% endif %}" {% if active_class is defined and active_class %} {{ 'readonly' }}{% endif %}{% if quotation_request['id'] is defined and quotation_request['id'] %} {{ 'readonly' }}{% endif %}>
                              </div>
                              {% if error_customer is defined and error_customer %}
                              <div class="text-danger">{{ error_customer }}</div>
                              {% endif %}
                            </div>
                          </div>
                          <div class="form-group">
                              <label class="col-sm-2 control-label" for="customer_group">{{ column_customer_group }}</span></label>
                              <div class="col-sm-10">
                                  <input type="text" class="form-control" name="customer_group" id="customer-group" placeholder="{{ column_customer_group }}" value="{% if customer['name'] is defined and customer['name'] %}{{ customer['name'] }}{% endif %}" readonly/>
                              </div>
                          </div>
                          <div class="form-group">
                            <label class="col-sm-2 control-label" for="customer_name">{{ column_customer_name }}</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="customer_name" value="{% if customer['firstname'] is defined and customer['firstname'] %}{{ customer['firstname'] }}{% endif %}" placeholder="{{ placeholder_customer_name }}" readonly>
                              <input type="hidden" id="customer_id" name="customer_id" value="{% if customer['customer_id'] is defined and customer['customer_id'] %}{{ customer['customer_id'] }}{% endif %}">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="customer_phone" class="col-sm-2 control-label">{{ column_customer_phone }}</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" name="" id="customer_phone" placeholder="{{ placeholder_customer_phone }}" value="{% if customer['telephone'] is defined and customer['telephone'] %}{{ customer['telephone'] }}{% endif %}" readonly>
                            </div>
                          </div>
                          <div class="pull-right">
                            <a class="btn btn-primary" style="{% if customer is defined and customer %}{{ 'display:none;' }}{% endif %}" id="button_customer_continue" data-toggle="collapse" data-parent="#quotation" href="#collapse2">{{ button_next }}&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Product Details -->
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" id="acollapse2" data-parent="#quotation" href="#collapse2">{{ product_details  }}</a>
                        </h4>
                      </div>
                      <div id="collapse2" class="panel-collapse collapse {% if active_class is defined and active_class %}{{ 'in' }}{% endif %}">
                        <div class="panel-body">
                            {% if products is defined and products %}
                            <table class="table table-responsive table-bordered">
                              <thead>
                                <tr class="product-details-heading">
                                  <th class="text-center">{{ column_image  }}</th>
                                  <th class="text-left">{{ column_product  }}</th>
                                  <th class="text-left">{{ column_model  }}</th>
                                  <th class="text-left">{{ column_quantity  }}</th>
                                  <th class="text-left">{{ column_unit_price  }}</th>
                                  <th class="text-left">{{ column_request_price  }}</th>
                                  <th class="text-left">{{ column_total  }}</th>
                                  <th class="text-left">{{ column_request_total  }}</th>
                                  <th class="text-center">{{ column_action  }}</th>
                                </tr>
                              </thead>
                              <tbody class="add_product">
                                {% for product in products %}
                                    <tr>
                                        <td class="text-center">
                                          <img src="{{ product['image'] }}" alt="{{ product['name'] }}">
                                        </td>
                                        <td class="text-left">{{ product['name'] }}</td>
                                        <td class="text-left">{{ product['model'] }}</td>
                                        <td class="text-left">{{ product['quantity'] }}</td>
                                        <td class="text-left">{{ product['price'] }}</td>
                                        <td class="text-left">{{ product['request_price'] }}</td>
                                        <td class="text-left">{{ product['total'] }}</td>
                                        <td class="text-left">{{ product['request_total'] }}</td>
                                        <td class="text-center"><a class = "btn btn-danger" data-toggle="tooltip" title="{{ text_remove  }}" href="{{ product['remove'] }}"><i class="fa fa-minus-circle"></i></a></td>
                                    </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                          {% endif %}
                          <div class="form-group required">
                            <label for="product_name" class="col-sm-2 control-label">{{ column_product }}</label>
                            <div class="col-sm-10">
                              <div class="input-group">
                                <span class="input-group-addon">
                                  <span class="fa fa-angle-double-down"></span>
                                </span>
                                <input type="text" class="form-control" id="product_name"  placeholder="{{ placeholder_product }}" value="{% if quotation_request['name'] is defined and quotation_request['name'] %}{{ quotation_request['name'] }}{% endif %}" >
                              </div>
                              <input type="hidden" id="product_id" value="{% if quotation_request['product_id'] is defined and quotation_request['product_id'] %}{{ quotation_request['product_id'] }}{% endif %}">
                              <div id="message-select-product"></div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="select_product" class="col-sm-2 control-label">{{ column_model }}</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="model"readonly>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="actual_price" class="col-sm-2 control-label">{{ column_unit_price }}</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="actual_price"readonly>

                            </div>
                          </div>
                          <div class="form-group">
                            <label for="text_quantity" class="col-sm-2 control-label"><span data-toggle="tooltip" title="{{ help_request_price }}">{{column_request_price}}></span></label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control"  id="request_price"  placeholder="{{ placeholder_request_price  }}">
                              <input type="hidden" id="unit-price" name="" value="">
                              <div id="message_request_price"></div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="text_quantity" class="col-sm-2 control-label"><span data-toggle="tooltip" title="{{ help_quantity }}" >{{ column_quantity }}</span></label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control"  id="product_quantity"  placeholder="{{ placeholder_quantity  }}">
                              <span id="message_quantity"></span>
                            </div>
                          </div>
                          <div class="pull-right">
                            <button type="button" class="btn btn-success"  id="add-product"><i class="fa fa-plus-circle"></i>&nbsp;{{ button_add_product  }}</button>
                            <a class="btn btn-primary" data-toggle="collapse" data-parent="#quotation" href="#collapse3">{{ button_next }}&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
                          </div>
                          <div class="pull-left">
                            <a class="btn btn-primary" data-toggle="collapse" data-parent="#quotation" href="#store-details"><i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;{{ button_back }}</a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Quotation Details -->
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#quotation" href="#collapse3">{{ quotation_details  }}</a>
                        </h4>
                      </div>
                      <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                          <div class="form-group">
                            <label for="comment_text" class="col-sm-2 control-label">{{ column_comment }}</label>
                            <div class="col-sm-10">
                              <textarea class="form-control" name="comment_text" id="comment_text" rows="5"  placeholder="{{ placeholder_comment  }}">{% if quotation_request['comment'] is defined and quotation_request['comment'] %}{{ quotation_request['comment'] }}{% endif %}</textarea>
                            </div>
                          </div>
                          <div class="pull-right">
                            <button class="btn btn-success" type="submit" form="form-add_quotation">{{ button_save }}</button>
                          </div>
                          &nbsp;&nbsp;
                          <div class="pull-left">
                            <a class="btn btn-primary" data-toggle="collapse" data-parent="#quotation" href="#collapse2"><i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;{{ button_back }}</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript"><!--

    // Input validation for product quantity
    $(document).ready(function(){
      var quantity = 1;
      var request_price ;
      $('#product_quantity').on('keyup', function(){
        var val1 = $(this).val();
        if(val1 == ''){
          $('#message_quantity').text('');
        }else if(val1 != parseInt(val1, 10)){
          $('#message_quantity').text("{{ text_message_digit  }}").addClass('text-danger');
        }else{
          quantity = val1;
          $('#message_quantity').text('');
        }
      });
      $('#request_price').on('keyup', function(){
         request_price = $(this).val();
        if(request_price == ''){
          $('#message_request_price').text('');
        }else if(request_price !=parseFloat(request_price, 10)){
          $('#message_request_price').text("{{ text_message_digit  }}").addClass('text-danger');
          return false;
        }else{
          $('#message_request_price').text('');
        }
      });

      $('#add-product').on('click', function(){
        if ($('#customer_id').val() == '') {
          $('#message-select-product').text('{{ text_select_customer }}').fadeIn().addClass('text-danger');
          return false;
        }
        var product_id        = $('#product_id').val();
        var customer_id       = $('#customer_id').val();
        var unit_price        = $('#unit-price').val();
        var request_id        = $('#request_id').val();
        var request_price     = $('#request_price').val();
        if(product_id == ''){
          $('#message-select-product').text('{{ text_select_product }}').addClass('text-danger');
          return false;
        }
        $.ajax({
          url :'index.php?route=quotemanager/quotations/addproduct&user_token={{ user_token }}',
          type : 'post',
          dataType :'json',
          data:{request_id:request_id, customer_id:customer_id, product_id:product_id, price:unit_price, quantity:quantity, request_price:request_price},
          success : function(json){
            if(json['redirect']){
              location = json['redirect'];
            }
          }
        });
      });
    });
    // Product autocomplete
  $('#product_name').autocomplete({
  	'source': function(request, response) {
  		$.ajax({
  			url: 'index.php?route=quotemanager/quotations/autocompleteProduct&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request) + '&store_id=' + encodeURIComponent($('#input-store').val()),
  			dataType: 'json',
  			success: function(json) {
  				response($.map(json, function(item) {
  					return {
  						label: item['name'],
  						value: item['product_id'],
              price: item['price'],
              model: item['model'],
              unit_price: item['unit_price'],
  					}
  				}));
  			}
  		});
  	},
  	'select': function(item) {
  		$('#product_name').val(item['label']);
      $('#product_id').val(item['value']);
      $('#actual_price').val(item['price']);
      $('#model').val(item['model']);
      $('#unit-price').val(item['unit_price']);
      $('#message-select-product').text('');
  	}
  });
// Customer Autocomplete

  $('#customer_email').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=quotemanager/quotations/autocompleteCustomer&user_token={{ user_token }}&filter_email=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: item['email_name'],
						value: item['customer_id'],
            email: item['email'],
            customer_group: item['customer_group_name'],
            telephone: item['contact'],
            name:item['name'],
					}
				}));
			}
		});
	},
	'select': function(item) {
		$('#customer_name').val(item['name']);
    $('#customer_id').val(item['value']);
    $('#customer_email').val(item['email']);
    $('#customer-group').val(item['customer_group']);
    $('#customer_phone').val(item['telephone']);
    $('#button_customer_continue').show();
	}
});
  $(document).ready(function() {
    $('.text-danger:first').parent().find('.form-control').focus();
  });
  $('#button_customer_continue').on('click', function(){
    if ($('#customer_id').val() !='') {
      $('#message-select-product').text('').addClass('text-danger');
    }
  });
  $('#acollapse2').on('click', function(){
    if ($('#customer_id').val() !='') {
      $('#message-select-product').text('').addClass('text-danger');
    }
  });
  //--></script>
</div>
{{ footer }}