{% extends "base/f_base.html" %}
{% load humanize %}
{% load static %}
{% 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">سفارش شما با موفقیت انجام شد!</p>
	<p class="text-slate-600 text-sm font-semibold">اطلاعات سفارش خود را اینجا مشاهده کنید.</p>
	<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_order.id}}</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_order.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">{{this_order.user_phone}}</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_order.user_postal_code}}</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 w-1/3">آدرس</span>
			<span class="text-slate-950 text-sm font-semibold text-justify w-2/3">{{this_order.user_address}}</span>
		</div>
		<div class="items-start justify-between w-full pb-4 px-4 mb-4 flex flex-col border-b border-b-zinc-100">
			<p class="text-slate-600 text-sm font-semibold mb-1">محصولات خریداری شده</p>
			{% for item in this_order_items %}
				<div class="flex flex-row items-center justify-between w-full mb-1">
					<p class="text-gray-900 text-sm font-semibold leading-normal">{{item.product.title}}</p>
					<p class="text-gray-900 text-sm font-bold leading-normal">{{item.quantity}}</p>
				</div>
			{% endfor %}
		</div>
		<div class="flex flex-row items-center justify-between w-full mb-4 px-4">
			<span class="text-slate-600 text-sm font-semibold">تعداد ایتم های سفارش</span>
			<span class="text-slate-950 text-sm font-semibold">{{this_order.total_count|intcomma}} تومان</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_order.price_after_discount|intcomma}} تومان</span>
		</div>
	</div>
</div>

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