@extends('layouts.app')

@section('content')
 <style>
    @media print {
		body * {
			visibility: hidden;
		}

		#myChart {
			visibility: visible;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
    </style>
	
    <ol class="breadcrumb float-xl-end">
        <li class="breadcrumb-item active">Dashboard</li>
    </ol>

    <h1 class="page-header">Dashboard</h1>

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="widget widget-stats" style="background-color: #189B96;">
				<div class="stats-icon stats-icon-lg"><i class="fa fa-users fa-fw"></i></div>
				<div class="stats-content">
					<div class="stats-title">Season User</div>
					<div class="stats-number">{{ number_format($cardholders) }}</div>
					<div class="stats-title">{{ number_format($cardholdersActive) }} Active</div>
					<div class="stats-title">{{ number_format($cardholdersInactive) }} Inactive</div>
					<div class="stats-title">&nbsp;</div>
				</div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="widget widget-stats" style="background-color: #189B96;">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-id-card"></i></div>
				<div class="stats-content">
					<div class="stats-title">Season Card</div>
					<div class="stats-number">{{ number_format($cards) }}</div>
					<div class="stats-title">{{ number_format($cardsActive) }} Active card</div>
					<div class="stats-title">{{ number_format($cardsSuspended) }} Suspended card</div>
					<div class="stats-title">{{ number_format($cardsTerminated) }} Terminated card</div>
				</div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="widget widget-stats" style="background-color: #189B96;">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-location-dot"></i></div>
				<div class="stats-content">
					<div class="stats-title">Site</div>
					<div class="stats-number">{{ number_format($sites) }}</div>
					<div class="stats-title">{{ number_format($sitesActive) }} Active site</div>
					<div class="stats-title">{{ number_format($sitesInactive) }} Inactive site</div>
					<div class="stats-title">&nbsp;</div>
				</div>
            </div>
        </div>
		
		<div class="col-xl-3 col-md-6">
            <div class="widget widget-stats" style="background-color: #189B96;">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-file-invoice"></i></div>
				<div class="stats-content">
					<div class="stats-title">Invoice Amount This Year {{ now()->year }}</div>
					<div class="stats-number">RM {{ number_format($sumAll, 2) }}</div>
					<div class="stats-title">RM {{ number_format($sumPaid, 2) }} Paid amount</div>
					<div class="stats-title">RM {{ number_format($agingAll, 2) }} Aging amount</div>
					<div class="stats-title">&nbsp;</div>
				</div>
            </div>
        </div>
    </div>

    <div class="row">
        
    </div>

    <div class="row">

        <div class="col-xl-3 col-md-6">
			<div class="widget widget-stats bg-dark ">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-money-bill-1-wave fa-fw"></i></div>
				<div class="stats-content">
					<div class="stats-title">Collection Today</div>
					<div class="stats-number">RM {{ number_format($daySum, 2) }}</div>
					<div class="stats-title">{{ number_format($dayCount) }} Payment this day</div>
					<div class="stats-number">&nbsp;</div>
				</div>
			</div>
        </div>

        <div class="col-xl-3 col-md-6">
			<div class="widget widget-stats bg-dark ">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-money-bill-1-wave fa-fw"></i></div>
				<div class="stats-content">
					<div class="stats-title">Collection This Week</div>
					<div class="stats-number">RM {{ number_format($weekSum, 2) }}</div>
					<div class="stats-title">{{ number_format($weekCount) }} Payment this week</div>
					<div class="stats-number">&nbsp;</div>
				</div>
			</div>
        </div>

        <div class="col-xl-3 col-md-6">
			<div class="widget widget-stats bg-dark ">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-money-bill-1-wave fa-fw"></i></div>
				<div class="stats-content">
					<div class="stats-title">Collection This Month {{ now()->format('F') }}</div>
					<div class="stats-number">RM {{ number_format($monthSum, 2) }}</div>
					<div class="stats-title">Collection Previous Month {{ now()->subMonth()->format('F') }}</div>
					<div class="stats-number">RM {{ number_format($lastMonthSum, 2) }}</div>
				</div>
			</div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="widget widget-stats bg-dark ">
				<div class="stats-icon stats-icon-lg"><i class="fa-solid fa-money-bill-1-wave fa-fw"></i></div>
				<div class="stats-content">
					<div class="stats-title">Collection This Year {{ now()->year }}</div>
					<div class="stats-number">RM {{ number_format($yearSum, 2) }}</div>
					<div class="stats-title">Collection Previous Year {{ now()->year-1 }}</div>
					<div class="stats-number">RM {{ number_format($lastYearSum, 2) }}</div>
				</div>
            </div>
        </div>
    </div>
	
	<div class="row">
		<div class="col-xl-12 col-md-12">
			<div class="widget widget-stats" style="background-color: #189B96;">Collection Details</div>
			<div style="text-align: center; margin-bottom: 20px;">
				<label for="timeRange">Choose Time Range:</label>
				<select id="timeRange">
					<option value="week">This Week</option>
					<option value="month">This Month</option>

					@for ($year = date('Y'); $year >= date('Y') - 2; $year--)
						<option value="year{{ $year }}">{{ $year }}</option>
					@endfor
				</select>
				<button onclick="printChart()">Print Chart</button>
			</div>
			<div class="stats-content bg-white">
				<div class="stats-content"><canvas id="myChart" ></canvas> <!-- Chart Canvas --></div>
			</div>	
		</div>
	</div>

    <script>
	
        const chartData = {
            week: {
                labels: {!! json_encode($weekLabels) !!},
                data: {!! json_encode($weekData) !!}
            },
            month: {
                labels: {!! json_encode($monthLabels) !!},
                data: {!! json_encode($monthData) !!}
            },
            year: {
				labels: {!! json_encode($yearLabels) !!},
				payment: {!! json_encode($yearDatasets) !!},
				invoice: {!! json_encode($yearInvoicesets) !!}
			}
        };

        const ctx = document.getElementById('myChart').getContext('2d');
		Chart.register(ChartDataLabels); // register the plugin
			let chart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: chartData.week.labels,
					datasets: [{
						label: 'Counts',
						data: chartData.week.data,
						backgroundColor: 'rgba(24, 155, 150, 0.7)',
						borderColor: '#11736F',
						borderWidth: 1
					}]
				},
				options: {
					responsive: true,
					plugins: {
						datalabels: {
							color: '#000',
							anchor: 'end',
							align: 'top',
							font: {
								weight: 'bold'
							},
							formatter: function(value) {
								return Number(value).toLocaleString();
							}
						},
						tooltip: {
							callbacks: {
								label: function(context) {
									return context.dataset.label + ': ' + Number(context.raw).toLocaleString();
								}
							}
						},
						legend: {
							display: true
						},
						title: {
							display: true,
							text: 'Payment Transaction Counts'
						}
					},
					scales: {
						y: {
							beginAtZero: true,
							title: {
								display: true,
								text: 'Transaction Amount'
							}
						},
						x: {
							title: {
								display: true,
								text: ''
							}
						}
					}
				}
			});

        document.getElementById('timeRange').addEventListener('change', function () {
			 console.log(chartData);
			const selected = this.value;

			// =====================
			// YEAR HANDLING
			// =====================
			if (selected.startsWith('year')) {

				const year = selected.replace('year', '');

				const paymentDataset = chartData.year.payment.find(
					item => item.label == year
				);

				const invoiceDataset = chartData.year.invoice.find(
					item => item.label == year
				);

				chart.data.labels = chartData.year.labels;

				chart.data.datasets = [
					{
						label: 'Invoice Amount',
						data: invoiceDataset ? invoiceDataset.data : [],
						backgroundColor: 'rgba(255, 99, 132, 0.7)',
						borderColor: 'red',
						borderWidth: 1
					},
					{
						label: 'Collection',
						data: paymentDataset ? paymentDataset.data : [],
						backgroundColor: 'rgba(24, 155, 150, 0.7)',
						borderColor: '#11736F',
						borderWidth: 1
					}
				];
			}

			// =====================
			// WEEK HANDLING
			// =====================
			else if (selected === 'week') {

				chart.data.labels = chartData.week.labels;

				chart.data.datasets = [{
					label: 'This Week',
					data: chartData.week.data,
					backgroundColor: 'rgba(24, 155, 150, 0.7)',
					borderColor: '#11736F',
					borderWidth: 1
				}];
			}

			// =====================
			// MONTH HANDLING
			// =====================
			else if (selected === 'month') {

				chart.data.labels = chartData.month.labels;

				chart.data.datasets = [{
					label: 'This Month',
					data: chartData.month.data,
					backgroundColor: 'rgba(24, 155, 150, 0.7)',
					borderColor: '#11736F',
					borderWidth: 1
				}];
			}

			chart.update();
		});
		
		function printChart() {
			window.print();
		}
    </script>
	

@endsection