{% extends "base/f_base.html" %}
{% 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' %}"/> 
<!-- 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"> 
    {% if messages %}
        <div class="w-full max-w-sm">
            {% for message in messages %}
                {% if message.tags == 'success' %}
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow" role="alert">
                        <span class="block font-semibold">{{ message }}</span>
                    </div>
                {% elif message.tags == 'error' %}
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow" role="alert">
                        <span class="block font-semibold">{{ message }}</span>
                    </div>
                {% elif message.tags == 'warning' %}
                    <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-lg shadow" role="alert">
                        <span class="block font-semibold">{{ message }}</span>
                    </div>
                {% else %}
                    <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-lg shadow" role="alert">
                        <span class="block font-semibold">{{ message }}</span>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
	{% endif %}
    {% if not approve %}
		<div class="flex flex-col items-center justify-center w-full">
			<div class="px-3 py-2.5 w-full my-3 bg-cyan-50 rounded-2xl inline-flex flex-col justify-center items-center gap-2 overflow-hidden">
				<div class="inline-flex justify-end items-center gap-2">
					<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9 1.5C6.65625 1.5 4.53125 2.75 3.34375 4.75C2.1875 6.78125 2.1875 9.25 3.34375 11.25C4.53125 13.2812 6.65625 14.5 9 14.5C11.3125 14.5 13.4375 13.2812 14.625 11.25C15.7812 9.25 15.7812 6.78125 14.625 4.75C13.4375 2.75 11.3125 1.5 9 1.5ZM9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM7.75 10.5H8.5V8.5H7.75C7.3125 8.5 7 8.1875 7 7.75C7 7.34375 7.3125 7 7.75 7H9.25C9.65625 7 10 7.34375 10 7.75V10.5H10.25C10.6562 10.5 11 10.8438 11 11.25C11 11.6875 10.6562 12 10.25 12H7.75C7.3125 12 7 11.6875 7 11.25C7 10.8438 7.3125 10.5 7.75 10.5ZM9 6C8.4375 6 8 5.5625 8 5C8 4.46875 8.4375 4 9 4C9.53125 4 10 4.46875 10 5C10 5.5625 9.53125 6 9 6Z" fill="#001A19"/>
					</svg>
					<div class="text-right justify-start text-slate-950 text-xs font-normal">امکان فعالسازی درگاه پس از احراز هویت امکان پذیر است.</div>
				</div>
			</div>
			<div x-data="{ showModal: false }">
				<div @click="showModal = true" class="w-full h-12 px-4 py-2 rounded-[100px] outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-1.5 cursor-pointer">
					<!-- SVG و متن دکمه -->
					<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M6.875 2.0625C6.08203 2.0625 5.37109 2.5 4.96094 3.15625C4.57812 3.83984 4.57812 4.6875 4.96094 5.34375C5.37109 6.02734 6.08203 6.4375 6.875 6.4375C7.64062 6.4375 8.35156 6.02734 8.76172 5.34375C9.14453 4.6875 9.14453 3.83984 8.76172 3.15625C8.35156 2.5 7.64062 2.0625 6.875 2.0625ZM6.875 7.75C5.61719 7.75 4.46875 7.09375 3.83984 6C3.21094 4.93359 3.21094 3.59375 3.83984 2.5C4.46875 1.43359 5.61719 0.75 6.875 0.75C8.10547 0.75 9.25391 1.43359 9.88281 2.5C10.5117 3.59375 10.5117 4.93359 9.88281 6C9.25391 7.09375 8.10547 7.75 6.875 7.75ZM5.61719 10.375C3.8125 10.375 2.33594 11.7148 2.08984 13.4375H11.6328C11.3867 11.7148 9.91016 10.375 8.10547 10.375H5.61719ZM5.61719 9.0625H8.10547C10.8125 9.0625 13 11.25 13 13.957C13 14.3945 12.6172 14.75 12.1797 14.75H1.54297C1.10547 14.75 0.75 14.3945 0.75 13.957C0.75 11.25 2.91016 9.0625 5.61719 9.0625ZM17.8398 5.58984L14.3398 9.08984C14.0664 9.36328 13.6562 9.36328 13.4102 9.08984L11.6602 7.33984C11.3867 7.09375 11.3867 6.68359 11.6602 6.4375C11.9062 6.16406 12.3164 6.16406 12.5898 6.4375L13.875 7.72266L16.9102 4.6875C17.1562 4.41406 17.5664 4.41406 17.8398 4.6875C18.0859 4.93359 18.0859 5.34375 17.8398 5.58984Z" fill="#181F26"/>
					</svg>
					<div class="text-right justify-start text-gray-900 text-sm font-semibold">احراز هویت و دریافت درگاه</div>
				</div>

				<!-- مودال -->
				<div x-show="showModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" @click.away="showModal = false" @keydown.escape.window="showModal = false">
					<form method="post" enctype="multipart/form-data" class="bg-white rounded-lg w-full max-w-[350px] relative">
						{% csrf_token %}
						<div class="flex justify-between items-center border-b pb-2 px-4 pt-4">
							<h3 class="font-bold text-gray-800">احراز هویت</h3>
							<button @click="showModal = false" class="size-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200">
								<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
							</button>
						</div>
						<div class="flex flex-col gap-4 justify-between items-center pb-2 px-4 pt-4">
							<div class="w-full flex flex-col items-start gap-1">
								<label for="melli_cart" class="text-text1 text-sm bg-white px-1">
									بارگذاری تصویر کارت ملی <span class="text-red-500">*</span>
								</label>
								<input type="file" id="melli_cart" name="melli_cart" class="Dropify" required>
								<ul class="mt-2 list-disc pr-5">
									<li class="text-slate-400 text-xs font-normal pb-1">حداکثر حجم فایل ۴ مگابایت باشد.</li>
									<li class="text-slate-400 text-xs font-normal">فرمت‌های مجاز: jpg، jpeg، png</li>
								</ul>
							</div>
							<div class="w-full flex flex-col items-start gap-1">
								<label for="video_auth" class="text-text1 text-sm bg-white px-1">
									بارگذاری ویدئو احراز هویت <span class="text-red-500">*</span>
								</label>
								<input type="file" id="video_auth" name="video_auth" class="Dropify" required>
							</div>
							<div class="w-full px-3 py-3 bg-cyan-50 rounded-2xl flex flex-row justify-center items-center gap-2 overflow-hidden">
								<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M9 1.5C6.65625 1.5 4.53125 2.75 3.34375 4.75C2.1875 6.78125 2.1875 9.25 3.34375 11.25C4.53125 13.2812 6.65625 14.5 9 14.5C11.3125 14.5 13.4375 13.2812 14.625 11.25C15.7812 9.25 15.7812 6.78125 14.625 4.75C13.4375 2.75 11.3125 1.5 9 1.5ZM9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM7.75 10.5H8.5V8.5H7.75C7.3125 8.5 7 8.1875 7 7.75C7 7.34375 7.3125 7 7.75 7H9.25C9.65625 7 10 7.34375 10 7.75V10.5H10.25C10.6562 10.5 11 10.8438 11 11.25C11 11.6875 10.6562 12 10.25 12H7.75C7.3125 12 7 11.6875 7 11.25C7 10.8438 7.3125 10.5 7.75 10.5ZM9 6C8.4375 6 8 5.5625 8 5C8 4.46875 8.4375 4 9 4C9.53125 4 10 4.46875 10 5C10 5.5625 9.53125 6 9 6Z" fill="#001A19"/>
								</svg>
								<div class="flex flex-col items-start justify-center gap-2">
									<p class="text-slate-600 text-xs font-normal leading-tight">“کارت ملی” را در “کنار صورت خود” گرفته و متن زیر را در ویدیو گفته و آنرا بارگزاری کنید:</p>
									<p class="text-slate-950 text-xs font-semibold leading-tight">اینجانب {نام و نام خانوادگی خودتان} به کد ملی {کد ملی خودتان} متقاضی دریافت درگاه پرداخت از ربوکارت هستم.</p>
								</div>
							</div>
							<div class="mt-10 flex flex-row items-center justify-center gap-2 w-full">
								<button @click="activeModal = null" class="bg-white rounded-lg w-full flex-grow-1 h-14 flex flex-col items-center justify-center font-bold text-base text-blue1">
									انصراف
								</button>
								<button type="submit" name="user_auth" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center">
									<input type="hidden" name="id" value="{{ request.user.id }}">
									<input type="hidden" name="model" value="customer">
									<input type="hidden" name="action_type" value="update">
									<span class="font-bold text-base text-black ">ثبت نهایی</span>
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
    {% elif pendding %}
		<div class="flex flex-col items-center justify-center gap-2 mt-20 w-full">
			<img src="{% static 'images/pending.png' %}">
			<p class="text-center justify-start text-slate-950 text-base font-medium">در انتظار احراز هویت توسط ربوکارت</p>
			<div class="w-72 text-center justify-start text-slate-600 text-sm font-normal leading-snug">احراز هویت تا 24 ساعت ممکن است طول بکشد.بعد از آن، امکان ایجاد فروشگاه در دسترس شما قرار خواهد گرفت.</div>
			<a href="{% url 'front:index_fun' %}" class="self-stretch h-12 px-6 py-3 bg-cyan-400 rounded-full inline-flex justify-center items-center gap-2">
				<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M8.91016 0.40625L16.1289 6.53125C16.4023 6.77734 16.4297 7.1875 16.2109 7.46094C15.9648 7.73438 15.5547 7.76172 15.2812 7.54297L14.625 6.96875V12.0547C14.625 13.2852 13.6406 14.2422 12.4375 14.2422H4.5625C3.33203 14.2422 2.375 13.2852 2.375 12.0547V6.96875L1.69141 7.54297C1.41797 7.76172 1.00781 7.73438 0.761719 7.46094C0.542969 7.1875 0.570312 6.77734 0.84375 6.53125L8.0625 0.40625C8.30859 0.214844 8.66406 0.214844 8.91016 0.40625ZM3.6875 12.0547C3.6875 12.5469 4.07031 12.9297 4.5625 12.9297H5.875V8.77344C5.875 8.17188 6.33984 7.67969 6.96875 7.67969H10.0312C10.6328 7.67969 11.125 8.17188 11.125 8.77344V12.9297H12.4375C12.9023 12.9297 13.3125 12.5469 13.3125 12.0547V5.84766L8.5 1.77344L3.6875 5.84766V12.0547ZM7.1875 12.9297H9.8125V8.99219H7.1875V12.9297Z" fill="#001A19"/>
				</svg>
				<span class="text-right justify-start text-slate-950 text-sm font-semibold">ایجاد بخش های دیگر پروفایل</span>
			</a>
		</div>
	{% else %}
    <div x-data="{ open: false }" class="relative w-full">
        <div x-data="{ activeModal: null }" class="px-4 pb-4 pt-2 flex flex-col">
            <div @click="activeModal = 'shop-setting'" class="w-full self-stretch p-3 inline-flex justify-between items-center gap-1.5 border-gray-100">
                <div class="text-right justify-start text-gray-800 text-sm font-medium ">اطلاعات فروشگاه</div>
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.02734 6.65234L6.65234 1.0625C6.96875 0.710938 7.49609 0.710938 7.84766 1.0625C8.16406 1.37891 8.16406 1.90625 7.84766 2.22266L2.78516 7.25L7.8125 12.3125C8.16406 12.6289 8.16406 13.1562 7.8125 13.4727C7.49609 13.8242 6.96875 13.8242 6.65234 13.4727L1.02734 7.84766C0.675781 7.53125 0.675781 7.00391 1.02734 6.65234Z" fill="#263238"/>
                </svg>
            </div>
            <div @click="activeModal = 'shop-category'" class="w-full self-stretch p-3 inline-flex justify-between items-center gap-1.5 border-t-2 border-gray-100">
                <div class="text-right justify-start text-gray-800 text-sm font-medium ">دسته بندی های محصولات</div>
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.02734 6.65234L6.65234 1.0625C6.96875 0.710938 7.49609 0.710938 7.84766 1.0625C8.16406 1.37891 8.16406 1.90625 7.84766 2.22266L2.78516 7.25L7.8125 12.3125C8.16406 12.6289 8.16406 13.1562 7.8125 13.4727C7.49609 13.8242 6.96875 13.8242 6.65234 13.4727L1.02734 7.84766C0.675781 7.53125 0.675781 7.00391 1.02734 6.65234Z" fill="#263238"/>
                </svg>
            </div>
            <div @click="activeModal = 'shop-product'" class="w-full self-stretch p-3 inline-flex justify-between items-center gap-1.5 border-t-2 border-gray-100">
                <div class="text-right justify-start text-gray-800 text-sm font-medium ">اطلاعات محصولات</div>
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.02734 6.65234L6.65234 1.0625C6.96875 0.710938 7.49609 0.710938 7.84766 1.0625C8.16406 1.37891 8.16406 1.90625 7.84766 2.22266L2.78516 7.25L7.8125 12.3125C8.16406 12.6289 8.16406 13.1562 7.8125 13.4727C7.49609 13.8242 6.96875 13.8242 6.65234 13.4727L1.02734 7.84766C0.675781 7.53125 0.675781 7.00391 1.02734 6.65234Z" fill="#263238"/>
                </svg>
            </div>
            <div @click="activeModal = 'coupon'" class="w-full self-stretch p-3 inline-flex justify-between items-center gap-1.5 border-t-2 border-gray-100">
                <div class="text-right justify-start text-gray-800 text-sm font-medium ">کد های تخفیف</div>
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.02734 6.65234L6.65234 1.0625C6.96875 0.710938 7.49609 0.710938 7.84766 1.0625C8.16406 1.37891 8.16406 1.90625 7.84766 2.22266L2.78516 7.25L7.8125 12.3125C8.16406 12.6289 8.16406 13.1562 7.8125 13.4727C7.49609 13.8242 6.96875 13.8242 6.65234 13.4727L1.02734 7.84766C0.675781 7.53125 0.675781 7.00391 1.02734 6.65234Z" fill="#263238"/>
                </svg>
            </div>

            <div x-show="activeModal" x-transition.opacity class="fixed inset-0 z-50 flex items-end justify-center bg-black/30" @keydown.escape.window="activeModal = null">
                <div x-show="activeModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-full opacity-0" class="bg-white w-[90%] max-w-sm rounded-t-2xl shadow-xl border-t border-gray-200 h-full overflow-y-auto relative">
                    <div class="flex justify-between items-center border-b pb-2 px-4 pt-4">
                        <h3 class="font-bold text-gray-800"
                            x-text="
                            activeModal === 'shop-setting' ? 'اطلاعات فروشگاه' :
                            activeModal === 'shop-category' ? 'دسته بندی های محصولات' :
                            activeModal === 'coupon' ? 'کدهای تخفیف' :
                            activeModal === 'shop-product' ? 'اطلاعات محصولات' : ''
                            ">
                        </h3>
                        <span @click="activeModal = null" class="size-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200">
                            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </span>
                    </div>
        
                    <div class="p-4 space-y-4">
                        <!-- محتوا بر اساس مودال -->
                        <div x-show="activeModal === 'shop-setting'" class="flex flex-col gap-4">
                            <form class="w-full flex flex-col items-center justify-center gap-6" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div x-data="{
                                    open: false,
                                    modalOpen: false,
                                    selected: null,
                                    options: [
                                        'فروشگاه پوشاک',
                                        'فروشگاه لوازم الکترونیکی',
                                        'فروشگاه کتاب',
                                        'فروشگاه لوازم خانگی',
                                        'فروشگاه لوازم آرایشی',
                                        'فروشگاه لوازم ورزشی',
                                        'فروشگاه اسباب بازی',
                                        'فروشگاه موبایل',
                                        'فروشگاه مواد غذایی',
                                        'فروشگاه لوازم تحریر',
                                        'فروشگاه جواهرات',
                                        'فروشگاه مبلمان',
                                        'فروشگاه ابزارآلات',
                                        'فروشگاه محصولات دیجیتال',
                                        'فروشگاه لوازم کودک',
                                        'فروشگاه وسایل نقلیه',
                                        'فروشگاه صنایع دستی',
                                        'فروشگاه محصولات کشاورزی',
                                        'فروشگاه تجهیزات پزشکی',
                                        'فروشگاه لوازم سفر'
                                    ],
                                    openModal() {
                                        this.modalOpen = true;
                                    },
                                    closeModal() {
                                        this.modalOpen = false;
                                    },
                                    selectOption(option) {
                                        this.selected = option;
                                    },
                                    confirmSelection() {
                                        if(this.selected !== null) {
                                            document.getElementById('activity_field').value = this.selected;
                                        }
                                        this.closeModal();
                                    }
                                }" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden relative">
                                    <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all cursor-pointer" tabindex="4">
                                        <div class="inline-flex justify-start items-center gap-1.5">
                                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
                                                <path d="M6 13.8125C6 13.625 6.03125 13.4375 6.125 13.25L8.5625 8.78125C8.8125 8.3125 9.3125 8 9.875 8H22.0938C22.6562 8 23.1562 8.3125 23.4062 8.78125L25.8438 13.25C25.9375 13.4062 26 13.625 26 13.8125C26 14.4688 25.4375 15 24.7812 15H24V23.25C24 23.6875 23.6562 24 23.25 24C22.8125 24 22.5 23.6875 22.5 23.25V15H18V22.75C18 23.4688 17.4375 24 16.75 24H9.25C8.53125 24 8 23.4688 8 22.75V15H7.1875C6.53125 15 6 14.4688 6 13.8125ZM9.5 15V18H16.5V15H9.5ZM22.0938 9.5H9.875L7.6875 13.5H24.2812L22.0938 9.5ZM9.5 22.5H16.5V19.5H9.5V22.5Z" fill="#181F26"/>
                                            </svg>
                                            <div class="text-right justify-start text-text-main text-sm font-medium">اطلاعات فروشگاه</div>
                                        </div>
                                        <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                    <div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 pt-2 border-gray-200 bg-white">
                                        <label for="activity_field" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1 cursor-pointer" @click="openModal()" tabindex="4">
                                            زمینه فعالیت فروشگاه شما<span class="text-red-500"> * </span>
                                        </label>
                                        <input type="text" id="activity_field" value="{{robo_store_instance.activity_field|default:''}}" name="activity_field" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m text-sub-text transition-all duration-200 border-2 rounded-full cursor-pointer" readonly @click="openModal()" tabindex="4"/>
                                    </div>
                                    <div x-show="open" x-collapse class="w-11/12 m-auto bg-white">
                                        <label for="title" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1 cursor-pointer" @click="openModal()" tabindex="4">
                                            عنوان فروشگاه<span class="text-red-500"> * </span>
                                        </label>
                                        <input type="text" id="title" name="title" value="{{robo_store_instance.title|default:''}}" placeholder="مثال: فروشگاه معظمی" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m text-sub-text transition-all duration-200 border-2 rounded-full cursor-pointer"/>
                                    </div>
                                    <div x-show="modalOpen" class="fixed inset-0 bg-black bg-opacity-30 flex items-start justify-center pt-20 z-50 overflow-hidden" x-cloak>
                                        <div @click.away="closeModal()" class="bg-white rounded-xl w-80 max-h-[85vh] flex flex-col shadow-lg overflow-hidden ">
                                            <div class="flex justify-between items-center border-b border-gray-200 p-3">
                                                <h2 class="text-blue-500 font-semibold">زمینه‌های فعالیت</h2>
                                                <span @click="closeModal()" class="text-gray-600 hover:text-gray-900" tabindex="4" aria-label="بستن مودال">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                                        <line x1="18" y1="6" x2="6" y2="18" />
                                                        <line x1="6" y1="6" x2="18" y2="18" />
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="overflow-y-auto flex-1 px-4 py-2 space-y-1 border-b border-gray-200 h-[90vh]">
                                                <template x-for="option in options" :key="option">
                                                    <div @click="selectOption(option)" :class="{'bg-blue-100 text-blue-800': selected === option}" class="flex items-center justify-between p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors">
                                                        <span x-text="option"></span>
                                                        <svg x-show="selected === option" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                                            <path d="M5 13l4 4L19 7"/>
                                                        </svg>
                                                    </div>
                                                </template>
                                            </div>
                                            <div class="flex justify-between p-3">
                                                <div @click="closeModal()" class="text-slate-950 hover:text-gray-900 px-6 py-2" tabindex="4">انصراف</div>
                                                <div @click="confirmSelection()" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center" tabindex="4">ثبت و ادامه</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div x-data="{ open: false }" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden relative">
                                    <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all">
                                        <div class="inline-flex justify-start items-center gap-1.5">
                                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
                                                <path d="M15.2812 20.75C15.4375 20.7188 15.5625 20.6875 15.7188 20.6562C17.4688 20.2188 19.4375 19.6875 21.5 19.75C21.625 18.7812 22.4688 18.0312 23.5 18.0312V12.5312C22.375 12.5312 21.5 11.625 21.5 10.5312C20.0312 10.4688 18.4688 10.8125 16.6875 11.2812C16.5312 11.3125 16.4062 11.3438 16.25 11.375C14.5 11.8125 12.5312 12.3438 10.4688 12.2812C10.3438 13.25 9.5 14 8.5 14V19.5C9.59375 19.5 10.4688 20.4062 10.5 21.5C11.9688 21.5625 13.5 21.2188 15.2812 20.75ZM7 21.1875V11.5312C7 10.7812 7.78125 10.2812 8.5 10.4688C11 11.1562 13.5 10.5312 16 9.90625C18.6875 9.21875 21.4062 8.5 24.125 9.53125C24.6562 9.71875 25 10.25 25 10.8438V20.4688C25 21.25 24.1875 21.75 23.4688 21.5312C20.9688 20.8438 18.4688 21.5 16 22.125C13.2812 22.8125 10.5625 23.5 7.84375 22.5C7.3125 22.3125 7 21.75 7 21.1875ZM16 19C14.5938 19 13.5 17.6562 13.5 16C13.5 14.3438 14.5938 13 16 13C17.375 13 18.5 14.3438 18.5 16C18.5 17.6562 17.375 19 16 19Z" fill="#181F26"/>
                                            </svg>

                                            <div class="text-right justify-start text-gray-900 text-sm font-medium">تنظیمات پرداخت</div>
                                        </div>
                                        <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                    <div x-data="{ contactType: 'cart-to-cart' }" x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 py-2 bg-white">
                                        <div class="w-full">
                                            <label for="payment_way" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                                نوع راه ارتباطی <span class="text-red-500">*</span>
                                            </label>
                                            <select x-model="contactType" id="payment_way" name="payment_way" class="peer h-12 w-full px-3 mt-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full placeholder:text-sm " required>
                                                <option value="cart-to-cart" {% if robo_store_instance.payment_way == "cart-to-cart" %} selected {% endif %}>کارت به کارت</option>
                                                <option value="getway" {% if robo_store_instance.payment_way == "getway" %} selected {% endif %}>درگاه پرداخت</option>
                                                <option value="local" {% if robo_store_instance.payment_way == "local" %} selected {% endif %}>پرداخت در محل</option>
                                            </select>
                                        </div>
                                        <div class="w-full" x-show="contactType === 'cart-to-cart'" x-transition>
                                            <div class="w-full">
                                                <label for="cart_name" class="transition-all duration-200 text-text1 bg-white px-1">
                                                    نام صاحب کارت <span class="text-red-500">*</span>
                                                </label>
                                                <input type="text" id="cart_name" placeholder="مثال: علی احدی" name="cart_name" value="{{robo_store_instance.cart_name|default:''}}" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" :required="contactType === 'cart-to-cart'">
                                                <span class="text-right justify-start text-slate-400 text-xs font-normal">شماره کارت وارد شده باید متعلق به شماره تماس شما باشد</span>
                                            </div>
                                            <div class="w-full">
                                                <label for="cart_number" class="transition-all duration-200 text-text1 bg-white px-1">
                                                    شماره کارت <span class="text-red-500">*</span>
                                                </label>
                                                <input type="text" id="cart_number" placeholder="مثال: 6035 2598 6532 7845" name="cart_number" value="{{robo_store_instance.cart_number|default:''}}" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" :required="contactType === 'cart-to-cart'">
                                                <span class="text-right justify-start text-slate-400 text-xs font-normal">شماره کارت وارد شده باید متعلق به شماره تماس شما باشد</span>
                                            </div>
                                            <div class="w-full">
                                                <label for="cart_sheba" class="transition-all duration-200 text-text1 bg-white px-1">
                                                    شماره شبا <span class="text-red-500">*</span>
                                                </label>
                                                <input type="text" id="cart_sheba" placeholder="مثال: 6035 2598 6532 7845" name="cart_sheba" value="{{robo_store_instance.cart_sheba|default:''}}" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" :required="contactType === 'cart-to-cart'">
                                                <span class="text-right justify-start text-slate-400 text-xs font-normal">شماره شبا وارد شده باید متعلق به شماره کارت وارد شده باشد</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div x-data="{ open: false }" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden relative">
                                    <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all">
                                        <div class="inline-flex justify-start items-center gap-1.5">
                                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
                                                <path d="M17 9.5H10C9.71875 9.5 9.5 9.75 9.5 10V11H13.5C13.75 11 14 11.25 14 11.5C14 11.7812 13.75 12 13.5 12H6.5C6.21875 12 6 11.7812 6 11.5C6 11.25 6.21875 11 6.5 11H8V10C8 8.90625 8.875 8 10 8H17C18.0938 8 19 8.90625 19 10V11H20.3125C20.7812 11 21.2188 11.1875 21.5625 11.5312L24.4688 14.4375C24.8125 14.7812 25 15.2188 25 15.6875V19.5H25.25C25.6562 19.5 26 19.8438 26 20.25C26 20.6875 25.6562 21 25.25 21H24C24 22.6562 22.6562 24 21 24C19.3438 24 18 22.6562 18 21H17.75H17H16H14C14 22.6562 12.6562 24 11 24C9.34375 24 8 22.6562 8 21V19.5V17H9.5V18.4062C9.9375 18.1562 10.4375 18 11 18C12.0938 18 13.0625 18.625 13.5938 19.5H16H17C17.25 19.5 17.5 19.2812 17.5 19V10C17.5 9.75 17.25 9.5 17 9.5ZM23.4062 15.5L20.5 12.5938C20.4375 12.5312 20.375 12.5 20.3125 12.5H19V15.5H23.4375H23.4062ZM12.5 21C12.5 20.4688 12.1875 20 11.75 19.7188C11.2812 19.4375 10.6875 19.4375 10.25 19.7188C9.78125 20 9.5 20.4688 9.5 21C9.5 21.5625 9.78125 22.0312 10.25 22.3125C10.6875 22.5938 11.2812 22.5938 11.75 22.3125C12.1875 22.0312 12.5 21.5625 12.5 21ZM21 22.5C21.5312 22.5 22 22.2188 22.2812 21.75C22.5625 21.3125 22.5625 20.7188 22.2812 20.25C22 19.8125 21.5312 19.5 21 19.5C20.4375 19.5 19.9688 19.8125 19.6875 20.25C19.4062 20.7188 19.4062 21.3125 19.6875 21.75C19.9688 22.2188 20.4375 22.5 21 22.5ZM7.5 13H14.5C14.75 13 15 13.25 15 13.5C15 13.7812 14.75 14 14.5 14H7.5C7.21875 14 7 13.7812 7 13.5C7 13.25 7.21875 13 7.5 13ZM6.5 15H13.5C13.75 15 14 15.25 14 15.5C14 15.7812 13.75 16 13.5 16H6.5C6.21875 16 6 15.7812 6 15.5C6 15.25 6.21875 15 6.5 15Z" fill="#181F26"/>
                                            </svg>
                                            <div class="text-right justify-start text-gray-900 text-sm font-medium">تنظیمات ارسال</div>
                                                
                                        </div>
                                        <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                    <div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 py-2 bg-white">
                                        <label for="shipping_cost" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                            هزینه ارسال<span class="text-red-500">*</span>
                                        </label>
                                        <input type="link" id="shipping_cost" placeholder="مثال: 120000" value="{{robo_store_instance.shipping_cost|default:''}}" name="shipping_cost" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>
                                        <span class="text-right justify-start text-slate-400 text-xs font-normal">لطفا مبلغ را به “تومان” وارد کنید</span>
                                    </div>
                                </div>
                                <div class="mt-10 flex flex-row items-center justify-center gap-2 w-11/12 bottom-3">
                                    <button @click="activeModal = null" class="bg-white rounded-lg w-full flex-grow-1 h-14 flex flex-col items-center justify-center font-bold text-base text-blue1">
                                        انصراف
                                    </button>
                                    <button type="submit" name="shop_setting" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center">
                                        <input type="hidden" name="id" value="{{ request.user.id }}">
                                        <input type="hidden" name="model" value="customer">
                                        <input type="hidden" name="action_type" value="update">
                                        <span class="font-bold text-base text-black ">ثبت نهایی</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div x-show="activeModal === 'shop-category'" class="flex flex-col gap-4">
                            <form
                                x-data="categoryForm()"
                                class="w-full flex flex-col items-center justify-center gap-6"
                                method="post"
                                enctype="multipart/form-data"
                                >
                                {% csrf_token %}
                                <template x-for="(item, index) in categories" :key="item.temp_id || item.id">
                                    <div x-show="!deletedIds.includes(item.id)" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden" x-data="{ open: false }">
                                    <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all cursor-pointer">
                                        <div class="inline-flex justify-start items-center gap-1.5">
                                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
                                            <path d="M16 8C16.25 8 16.5312 8.0625 16.75 8.1875L23.3125 10.9688C23.7188 11.1562 24 11.5625 24 12C24 12.4688 23.7188 12.875 23.3125 13.0625L16.75 15.8438C16.5312 15.9688 16.25 16 16 16C15.7188 16 15.4688 15.9688 15.2188 15.8438L8.65625 13.0625C8.25 12.875 8 12.4688 8 12C8 11.5625 8.25 11.1562 8.65625 10.9688L15.2188 8.1875C15.4688 8.0625 15.7188 8 16 8ZM15.8125 9.5625L10.0625 12L15.8125 14.4688C15.875 14.5 15.9375 14.5 16 14.5C16.0625 14.5 16.125 14.5 16.1562 14.4688L21.9062 12L16.1562 9.5625C16.125 9.53125 16.0625 9.5 16 9.5C15.9375 9.5 15.875 9.53125 15.8125 9.5625ZM8.65625 14.9688L9.65625 14.5625L11.5625 15.375L10.0625 16L15.8125 18.4688C15.875 18.5 15.9375 18.5 16 18.5C16.0625 18.5 16.125 18.5 16.1562 18.4688L21.9062 16L20.4375 15.375L22.3125 14.5625L23.3125 14.9688C23.7188 15.1562 24 15.5625 24 16C24 16.4688 23.7188 16.875 23.3125 17.0625L16.75 19.8438C16.5312 19.9688 16.25 20 16 20C15.7188 20 15.4688 19.9688 15.2188 19.8438L8.65625 17.0625C8.25 16.875 8 16.4688 8 16C8 15.5625 8.25 15.1562 8.65625 14.9688ZM8.65625 18.9688L9.65625 18.5625L11.5625 19.375L10.0625 20L15.8125 22.4688C15.875 22.5 15.9375 22.5 16 22.5C16.0625 22.5 16.125 22.5 16.1562 22.4688L21.9062 20L20.4375 19.375L22.3125 18.5625L23.3125 18.9688C23.7188 19.1562 24 19.5625 24 20C24 20.4688 23.7188 20.875 23.3125 21.0625L16.75 23.8438C16.5312 23.9688 16.25 24 16 24C15.7188 24 15.4688 23.9688 15.2188 23.8438L8.65625 21.0625C8.25 20.875 8 20.4688 8 20C8 19.5625 8.25 19.1562 8.65625 18.9688Z" fill="#181F26"/>
                                        </svg>
                                        <p class="text-gray-900 text-sm font-medium" x-text="item.title"></p>
                                        </div>
                                        <div class="flex flex-row items-center justify-end gap-6">
                                        <button type="button" @click.prevent="deleteCategory(index)" class="text-red-600 text-xs font-bold self-end mt-1">
                                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect width="32" height="32" rx="16" fill="#FDE8E8"/>
                                            <path d="M14.7148 10.0625C14.6328 10.0625 14.5781 10.1172 14.5234 10.1719L14.0039 10.9375H17.9688L17.4492 10.1719C17.4219 10.1172 17.3398 10.0625 17.2578 10.0625H14.7148ZM19.5547 10.9375H19.9102H21.25H21.4688C21.8242 10.9375 22.125 11.2383 22.125 11.5938C22.125 11.9766 21.8242 12.25 21.4688 12.25H21.1406L20.4844 21.1367C20.4023 22.0664 19.6641 22.75 18.7344 22.75H13.2383C12.3086 22.75 11.5703 22.0664 11.4883 21.1367L10.832 12.25H10.5312C10.1484 12.25 9.875 11.9766 9.875 11.5938C9.875 11.2383 10.1484 10.9375 10.5312 10.9375H10.75H12.0625H12.418L13.4297 9.43359C13.7031 9.02344 14.1953 8.75 14.7148 8.75H17.2578C17.7773 8.75 18.2695 9.02344 18.543 9.43359L19.5547 10.9375ZM19.8281 12.25H12.1445L12.8008 21.0547C12.8281 21.2734 13.0195 21.4375 13.2383 21.4375H18.7344C18.9531 21.4375 19.1445 21.2734 19.1719 21.0547L19.8281 12.25Z" fill="#FF0000"/>
                                            </svg>
                                        </button>
                                        <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                        </svg>
                                        </div>
                                    </div>
                                    <div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 py-2 bg-white">
                                        <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                        عنوان دسته بندی<span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" :name="'category_'+index" placeholder="مثال: لباس های زنانه" x-model="item.title" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>
                                        <input type="hidden" :name="'category_id_'+index" :value="item.id"/>
                                    </div>
                                    </div>
                                </template>
                                <div @click="addCategory" class="h-12 mt-5 px-4 py-2 rounded-full w-full outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-1.5 cursor-pointer">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.65625 0.71875V5.09375H11.0312C11.3867 5.09375 11.6875 5.39453 11.6875 5.75C11.6875 6.13281 11.3867 6.40625 11.0312 6.40625H6.65625V10.7812C6.65625 11.1641 6.35547 11.4375 6 11.4375C5.61719 11.4375 5.34375 11.1641 5.34375 10.7812V6.40625H0.96875C0.585938 6.40625 0.3125 6.13281 0.3125 5.75C0.3125 5.39453 0.585938 5.09375 0.96875 5.09375H5.34375V0.71875C5.34375 0.363281 5.61719 0.0625 6 0.0625C6.35547 0.0625 6.65625 0.363281 6.65625 0.71875Z" fill="#181F26"/>
                                    </svg>
                                    <p class="text-right justify-start text-gray-900 text-sm font-semibold">افزودن دسته بندی جدید</p>
                                </div>
                                <input type="hidden" name="deleted_ids" :value="deletedIds.join(',')"/>
                                <div class="mt-10 flex flex-row items-center justify-center gap-2 w-11/12 bottom-3">
                                    <button type="button" @click="cancel" class="bg-white rounded-lg w-full flex-grow-1 h-14 flex flex-col items-center justify-center font-bold text-base text-blue1">انصراف</button>
                                    <button type="submit" name="shop_category" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center"><span class="font-bold text-base text-black">ثبت نهایی</span></button>
                                </div>
                            </form>

                            <script>
                                function categoryForm(){
                                return {
                                    categories: [{% for item in store_category %}{id: {{item.id}}, title: '{{item.title|escapejs}}'}{% if not forloop.last %},{% endif %}{% endfor %}],
                                    deletedIds: [],
                                    addCategory(){
                                    this.categories.push({id:null, title:'دسته بندی جدید', temp_id: Date.now()})
                                    },
                                    deleteCategory(index){
                                    let item = this.categories[index]
                                    if(item.id) this.deletedIds.push(item.id)
                                    this.categories.splice(index,1)
                                    },
                                    cancel(){
                                    window.history.back()
                                    }
                                }
                                }
                            </script>

                        </div>
                        <div x-show="activeModal === 'shop-product'" class="flex flex-col gap-4">
                            <form x-data="productForm()" class="w-full flex flex-col items-center justify-center gap-6" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <template x-for="(item, index) in products" :key="item.temp_id || item.id">
                                    <div x-show="!deletedIds.includes(item.id)" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden" x-data="{ open: false }">
                                        <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all cursor-pointer">
                                            <div class="inline-flex justify-start items-center gap-1.5">
                                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
                                                    <path d="M16 8C16.25 8 16.5312 8.0625 16.75 8.1875L23.3125 10.9688C23.7188 11.1562 24 11.5625 24 12C24 12.4688 23.7188 12.875 23.3125 13.0625L16.75 15.8438C16.5312 15.9688 16.25 16 16 16C15.7188 16 15.4688 15.9688 15.2188 15.8438L8.65625 13.0625C8.25 12.875 8 12.4688 8 12C8 11.5625 8.25 11.1562 8.65625 10.9688L15.2188 8.1875C15.4688 8.0625 15.7188 8 16 8ZM15.8125 9.5625L10.0625 12L15.8125 14.4688C15.875 14.5 15.9375 14.5 16 14.5C16.0625 14.5 16.125 14.5 16.1562 14.4688L21.9062 12L16.1562 9.5625C16.125 9.53125 16.0625 9.5 16 9.5C15.9375 9.5 15.875 9.53125 15.8125 9.5625ZM8.65625 14.9688L9.65625 14.5625L11.5625 15.375L10.0625 16L15.8125 18.4688C15.875 18.5 15.9375 18.5 16 18.5C16.0625 18.5 16.125 18.5 16.1562 18.4688L21.9062 16L20.4375 15.375L22.3125 14.5625L23.3125 14.9688C23.7188 15.1562 24 15.5625 24 16C24 16.4688 23.7188 16.875 23.3125 17.0625L16.75 19.8438C16.5312 19.9688 16.25 20 16 20C15.7188 20 15.4688 19.9688 15.2188 19.8438L8.65625 17.0625C8.25 16.875 8 16.4688 8 16C8 15.5625 8.25 15.1562 8.65625 14.9688ZM8.65625 18.9688L9.65625 18.5625L11.5625 19.375L10.0625 20L15.8125 22.4688C15.875 22.5 15.9375 22.5 16 22.5C16.0625 22.5 16.125 22.5 16.1562 22.4688L21.9062 20L20.4375 19.375L22.3125 18.5625L23.3125 18.9688C23.7188 19.1562 24 19.5625 24 20C24 20.4688 23.7188 20.875 23.3125 21.0625L16.75 23.8438C16.5312 23.9688 16.25 24 16 24C15.7188 24 15.4688 23.9688 15.2188 23.8438L8.65625 21.0625C8.25 20.875 8 20.4688 8 20C8 19.5625 8.25 19.1562 8.65625 18.9688Z" fill="#181F26"/>
                                                </svg>
                                                <p class="text-gray-900 text-sm font-medium" x-text="item.title"></p>
                                                </div>
                                                <div class="flex flex-row items-center justify-end gap-6">
                                                <button type="button" @click.prevent="deleteproduct(index)" class="text-red-600 text-xs font-bold self-end mt-1">
                                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <rect width="32" height="32" rx="16" fill="#FDE8E8"/>
                                                        <path d="M14.7148 10.0625C14.6328 10.0625 14.5781 10.1172 14.5234 10.1719L14.0039 10.9375H17.9688L17.4492 10.1719C17.4219 10.1172 17.3398 10.0625 17.2578 10.0625H14.7148ZM19.5547 10.9375H19.9102H21.25H21.4688C21.8242 10.9375 22.125 11.2383 22.125 11.5938C22.125 11.9766 21.8242 12.25 21.4688 12.25H21.1406L20.4844 21.1367C20.4023 22.0664 19.6641 22.75 18.7344 22.75H13.2383C12.3086 22.75 11.5703 22.0664 11.4883 21.1367L10.832 12.25H10.5312C10.1484 12.25 9.875 11.9766 9.875 11.5938C9.875 11.2383 10.1484 10.9375 10.5312 10.9375H10.75H12.0625H12.418L13.4297 9.43359C13.7031 9.02344 14.1953 8.75 14.7148 8.75H17.2578C17.7773 8.75 18.2695 9.02344 18.543 9.43359L19.5547 10.9375ZM19.8281 12.25H12.1445L12.8008 21.0547C12.8281 21.2734 13.0195 21.4375 13.2383 21.4375H18.7344C18.9531 21.4375 19.1445 21.2734 19.1719 21.0547L19.8281 12.25Z" fill="#FF0000"/>
                                                    </svg>
                                                </button>
                                                <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 pt-2 bg-white">
                                            <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                            عنوان محصول<span class="text-red-500">*</span>
                                            </label>
                                            <input type="text" :name="'title_'+index" placeholder="مثال: لباس زنانه مدل XYZ" x-model="item.title" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>
                                            <input type="hidden" :name="'title_id_'+index" :value="item.id"/>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white">
                                            <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                            عنوان انگلیسی محصول<span class="text-red-500">*</span>
                                            </label>
                                            <input type="text" :name="'title_en_'+index" placeholder="example: shirt" x-model="item.title_en" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white">
                                            <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                            توضیحات محصول<span class="text-red-500">*</span>
                                            </label>
                                            <input type="text" :name="'description_'+index" placeholder="مثال: محصولات زنانه را اینجا پیدا کنید" x-model="item.description" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white">
                                            <label for="categories" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                                دسته بندی محصول <span class="text-red-500">*</span>
                                            </label>
                                            <select x-model="contactType" id="categories" name="categories" class="peer h-12 w-full px-3 mt-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full placeholder:text-sm " required>
                                                {% for item in store_category %}
                                                    <option value="{{item.id}}" {% if item.categories == "cart-to-cart" %} selected {% endif %}>{{item.title}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white">
                                            <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                                قیمت محصول<span class="text-red-500">*</span>
                                            </label>
                                            <input type="number" :name="'price_'+index" placeholder="مثال: 120000" x-model.number="item.price" class="text-start peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>
                                        </div>
                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white flex flex-row gap-2 items-center justify-between">
                                            <div class="flex flex-col items-start justify-start w-full">
                                                <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                                    تخفیف محصول
                                                </label>
                                                <div class="flex flex-row items-center justify-between h-12 p-2 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-300">
                                                    <input type="number" :name="'sale_percent_'+index" min="0" max="100" placeholder="مثال: 10" x-model.number="item.sale_percent" @input="if(item.sale_percent<0)item.sale_percent=0;if(item.sale_percent>100)item.sale_percent=100" class="text-start peer w-full px-3 my-3 bg-transparent focus:border-0 border-0 border-none outline-0 outline-none transition-all duration-200"/>
                                                    <span>درصد</span>
                                                </div>
                                            </div>
                                            <div class="flex flex-col items-start justify-start w-full">
                                                <label for="category" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
                                                    قیمت پس از تخفیف
                                                </label>
                                                <div class="flex flex-row items-center justify-between w-full h-12 p-2 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-300">
                                                    <span x-text="item.price && item.sale_percent ? Math.ceil(item.price - (item.price * item.sale_percent / 100)) : item.price || 0"></span>
                                                    <span>تومان</span>
                                                </div>
                                            </div>
                                        </div>


                                        <div x-show="open" x-collapse class="w-11/12 m-auto border-gray-200 bg-white">
                                            <label class="text-text1 text-sm bg-white px-1">
                                                بارگذاری فایل <span class="text-red-500">*</span>
                                            </label>
                                            <input type="file" :id="'image' + index" :name="'image_'+index" :data-default-file="item.image" class="Dropify" :required="!item.id">
                                            <ul class="mt-2 list-disc pr-5">
                                                <li class="text-slate-400 text-xs font-normal pb-1">حداکثر حجم فایل ۴ مگابایت باشد.</li>
                                                <li class="text-slate-400 text-xs font-normal">فرمت‌های مجاز: jpg، jpeg، png</li>
                                            </ul>
                                        </div>
                                    </div>
                                </template>
                                <div @click="addproduct" class="h-12 mt-5 px-4 py-2 rounded-full w-full outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-1.5 cursor-pointer">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6.65625 0.71875V5.09375H11.0312C11.3867 5.09375 11.6875 5.39453 11.6875 5.75C11.6875 6.13281 11.3867 6.40625 11.0312 6.40625H6.65625V10.7812C6.65625 11.1641 6.35547 11.4375 6 11.4375C5.61719 11.4375 5.34375 11.1641 5.34375 10.7812V6.40625H0.96875C0.585938 6.40625 0.3125 6.13281 0.3125 5.75C0.3125 5.39453 0.585938 5.09375 0.96875 5.09375H5.34375V0.71875C5.34375 0.363281 5.61719 0.0625 6 0.0625C6.35547 0.0625 6.65625 0.363281 6.65625 0.71875Z" fill="#181F26"/>
                                    </svg>
                                    <p class="text-right justify-start text-gray-900 text-sm font-semibold">افزودن محصول جدید</p>
                                </div>
                                <input type="hidden" name="deleted_ids" :value="deletedIds.join(',')"/>
                                <div class="mt-10 flex flex-row items-center justify-center gap-2 sticky w-11/12 bottom-3">
                                    <button type="button" @click="cancel" class="bg-white rounded-lg w-full flex-grow-1 h-14 flex flex-col items-center justify-center font-bold text-base text-blue1">انصراف</button>
                                    <button type="submit" name="shop_product" class="bg-pr-m w-full flex-grow-1 h-12 flex flex-row gap-2 rounded-full items-center justify-center"><span class="font-bold text-base text-black">ثبت نهایی</span></button>
                                </div>
                            </form>

                            <script>
                                document.addEventListener('alpine:init', () => {
                                    Alpine.data('productForm', () => ({
                                         products: [
                                            {% for item in store_product %}
                                            {
                                                id: {{ item.id }},
                                                title: '{{ item.title|escapejs }}',
                                                title_en: '{{ item.title_en|escapejs }}',
                                                description: '{{ item.description|escapejs }}',
                                                categories: '{{ item.categories|escapejs }}',
                                                price: '{{ item.price|escapejs }}',
                                                sale_percent: '{{ item.sale_percent|escapejs }}',
                                                image: '{{ item.image.url|default:""|escapejs }}'
                                            }{% if not forloop.last %},{% endif %}
                                            {% endfor %}
                                            ],
                                            deletedIds: [],

                                        init() {
                                            this.initDropify();
                                        },
                                        addproduct() {
                                            this.products.push({id:null, title:'محصول جدید', temp_id: Date.now()})
                                            this.$nextTick(() => {
                                                this.initDropify();
                                            });
                                        },
                                        deleteproduct(index){
                                            let item = this.products[index]
                                            if(item.id) this.deletedIds.push(item.id)
                                            this.products.splice(index,1)
                                        },
                                        cancel(){
                                            window.history.back()
                                        },
                                        initDropify() {
                                            setTimeout(() => {
                                                document.querySelectorAll('.Dropify').forEach(el => {
                                                    if (!el.classList.contains('dropify-initialized')) {
                                                        el.setAttribute('data-max-file-size', '4M');

                                                        $(el).dropify({
                                                            messages: {
                                                                'default': 'فایل را انتخاب کنید',
                                                                'replace': 'فایل را جایگزین کنید',
                                                                'remove': 'حذف',
                                                                'error': 'خطایی رخ داد.'
                                                            },
                                                            error: {
                                                                'fileSize': 'حجم فایل بزرگ‌تر از ۴ مگابایت است.',
                                                                'fileExtension': 'فرمت فایل مجاز نیست. فقط jpg، jpeg و png مجاز است.'
                                                            }
                                                        });
                                                        el.classList.add('dropify-initialized');
                                                    }
                                                });
                                            }, 50);
                                        }
                                    }));
                                });
                            </script>
                        </div>
						<div x-show="activeModal === 'coupon'" class="flex flex-col gap-4">
                            <form x-data="couponForm()" class="w-full flex flex-col items-center justify-center gap-6" method="post" enctype="multipart/form-data">
								{% csrf_token %}
								<template x-for="(item, index) in coupons" :key="item.temp_id || item.id">
									<div x-show="!deletedIds.includes(item.id)" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden" x-data="{ open: false }">
										<div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all cursor-pointer">
											<div class="inline-flex justify-start items-center gap-1.5">
												<p class="text-gray-900 text-sm font-medium" x-text="item.code || 'کد تخفیف جدید'"></p>
											</div>
											<div class="flex flex-row items-center justify-end gap-6">
												<button type="button" @click.prevent="deletecoupon(index)" class="text-red-600 text-xs font-bold self-end mt-1">حذف</button>
												<svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
													<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
												</svg>
											</div>
										</div>

										<div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 pt-2 bg-white">
											<input type="hidden" :name="'coupon_id_'+index" :value="item.id"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												کد تخفیف<span class="text-red-500">*</span>
											</label>
											<input type="text" :name="'code_'+index" placeholder="مثال: OFF2025" x-model="item.code" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" required/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												مقدار تخفیف
											</label>
											<input type="number" :name="'discount_value_'+index" placeholder="مثال: 20" x-model="item.discount_value" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												نوع تخفیف
											</label>
											<select :name="'discount_type_'+index" x-model="item.discount_type" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full">
												<option value="">انتخاب کنید</option>
												<option value="قیمت ثابت">قیمت ثابت</option>
												<option value="درصدی">درصدی</option>
												<option value="نصب رایگان">نصب رایگان</option>
											</select>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												حداکثر دفعات استفاده
											</label>
											<input type="number" :name="'max_usage_'+index" placeholder="مثال: 10" x-model="item.max_usage" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												حداکثر استفاده برای هر کاربر
											</label>
											<input type="number" :name="'max_usage_per_user_'+index" placeholder="مثال: 2" x-model="item.max_usage_per_user" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												حداقل مبلغ سفارش
											</label>
											<input type="number" :name="'order_amount_min_'+index" placeholder="مثال: 500000" x-model="item.order_amount_min" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												حداکثر مبلغ سفارش
											</label>
											<input type="number" :name="'order_amount_max_'+index" placeholder="مثال: 2000000" x-model="item.order_amount_max" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												تاریخ شروع
											</label>
											<input type="date" :name="'coupon_start_date_'+index" x-model="item.coupon_start_date" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												تاریخ پایان
											</label>
											<input type="date" :name="'coupon_end_date_'+index" x-model="item.coupon_end_date" class="peer h-12 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full"/>

											<label class="transition-all duration-200 text-text1 text-sm bg-white px-1">
												توضیحات
											</label>
											<textarea :name="'description_'+index" placeholder="مثال: این کد فقط برای اولین خرید فعال است." x-model="item.description" class="peer h-24 w-full px-3 my-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-2xl"></textarea>

										</div>

									</div>
								</template>

								<div @click="addcoupon" class="h-12 mt-5 px-4 py-2 rounded-full w-full outline outline-1 outline-gray-900 inline-flex justify-center items-center gap-1.5 cursor-pointer">
									<p class="text-gray-900 text-sm font-semibold">افزودن کد تخفیف جدید</p>
								</div>

								<input type="hidden" name="deleted_ids" :value="deletedIds.join(',')"/>

								<div class="mt-10 flex flex-row items-center justify-center gap-2 w-11/12">
									<button type="button" @click="cancel" class="bg-white rounded-lg w-full h-14 flex items-center justify-center font-bold text-base text-blue1">انصراف</button>
									<button type="submit" name="shop_coupon" class="bg-pr-m w-full h-12 flex items-center justify-center rounded-full">
										<span class="font-bold text-base text-black">ثبت نهایی</span>
									</button>
								</div>
							</form>

							<script>
							function couponForm(){
								return {
									coupons: [{% for item in store_coupon %}
										{
											id: {{item.id}},
											code: '{{item.code|escapejs}}',
											discount_value: '{{item.discount_value|default:""|escapejs}}',
											discount_type: '{{item.discount_type|default:""|escapejs}}',
											times_used: '{{item.times_used}}',
											max_usage: '{{item.max_usage|default:""|escapejs}}',
											max_usage_per_user: '{{item.max_usage_per_user|default:""|escapejs}}',
											order_amount_min: '{{item.order_amount_min|default:""|escapejs}}',
											order_amount_max: '{{item.order_amount_max|default:""|escapejs}}',
											coupon_start_date: '{{item.coupon_start_date|default:""|escapejs}}',
											coupon_end_date: '{{item.coupon_end_date|default:""|escapejs}}',
											description: '{{item.description|default:""|escapejs}}',
										}
										{% if not forloop.last %},{% endif %}
									{% endfor %}],
									deletedIds: [],
									addcoupon(){
										this.coupons.push({
											id:null, temp_id: Date.now(),
											code:'', discount_value:'', discount_type:'',
											max_usage:'', max_usage_per_user:'',
											order_amount_min:'', order_amount_max:'',
											coupon_start_date:'', coupon_end_date:'',
											description:''
										})
									},
									deletecoupon(index){
										let item = this.coupons[index]
										if(item.id) this.deletedIds.push(item.id)
										this.coupons.splice(index,1)
									},
									cancel(){ window.history.back() }
								}
							}
							</script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}
    
</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 %}