{% extends 'core/base/base.html' %}
{% load static %}
{% load jalali_tags %}
{% load jalali_extras %}
{% block header %}
<script type="text/javascript" src="{% static 'assets/js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'assets/css/dropify.min.css' %}">
{% endblock header %}
{% block content %}
<div x-data="{tab: 'home'}" class="mt-4">
    <ul class="mb-5 overflow-y-auto whitespace-nowrap border-b border-[#ebedf2] font-semibold dark:border-[#191e3a] sm:flex">
        <li class="inline-block">
            <a
                href="javascript:;"
                class="flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary"
                :class="{'!border-primary text-primary' : tab == 'home'}"
                @click="tab='home'"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                    <path
                        opacity="0.5"
                        d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z"
                        stroke="currentColor"
                        stroke-width="1.5"
                    />
                    <path d="M12 15L12 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                </svg>
                اطلاعات کاربر
            </a>
        </li>
        <li class="inline-block">
            <a
                href="javascript:;"
                class="flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary"
                :class="{'!border-primary text-primary' : tab == 'payment-details'}"
                @click="tab='payment-details'"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                    <circle opacity="0.5" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                    <path d="M12 6V18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                    <path
                        d="M15 9.5C15 8.11929 13.6569 7 12 7C10.3431 7 9 8.11929 9 9.5C9 10.8807 10.3431 12 12 12C13.6569 12 15 13.1193 15 14.5C15 15.8807 13.6569 17 12 17C10.3431 17 9 15.8807 9 14.5"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                    />
                </svg>
                صفحات کاربر
            </a>
        </li>
        <li class="inline-block">
            <a
                href="javascript:;"
                class="flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary"
                :class="{'!border-primary text-primary' : tab == 'danger-zone'}"
                @click="tab='danger-zone'"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                    <path
                        d="M16.1007 13.359L16.5562 12.9062C17.1858 12.2801 18.1672 12.1515 18.9728 12.5894L20.8833 13.628C22.1102 14.2949 22.3806 15.9295 21.4217 16.883L20.0011 18.2954C19.6399 18.6546 19.1917 18.9171 18.6763 18.9651M4.00289 5.74561C3.96765 5.12559 4.25823 4.56668 4.69185 4.13552L6.26145 2.57483C7.13596 1.70529 8.61028 1.83992 9.37326 2.85908L10.6342 4.54348C11.2507 5.36691 11.1841 6.49484 10.4775 7.19738L10.1907 7.48257"
                        stroke="currentColor"
                        stroke-width="1.5"
                    />
                    <path
                        opacity="0.5"
                        d="M18.6763 18.9651C17.0469 19.117 13.0622 18.9492 8.8154 14.7266C4.81076 10.7447 4.09308 7.33182 4.00293 5.74561"
                        stroke="currentColor"
                        stroke-width="1.5"
                    />
                    <path
                        opacity="0.5"
                        d="M16.1007 13.3589C16.1007 13.3589 15.0181 14.4353 12.0631 11.4971C9.10807 8.55886 10.1907 7.48242 10.1907 7.48242"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                    />
                </svg>
                ناحیه خطر
            </a>
        </li>
    </ul>
    <template x-if="tab === 'home'">
        <div>
            <form method="post" action="{% url 'core:ajax_handler' %}" enctype="multipart/form-data" class="mb-5 rounded-md border border-[#ebedf2] bg-white p-4 dark:border-[#191e3a] dark:bg-[#0e1726]">
                {% csrf_token %}
                <h6 class="mb-5 text-lg font-bold">اطلاعات عمومی</h6>
                <div class="flex flex-col sm:flex-row">
                    <div class="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
                            {% if items.image %}
                            <img
                                src="{{ items.image.url }}"
                                alt="image"
                                class="mx-auto h-20 w-20 rounded-full object-cover md:h-32 md:w-32"
                            />
                            {% endif %}
                            <p class="py-2">تاریخ عضویت: {{items.date_joined|jalali_verbose_long }}</p>
                            <p class="py-2">وضعیت اکانت: {% if items.is_active %}فعال{% else %}غیرفعال{% endif %}</p>
                        </div>
                    <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label for="name">
                                نام کامل<span class="text-red-500">*</span>
                            </label>
                            <input id="name" name="name" type="text" value="{{items.name}}" placeholder="محمد کلانتر" class="form-input" />
                        </div>
                        <div>
                            <label for="user_name">
                                نام کاربری<span class="text-red-500">*</span>
                            </label>
                            <input id="user_name" name="user_name" type="text" value="{{items.user_name}}" placeholder="fardad" class="form-input" />
                        </div>
                        <div>
                            <label for="phone">
                                شماره تماس<span class="text-red-500">*</span>
                            </label>
                            <input id="phone" name="phone" type="text" value="{{items.phone}}" placeholder="0123456789" class="form-input" />
                        </div>
                        <div>
                            <label for="email">
                                ایمیل<span class="text-red-500">*</span>
                            </label>
                            <input id="email" name="email" type="email" value="{{items.email}}" placeholder="user@robocart.ir" class="form-input" />
                        </div>
                        <div class="w-full flex flex-col items-start gap-1">
                            <label for="image">
                                تصویر کاربر<span class="text-red-500">*</span>
                            </label>
                            <input type="file" class="Dropify" name="image" {% if items.image %} value="{{items.image.url}}" data-default-file="{{items.image.url}}" {% 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="mt-3 sm:col-span-2">
                            <input type="hidden" name="id" value="{{ items.id }}">
                            <input type="hidden" name="model" value="customer">
                            <input type="hidden" name="action_type" value="update">
                            <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
                        </div>
                    </div>
                </div>
            </form>
            
        </div>
    </template>
    <template x-if="tab === 'payment-details'">
        <div class="panel">
            <div class="mb-5">
                <h5 class="mb-4 text-lg font-semibold">صفحات کاربر</h5>
                <p>در این قسمت می توانید صفحات فعال کاربر را مشاهده کنید.</p>
            </div>
            <div class="mb-5">
                <div class="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
                    <div class="flex items-start justify-between py-3">
                        <h6 class="text-[15px] font-bold text-[#515365] dark:text-white-dark">
                            صفحه اصلی کاربر
                            <a class="mt-1 block text-xs font-normal text-white-dark dark:text-white-light" style="direction:ltr">{{ request.get_host }}/profile/{{ request.user.user_name }}</a>
                        </h6>
                        <div class="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
                            <a href="http://{{ request.get_host }}/profile/{{ request.user.user_name }}" class="btn btn-dark">مشاهده</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template x-if="tab === 'danger-zone'">
        <div class="switch">
            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                <div class="panel space-y-5">
                    <h5 class="mb-4 text-lg font-semibold">غیر فعال کردن حساب</h5>
                    <p>تا 24 ساعت نمی توانید پیام ها و اعلان ها را دریافت کنید.</p>
                    <label class="relative h-6 w-12">
                        <input
                            type="checkbox"
                            class="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                            id="custom_switch_checkbox7"
                        />
                        <span
                            for="custom_switch_checkbox7"
                            class="block h-full rounded-full bg-[#ebedf2] before:absolute before:left-1 before:bottom-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"
                        ></span>
                    </label>
                </div>
                <div class="panel space-y-5">
                    <h5 class="mb-4 text-lg font-semibold">حذف حساب</h5>
                    <p>پس از حذف اکانت دیگر راه برگشتی وجود ندارد. لطفا مطمئن باشید.</p>
                    <form method="post" action="{% url 'core:ajax_handler' %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="id" value="{{ items.id }}">
                        <input type="hidden" name="model" value="customer">
                        <input type="hidden" name="action_type" value="delete">
                        <button type="submit" class="btn btn-danger btn-delete-account">حذف حساب کاربری {{items.name}}</button>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>
{% endblock %}

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

{% endblock js %}