{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h2 class="text-center mb-4">ثبت نظر برای نوتیفیکیشن: {{ notification.title }}</h2>
    <form method="post" action="{% url 'submit_evaluation' notification.id %}">
        {% csrf_token %}
        <div class="card p-4 shadow-sm rounded">
            <div class="mb-3">
                <p class="font-weight-bold">رسته: <span class="text-info">{{ main_task.get_raste_categories_display }}</span></p>
            </div>
            <div class="mb-3">
                <p class="font-weight-bold">وظیفه اصلی: <span class="text-info">{{ main_task.mainTask }}</span></p>
            </div>
            <div class="mb-3">
                <p class="font-weight-bold">ریزفعالیت: <span class="text-info">{{ activity_detail.microActivity }}</span></p>
            </div>

            <div class="mb-3">
                <label for="value_choice" class="form-label">انتخاب نظر:</label>
                <select id="value_choice" name="value_choice" class="form-select custom-select" required>
                    <option value="" disabled selected>لطفاً نظر خود را انتخاب کنید</option>
                    <option value="0">غیرقابل قبول</option>
                    <option value="0.25">ضعیف</option>
                    <option value="0.5">متوسط</option>
                    <option value="0.75">خوب</option>
                    <option value="1">عالی</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label for="description" class="form-label">توضیحات:</label>
                <textarea id="description" name="description" class="form-control" placeholder="توضیحات خود را وارد کنید" rows="4"></textarea>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-primary px-5 py-2">ارسال</button>
            </div>
        </div>
    </form>
</div>


<style>
    /* استایل سفارشی برای زیبایی بیشتر select */
.custom-select {
    -webkit-appearance: none; /* حذف ظاهر پیش‌فرض مرورگر */
    -moz-appearance: none;
    appearance: none;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
}

.custom-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-select option {
    background-color: #f8f9fa;
    padding: 10px;
}

.custom-select::-ms-expand {
    display: none; /* مخفی کردن دکمه انتخاب در مرورگرهای قدیمی */
}

/* استایل برای ظاهر دکمه انتخاب */
.custom-select::after {
    content: '▼'; /* نماد فلش */
    font-size: 1rem;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

</style>
{% endblock %}