{% extends "base/f_base.html" %}
{% load static %}
{% load humanize %}
{% 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' %}"/> 
<!-- Modern or es5 bundle -->
<script src="{% static 'assets/js/pickr.min.js' %}"></script>
<script src="{% static 'assets/js/pickr.es5.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/' %}compiled.min.css">

{% endblock header %}
{% block content %}
<div class="min-h-[84vh] flex flex-col items-start justify-start mt-4">   
    <div x-data="{ tab: 'tab2' }" class="w-full">
        <!-- دکمه‌های تب -->
        <div class="flex gap-2 mb-4 justify-center">
            <button @click="tab = 'tab1'" :class="tab === 'tab1' ? 'bg-neutral-200 font-medium' : 'bg-white font-normal'" class="w-full text-sm self-stretch h-10 px-4 py-2 rounded-xl outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-center items-center gap-2 transition-all duration-200">
                فرم های تماس (به زودی)
            </button>
            <button @click="tab = 'tab2'" :class="tab === 'tab2' ? 'bg-neutral-200 font-medium' : 'bg-white font-normal'" class="w-full text-sm self-stretch h-10 px-4 py-2 rounded-xl outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-center items-center gap-2 transition-all duration-200">
                سفارشات
            </button>
        </div>
    
        <!-- محتوای تب‌ها -->
        <div>
            <div class="min-h-[84vh] flex flex-col items-center justify-center mt-4" x-show="tab === 'tab1'" x-transition>
                <img src="{% static 'images/dashboard.png' %}">
                <p class="self-stretch text-center justify-start text-zinc-800 text-base font-medium mt-4">به زودی میایم :)</p>
            </div>
            <div class="min-h-[84vh] flex flex-col items-center justify-start mt-4" x-show="tab === 'tab2'" x-transition>
                <div x-data="{ showFilter: false, sortOrder: 'newest', statusFilter: '' }" class="w-full">
					{% if messages %}
						{% for message in messages %}
							<div class="w-full mb-4 px-4 py-3 mt-2 rounded-lg text-sm font-medium border
								{% if message.tags == 'success' %}
									bg-green-100 text-green-800 border-green-300
								{% else %}
									bg-red-100 text-red-800 border-red-300
								{% endif %}
							">
								{{ message }}
							</div>
						{% endfor %}
					{% endif %}
					<!-- دکمه نمایش بر اساس -->
					<button @click="showFilter = true" class="w-full px-4 py-2 rounded-[100px] outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-1.5">
						<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M2.03906 4.5625H6.93359L4.5 2.12891L2.03906 4.5625ZM5.10156 0.898438L8.60156 4.39844C8.84766 4.64453 8.92969 5.02734 8.79297 5.35547C8.65625 5.68359 8.32812 5.90234 7.97266 5.90234L1 5.875C0.644531 5.875 0.316406 5.68359 0.179688 5.35547C0.0429688 5.02734 0.125 4.64453 0.371094 4.39844L3.87109 0.898438C4.19922 0.542969 4.77344 0.542969 5.10156 0.898438ZM2.03906 8.9375L4.5 11.3984L6.93359 8.9375H2.03906ZM5.10156 12.6289C4.77344 12.9844 4.19922 12.9844 3.87109 12.6289L0.371094 9.12891C0.125 8.88281 0.0429688 8.5 0.179688 8.17188C0.316406 7.84375 0.644531 7.625 1 7.625H8C8.32812 7.625 8.65625 7.84375 8.79297 8.17188C8.92969 8.5 8.84766 8.88281 8.60156 9.12891L5.10156 12.6289Z" fill="#181F26"/>
						</svg>
						<span>نمایش بر اساس</span>
					</button>

					<!-- مدال فیلتر -->
					<div x-show="showFilter" x-transition class="fixed inset-0 z-50 flex items-start justify-center bg-black bg-opacity-50">
						<div class="bg-white w-96 rounded-2xl shadow-xl py-4 relative mt-16">
							<div class="flex flex-row items-center justify-between border-b border-neutral-200 pt-2 px-6 pb-3 mb-3">
								<p class="text-right justify-start text-slate-700 text-base font-medium">نمایش بر اساس</p>
								<button @click="showFilter = false" class="text-gray-500 hover:text-black">✕</button>
							</div>

							<div class="flex flex-col items-start w-full px-6">
								<p class="self-stretch text-right justify-start mb-2 text-slate-700 text-sm font-medium">تاریخ سفارش</p>

								<!-- جدیدترین و قدیمی‌ترین -->
								<div class="flex gap-2 mb-6 w-full">
									<a href="?sort=newest" class="py-2 rounded-full w-full inline-flex items-center justify-center"
										:class="'{{ request.GET.sort }}' === 'newest' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'">
										جدیدترین
									</a>
									<a href="?sort=oldest" class="py-2 rounded-full w-full inline-flex items-center justify-center"
										:class="'{{ request.GET.sort }}' === 'oldest' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'">
										قدیمی‌ترین
									</a>
								</div>
								<p class="self-stretch text-right mb-2 justify-start text-slate-700 text-sm font-medium">وضعیت سفارش</p>

								<!-- دکمه‌های وضعیت -->
								<div class="grid grid-cols-2 gap-2 mb-2 w-full">
									<button @click="statusFilter = (statusFilter === 'pending' ? '' : 'pending')" 
											:class="statusFilter === 'pending' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'"
											class="py-2 rounded-full">در انتظار</button>
									<button @click="statusFilter = (statusFilter === 'processing' ? '' : 'processing')" 
											:class="statusFilter === 'processing' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'"
											class="py-2 rounded-full">در حال پردازش</button>
									<button @click="statusFilter = (statusFilter === 'completed' ? '' : 'completed')" 
											:class="statusFilter === 'completed' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'"
											class="py-2 rounded-full">تکمیل شده</button>
									<button @click="statusFilter = (statusFilter === 'cancelled' ? '' : 'cancelled')" 
											:class="statusFilter === 'cancelled' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'"
											class="py-2 rounded-full">لغو شده</button>
								</div>
							</div>
						</div>
					</div>

					<!-- لیست سفارش‌ها -->
					<div class="my-6 space-y-4">
						{% for order in user_orders %}
							<template x-if="(statusFilter === '' || '{{ order.status }}' === statusFilter)">
								<div class="border border-gray-200 rounded-xl shadow-sm p-4 bg-white">
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">نام کاربر</span>
										<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{order.user_name|default:'ثبت نشده'}}</span>
									</div>
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">زمان سفارش</span>
										<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ order.created_at|to_jalali:'%Y/%m/%d %H:%m' }}</span>
									</div>
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">وضعیت سفارش</span>
										<span class="text-end text-gray-900 font-medium text-xs px-3 py-1 rounded-full 
													{% if order.status == 'pending' %}bg-yellow-100 text-yellow-700
													{% elif order.status == 'processing' %}bg-blue-100 text-blue-700
													{% elif order.status == 'completed' %}bg-green-100 text-green-700
													{% elif order.status == 'cancelled' %}bg-red-100 text-red-700
													{% endif %} ">{{ order.get_status_display }}</span>
									</div>
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">شماره تماس</span>
										<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ order.user_phone|default:'ثبت نشده' }}</span>
									</div>
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">مبلغ سفارش</span>
										<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ order.total_price_for_pay|intcomma }}</span>
									</div>
									{% if order.track_code %}
										<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
											<span class="text-slate-600 text-sm font-normal w-1/2">کد پیگیری سفارش</span>
											<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ order.track_code }}</span>
										</div>
									{% endif %}
									{% if order.fish_image %}
										<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
											<span class="text-slate-600 text-sm font-normal w-1/2">فیش تراکنش</span>
											<span class="text-end text-gray-900 text-sm font-medium w-1/2"><a href="{{ order.fish_image.url }}">مشاهده</a></span>
										</div>
									{% endif %}
									<div class="flex justify-between items-center border-b border-zinc-300 pb-3 mb-3 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">آدرس ارسال</span>
										<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ order.user_address|default:'ثبت نشده' }}</span>
									</div>
									<div class="flex justify-between items-center pb-1 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">اقلام سفارش</span>
									</div>
									{% for item in order.items.all %}
										<div class="flex justify-between items-center pb-1 w-full">
											<span class="text-gray-900 text-sm font-normal w-1/2">{{ item.product.title }}</span>
											<span class="text-end text-gray-900 text-sm font-medium w-1/2">{{ item.quantity }} عدد</span>
										</div>
									{% endfor %}
									{% if order.note %}
									<div class="flex justify-between items-center border-t border-zinc-300 pb-1 pt-3 mt-2 w-full">
										<span class="text-slate-600 text-sm font-normal w-1/2">توضیحات</span>
									</div>
									<div class="self-stretch h-12 text-right justify-start text-gray-900 text-sm font-medium w-full leading-normal">{{order.note}}</div>
									{% endif %}
										<div class="flex flex-row items-center justify-between gap-2 w-full mt-3">
											<div x-data="{ showStatusModal: false, newStatus: '' }" class="w-full">
											<!-- وضعیت فعلی -->
											<button @click="showStatusModal = true" class="w-full h-12 p-2 rounded-full outline outline-1 outline-offset-[-1px] text-gray-900 text-sm font-semibold outline-gray-900 inline-flex justify-center items-center gap-1.5">
												<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M2.03906 4.5625H6.93359L4.5 2.12891L2.03906 4.5625ZM5.10156 0.898438L8.60156 4.39844C8.84766 4.64453 8.92969 5.02734 8.79297 5.35547C8.65625 5.68359 8.32812 5.90234 7.97266 5.90234L1 5.875C0.644531 5.875 0.316406 5.68359 0.179688 5.35547C0.0429688 5.02734 0.125 4.64453 0.371094 4.39844L3.87109 0.898438C4.19922 0.542969 4.77344 0.542969 5.10156 0.898438ZM2.03906 8.9375L4.5 11.3984L6.93359 8.9375H2.03906ZM5.10156 12.6289C4.77344 12.9844 4.19922 12.9844 3.87109 12.6289L0.371094 9.12891C0.125 8.88281 0.0429688 8.5 0.179688 8.17188C0.316406 7.84375 0.644531 7.625 1 7.625H8C8.32812 7.625 8.65625 7.84375 8.79297 8.17188C8.92969 8.5 8.84766 8.88281 8.60156 9.12891L5.10156 12.6289Z" fill="#181F26"/>
												</svg>
												<span>{{ order.get_status_display }}</span>
											</button>

											<!-- مدال تغییر وضعیت -->
											<div x-show="showStatusModal" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
												<div class="bg-white w-96 rounded-2xl shadow-xl relative">
													<div class="flex flex-row items-center justify-between border-b border-neutral-200 pt-4 px-6 pb-3 mb-3">
														<p class="text-right justify-start text-slate-700 text-base font-medium">تغییر وضعیت سفارش</p>
														<button @click="showStatusModal = false" class="text-gray-500 hover:text-black">✕</button>
													</div>

													<div class="flex flex-col w-full gap-2 px-6">
														{% for key, label in order.STATUS_CHOICES %}
															{% if key != order.status %}
																<button @click="newStatus = '{{ key }}'" 
																		:class="newStatus === '{{ key }}' ? 'bg-pr-m text-white' : 'bg-gray-200 text-gray-700'"
																		class="py-2 rounded-full">
																	{{ label }}
																</button>
															{% endif %}
														{% endfor %}
													</div>

													<!-- فرم -->
													<form method="post" class="p-6">
														{% csrf_token %}
														<input type="hidden" name="order_id" value="{{ order.id }}">
														<input type="hidden" name="new_status" :value="newStatus">

														<button type="submit" 
																:disabled="newStatus === ''"
																class="w-full bg-pr-m text-black font-bold py-3 rounded-full disabled:opacity-50">
															تایید
														</button>
													</form>
												</div>
											</div>
										</div>
										<a href="tel:{{order.user_phone}}" class="w-full h-12 p-2 rounded-full bg-pr-m text-gray-900 text-sm font-semibold outline-gray-900 inline-flex justify-center items-center gap-1.5">
											<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M12.4688 9.62512L15.9688 11.1251C16.5312 11.3439 16.8438 11.9376 16.7188 12.5314L15.9688 16.0314C15.8438 16.5939 15.3125 17.0314 14.75 17.0314C14.5312 17.0314 14.3438 17.0001 14.1562 17.0001C13.8438 17.0001 13.5312 16.9689 13.25 16.9376C6.21875 16.1876 0.75 10.2501 0.75 3.00012C0.75 2.43762 1.15625 1.90637 1.71875 1.78137L5.21875 1.03137C5.8125 0.906372 6.40625 1.21887 6.625 1.78137L8.125 5.28137C8.34375 5.78137 8.21875 6.37512 7.78125 6.71887L6.5 7.78137C7.34375 9.21887 8.53125 10.4064 9.96875 11.2501L11.0312 9.96887C11.375 9.53137 11.9688 9.40637 12.4688 9.62512ZM14.5312 15.5001L15.1875 12.4064L12.0625 11.0626L11.1562 12.1876C10.6875 12.7501 9.875 12.9064 9.21875 12.5314C7.5625 11.5626 6.1875 10.1876 5.21875 8.53137C4.84375 7.87512 5 7.06262 5.5625 6.59387L6.6875 5.68762L5.34375 2.56262L2.25 3.21887C2.34375 9.96887 7.78125 15.4064 14.5312 15.5001Z" fill="#181F26"/>
											</svg>
											<span>تماس با کاربر</span>
										</a>
									</div>
								</div>
							</template>
						{% endfor %}
					</div>
				</div>

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