@extends('layouts/microfin_layout')
@section('title', '| Add Monthly Collection Type')
@section('content')
	<style type="text/css">
		#rootwizard .panel-body .row {
			margin-bottom: 10px;
		}
		#rootwizard, 
		#rootwizard .form-control {
			font-size: 11px !important;
			padding: 5px !important;
		}
		/*#rootwizard input[type='text']{
			height: 18px !important;
		}*/
		#rootwizard label {
			margin-bottom: 0 !important;
			color: #555 !important;
		}
		.validate-has-error {
			color: #FF0000;
		}
		.error{
			color: red;
		}

		#valueTable thead tr th{
			padding: 2px;
		}
		#valueTable tbody tr td{
			height: 5px !important;
			padding: 0px;
		}
		#valueTable thead tr th:nth-child(2){
			width: 70px;
		}
		.removeButton{
			padding: 5px;
		}
		
	</style>


	@php
		use \App\Http\Controllers\microfin\savings\MfnSavingsDepositTypeController as createForm;
	@endphp




	<div class="row add-data-form">
		<div class="col-md-12">
            <div class="col-md-10 col-md-offset-1 fullbody">
            	<div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('viewMfnSavingsMonthlyCollectionType/') }}" class="btn btn-info pull-right addViewBtn">
                    	<i class="glyphicon glyphicon-th-list viewIcon"></i>
                    	Monthly Collection Type List
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                	<div class="panel-heading">
                        <div class="panel-title">New Monthly Collection Type</div>
                    </div>
                    <div class="panel-body">
                    	<div class="row">
							
							{!! Form::open(array('url' => '', 'role' => 'forl', 'id' => 'rootwizard', 'class' => 'form-horizontal form-groups', 'novalidate' => '')) !!}
								
								{{-- <div class="progress-indicator">
									<span></span>
								</div> --}}
								<div class="tab-content no-margin">
									<div class="tab-pane with-bg active" id="fwv-1">
										<div class="panel panel-default" style="padding:0!important;">
											{{-- <div class="panel-heading" style="padding:5px 10px;background:#708090;color:#FFF;border-bottom:none!important">Member</div> --}}
											<div class="panel-body" style="padding:5px 10px;">
												<div class="row">
													
													<div class="col-xs-8">

									                   {!! createForm::text('name','','Name:',['id'=>'name']) !!}
									                   <div class="form-group">
									                   
									                        {!! Form::label('value', 'Value:', ['class' => 'col-sm-4 control-label']) !!}
								                            <div class="col-sm-7">
								                            

								                            	
									                            {!! Form::text('value', $value = null, ['class' => 'form-control', 'id' => 'value','placeholder'=>'Enter name without comma (,)']) !!}
									                       		 
								                            </div>
								                            <div class="col-sm-1" style="padding-left: 0px;">
								                            	<input style="text-align:center;border-radius:0;" id="addValue" class="form-control btn btn-primary btn-xs" type="button" value="Add">								                            	
								                            </div>
								                        
								                        </div>	
								                        

								                        <div class="form-group">
									                        {!! Form::label('values', 'Values:', ['class' => 'col-sm-4 control-label']) !!}
								                            <div class="col-sm-8">
									                           <table id="valueTable" class="table table-striped table-bordered">
									                           	<thead>
									                           		<tr>
									                           			<th>Value</th>
									                           			<th>Action</th>
									                           		</tr>
									                           	</thead>
									                           	<tbody></tbody>
									                           </table>
								                            </div>								                            
								                        </div>						                    
									                   						                    
									                   {!! createForm::select('status',['1'=>'Active','0'=>'Inactive'],'1','Status:',['id'=>'status']) !!}							                    
									                 			                    
									                   
									                    <ul class="pager wizard pull-right">										
															{!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
														</ul>

													</div>{{-- End First Column --}}

													{{-- Second Coloum --}}
													<div class="col-xs-4" style="height: 80%;position: absolute;right: 0;bottom: 0px;">
													<img src="images/catalog/image15.png" width="90%" height="100%" style="float:right;position: absolute; filter: opacity(30%);bottom: 0;">
													</div>
													
													
													
												</div>
												

												
											</div>
										</div>
										
									
									</div>
									
									
								</div>
							{!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>

<script type="text/javascript">
	$(document).ready(function() {

		/*Form*/
		$('form').submit(function(event){
            event.preventDefault();
            $("#submit").prop('disabled',true);
            //alert($('form').serialize());

            $.ajax({
                type: 'post',
                url: './storeMfnSavingsMonthlyCollectionType',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                	//alert(JSON.stringify(_response));
                	$(".error").remove();
                    if(_response.errors) {
                    	$("#submit").prop('disabled',false);
                    	$.each(_response.errors, function(name, error) {
                    		 $("#"+name).after("<p class='error'>* "+_response.errors[name]+"</p>");
                    	});
                    } 
                    else {
                        $('#name').val('');
                       
                        toastr.success(_response.responseText, _response.responseTitle, opts);
                        
                        setTimeout(function(){
                            window.location.href = '{{ url('viewMfnSavingsMonthlyCollectionType/') }}';
                        }, 3000);
                    }
                },
                error: function(_response) {
                	$("#submit").prop('disabled',false);
                    alert('Response Error');
                }
            });

        });
        /* End Form*/

        /*Hide Errors On Filed input or Change*/
        $(document).on('input', 'input', function() {
        	$(this).closest('div').find('.error').remove();
        });
        $(document).on('change', 'select', function() {
        	$(this).closest('div').find('.error').remove();
        });
        /*End Hide Errors On Filed input or Change*/


        /*Add value to the value table*/
        $("#addValue").click(function(event) {
        	var value = $("#value").val();

        	if (value!=null) {
        		var markUp = "<tr style='line-height:1.42857143 !important;'><td style='height:5px !important;'><input type='text' name='values[]' value='"+value+"' style='display:none;'>"+value+"</td><td><input style='text-align:center;border-radius:0;' class='form-control btn btn-primary btn-xs removeButton' type='button' value='Remove'></td></tr>";
        		$("#valueTable tbody").append(markUp);
        	}

        	$("#value").val('');
        });
        /*End Add value to the value table*/

        /*Remove Button*/
        $(document).on('click', '.removeButton', function(event) {
			$(this).closest('tr').remove();        	
        });
        /*End Remove Button*/

        $(document).on('input', '#value', function(event) {
        	this.value = this.value.replace(/[,]/g, '').replace(/(\..*)\./g, '$1');        	      	
        });


	}); /*End Ready*/
</script>

@endsection