{{breadcrums 'Home' 'Dashboard'}}
<div class="app-content center-layout mt-2 mx-md-3 px-1 home">
    <div class="content-wrapper">
        <div class="content-body">
        <!-- Stats -->
        <div class="row">
          <div class="col-xl-3 col-lg-6 col-md-6 col-12 block_four">
            <div class="card">
              <div class="card-content">
			  <a href="/users/userlist">
                <div class="media align-items-stretch">
                  <div class="p-1 text-center block_first bg-darken-2">
                    <!-- <i class="icon-users font-large-1 white"></i> -->
					<img src="/images/upload/customer.png" alt="loan"> 
                  </div>
                  <div class="p-1 block_first white media-body">
                    <h5 class="text-uppercase">{{__ "Total Customer"}}</h5>
                    <h5 >{{this.activecount}}</h5>
                    <div class="progress mt-0 mb-1" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" style="width: {{this.activecount}}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    <!-- <h5 class="text-bold-400 mb-0"></i>{{__ "3% Increase.."}}</h5> -->
                    <h5 class="text-bold-400 mb-0"></i>{{this.activecount}}{{__ "% Increase.."}}</h5>
                  </div>
                </div>
				</a>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-12 block_four">
            <div class="card">
              <div class="card-content">
			  <a href="/loan/loanlist">
                <div class="media align-items-stretch">
                  <div class="p-1 text-center block_second bg-darken-2">
                   <!-- <i class="ft-eye font-large-1 white"></i>-->
					<img src="/images/upload/loan.png" alt="loan">
                  </div>
                  <div class="p-1 block_second white media-body">
                    <h5 class="text-uppercase">{{__ "Total Loan"}}</h5>
                    <h5>{{this.loanno}}</h5>
					 <div class="progress mt-0 mb-1" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" style="width: {{this.loans}}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    <h5 class="text-bold-400 mb-0"></i>{{this.loans}}{{__ "% Increase.."}}</h5>
                  </div>
                </div>
				</a>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-12 block_four">
            <div class="card">
              <div class="card-content">
			  <a href="/loan/loanlist">
                <div class="media align-items-stretch ">
                  <div class="p-1 text-center bg-darken-2 block_violet">
                    <!-- <i class="ft-download-cloud font-large-1 white"></i> -->
					<img src="/images/upload/completeloan.png" alt="loan">
                  </div>
                  <div class="p-1 white media-body block_violet">
                    <h5 class="text-uppercase">{{__ "Completed loan"}}</h5>
					<h5>{{this.loanno}}</h5>
					 <div class="progress mt-0 mb-1" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" style="width: {{this.loanno}}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    <h5 class="text-bold-400 mb-0"></i>{{this.loanno}} {{__ "% Increase.."}}</h5>
                  </div>
                </div>
				</a>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-12 block_four">
            <div class="card">
              <div class="card-content">
			  <a href="/loan/disapproveloan">
                <div class="media align-items-stretch">
                  <div class="p-1 text-center bg-red bg-accent-4 bg-darken-2">
                    <!-- <i class="fa fa-comment-o font-large-1 white"></i> -->
					<img src="/images/upload/loanfailed.png" alt="loan">
                  </div>
                  <div class="p-1 bg-red bg-accent-4 white media-body">
                    <h5 class="text-uppercase">{{__ "Failed Loan"}}</h5>
                    <h5>{{__ "0"}}</h5>
					 <div class="progress mt-0 mb-1" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" style="width: {{this.num_of_disloan}}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    <h5 class="text-bold-400 mb-0">{{this.num_of_disloan}} {{__ "% Increase.."}}</h5>
                  </div>
                </div>
				</a>
              </div>
            </div>
          </div>
        </div>
       <!--/ Stats -->
        <!--Product sale & buyers -->
        <div class="row match-height" id="calendar">
		
		<div class="col-12 col-md-12 col-lg-12 pl-0 EMI-CAL">
		<div class="card">
		  <div class="card-header border-bottom border-light">
			<h4 class="card-title text-capitalize">{{__ "calcultor"}}</h4>
			<a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
		  </div>
		  <div class="card-content px-1">
			<div id="recent-buyers" class="media-list">
			  <div class="card-content">
				
				<section id="calculator" class="row">
					<div class="col-12 col-md-12 col-lg-6 pr-0">
						<div class="form-group ">
							<div class="row mb-1 input">
								<div class="col-lg-8 col-md-12 ml-2">
								<h5>Loan Amount ({{{currencyList session.generaldata.currency}}})</h5>
								  <div id="snap" class="my-1"></div>
								</div>
								<div class="col-lg-3 col-md-12">
								  <div class="loan_amount col-md-12 form-control border-light"></div>
								</div>
							</div>
							<div class="row mb-1">
								<div class="col-lg-8 col-md-12 ml-2">
									<h5>Interest Rate</h5>
								  <div id="Interest_Rate_id" class="my-1"></div>
								</div>
								<div class="col-lg-3 col-md-12">
								  <div class="Interest_Rate input-group"></div>
								</div>
							</div>
							<div class="row mb-1">
								<div class="col-lg-8 col-md-12 ml-2">
									<h5>Loan Term</h5>
								  <div id="Loan_Term_id" class="my-1"></div>
								</div>
								<div class="col-lg-3 col-md-12">
								  <div class="Loan_Term input-group"></div>
								</div>
							</div>
						</div>
						<div class="homeLoanEMI mt-2 mb-2" style="padding-left: 18px;">
                           <h3> Monthly EMI ({{{currencyList session.generaldata.currency}}}) : <strong class="monthly_emi_r"></strong></h3>
						</div>
						<div class="Total_amont">
						<table class="table">
							<tr>
								<td>Principal ({{{currencyList session.generaldata.currency}}}) : </td>
								<td class="loan_data"></td>
							</tr>
							<tr>
								<td>Interest Payable ({{{currencyList session.generaldata.currency}}}) : </td>
								<td class="total_in"></td>
							</tr>
							<tr>
								<td>Total Amount Payable ({{{currencyList session.generaldata.currency}}}) : </td>
								<td class="total_pay"></td>
							</tr>
						</table>
					</div>
					</div>
					<div class="col-12 col-md-12 col-lg-6 ">
					
					<section id="chartjs-pie-charts">
				 
						<div id="doughnut_ex" class="height-400 echart-container"></div>
						
					</section>
					
				 </div>
				</section>
				
		  </div>
			</div>
		  </div>
        </div>
        </div>
        
		
		
          <div class="col-xl-8 col-lg-12">
            <div class="card">
              <div class="card-content">
                <div class="card-body px-0">

				 <ul class="nav nav-tabs nav-underline border-bottom border-light px-1">
                      <li class="nav-item">
                        <a class="nav-link border-bottom-accent-2 active" id="homeIcon1-tab1" data-toggle="tab" href="#calendatIcon11" aria-controls="calendatIcon11"
                        aria-expanded="true"><i class="fa fa-calendar"></i>{{__ "Calendar"}}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link" id="aboutIcon11-tab1" data-toggle="tab" href="#aboutIcon11" aria-controls="aboutIcon11"
                        aria-expanded="false"><i class="fa fa-clock-o"></i>{{__ "Reminders"}}</a>
                      </li> 
					  <li class="nav-item">
                        <a class="nav-link" id="Notices-tab1" data-toggle="tab" href="#Notices" aria-controls="Notices"
                        aria-expanded="false"><i class="fa fa-bullhorn"></i> {{__ "Events"}}</a>
                      </li>
				
                    </ul>
					 <div class="tab-content px-1 pt-1">
                      <div role="tabpanel" class="tab-pane active in" id="calendatIcon11" aria-labelledby="homeIcon1-tab1"
                      aria-expanded="true">
                        
					 <!-- Full calendar basic example section start -->
						<section id="basic-examples">
							<div class="row">
								<div class="col-12">
									<div class="card">
										<div class="card-content collapse show">
											<div class="card-body123 ">
												<div id='dashboard_calendar'></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
        <!-- // Full calendar basic example section end -->
       </div> 
			
		<div role="tabpanel" class="tab-pane" id="aboutIcon11" aria-labelledby="MyTask-tab1"
                      aria-expanded="true">
            <div class="card-content">
                
				<div class="col-lg-12 col-md-12 mb-2 remider_list">
				{{#if Reminder}}
					{{#each Reminder as |data_emi|}}
						<div class="bs-callout-info callout-bordered mt-1">
						  <div class="media align-items-stretch">
							<div class="media-left media-middle bg-info icon_reminder p-2">
								<i class="fa fa-bell white font-medium-5"></i>
							</div>
							<div class="media-body p-1">
							  <h4 >{{this.reminder_nm}}</h4>
							  <p>{{this.reminder_desc}}</p>
							</div>
							<div class="media-right media-middle bg-info p-2">
								<p>{{ humanize this.reminder_type }}</p>
							</div>
						  </div>
						</div>
					{{/each}}
				{{else}}
				<h4 class="mb-1 mt-1 ml-1">No Remiders Found.</h4>
				{{/if}}
				</div>
                </div>
              </div>
          
					 
             <div role="tabpanel" class="tab-pane" id="Notices" aria-labelledby="Notices-tab1"
                      aria-expanded="true">
            <div class="card-content">                
                <div class="table-responsive">				 
                 
				<div class="col-lg-12 col-md-12 mb-2 remider_list notice_list">
					{{#each events}}
						<div class="bs-callout-info callout-bordered mt-1">
						  <div class="media align-items-stretch">
							<div class="media-left media-middle bg-info icon_reminder p-2">
								<i class="fa fa-calendar-check-o white font-medium-5"></i>
							</div>
							<div class="media-body p-1">
							    <a href="/events/viewevent/{{this._id}}"><h4>{{this.eventtitle}}</h4></a>
							    <a href="/events/viewevent/{{this._id}}"><p>{{this.eventdetail}}</p></a>
							</div>
							<div class="media-right media-middle bg-info p-2">
								<p>{{ this.startdate }}</p>
								<p>{{ this.enddate }}</p>
							</div>
						  </div>
						</div>
					{{/each}}
				
				</div>
				
                </div>
              </div>
          </div>  
                </div>
                  
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-lg-12 Buyers">
            <div class="card">
              <div class="card-header border-bottom border-light">
                <h4 class="card-title text-capitalize">{{__ "Active Users"}}</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
               <div class="heading-elements">
					<a href="/users/userlist" title="View New Customer"><i class="ft-external-link"></i></a>
				</div>
              </div>
              <div class="card-content px-1">
                <div id="recent-buyers" class="media-list height-300 position-relative mb-2">
				{{#each userdata}}
                  <a href="/users/viewuser/{{this._id}}" class="media border-0">
                    <div class="media-left pr-1">
                      <span class="avatar avatar-md avatar-online">
                        <img class="media-object avatar avatar-online roundimage image-height" src="/images/upload/{{this.photo}}"
                        alt="Generic placeholder image">
                        <i></i>
                      </span>
                    </div>
                    <div class="media-body w-100">
                      <h6 class="list-group-item-heading">{{this.firstname}} {{this.middlename}} {{this.lastname}}
                        <!-- <span class="font-medium-1 float-right pt-1 text-bold-500">$1,021</span> -->
                      </h6>
                      <p class="list-group-item-text mb-0">
                        <span class="badge badge-warning ml-1">{{this.occupation}}</span>
                      </p>
                    </div>
                  </a>
				  {{/each}}
                </div>
              </div>
            </div>
			
			<!-- failed order   --->
			<div class="card">
              <div class="card-header border-bottom border-light">
                <h4 class="card-title text-capitalize">{{__ "Types of Loan"}}</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
               <div class="heading-elements">
					<a href="/loan/loantypelist" title="View Loan types"><i class="ft-external-link"></i></a>
				</div>
              </div>
              <div class="card-content px-1">
                <div id="recent-buyers" class="media-list height-300 position-relative">
                  <div class="card-content">
                
                <div class="table-responsive">
				 
                  <table id="recent-orders" class="table table-borderless mb-0">
                    <thead>
                      <tr>
                        <th>{{__ "Loan Type"}}</th>
						<th>{{__ "Interest Rate"}}</th>	
                      </tr>
                    </thead>
                    <tbody>
					{{#each loandata}}
                      <tr>
                        <td class="text-truncate">
                          <span class="badge badge-default badge-success">{{this.type}}</span>
                        </td>
                        <td class="text-truncate">{{this.interestrate}} %</td>
                      </tr>
					{{/each}}   
                    </tbody>
                  </table>
                </div>
              </div>
                </div>
              </div>
            </div>
          </div>
		  
        </div>
        <!--/ Product sale & buyers -->
		<div class="row m-0">
		<div class="col-12 col-md-12 col-lg-6 pl-0 user-div">
		<div class="card">
		  <div class="card-header border-bottom border-light">
			<h4 class="card-title text-capitalize">{{__ "Users"}}</h4>
			<a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
		   <div class="heading-elements">
				<a href="/users/userlist" title="View New Customer"><i class="ft-external-link"></i></a>
			</div>
		  </div>
		  <div class="card-content">
			<div id="recent-buyers" class="media-list height-300 position-relative">
			  <div class="card-content">
				<!-- Pie charts section start -->
				<section id="chartjs-pie-charts">
				 
					<!-- Simple Pie Chart -->
						<div id="piechart" style="width: 100%; height: 500px;"></div>
				 
				</section>
				<!-- // Pie charts section end -->
		  </div>
			</div>
		  </div>
        </div>
        </div>
		<div class="col-12 col-md-12 col-lg-6 pr-0 loan-div">
		<div class="card">
		  <div class="card-header border-bottom border-light">
			<h4 class="card-title text-capitalize">{{__ "Loans"}}</h4>
			<a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
		   <div class="heading-elements">
				<a href="/loan/loanlist" title="View New Customer"><i class="ft-external-link"></i></a>
			</div>
		  </div>
		  <div class="card-content px-1">
			<div id="recent-buyers" class="media-list height-300 position-relative">
			  <div class="card-content">
				<!-- Pie charts section start -->
				<section id="chartjs-pie-charts">
				 
					<!-- Simple Pie Chart -->
						<div id="piechart2" style="width: 100%; height: 500px;"></div>
				 
				</section>
				<!-- // Pie charts section end -->
		  </div>
			</div>
		  </div>
        </div>
        </div>
		</div>
		 
        </div>
		
	  
      </div>
    </div>
	
<!--/ Product sale & buyers -->




<!--   -->
<script type="text/javascript" src="/js/loader.js"></script>
<script>

 function emi_chart(loan_amount,totalInterest){ 
	require.config({
			paths: {
				echarts: '../../../js/vendors/echarts'
			}
		});
 require(
        [
            'echarts',
            'echarts/chart/pie',
            'echarts/chart/funnel'
        ],
	function (ec) {
	var myChart = ec.init(document.getElementById('doughnut_ex'));

            // Chart Options
            // ------------------------------
            chartOptions = {

                // Add title
                title: {
                    text: 'EMI Calculator',
                    x: 'center'
                },

                // Add legend
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['Principal','Rate']
                },

                // Add custom colors
                color: ['#00A5A8', '#FF7D4D'],

                // Display toolbox
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    feature: {
                        mark: {
                            show: true,
                            title: {
                                mark: 'Markline switch',
                                markUndo: 'Undo markline',
                                markClear: 'Clear markline'
                            }
                        },
                        magicType: {
                            show: true,
                            title: {
                                pie: 'Switch to pies',
                                funnel: 'Switch to funnel',
                            },
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    y: '20%',
                                    width: '50%',
                                    height: '70%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {
                            show: true,
                            title: 'Restore'
                        },
                        saveAsImage: {
                            show: true,
                            title: 'Same as image',
                            lang: ['Save']
                        }
                    }
                },

                // Enable drag recalculate
                calculable: true,

                // Add series
                series: [
                    {
                        name: 'EMI',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '57.5%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    formatter: '{b}' + '\n\n' + '{c} ({d}%)',
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '17',
                                        fontWeight: '500'
                                    }
                                }
                            }
                        },

                        data: [
                            {value: loan_amount, name: 'Principal'},
                            {value: totalInterest, name: 'Rate'}
                        ],
                    }
                ]
            };

            // Apply options
            // ------------------------------

            myChart.setOption(chartOptions);
				// Resize chart
            // ------------------------------

            $(function () {

                // Resize chart on menu width change and window resize
                $(window).on('resize', resize);
                $(".menu-toggle").on('click', resize);

                // Resize function
                function resize() {
                    setTimeout(function() {

                        // Resize chart
                        myChart.resize();
                    }, 200);
                }
            });
			}
		);
		}
$(document).ready(function(){

		
			
			$.ajax({
				type: 'POST',
				url: '/ajxfun/emi_calculator/',
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				data : {loan_amount:1000000,rate:3,year:3},
				success: function (response)
				{	
					
					console.log(response);
						$('.monthly_emi_r').html(parseInt(response.data.monthly_emi));
						$('.loan_data').html(parseInt(response.data.loan_amount));
						$('.total_in').html(parseInt(response.data.totalInterest));
						$('.total_pay').html(parseInt(response.data.total_payment));
						
						emi_chart(parseInt(response.data.loan_amount),parseInt(response.data.totalInterest));
						
				},
				error: function(e) 
				{		
					console.log(e);
				}
			});
	
		$('#dashboard_calendar').fullCalendar({		
			defaultDate: new Date(),
			businessHours: true, // display business hours
			editable: false,
			displayEventTime : false ,
			events : "/ajxfun/mapevents",
			 height: 658,
			eventRender: function(eventObj, $el) {
			  $el.popover({
				title: eventObj.title,
				content: eventObj.description,
				trigger: 'hover',
				placement: 'top',
				container: 'body'
			  });
			},			
		});
		
		/* EMI CALCULATOR */
		loanamountSlider = document.getElementById('snap');
		Interest_Rate_idSlider = document.getElementById('Interest_Rate_id');
		Loan_Term_idSlider = document.getElementById('Loan_Term_id');

		noUiSlider.create(loanamountSlider, {
			start: 1000000,
			step: 1000,
			behaviour: 'snap',
			connect: 'lower',
			range: {
				'min': 100000,
				'max': 100000000
			}
		});
		loanamountSlider.noUiSlider.on('update', function (values, handle) {
			$('.loan_amount').html('<input id="loan_amount" type="text" readonly="readonly" value="'+values[handle]+'">');
			
			var loan_amount=values[handle];
			var rate=$('#Interest_Rate').val();
			var year=$('#Loan_Term').val();
			
			$.ajax({
				type: 'POST',
				url: '/ajxfun/emi_calculator/',
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				data : {loan_amount:loan_amount,rate:rate,year:year},
				success: function (response)
				{	
					
					console.log(response);
						$('.monthly_emi_r').html(parseInt(response.data.monthly_emi));
						$('.loan_data').html(parseInt(response.data.loan_amount));
						$('.total_in').html(parseInt(response.data.totalInterest));
						$('.total_pay').html(parseInt(response.data.total_payment));
						
						emi_chart(parseInt(response.data.loan_amount),parseInt(response.data.totalInterest));
						
				},
				error: function(e) 
				{		
					console.log(e);
				}
			});
			
		});
		
		noUiSlider.create(Interest_Rate_idSlider, {
			start: 3,
			behaviour: 'snap',
			connect: 'lower',
			range: {
				'min': 2,
				'max': 15
			}
		});
		Interest_Rate_idSlider.noUiSlider.on('update', function (values, handle) {
			$('.Interest_Rate').html('<input id="Interest_Rate" class="form-control" type="text" readonly="readonly" value="'+values[handle]+'"><span class="input-group-addon">p.a</span>');
			
			var loan_amount=$('#loan_amount').val();
			var rate=values[handle];
			var year=$('#Loan_Term').val();
			
			$.ajax({
				type: 'POST',
				url: '/ajxfun/emi_calculator/',
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				data : {loan_amount:loan_amount,rate:rate,year:year},
				success: function (response)
				{	
					
					console.log(response);
						$('.monthly_emi_r').html(parseInt(response.data.monthly_emi));
						$('.loan_data').html(parseInt(response.data.loan_amount));
						$('.total_in').html(parseInt(response.data.totalInterest));
						$('.total_pay').html(parseInt(response.data.total_payment));
						
						emi_chart(parseInt(response.data.loan_amount),parseInt(response.data.totalInterest));
					
				},
				error: function(e) 
				{		
					console.log(e);
				}
			});
			
		});
		
		noUiSlider.create(Loan_Term_idSlider, {
			start: 3,
			step: 1,
			behaviour: 'snap',
			connect: 'lower',
			range: {
				'min': 1,
				'max': 30
			}
		});
		Loan_Term_idSlider.noUiSlider.on('update', function (values, handle) {
			$('.Loan_Term').html('<input id="Loan_Term" class="form-control" type="text" readonly="readonly" value="'+values[handle]+'"><span class="input-group-addon">Yrs.</span>');
			
			var loan_amount=$('#loan_amount').val();
			var rate=$('#Interest_Rate').val();
			var year=values[handle];
			
			$.ajax({
				type: 'POST',
				url: '/ajxfun/emi_calculator/',
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				data : {loan_amount:loan_amount,rate:rate,year:year},
				success: function (response)
				{	
					
					console.log(response);
						$('.monthly_emi_r').html(parseInt(response.data.monthly_emi));
						$('.loan_data').html(parseInt(response.data.loan_amount));
						$('.total_in').html(parseInt(response.data.totalInterest));
						$('.total_pay').html(parseInt(response.data.total_payment));
						
						emi_chart(parseInt(response.data.loan_amount),parseInt(response.data.totalInterest));
				},
				error: function(e) 
				{		
					console.log(e);
				}
			});
			
		});
		
});
</script>

<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var count = '{{this.activecount}}'
  var decount = '{{this.deactiveuser}}'
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Active Users', parseInt(count)],
  ['Deactive users', parseInt(decount)]
]);

  if(screen.width>767){
	  // Optional; add a title and set the width and height of the chart
	  var options = {'width':600, 'height':300};
	}
	else{
	width=screen.width - 50;
		var options = {'width':width, 'height':300};
	}

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var loan = '{{this.loanno}}'
  var deloan = '{{this.num_of_disloan}}'
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Approved Loans', parseInt(loan)],
  ['Disapproved Loans', parseInt(deloan)]
]);
	if(screen.width>767){
	  // Optional; add a title and set the width and height of the chart
	  var options = {'width':600, 'height':300};
	}
	else{
		width=screen.width - 50;
		var options = {'width':width, 'height':300};
	}

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
  chart.draw(data, options);
}
</script>