@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>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 Booklet</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                    	<div class="container">
                    	 	<form role="form" action="{{url('merchant/booklet')}}" class="create-booklet" 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-3">
								  		<div class="form-group">
								            <label for="booklet_value" class="heading">Booklet Value</label>
								            <input type="text" class="form-control" id="booklet_value" placeholder="Enter the Booklet value" name="booklet_value" onkeypress="return isNumberKey(event)">
								        </div>
								  	</div>
								  	<div class="col-lg-2">
								  		<div style="padding-top:40px;">Credits</div>
									</div>
								</div>
								<div class="row">
								  	<div class="col-lg-6">
								      	<div class="row" style="margin-top:20px;">
								      		<div class="col-lg-6">
								      			<div class="coupon-heading">Coupons</div>
								      		</div>
								      		<div class="col-lg-6">
								      			<div class="coupon-heading">Uses</div>
								      		</div>
								  		</div>
								  		<hr>
								      									      	@foreach($tokens as $token)
								      		@if($availibility[$i]!="0")
									          	<div class="row">
									          		<div class="col-lg-6">
									          			<div class="row coupon-fields">
										          			<div class="col-lg-2">
										          				<input type="checkbox" name="coupons[]" value="{{$token->id}}"> 
									          				</div>
									          				<div class="col-lg-10">
										          				<span style="font-weight:700;">{{$token->name}}</span>
									          				</div>
									          			</div>
									          		</div>
									          		<div class="col-lg-6">
									          			<div class="row">
										          			<div class="col-lg-3">
										          			@if($availibility[$i]=="unlimited")
										          					<div class="coupon-fields"><input type="textbox" class="uses" id="{{$token->id}}" data-availibility="10000000000000000000" name="{{$token->id}}" onkeypress="return isNumberKey(event)"></div>
									          				@else
										          				
																	<div class="coupon-fields"><input type="textbox" class="uses" id="{{$token->id}}" data-availibility="{{$availibility[$i]}}" name="{{$token->id}}" onkeypress="return isNumberKey(event)"></div>
										          				
									          				@endif
									          				</div>
									          				<div class="col-lg-9">
										          				<span style="color:green;">({{$availibility[$i]}} uses available)</span>
									          				</div>
								          				</div>
									          		</div>
									      		</div>
								      		@else
								      		@endif
								      										  		@endforeach
								  	</div>
								  	<div class="col-lg-6"></div>
								</div>
								<div><button class="btn btn-primary save-booklet">Save</button></div>
								</div>
							</form>
                    	</div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
</div>
@stop

@section('scripts')
<script>

var validate1 = false;
var validate2 = false;
var validate3 = false;

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

	var booklet_name = $("#booklet_name").val();
	var booklet_value = $("#booklet_value").val();

	if(booklet_name=="")
	{
		alert("Booklet name is mandatory");
	}
	else if(booklet_value=="")
	{
		alert("Booklet value is mandatory");
	}
	else if($('input[type="checkbox"]:checked').length == 0)
	{
		alert("Booklet must contain atleat one coupon");
	}
	else
	{
		$('input[type="checkbox"]:checked').each(function() 
		{
		   	var coupon_id = $(this).val();
		   	var uses = $("#"+coupon_id).val();
		   	var uses2 = parseInt($("#"+coupon_id).val());
	   		var availibility =  parseInt($("#"+coupon_id).attr('data-availibility'));

		   	if(uses=="")
		   	{
		   		validate1 = false;
		   		return false;
		   	}
		   	else if(uses2<1)
		   	{
		   		validate1 = true;
		   		validate2 = false;
		   		return false;
		   	}
		   	else if(uses2>availibility)
		   	{
		   		validate2 = true;
		   		validate3 = false;
		   		return false;
		   	}
		   	else
		   	{
		   		validate1 = true;
		   		validate2 = true;
		   		validate3 = true;
		   	}

		});

		if(!validate1)
		{
			alert("No. of uses is mandatory for selected coupons.");
		}
		else if(!validate2)
		{
			alert("Uses cannot be 0");
		}
		else if(!validate3)
		{
			alert("You cannot allot more uses than what is available for a coupon.");
		}
		else
		{
			$(".create-booklet").submit();
		}

	}
});

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

$(".uses").focusout(function()
{
	var value = $(this).val();
	var availibility = parseInt($(this).attr('data-availibility'));
	var valid_format = /^[1-9]\d*$/;

	if((value!="")&&(!value.match(valid_format)))
	{
		alert("Uses cannot be 0");
	}
	else if((value!="")&&(value>availibility))
	{
		alert("You cannot allot more uses than what is available for a coupon.");
	}
});

</script>
@stop