{% 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 %}
        {% 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 %}
    <div x-data="{ open: false }" class="relative w-full">
        <div x-data="{ activeModal: null }" class="p-4 flex flex-col gap-2">
            <div @click="activeModal = 'profile'" class="w-full self-stretch p-3 rounded-full inline-flex justify-end items-center gap-1.5">
                {% if request.user.image %}
                <img class="w-10 rounded-full object-cover aspect-square outline outline-1 outline-offset-[-1px] overflow-hidden" src="{{request.user.image.url}}">
                {% else %}
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                    <path d="M20.5 14C20.5 13.125 20 12.3125 19.25 11.8438C18.4688 11.4062 17.5 11.4062 16.75 11.8438C15.9688 12.3125 15.5 13.125 15.5 14C15.5 14.9062 15.9688 15.7188 16.75 16.1875C17.5 16.625 18.4688 16.625 19.25 16.1875C20 15.7188 20.5 14.9062 20.5 14ZM14 14C14 12.5938 14.75 11.2812 16 10.5625C17.2188 9.84375 18.75 9.84375 20 10.5625C21.2188 11.2812 22 12.5938 22 14C22 15.4375 21.2188 16.75 20 17.4688C18.75 18.1875 17.2188 18.1875 16 17.4688C14.75 16.75 14 15.4375 14 14ZM12.5312 24.5H23.4375C23.1562 22.5312 21.4688 21 19.4062 21H16.5625C14.5 21 12.8125 22.5312 12.5312 24.5ZM11 25.0938C11 22 13.4688 19.5 16.5625 19.5H19.4062C22.5 19.5 25 22 25 25.0938C25 25.5938 24.5625 26 24.0625 26H11.9062C11.4062 26 11 25.5938 11 25.0938Z" fill="#1C242D"/>
                </svg>
                {% endif %}
                <div class="w-full flex flex-col justify-start items-start gap-1">
                    <div class="text-gray-800 text-xs font-medium">{{request.user.name}}</div>
                    <div class="text-zinc-500 text-xs font-medium">{{request.user.phone}}</div>
                </div>
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.5039 2.32422H15.4688C15.1523 2.00781 14.625 2.00781 14.3086 2.32422L13.2539 3.34375L14.9062 4.99609L15.9258 3.94141C16.2422 3.625 16.2422 3.09766 15.9258 2.74609L15.5039 2.32422ZM7.34766 9.28516C7.24219 9.35547 7.17188 9.49609 7.13672 9.63672L6.53906 11.6758L8.61328 11.1133C8.75391 11.0781 8.85938 11.0078 8.96484 10.9023L13.7109 6.15625L12.0938 4.53906L7.34766 9.28516ZM13.1133 1.12891C14.0977 0.144531 15.6797 0.144531 16.6641 1.12891L17.1211 1.58594C18.1055 2.57031 18.1055 4.15234 17.1211 5.13672L10.1602 12.0977C9.87891 12.3789 9.49219 12.5898 9.07031 12.7305L5.55469 13.7148C5.27344 13.8203 4.95703 13.75 4.74609 13.5039C4.5 13.293 4.42969 12.9766 4.5 12.6953L5.51953 9.17969C5.625 8.75781 5.87109 8.37109 6.15234 8.08984L13.1133 1.12891ZM3.09375 2.5H7.03125C7.48828 2.5 7.875 2.88672 7.875 3.34375C7.875 3.83594 7.48828 4.1875 7.03125 4.1875H3.09375C2.28516 4.1875 1.6875 4.82031 1.6875 5.59375V15.1562C1.6875 15.9648 2.28516 16.5625 3.09375 16.5625H12.6562C13.4297 16.5625 14.0625 15.9648 14.0625 15.1562V11.2188C14.0625 10.7617 14.4141 10.375 14.9062 10.375C15.3633 10.375 15.75 10.7617 15.75 11.2188V15.1562C15.75 16.8789 14.3438 18.25 12.6562 18.25H3.09375C1.37109 18.25 0 16.8789 0 15.1562V5.59375C0 3.90625 1.37109 2.5 3.09375 2.5Z" fill="#263238"/>
                </svg>
            </div>
			<div @click="activeModal = 'share'" 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>
			<a href="{% url "front:ticket_fun" %}" 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>
            </a>
            <div @click="activeModal = 'setting'" 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>
			
            <a href="{% url "front:logout_fun" %}" 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-red-600 text-sm font-medium">خروج از حساب کاربری</div>
                <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.7539 8.84766L13.2539 13.3477C12.9023 13.6992 12.375 13.6992 12.0586 13.3477C11.707 13.0312 11.707 12.5039 12.0586 12.1523L15.1172 9.09375H6.46875C5.97656 9.09375 5.625 8.74219 5.625 8.25C5.625 7.79297 5.97656 7.40625 6.46875 7.40625H15.1172L12.0586 4.34766C11.707 4.03125 11.707 3.50391 12.0586 3.15234C12.375 2.83594 12.9023 2.83594 13.2539 3.15234L17.7539 7.6875C18.0703 8.00391 18.0703 8.53125 17.7539 8.84766ZM5.90625 2.0625H3.09375C2.28516 2.0625 1.6875 2.69531 1.6875 3.46875V13.0312C1.6875 13.8398 2.28516 14.4375 3.09375 14.4375H5.90625C6.36328 14.4375 6.75 14.8242 6.75 15.2812C6.75 15.7734 6.36328 16.125 5.90625 16.125H3.09375C1.37109 16.125 0 14.7539 0 13.0312V3.46875C0 1.78125 1.37109 0.375 3.09375 0.375H5.90625C6.36328 0.375 6.75 0.761719 6.75 1.21875C6.75 1.71094 6.36328 2.0625 5.90625 2.0625Z" fill="#FF0000"/>
                </svg>
            </a>
            <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 === 'profile' ? 'اطلاعات حساب کاربری' :
						activeModal === 'setting' ? 'تنظیمات' :
						activeModal === 'share' ? 'اشتراک گذاری صفحه من' :
						'عمومی'"></h3>
                        <button @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>
                        </button>
                    </div>
        
                    <div class="p-4 space-y-4">
                        <!-- محتوا بر اساس مودال -->
                        <div x-show="activeModal === 'profile'" class="flex flex-col gap-4">
                            <form class="w-full flex flex-col items-center justify-center gap-6" method="post" action="{% url 'core:ajax_handler' %}" enctype="multipart/form-data">
                                {% csrf_token %}							
                                <div class=" w-full">
                                    <label for="profile_name" 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" id="profile_name" placeholder="علیرضا آرمان" value="{{request.user.name}}" name="profile_name" 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/>
                                </div>
                                <div class="w-full">
                                    <label for="phone" 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" id="phone" placeholder="مثال: 09123456789" value="{{request.user.phone}}" autocomplete="phone phone-number number" name="phone" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" pattern="09\d{9}" oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="11" autocomplete="on" required/>
                                </div>
                                <div class=" w-full">
                                    <label for="user_name" 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" id="user_name" placeholder="علیرضا آرمان" value="{{request.user.user_name}}" name="username" 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/>
                                </div>
                                <div class="w-full flex flex-col items-start gap-1">
                                    <label for="profile" class="mb-2 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="file" class="Dropify" name="profile" value="{% if request.user.image %}{{request.user.image.url|default:''}}{% endif %}" data-default-file="{% if request.user.image %}{{request.user.image.url|default:''}}{% endif %}" />
                                    <ul class="mt-2 list-disc pr-5">
                                        <li class="text-slate-400 text-xs font-normal pb-1">فایل تصویر باید حداکثر 4 مگابایت باشد.</li>
                                        <li class="text-slate-400 text-xs font-normal">فرمت مجاز فایل ها، jpg، jpeg و png است.</li>
                                    </ul>
                                </div>
                                <div class="text-right justify-start text-slate-700 text-sm font-normal w-full -m-4 mt-2">لینک اکانت شما</div>
                                <div x-data="{ copied: false,
                                    copyText() {
                                        navigator.clipboard.writeText($refs.copySource.innerText);
                                        this.copied = true;
                                        setTimeout(() => this.copied = false, 3000);
                                    }
                                }" class="w-full">
                                    <div @click="copyText" class="flex items-center justify-between w-full p-3 border rounded-lg cursor-pointer hover:bg-gray-100">
                                        <!-- آیکون کپی -->
                                        <svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path :class="copied ? 'fill-green-500' : 'fill-gray-600'" d="M13.625 12.0625C13.9062 12.0625 14.1875 11.8164 14.1875 11.5V4.32812L11.7969 1.9375H6.875C6.55859 1.9375 6.3125 2.21875 6.3125 2.5V11.5C6.3125 11.8164 6.55859 12.0625 6.875 12.0625H13.625ZM6.875 13.75C5.60938 13.75 4.625 12.7656 4.625 11.5V2.5C4.625 1.26953 5.60938 0.25 6.875 0.25H11.7969C12.2188 0.25 12.6758 0.460938 12.9922 0.777344L15.3477 3.13281C15.6641 3.44922 15.875 3.90625 15.875 4.32812V11.5C15.875 12.7656 14.8555 13.75 13.625 13.75H6.875ZM2.375 4.75H3.5V6.4375H2.375C2.05859 6.4375 1.8125 6.71875 1.8125 7V16C1.8125 16.3164 2.05859 16.5625 2.375 16.5625H9.125C9.40625 16.5625 9.6875 16.3164 9.6875 16V14.875H11.375V16C11.375 17.2656 10.3555 18.25 9.125 18.25H2.375C1.10938 18.25 0.125 17.2656 0.125 16V7C0.125 5.76953 1.10938 4.75 2.375 4.75Z"/>
                                        </svg>
                                            
                                
                                        <!-- مقدار برای کپی -->
                                        <span x-ref="copySource" class="text-sm font-mono text-gray-700" style="direction: ltr;">
                                            {{ request.get_host }}/profile/{{ request.user.user_name }}
                                        </span>
                                    </div>
                                
                                    <!-- پیام تأیید -->
                                    <p x-show="copied" x-transition class="text-green-600 text-sm mt-2">نشانی کپی شد</p>
                                </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" 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 === 'setting'" class="flex flex-col gap-4">
                            <div x-data="{ tab: 'tab1' }" class="w-full">
                                <!-- دکمه‌های تب -->
                                <div class="flex gap-2 mb-4 justify-center">
                                    <button @click="tab = 'tab1'" :class="tab === 'tab1' ? 'bg-neutral-200 text-sm font-medium' : 'bg-white font-normal'" class="w-full 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 = 'tab3'" :class="tab === 'tab3' ? 'bg-neutral-200 text-sm font-medium' : 'bg-white font-normal'" class="w-full 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 text-sm font-medium' : 'bg-white font-normal'" class="w-full 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 x-show="tab === 'tab1'" x-transition>
                                        <form class="w-full flex flex-col items-center justify-center gap-6" method="post" action="{% url 'core:ajax_handler' %}" enctype="multipart/form-data">
                                            {% csrf_token %}		
                                            <div x-data="colorPicker('{{ page.title_color|default:'#000' }}')" class="w-full relative">
                                                <label class="transition-all duration-200 text-text1 bg-white px-1">
                                                    رنگ متن
                                                </label>
                                                <div
                                                    @click="pickr.show()"
                                                    class="mt-3 h-12 w-full flex items-center justify-between px-4 border-2 border-slate-300 rounded-full cursor-pointer transition-all duration-200 hover:border-pr-m"
                                                    x-ref="colorPreview"
                                                    :style="`border-color: ${color}`"
                                                >
                                                    <div class="w-6 h-6 rounded-full border border-slate-400" :style="`background-color: ${color}`"></div>
                                                    <span class="text-sm text-slate-700 font-mono" x-text="color"></span>
                                                </div>
                                                <input type="hidden" name="title_color" :value="color" />
                                                <div x-ref="pickrContainer" class="absolute z-50" style="top: calc(100% + 0.25rem); left: 0;"></div>
                                            </div>
                                            
                                            <div x-data="colorPicker('{{ page.bg_color|default:'#fff' }}')" class="w-full relative">
                                                <label class="transition-all duration-200 text-text1 bg-white px-1">
                                                    رنگ پس زمینه
                                                </label>
                                                <div
                                                    @click="pickr.show()"
                                                    class="mt-3 h-12 w-full flex items-center justify-between px-4 border-2 border-slate-300 rounded-full cursor-pointer transition-all duration-200 hover:border-pr-m"
                                                    x-ref="colorPreview"
                                                    :style="`border-color: ${color}`"
                                                >
                                                    <div class="w-6 h-6 rounded-full border border-slate-400" :style="`background-color: ${color}`"></div>
                                                    <span class="text-sm text-slate-700 font-mono" x-text="color"></span>
                                                </div>
                                                <input type="hidden" name="bg_color" :value="color" />
                                                <div x-ref="pickrContainer" class="absolute z-50" style="top: calc(100% + 0.25rem); left: 0;"></div>
                                            </div>				
                                            <div x-data="{ useBg: {% if page.use_image %}true{% else %}false{% endif %} }" class="w-full">
                                                <label class="inline-flex items-center cursor-pointer gap-2" @click.prevent="useBg = !useBg">
                                                    <input type="hidden" name="use_image" :value="useBg ? 'True' : 'False'">
                                                    <div
                                                        :class="useBg ? 'bg-pr-m' : 'bg-zinc-300'"
                                                        class="relative w-11 h-6 rounded-full transition-colors duration-300 cursor-pointer"
                                                    >
                                                        <div
                                                            :class="useBg ? 'translate-x-[125%]' : 'translate-x-0'"
                                                            class="absolute top-[4px] left-[4px] right-auto w-4 h-4 bg-slate-950 border border-slate-950 rounded-full transition-transform"
                                                        ></div>
                                                    </div>
                                                    <span class="text-sm text-gray-700 select-none">استفاده از عکس پس‌زمینه</span>
                                                </label>
                                                <div x-show="useBg" x-transition class="w-full flex flex-col items-start gap-1 mt-4">
                                                    <label for="bg_image" class="mb-4 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>
                                                    <input type="file" class="Dropify" id="bg_image" name="bg_image" value="{% if page.bg_image %}{{ page.bg_image.url|default:'' }}{% endif %}" data-default-file="{% if page.bg_image %}{{ page.bg_image.url|default:'' }}{% endif %}">
                                                    <ul class="mt-2 list-disc pr-5">
                                                        <li class="text-slate-400 text-xs font-normal pb-1">فایل تصویر باید حداکثر 4 مگابایت باشد.</li>
                                                        <li class="text-slate-400 text-xs font-normal">فرمت مجاز فایل‌ها، jpg، jpeg و png است.</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-10 flex flex-row items-center justify-center gap-2 absolute 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>
                                                <input type="hidden" name="id" value="{{ page.id }}">
                                                <input type="hidden" name="model" value="pages">
                                                <input type="hidden" name="action_type" value="update">
                                                <button type="submit" 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>
                                    </div>
                                    <div x-show="tab === 'tab2'" x-transition>
                                        <form class="w-full flex flex-col items-center justify-center gap-6" method="post" action="{% url 'core:ajax_handler' %}" enctype="multipart/form-data">
                                            {% csrf_token %}							
                                            <div class=" w-full">
                                                <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">
                                                    عنوان برگه<span class="text-red-500">*</span>
                                                </label>
                                                <input type="text" id="title" placeholder="مثال: فروشگاه معظمی" value="{{page.title|default:''}}" name="title" 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/>
                                            </div>
                                            <div class="w-full">
                                                <label for="page_mata" 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>
                                                <textarea type="text" id="page_mata" placeholder="مثال: کسب و کار خود را توصیف کنید..." name="page_mata" rows="5" cols="33" class="peer w-full px-3 mt-3 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-3xl p-4" value="{{page.page_mata|default:''}}">{{page.page_mata|default:''}}</textarea>
                                            </div>
                                            <div class="w-full">
                                                <label for="be_index" 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>
                                                <select id="be_index" name="be_index" 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 ">
                                                    <option value="True" {% if page.be_index %}selected{% endif %}>فعال</option>
                                                    <option value="False" {% if not page.be_index %}selected{% endif %}>غیر فعال</option>
                                                </select>
                                            </div>
                                            
                                            <div class="mt-10 flex flex-row items-center justify-center gap-2 absolute 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>
                                                <input type="hidden" name="id" value="{{ page.id }}">
                                                <input type="hidden" name="model" value="pages">
                                                <input type="hidden" name="action_type" value="update">
                                                <button type="submit" name="type" value="login" 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>
                                    </div>
									<div x-show="tab === 'tab3'" x-transition>
										<span class="text-slate-950 text-base text-start font-medium w-full ">تم های آماده</span>
										<p class="text-slate-600 text-sm font-normal text-justify leading-tight mb-6">شما میتوانید از بین تم های آماده زیر، یکی را انتخاب، اطلاعات خود را در آن وارد کرده و آن را شخصی سازی کنید.</p>
										<style>
											.iframe-wrapper {
												position: relative;
												width: 300px;
												height: 350px; /* ارتفاع اصلی - 50px */
												overflow: hidden;
												width: 100%;
												
											}
											.preview-frame {
												width: 100%;
												height: 550px; /* ارتفاع اصلی */
												border: none;
												pointer-events: none;
												margin-top: -100px;
											}
										</style>
										{% for demo in all_demo %}
											<div class="flex flex-col w-full mb-12 border border-dashed border-gray-200 rounded-lg p-1">
												<div class="iframe-wrapper">
													<iframe src="{% url "blocks:demos_preview_single_fun" demo.id %}" scrolling="no" class="preview-frame"></iframe>
                                    			</div>

												<div class="flex flex-row w-full items-center justify-between gap-2 mt-4">
													<a href="{% url "blocks:demos_preview_single_fun" demo.id %}" class="w-full h-10 px-4 py-2 rounded-full text-gray-900 text-sm font-semibold outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-1.5">
														<svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
															<path d="M8.25 1.9375C6.44531 1.9375 4.99609 2.75781 3.875 3.79688C2.80859 4.78125 2.09766 5.92969 1.71484 6.75C2.09766 7.57031 2.80859 8.74609 3.875 9.73047C4.99609 10.7695 6.44531 11.5625 8.25 11.5625C10.0273 11.5625 11.4766 10.7695 12.5977 9.73047C13.6641 8.74609 14.4023 7.57031 14.7578 6.75C14.4023 5.92969 13.6641 4.78125 12.625 3.79688C11.4766 2.75781 10.0273 1.9375 8.25 1.9375ZM2.97266 2.83984C4.25781 1.63672 6.03516 0.625 8.25 0.625C10.4375 0.625 12.2148 1.63672 13.5 2.83984C14.7852 4.04297 15.6328 5.4375 16.043 6.42188C16.125 6.64062 16.125 6.88672 16.043 7.10547C15.6328 8.0625 14.7852 9.48438 13.5 10.6875C12.2148 11.8906 10.4375 12.875 8.25 12.875C6.03516 12.875 4.25781 11.8906 2.97266 10.6875C1.6875 9.48438 0.839844 8.0625 0.429688 7.10547C0.347656 6.88672 0.347656 6.64062 0.429688 6.42188C0.839844 5.4375 1.6875 4.01562 2.97266 2.83984ZM8.25 8.9375C9.45312 8.9375 10.4375 7.98047 10.4375 6.75C10.4375 5.54688 9.45312 4.5625 8.25 4.5625C8.22266 4.5625 8.19531 4.5625 8.19531 4.5625C8.22266 4.72656 8.25 4.86328 8.25 5C8.25 5.98438 7.45703 6.75 6.5 6.75C6.33594 6.75 6.19922 6.75 6.0625 6.69531C6.0625 6.72266 6.0625 6.75 6.0625 6.75C6.0625 7.98047 7.01953 8.9375 8.25 8.9375ZM8.25 3.25C9.48047 3.25 10.6289 3.93359 11.2578 5C11.8867 6.09375 11.8867 7.43359 11.2578 8.5C10.6289 9.59375 9.48047 10.25 8.25 10.25C6.99219 10.25 5.84375 9.59375 5.21484 8.5C4.58594 7.43359 4.58594 6.09375 5.21484 5C5.84375 3.93359 6.99219 3.25 8.25 3.25Z" fill="#181F26"/>
														</svg>
														<span>پیش نمایش</span>
													</a>
													<div x-data="{ confirmOpen: false }" class="w-full flex flex-col items-center justify-center">
														<form x-ref="themeForm{{demo.id}}" id="themeForm{{demo.id}}" method="post" enctype="multipart/form-data">
															{% csrf_token %}
															<input type="hidden" name="demo_id" value="{{demo.id}}">
															<button type="button"
																	@click="confirmOpen = true"
																	class="w-full h-10 px-4 py-2 rounded-full text-gray-900 text-sm font-semibold bg-cyan-400 inline-flex justify-center items-center gap-1.5">
																<span>انتخاب تم</span>
															</button>
														</form>

														<!-- مودال تایید -->
														<div x-show="confirmOpen" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
															<div class="bg-white rounded-xl p-6 w-[20rem] text-center shadow-xl">
																<h2 class="text-lg font-semibold mb-4">تأیید انتخاب تم</h2>
																<p class="text-sm text-gray-600 mb-6">با این کار همه محتوای فعلی شما از بین می‌رود. آیا مطمئن هستید؟</p>
																<div class="flex justify-center gap-4">
																	<button @click="confirmOpen = false" class="px-4 py-2 bg-gray-300 rounded-lg text-gray-800">انصراف</button>
																	<button @click="$refs['themeForm{{demo.id}}'].submit()" class="px-4 py-2 bg-cyan-400 text-white rounded-lg">بله، مطمئنم</button>
																</div>
															</div>
														{% comment %} </div> {% endcomment %}
													</div>

												</div>
											</div>
										{% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
						<div x-show="activeModal === 'share'" class="flex flex-col gap-4">
							<span class="justify-start text-slate-600 text-sm font-normal">لینک صفحه من</span>
                            <div x-data="{ copied: false,
								copyText() {
									navigator.clipboard.writeText($refs.copySource.innerText);
									this.copied = true;
									setTimeout(() => this.copied = false, 3000);
								}
								}" class="w-full">
								<div @click="copyText" class="flex items-center justify-between w-full p-3 border rounded-lg cursor-pointer hover:bg-gray-100">
									<!-- آیکون کپی -->
									<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path :class="copied ? 'fill-green-500' : 'fill-gray-600'" d="M13.625 12.0625C13.9062 12.0625 14.1875 11.8164 14.1875 11.5V4.32812L11.7969 1.9375H6.875C6.55859 1.9375 6.3125 2.21875 6.3125 2.5V11.5C6.3125 11.8164 6.55859 12.0625 6.875 12.0625H13.625ZM6.875 13.75C5.60938 13.75 4.625 12.7656 4.625 11.5V2.5C4.625 1.26953 5.60938 0.25 6.875 0.25H11.7969C12.2188 0.25 12.6758 0.460938 12.9922 0.777344L15.3477 3.13281C15.6641 3.44922 15.875 3.90625 15.875 4.32812V11.5C15.875 12.7656 14.8555 13.75 13.625 13.75H6.875ZM2.375 4.75H3.5V6.4375H2.375C2.05859 6.4375 1.8125 6.71875 1.8125 7V16C1.8125 16.3164 2.05859 16.5625 2.375 16.5625H9.125C9.40625 16.5625 9.6875 16.3164 9.6875 16V14.875H11.375V16C11.375 17.2656 10.3555 18.25 9.125 18.25H2.375C1.10938 18.25 0.125 17.2656 0.125 16V7C0.125 5.76953 1.10938 4.75 2.375 4.75Z"/>
									</svg>
										
							
									<!-- مقدار برای کپی -->
									<span x-ref="copySource" class="text-sm font-mono text-gray-700" style="direction: ltr;">
										{{ request.get_host }}/profile/{{ request.user.user_name }}
									</span>
								</div>
							
								<!-- پیام تأیید -->
								<p x-show="copied" x-transition class="text-green-600 text-sm mt-2">نشانی کپی شد</p>
							</div>
							<span class="justify-start text-slate-600 text-sm font-normal mt-8">QR code</span>
							<div class="flex flex-col items-center gap-4">
								<div id="qrcode"></div>
								<button id="downloadBtn" class="w-full h-12 px-4 py-2 rounded-full outline outline-1 outline-offset-[-1px] outline-gray-900 flex flex-row items-center justify-center gap-2">
									<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M8.15625 1.40625V8.81641L10.7539 6.21875C11 5.94531 11.4102 5.94531 11.6836 6.21875C11.9297 6.46484 11.9297 6.875 11.6836 7.12109L7.9375 10.8398C7.69141 11.1133 7.28125 11.1133 7.03516 10.8398L3.31641 7.12109C3.04297 6.875 3.04297 6.46484 3.31641 6.21875C3.5625 5.94531 3.97266 5.94531 4.24609 6.21875L6.84375 8.81641V1.40625C6.84375 1.05078 7.11719 0.75 7.5 0.75C7.85547 0.75 8.15625 1.05078 8.15625 1.40625ZM4 9.0625L5.3125 10.375H2.25C2.00391 10.375 1.8125 10.5938 1.8125 10.8125V13C1.8125 13.2461 2.00391 13.4375 2.25 13.4375H12.75C12.9688 13.4375 13.1875 13.2461 13.1875 13V10.8125C13.1875 10.5938 12.9688 10.375 12.75 10.375H9.66016L10.9727 9.0625H12.75C13.707 9.0625 14.5 9.85547 14.5 10.8125V13C14.5 13.9844 13.707 14.75 12.75 14.75H2.25C1.26562 14.75 0.5 13.9844 0.5 13V10.8125C0.5 9.85547 1.26562 9.0625 2.25 9.0625H4ZM12.3125 11.9062C12.3125 12.2891 12.0117 12.5625 11.6562 12.5625C11.2734 12.5625 11 12.2891 11 11.9062C11 11.5508 11.2734 11.25 11.6562 11.25C12.0117 11.25 12.3125 11.5508 12.3125 11.9062Z" fill="#181F26"/>
									</svg>
									<span>دانلود QRCode</span>
								</button>
							</div>

							<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
							<script>
							document.addEventListener("DOMContentLoaded", function() {
								const url = "{{ request.get_host }}/profile/{{ request.user.user_name }}";

								// ساخت QRCode
								const qrcode = new QRCode(document.getElementById("qrcode"), {
									text: url,
									width: 300,
									height: 300
								});

								// دکمه دانلود
								document.getElementById("downloadBtn").addEventListener("click", function() {
									const img = document.querySelector("#qrcode img") || document.querySelector("#qrcode canvas");
									let dataUrl;
									if(img.tagName.toLowerCase() === "canvas"){
										dataUrl = img.toDataURL("image/png");
									}else{
										dataUrl = img.src;
									}
									const link = document.createElement("a");
									link.href = dataUrl;
									link.download = "qrcode.png";
									link.click();
								});
							});
							</script>
						</div>
                    </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 %}