<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>

<?php
$cur = default_currency();
if (!empty($range[0])) {
	$start_date = date('F d, Y', safe_strtotime($range[0]));
	$end_date = date('F d, Y', safe_strtotime($range[1]));
}

$status = (isset($status)) ? $status : 'all';
?>

<div class="space-y-4">
	<div class="rounded-xl border border-border bg-muted/30 p-4">
		<?php echo form_open(base_url() . 'admin/accounting/reports/' . $type . '/' . $filterBy, array('class' => 'grid grid-cols-1 gap-4 md:grid-cols-3 md:items-end')); ?>
		<div>
			<label class="text-sm font-medium text-foreground"><?= lang('date_range') ?></label>
			<input type="text" name="range" id="reportrange" class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm">
		</div>
		<div>
			<button class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500" type="submit">
				<i data-lucide="play" class="h-4 w-4"></i>
				<?= lang('run_report') ?>
			</button>
		</div>
		</form>
	</div>

	<div class="text-center space-y-1">
		<h3 class="text-lg font-semibold text-foreground"><?= lang($type) ?></h3>
		<?php if (!empty($start_date)) { ?>
			<p class="text-sm text-muted-foreground"><?= lang('FROM') ?> <?= $start_date ?> <?= lang('TO') ?> <?= $end_date ?></p>
		<?php } ?>
	</div>

	<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
		<div class="overflow-x-auto">
			<table class="min-w-full text-sm">
				<thead class="bg-slate-50 dark:bg-slate-800/70">
				<tr class="border-b border-slate-200 dark:border-slate-700">
					<th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300"><?= lang('account') ?></th>
					<th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300"><?= lang('debit') ?></th>
					<th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300"><?= lang('credit') ?></th>
				</tr>
				</thead>
				<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
				<?php
				$total_debit = 0;
				$total_credit = 0;
				if (!empty($all_data)) {
					foreach ($all_data as $code => $data) {
						$total_debit += $data['debit'];
						$total_credit += $data['credit'];
						?>
						<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/60">
							<td class="px-5 py-3.5 text-slate-800 dark:text-slate-200">
								<div class="font-medium"><?= html_escape($data['name']) ?></div>
								<div class="text-xs text-slate-500 dark:text-slate-400"><?= html_escape($code) ?></div>
							</td>
							<td class="px-5 py-3.5 text-right font-medium text-slate-800 dark:text-slate-200"><?= display_money($data['debit'], $cur) ?></td>
							<td class="px-5 py-3.5 text-right font-medium text-slate-800 dark:text-slate-200"><?= display_money($data['credit'], $cur) ?></td>
						</tr>
					<?php } ?>

					<tr class="bg-slate-50 dark:bg-slate-800/70">
						<td class="px-5 py-4 text-sm font-semibold uppercase tracking-wide text-slate-900 dark:text-slate-100"><?= lang('total') ?></td>
						<td class="px-5 py-4 text-right text-sm font-bold text-slate-900 dark:text-slate-100"><?= display_money($total_debit, $cur) ?></td>
						<td class="px-5 py-4 text-right text-sm font-bold text-slate-900 dark:text-slate-100"><?= display_money($total_credit, $cur) ?></td>
					</tr>
				<?php } else { ?>
					<tr>
						<td colspan="3" class="px-5 py-10 text-center">
							<div class="mx-auto max-w-sm">
								<p class="text-sm font-semibold text-slate-700 dark:text-slate-200"><?= lang('nothing_to_display') ?></p>
								<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Try changing the date range and run the report again.</p>
							</div>
						</td>
					</tr>
				<?php } ?>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
	$('#reportrange').daterangepicker({
		autoUpdateInput: <?= !empty($start_date) ? 'true' : 'false'?>,
		locale: {
			format: 'MMMM D, YYYY'
		},
		<?php if(!empty($start_date)){?>
		startDate: '<?=$start_date?>',
		endDate: '<?=$end_date?>',
		<?php }?>
		"opens": "right",
		ranges: {
			'Today': [moment(), moment()],
			'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Last 7 Days': [moment().subtract(6, 'days'), moment()],
			'Last 30 Days': [moment().subtract(29, 'days'), moment()],
			'This Month': [moment().startOf('month'), moment().endOf('month')],
			'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
		}
	});
	$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
		$(this).val(picker.startDate.format('MMMM D, YYYY') + ' - ' + picker.endDate.format('MMMM D, YYYY'));
	});

	$('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
		$(this).val('');
	});
</script>
