{% extends "base/f_base.html" %}
{% load humanize %}
{% load static %}
{% load jalali_tags %}
{% block header %}
<link rel="stylesheet" href="{% static 'assets/css/dropify.min.css' %}">
<script type="text/javascript" src="{% static 'assets/js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'assets/css/monolith.min.css' %}"/> 
<link rel="stylesheet" href="{% static 'css/' %}compiled.min.css">

{% endblock header %}
{% block content %}
<div class="min-h-[84vh] flex flex-col items-center justify-start mb-2 p-2">
	<img src="{% static 'images/callback.png' %}" class="mt-16">
	<p class="text-slate-950 text-base font-bold mt-2">
		{% if done %}
			پرداخت شما با موفقیت انجام شد!
		{% else %}
			پرداخت شما با خطا مواجه شد.
		{% endif %}
	</p>
	{% if done %}
		<div class="rounded-2xl outline outline-1 outline-offset-[-1px] outline-zinc-300 backdrop-blur-[20px] w-full mt-4">
			<p class="text-slate-700 text-base font-bold px-4 pt-4">اطلاعات پرداخت</p>
			<div class="flex flex-row items-center justify-between w-full border-b border-b-zinc-100 pb-4 mb-4 px-4 pt-4">
				<span class="text-slate-600 text-sm font-semibold">شماره پیگیری</span>
				<span class="text-slate-950 text-sm font-semibold">{{this_transaction.transaction}}</span>
			</div>
			<div class="flex flex-row items-center justify-between w-full border-b border-b-zinc-100 mb-4 pb-4 px-4">
				<span class="text-slate-600 text-sm font-semibold">نام خریدار</span>
				<span class="text-slate-950 text-sm font-semibold">{{request.user.name}}</span>
			</div>
			<div class="flex flex-row items-center justify-between w-full border-b border-b-zinc-100 mb-4 pb-4 px-4">
				<span class="text-slate-600 text-sm font-semibold">تاریخ پایان عضویت</span>
				<span class="text-slate-950 text-sm font-semibold">{{request.user.vip_end_date|to_jalali:'%Y-%m-%d'}}</span>
			</div>
			<div class="flex flex-row items-center justify-between w-full border-b border-b-zinc-100 mb-4 pb-4 px-4">
				<span class="text-slate-600 text-sm font-semibold">تاریخ تراکنش</span>
				<span class="text-slate-950 text-sm font-semibold">{{this_transaction.date|to_jalali:'%Y-%m-%d'}} {{this_transaction.time}}</span>
			</div>
			<div class="flex flex-row items-center justify-between bg-cyan-50 w-full p-4">
				<span class="text-slate-600 text-sm font-semibold">مبلغ پرداخت شده</span>
				<span class="text-slate-950 text-sm font-semibold">{{this_transaction.amount|intcomma}} تومان</span>
			</div>
		</div>
	{% endif %}
	<a href="{% url 'front:index_fun' %}" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center mt-4">
		<span class="font-bold text-base text-black ">بازگشت به خانه</span>
	</a>
</div>

{% endblock content %}
{% block js %}
<script src="{% static 'assets/js/dropify.min.js' %}"></script>
<script src="{% static 'js/dropify-init.js' %}"></script>
{% endblock js %}