{% extends 'base.html' %}
{% load static %}

{% block body %}


	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<!--begin::Card-->
					<div class="card card-custom">
						<div class="card-header">
							<h3 class="card-title">
								گزارش
								تراکنش ها
							</h3>
						</div>
						<!--begin::Form-->
						<div class="card-body">
							<form class="filters" onsubmit="vueNotifApp.getTransactions(event)">
								<div class="row">
									<div class="col-lg-4">
										<div class="form-group">
											<label for="">تاریخ از</label>
											<input type="text" class="form-control date" name="date_saved__gt">
										</div>
									</div>
									<div class="col-lg-4">
										<div class="form-group">
											<label for=""> تاریخ تا </label>
											<input type="text" class="form-control date" name="date_saved__lt">
										</div>
									</div>
									<div class="col-12 text-right mb-5 d-flex justify-content-end">
										{#										<button type="button"#}
										{#												onclick="tableToExcel('vue-app', new Date().toLocaleDateString('fa') + ' invoice', new Date().toLocaleDateString('fa') + ' invoice')"#}
										{#												class="btn btn-primary btn-sm btn-icon-sm">#}
										{#											دریافت اکسل#}
										{#											<i class="fa fa-file-excel ml-2"></i>#}
										{#										</button>#}
										<button type="submit"
												class="btn btn-primary btn-sm btn-icon-sm">
											جستجو
											<i class="flaticon-search ml-2"></i>
										</button>
									</div>
								</div>
							</form>
							<table class="table table-striped table-custom-border text-center table-rounded table-borderless table-thead-primary"
								   id="vue-app">
								<thead>
								<th>تاریخ</th>
								<th>تعداد تراکنش</th>
								<th>درآمد(ریال)</th>
								</thead>
								<tbody>
								<tr v-for="item in dateList">
									<td class="tableexport-string target">[[getDate(item)]]</td>
									<td>[[item.count]]</td>
									<td>[[item.amount]]</td>
								</tr>
								<tr v-if="!dateList.length">
									<td colspan="3">موردی یافت نشد!</td>
								</tr>
								</tbody>
							</table>
							<div class="w-100 min-h-500px ltr">
								<div id="transaction-chart"></div>
							</div>
						</div>
						<!--end::Form-->
					</div>
					<!--end::Card-->
				</div>
			</div>
		</div>
		<!--end::Container-->
	</div>
{% endblock %}

{% block script %}
	<script src="{% static 'badi_utils/js/apexchart.js' %}"></script>
	<script src="{% static 'badi_utils/js/xlsx.mini.min.js' %}"></script>
	<script src="{% static 'badi_utils/js/tableexport.js' %}"></script>
	<script>
        let transactionChart = null;
        const vueNotifApp = new Vue({
            delimiters: ['[[', ']]'],
            el: '#vue-app',
            data() {
                return {
                    dateList: [],
                    notification: {},
                }
            },
            created: function () {
                this.getTransactions();
            },
            methods: {
                getTransactions: function (e = null) {
                    if (e)
                        e.preventDefault()
                    ApiAjax({
                        url: '{{ api_url }}report/',
                        method: 'GET',
                        success_message: false,
                        clearForm: false,
                        form: '.filters',
                        button: document.querySelector('.filters button[type="submit"]'),
                        success: (res) => {
                            this.dateList = res.results

                            if (transactionChart) {
                                transactionChart.updateOptions({
                                    series: res.chart.series,
                                    xaxis: {
                                        categories: res.chart.x_titles,
                                        tickAmount: 12,
                                        labels: {
                                            formatter: function (val) {
                                                return new Date(val).toLocaleDateString('fa')
                                            },
                                            hideOverlappingLabels: false,
                                            rotateAlways: true,
                                        },
                                    }
                                });
                            } else {
                                transactionChart = new ApexCharts(document.querySelector("#transaction-chart"), {
                                    colors: ['#7f30e8'],
                                    series: res.chart.series,
                                    chart: {
                                        toolbar: {show: false},
                                        height: 500,
                                        width: '100%',
                                        type: 'line',
                                        stacked: false
                                    },
                                    dataLabels: {
                                        enabled: false
                                    },
                                    stroke: {
                                        width: [1, 4]
                                    },
                                    xaxis: {
                                        categories: res.chart.x_titles,
                                        tickAmount: 12,
                                        labels: {
                                            formatter: function (val) {
                                                return new Date(val).toLocaleDateString('fa')
                                            },
                                            hideOverlappingLabels: false,
                                            rotateAlways: true,
                                        },
                                    },
                                    yaxis: {
                                        axisTicks: {
                                            show: true,
                                        },
                                        axisBorder: {
                                            show: true,
                                            color: '#7f30e8'
                                        },
                                        labels: {
                                            formatter: (value) => {
                                                if (value > 1000000000) {
                                                    value = value / 1000000000
                                                    // return ' {میلیارد ریال} ' + formatNumber(value.toString())
                                                    return formatNumber(value.toString())
                                                }
                                                if (value > 1000000) {
                                                    value = value / 1000000
                                                    // return ' {میلیون ریال} ' + formatNumber(value.toString())
                                                    return formatNumber(value.toString())
                                                }
                                                return formatNumber(value.toString())
                                            },
                                            style: {
                                                colors: '#7f30e8',
                                            },
                                        },
                                    },
                                    tooltip: {},
                                    legend: {
                                        horizontalAlign: 'left',
                                        offsetX: 40
                                    }
                                });
                                transactionChart.render();
                            }
                            setTimeout(() => {
                                table_export.reset()
                            }, 1000)
                        }
                    })
                },
                getDate: function (item) {
                    return toEnglishDigit(new Date(item.date).toLocaleDateString('fa'))
                },
            },
        });
        const table_export = TableExport(document.getElementById('vue-app'), {
            headers: true,                      // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
            footers: true,                      // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
            formats: ["xlsx", "csv", "txt"],    // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
            filename: toEnglishDigit(new Date().toLocaleDateString('fa')) + ' invoice',                     // (id, String), filename for the downloaded file, (default: 'id')
            bootstrap: true,                   // (Boolean), style buttons using bootstrap, (default: true)
            exportButtons: true,                // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
            position: "bottom",                 // (top, bottom), position of the caption element relative to table, (default: 'bottom')
            ignoreRows: null,                   // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
            ignoreCols: null,                   // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
            trimWhitespace: true,               // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
            RTL: true,                         // (Boolean), set direction of the worksheet to right-to-left (default: false)
            sheetname: "id"                     // (id, String), sheet name for the exported spreadsheet, (default: 'id')
        });
	</script>
{% endblock %}
