@extends('backend.layouts.app')
@section('content')
@php
	$months = array();
	for($i = 1; $i <= 12; $i++){
		$month = date('F', strtotime('2000-'.$i.'-01'));
		$months[$month] = $month;
	}
	$yearOptions = array();
	for($year = 2000; $year <= date('Y')+2; $year++){
		$yearOptions[$year] = $year;
	}
@endphp
<div class="container-fluid">
	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder">
				<h1 class="main-title float-left">Generate Monthly Locker Bill</h1>
				<ol class="breadcrumb float-right">
					<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
					<li class="breadcrumb-item"><a href="{{ route('golf-operation') }}">Golf Operation</a></li>
					<li class="breadcrumb-item"><a href="{{ route('golf-operation.monthly-subscriptions') }}">Monthly Subscriptions</a></li>
					<li class="breadcrumb-item active">Generate Monthly Locker Bill</li>
				</ol>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div class="col-xl-12">
		<div class="row" style="min-height: 470px;">			
			<div class="col-sm-7">
				<div class="card card-success">
					<form action="{{route('golf-operation.monthly-subscriptions.store-monthly-locker-invoice')}}" method="post" id="bill-generate-form">
						@csrf						
						<div class="card-header with-border">
							<h3 class="card-title">Bill Generation</h3>
						</div>
						<div class="card-body">
							<div class="col-sm-12">
								<div class="form-group row">
									<label class="control-label col-sm-2">Member</label>
									<div class="col-sm-10">
										<select class="form-control billMember" name="member" id="monthly-generate-mem">
											<option value="all" selected="selected">All</option>
										</select>
									</div>
								</div>
								<div class="form-group row">
									<label class="control-label col-sm-2">From Year:<span class="text-danger">*</span></label>
									<div class="col-sm-4">
										<select class="form-control select2" name="bill_year" required="">
											<option value="">Select Year</option>
											{!!create_dropdown_option($yearOptions, date('Y'))!!}
										</select>
									</div>
									<label class="control-label col-sm-2 text-right">To Year:<span class="text-danger">*</span></label>
									<div class="col-sm-4">
										<select class="form-control select2" name="bill_year_to" required="">
											<option value="">Select Year</option>
											{!!create_dropdown_option($yearOptions, date('Y'))!!}
										</select>
									</div>									
								</div>
								<div class="form-group row">
									<label class="control-label col-sm-2">From Month:<span class="text-danger">*</span></label>
									<div class="col-sm-4">
										<select class="form-control select2" name="bill_month" required="">
											<option value="">Select Month</option>
											{!!create_dropdown_option($months, date('F'))!!}
										</select>
									</div>
									<label class="control-label col-sm-2 text-right">To Month:<span class="text-danger">*</span></label>
									<div class="col-sm-4">
										<select class="form-control select2" name="bill_month_to" required="">
											<option value="">Select Month</option>
											{!!create_dropdown_option($months, date('F'))!!}
										</select>
									</div>									
								</div>								
							</div>
							
						</div>
						<div class="card-footer">
							<button id="generate-btn" class="btn btn-warning float-right" type="submit">Generate</button>
							<div class="clearfix"></div>
						</div>
					</form>
				</div>	
			</div>
			
			<div class="col-sm-5">
				<div class="progress" style="display: none;">
					<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
					  0%
					</div>
				</div>
				<div id="generation-result" style="max-height: 350px; overflow-y: scroll; ">
					<ul class="generation-msg" id="generation-msg">
						
					</ul>
				</div>
			</div>
		</div>
	</div>
	@endsection
@section('before_body_end')
	<script type="text/javascript">
$(document).ready(function(){

	$('#generate-btn').click(function(event) {

		var type = $('#monthly-generate-mem option:selected').text();

		type = '\n for '+type + ' member.';
		var conf = confirm("Are you sure to generate bill" + type + "!");
		if (conf) {
			return true;
		}else{
			return false;
		}

	});

	$('#monthly-generate-mem').select2({
		placeholder: 'Select Member',
		multiple: false,
		ajax: {
			url: '{{route("member-suggestion")}}',
			dataType: 'json',
			data: function (params) {
				return {
					term: params.term, // search term
					page: params.page,
					status: ['Active','Absentee']
				};
			},
			processResults: function (data, params) {
				params.page = params.page || 1;
				prependData = [{id: "all", text: "All"}];
				returnData = prependData.concat(data.items);
				return {
					results: returnData,
					pagination: {
						more: (params.page * 30) < data.total_count
					}
				};
			}
		}
	});
	$('#range-generate-mem').select2({
		placeholder: 'Select Member',
		multiple: false,
		ajax: {
			url: '{{route("member-suggestion")}}',
			dataType: 'json',
			data: function (params) {
				return {
					term: params.term, // search term
					page: params.page,
					status: ['Active','Absentee']
				};
			},
			processResults: function (data, params) {
				params.page = params.page || 1;
				//prependData = [{id: "all", text: "All"}];
				//returnData = prependData.concat(data.items);
				return {
					results: data.items,
					pagination: {
						more: (params.page * 30) < data.total_count
					}
				};
			}
		}
	});
});

var total_page = 0;
var fetchComplete = false;
var completedNumber = 0;
var serial = 1;
var progress = 0;
var progressPerRequest = 0;

$(document).ready(function(){
	$(document).on('submit', '#bill-generate-form', function(e){
		e.preventDefault();
		$('.generation-msg').html('');
		if($('#monthly-generate-mem').val() == 'all'){
			completedNumber = 0;
			serial = 1;
			progress = 0;
			progressPerRequest = 0;

			var data = $("#bill-generate-form").serialize();
			data +='&action_type=count_member';
			

			$('.progress-bar').attr('aria-valuenow', 0);
	    	$('.progress-bar').width('0%');
	    	$('.progress-bar').html('0%');
			$('.progress').show();
			$.ajax({
				type: 'POST',
				url: '{{ route("golf-operation.monthly-subscriptions.store-monthly-locker-invoice") }}',
				data: data,
				dataType: 'json',
				async: true,
				success: function(result){
					var counter = result.counter;
					total_page = Math.ceil(counter/50);
					progressPerRequest = (100/total_page);
					console.log(total_page);
					getRecord();
				}
			});
		}else{
			$('#bill-generate-form')[0].submit();
		}
	});
});

function getRecord() {
	var data = $("#bill-generate-form").serialize();
	data += '&action_type=creating_bill&completed='+completedNumber;
	//data.push({action_type:'creating_bill'});
	//data.push({action_type:completedNumber});	
	//data.push({action_type: 'creating_bill', completed: completedNumber});
	
    $.ajax({
        type: 'POST',
        url: '{{ route("golf-operation.monthly-subscriptions.store-monthly-locker-invoice") }}',        
        data: data,
        dataType: 'json',
        async: true,
        success: function (result) {  

        	var status = result.status?result.status:"";

        	if (status) {

        		$.each(result, function(index, item){
        			
	        		$.notify(item.message);					
	        	});
        		
	        	return false;
        	}

        	$.each(result, function(index, item){
        		$('.generation-msg').append('<li>'+item.message+'</li>');
        		serial = serial+1;

        		$("#generation-result").animate({
				    scrollTop: $('#generation-result')[0].scrollHeight
				}, 0);
				
        	});

        	progress = progress+progressPerRequest;
        	$('.progress-bar').attr('aria-valuenow', Math.floor(progress));
        	$('.progress-bar').width(Math.floor(progress)+'%');
        	$('.progress-bar').html(Math.floor(progress)+'%');
        	if(Math.floor(progress) == 100){
        		$('.progress-bar').removeClass('active');
        		$('.progress-bar').removeClass('progress-bar-striped');
        		setTimeout(function(){
        			$('.progress').hide();
        		}, 3000);
        	}
        	completedNumber = completedNumber+1;
            if (completedNumber < total_page) {                	
                getRecord();
            }else{
            	$('.progress-bar').attr('aria-valuenow', 100);
	        	$('.progress-bar').width('100%');
	        	$('.progress-bar').html('100%');	        	
        		$('.progress-bar').removeClass('active');
        		$('.progress-bar').removeClass('progress-bar-striped');
        		setTimeout(function(){
        			$('.progress').hide();
        		}, 3000);	        	
            }
        }
    });
}

</script>
@endsection