{% 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">
							<table class="table table-striped table-custom-border text-center table-rounded table-borderless table-thead-primary"
								   id="table">
								<thead>
								{% for field in cols %}
									<th>{{ field }}</th>
								{% endfor %}
								<th>جزئیات</th>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
						<!--end::Form-->
					</div>
					<!--end::Card-->
				</div>
			</div>
		</div>
		<!--end::Container-->
		<div class="modal fade" id="transaction-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
			 aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content border-modal">
					<div class="modal-header">
						<h5 class="modal-title">جزئیات تراکنش</h5>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">کاربر:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="user" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">مقدار(ریال):</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="amount" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">زمان:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="date_time" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">موضوع:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="subject" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">جزئیات:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="info" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">کد رهگیری:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="ref_id" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">شماره کارت:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="card_hash" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-form-label col-lg-3 col-sm-12">تایید شده:</label>
									<div class="col-lg-9 col-sm-12">
										<input type="text" id="is_verified" class="form-control disabled" disabled>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer p-1">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">بستن
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block script %}
	<script src="{% static 'assets/plugins/custom/datatables/datatables.bundle.js' %}" type="text/javascript"></script>
	<script src="{% static 'badi_utils/js/datatable.js' %}" type="text/javascript"></script>
	<script>
        const showTransactionDetail = (pk) => {
            ApiAjax({
                url: '{{api_url}}info/',
                pk,
                method: 'GET',
                success_message: false,
                clearForm: false,
                success: (result) => {
                    result['date_time'] = new Date(result['date_time']).toLocaleString('fa')
                    result['amount'] = formatNumber(result['amount'].toString())
                    result['is_verified'] = result.is_verified ? 'تایید شده' : 'فاقد تایید'
                    for (const key in result) {
                        $('#' + key).val(result[key])
                    }
                    $('#transaction-modal').modal('show')
                },
            })
        }
        const table = datatable_simple_show({
            url: '{{api_url}}all_transactions/',
            api_url: '{{ api_url }}',
            real_cols: {{cols|length}},
            datable_id: '#table',
        }, {
            rowCallback: function (row, data) {
                defaultDrawCallBack(row, data);
                boldCol(1, row, formatNumber(data[2]) + badiConfig["price_text"] + ' ', data[3] === 'شارژ' ? 'primary' : 'danger')
                $(`td:last`, row).html(`
<button type="button" onclick="showTransactionDetail(${data[0]})" data-skin="dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="edit" class="btn btn-sm btn-light-primary btn-hover-text-primary btn-icon mx-2"><span class="svg-icon svg-icon-md">{% include 'svg/info.html' %}</span></button>
				`)
            }
        });
	</script>
{% endblock %}
