{% extends 'D2BillingBundle::layout.html.twig' %}

{% set mode = 'edit' %}
{% set cur_sym = d2_config('currency_symbol') %}

{% block head_style_extra %}
<style type="text/css">
.symbol
{
    display: inline-block;
    width: 15px;
}
</style>
{% endblock head_style_extra %}

{% block head_script_extra %}
<script type="text/javascript">
var CUR_SYM = '{{ cur_sym }} ';

function calculateCustomerPrice( $tr )
{
    var data    = $tr.data('pricing');
    var type    = $('.type', $tr).val();
    var amount  = parseFloat($('.amount', $tr).val()) || 0;
    
    switch( type )
    {
        case 'percent':
            $( '.new_price', $tr ).html( CUR_SYM + $.number(parseFloat(data.price + (data.price * amount / 100)), 2) );
            break

        case 'fixed':
            $( '.new_price', $tr ).html( CUR_SYM + $.number(parseFloat(data.price + amount), 2) );
            break;
            
        default:
            $( '.new_price', $tr ).html( '' );
            break;
    }
}

function setSymbol( $tr )
{
    switch( $('.type', $tr).val() )
    {
        case 'percent':
            $('.symbol', $tr).html( '%' );
            break

        case 'fixed':
            $('.symbol', $tr).html( {{ d2_config('currency_symbol') }} );
            break;
            
        default:
            $('.symbol', $tr).html( '' );
            break;
    }
}

function checkValidate( $tr )
{
    if( $('.type', $tr).val() != '' || $('.amount', $tr).val() != '' )
    {
        $('.type', $tr).attr('required', 'required');
        $('.amount', $tr).attr('required', 'required');
    }
    else
    {
        $('.type', $tr).removeAttr('required');
        $('.amount', $tr).removeAttr('required');
    }
}

$(function() {
    $('.type', '.cust_pricing').on('change', function() {

        var $this   = $( this );
        var $tr     = $( $this.parents('tr').get(0) );
        
        setSymbol( $tr );

        $('.amount', $tr).val( '' );
        
        calculateCustomerPrice( $tr );
        checkValidate( $tr );
    });

    $('.amount', '.cust_pricing').on('keyup', function() {
        
        var $this   = $( this );
        var $tr     = $( $this.parents('tr').get(0) );
        
        calculateCustomerPrice( $tr );
        checkValidate( $tr );
    });

    $('tr', '.cust_pricing').each(function() {
        setSymbol( $(this) );    
        calculateCustomerPrice( $(this) );
        checkValidate( $(this) );
    });
});

</script>
{% endblock head_script_extra %}


{% block page_header %}
<div class="row">
	<div class="col-md-12">
		<div class="pull-right">
			<a href="{{ path('customer_accounts') }}" class="btn btn-sm btn-default">Back</a>
		</div>
		<div class="clearfix"></div>
		<hr/>
		<form class="filter_form form-inline pull-right" role="form" method="get">
			{% for k, v in app.request.query %}
				{% if k|lower not in ['search', 'category'] %}
					<input type="hidden" name="{{ k }}" value="{{ v }}" />
				{% endif %}
			{% endfor %}
			<div class="filter">
				<label for="category">Category</label>
				<input type="text" class="form-control" name="category" id="category" placeholder="Search for" value="{{ app.request.get('category') }}">
				<label for="search">Search</label>
				<input type="text" class="form-control" name="search" id="search" placeholder="Search for" value="{{ app.request.get('search') }}">
				
				<div class="btn-group">
					<button type="submit" class="btn btn-default">Go</button>
					<button type="button" class="btn btn-default clear_filter">Clear</button>
				</div>
			</div>
		</form>
		<div class="clearfix"></div>
		<div>Account Pricing - {{ entity.displayName}}</div>
	</div>
</div>
{% endblock page_header %}

{% block content %}
<div class="row">
	<div class="col-md-offset-1 col-md-10">
		<form method="post" action="{{ path('account_pricing_edit', app.request.query.all|merge({id: entity.id})) }}" style="position: relative;">
			<div style="position:absolute; right: 0px; top:-20px;">
				<small>All prices are excluding VAT</small>
			</div>
		
			<table class="table table-condensed cust_pricing">
				<tr>
					<th></th>
					<th>Sales Code</th>
					<th>Item Description</th>
					<th>Item Category</th>
					<th>Default Price</th>
					<th>Customer Price</th>
					<th>Type</th>
					<th>Price Increase</th>
					<th>New Price</th>
				</tr>
					
				{% for item in data %}
					<tr data-pricing='{"base": {{ item.inv.basePrice }}, "price": {{ item.inv.price }} }'>
						<td>
							<input type="hidden" name="pricing[{{ item.inv.id }}][line]" value="{{ item.line }}" />
							{{ item.line }}.
						</td>
						<td>
							{% if is_granted('ROLE_INV_ITEM_VIEW') %}
								<a href="{{ path('sales_item_show', {id: item.inv.id}) }}">{{ item.inv.salesCode }}</a>
							{% else %}
								{{ item.inv.salesCode }}
							{% endif %}
						</td>
						<td>
							{% if is_granted('ROLE_INV_ITEM_VIEW') %}
								<a href="{{ path('sales_item_show', {id: item.inv.id}) }}">{{ item.inv.description }}</a>
							{% else %}
								{{ item.inv.description }}
							{% endif %}
						</td>
						<td>
							{% if is_granted('ROLE_INV_CAT_VIEW') %}
								<a href="{{ path('sales_item_category_show', {id: item.inv.category.id}) }}">{{ item.inv.salesCategory }}</a>
							{% else %}
								{{ item.inv.salesCategory }}
							{% endif %}
						</td>
						<td class="default_price">
							{{ cur_sym }} {{ item.inv.basePrice|number_format(2, '.', ',') }}
						</td>
						<td class="customer_price">
							{{ cur_sym }} {{ item.inv.price|number_format(2, '.', ',') }}
						</td>
						<td>
							<select class="type" name="pricing[{{ item.inv.id }}][type]">
								<option value=""></option>
								{% for key, value in typeOptions %}
									<option value="{{ key }}"{{ key == item.type ? ' selected="selected"' : '' }}>{{ value }}</option>
								{% endfor %}
							</select>
						</td>
						<td>
							<label class="symbol">{{ item.type == 'percent' ? '%' : (item.type == 'fixed' ? cur_sym : '') }}</label>
							<input type="text" class="amount" name="pricing[{{ item.inv.id }}][val]" value="{{ item.val }}" />
						</td>
						<td class="new_price"></td>
					</tr>
				{% endfor %}

			</table>
			
		<div>
			<input class="btn btn-lg btn-default pull-right" type="submit" value="Create" />
		</div>
			
		</form>
	</div>
</div>
{% endblock %}