{% 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">   
	<form id="ticketForm" class="w-full flex flex-col items-center justify-center gap-6 mt-4" method="post" enctype="multipart/form-data">
		{% csrf_token %}							
		<div class=" w-full">
			<label for="subject" 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="subject" placeholder="مثال: عدم امکان ثبت محصول در فروشگاه" name="subject" 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="body" 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>
			<textarea type="text" id="body" placeholder="مثال: لورم ایپسوم یک متن توصیفی است." name="body" 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" required></textarea>
			<span id="wordWarning" class="text-slate-400 text-xs font-normal">برای بخش توضیحات، حداقل 10 کلمه توضیحات الزامی است.</span>
		</div>
		<div class="w-full flex flex-col items-start gap-1">
			<label for="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" name="image" id="image"/>
			<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-10 flex flex-row items-center justify-center gap-2  w-11/12 bottom-3">
			<a href="{% url "front:ticket_fun" %}" 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">
				انصراف
			</a>
			<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>
{% 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>
<script>
document.getElementById("ticketForm").addEventListener("submit", function(e) {
    let body = document.getElementById("body").value.trim()
    let words = body.split(/\s+/).filter(w => w.length > 0)
    if (words.length < 10) {
        e.preventDefault()
        let warning = document.getElementById("wordWarning")
        warning.textContent = "باید حداقل 10 کلمه وارد کنید. (شما " + words.length + " کلمه وارد کرده‌اید)"
        warning.classList.remove("text-slate-400")
        warning.classList.add("text-red-500")
    }
})
</script>
{% endblock js %}