@extends('layouts.merchant-backend-layout') 
@section('content')

<style type="text/css">
	
	.heading
	{
		font-size: 18px;
		font-weight: 700;
	}
	.coupon-heading
	{
		font-size: 18px;
		font-weight: 700;
	}
	.coupon-labels
	{
		margin-bottom: 20px;
	}
	.coupon-fields
	{
		margin-bottom: 10px;
	}
	.form-fields
    {
    	margin-bottom: 20px;
    }
	.uses
	{
		width:60px;
		border-radius: 4px;
		padding:5px;
		border:1px solid #cccccc
	}
</style>

<div class="content-wrapper">
 <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>eWallet Booklets</h1>
    </section>
     <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3>Create New  eWallet Booklet</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                    	<div class="container" style="width:100%">
                    	 	<form role="form" action="{{url('merchant/ebooklet')}}" class="ebooklet-form" method="post">
								<div class="row">
								  	<div class="col-lg-6">
									 	<div class="form-group">
								            <label for="booklet_name" class="heading">Booklet Name</label>
								            <input type="text" class="form-control" id="booklet_name" placeholder="Enter Booklet Name (Max 40 characters)" name="booklet_name" maxlength="40">
								        </div>
								  	</div>
								  	<div class="col-lg-1"></div>
								  	<div class="col-lg-5">
								  		<div class="form-group">
								            <label for="booklet_price" class="heading">Booklet Price</label>
								            <input type="text" class="form-control" id="booklet_price" placeholder="Enter the Booklet price" name="booklet_price" onkeypress="return isNumberKey(event)">
								        </div>
								  	</div>
								</div>
								<div class="row">
								  	<div class="col-lg-3">
									 	<div class="form-group">
								            <label for="credit" class="heading">Top Up Value</label>
								            <input type="text" class="form-control" id="credit" placeholder="Enter topup value" name="credit"  onkeypress="return isNumberKey(event)"> 
								        </div>
								  	</div>
								  	<div class="col-lg-2">
								  		<div style="padding-top:40px;">Credits.</div>
									</div>
								  	<div class="col-lg-2"></div>
								  	<div class="col-lg-3">
								  		<div class="form-group">
								            <label for="credit_validity" class="heading">Validty Of Credits</label>
								            <input type="text" class="form-control" id="credit_validity" placeholder="Enter the validty" name="credit_validity" onkeypress="return isNumberKey(event)">
								        </div> 
								  	</div>
								  	<div class="col-lg-2">
								  		<div style="padding-top:40px;">Days.</div>
									</div>
								</div>
								<div><button class="btn btn-primary save-booklet">Save</button></div>
							</form>
                    	</div>
                    	 <!-- /.container -->
                	</div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
</div>
@stop

@section('scripts')
<script>

$(".save-booklet").click(function(e)
{
	e.preventDefault();

	var booklet_name = $("#booklet_name").val();
	var booklet_price = $("#booklet_price").val();
	var credit = $("#credit").val();
	var credit_validity = $("#credit_validity").val();

	if(booklet_name=="")
	{
		alert("Booklet name is mandatory");
	}
	else if(booklet_price=="")
	{
		alert("Booklet price is mandatory");
	}
	else if(credit=="")
	{
		alert("Topup value is mandatory");
	}
	else if(credit_validity=="")
	{
		alert("Credit validity is mandatory");
	}
	else
	{
		$(".ebooklet-form").submit();
	}

});

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {
        return false;
    }
    else
    {
    	return true;
    }
}    

</script>
@stop