{check_auth context="admin" roles="ADMIN" permissions="admin.coupon.view" login_tpl="/admin/login"}

{$page_title={intl l='Coupon'}}

{$thelia_page_css_file = "assets/bootstrap-editable/css/bootstrap-editable.css"}

{include file='includes/header.inc.html'}

<section id="wrapper" class="container">

    <nav>
        <ul class="breadcrumb">
            {include file="includes/coupon_breadcrumb.html"}
        </ul>
    </nav>
    
    <div class="page-header">
        <h1>Coupons : <small>Add a coupon</small></h1>
    </div>

    <section class="row-fluid">
		<div class="span12 general-block-decorator">
			
			<form action="#" method="post">
				
				<div class="span4">			
					<div class="control-group">
					    <label for="code">Code :</label>
					    <input id="code" type="text" name="code" placeholder="code">
				    </div>
				
					<div class="control-group">
					    <label for="title">Title :</label>
					    <input id="title" type="text" name="title" placeholder="title">					
				  	</div>

				  	<div class="control-group">
						<label for="cumulative" class="checkbox">
							<input id="cumulative" type="checkbox" name="cumulative" value="1">
							Is cumulative ?
						</label>
					</div>

					<div class="control-group">
						<label for="renoving-shortage" class="checkbox">
							<input id="renoving-shortage" type="checkbox" name="renoving-shortage" value="1">
							Is renoving shortage ?
						</label>
					</div>

					<div class="control-group">
						<label for="expiration-date">Expiration date :</label>
					    <div class="input-append date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
	  						<input type="text" id="expiration-date" value="12/02/2012">
	  						<span class="add-on"><span class="icon-th"></span></span>
						</div>
					</div>

					<div class="control-group">
					    <label for="usable-max">Usable max :</label>
					    <input id="usable-max" type="text" name="usable-max" placeholder="usable max">					
				  	</div>
				</div>
				
				<div class="span8">
					<div class="control-group">
					    <label for="effect">Effect :</label>
					    <select name="effect" id="effect" class="span6">
					    	<option value="1" data-description="More description n°1 about item">Remove x percents for category Y</option>
					    	<option value="2" data-description="More description n°2 about item">Remove x percents</option>
					    	<option value="3" data-description="More description n°3 about item">Remove x amount</option>
					    </select>
					    <span class="help-block">More description n°1 about item</span>
				    </div>
				</div>

			</form>

		</div>
	</section>

</section> <!-- #wrapper -->

{include file='includes/js.inc.html'}

{javascripts file='../assets/bootstrap-datepicker/js/bootstrap-datepicker.js'}
	<script src="{$asset_url}"></script>
{/javascripts}

<script>
	$(function($){

		// -- Init datepicker --
		$('.date').datepicker();

		// -- Effect description
		var $effectSelect 	= $('[name=effect]'),
			$helpBlock 		= $effectSelect.next('.help-block');

		$effectSelect.change(function(){			
			var description = $(this).find(":selected").data('description');			
			$helpBlock.text(description);
		});
	});
</script>

{include file='includes/footer.inc.html'}