{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% load jalali_tags %}

{% include 'profile/drawer.html' %}

<br /><br /><br /><br />

<!-- نمایش پیام‌ها -->
<div class="container mt-5">
    {% if message %}
    <div class="alert alert-info custom-alert fade show" role="alert">
        <p>{{ message }}</p>
    </div>
    {% endif %}

    <!-- نمایش نوتیفیکیشن‌ها -->
    <h3 class="text-center mb-4" style="color: #495057; font-weight: bold; font-size: 1.5em;">
        <i class="fas fa-envelope" style="margin-left: 10px;"></i> :نوتیفیکیشن‌ها
    </h3>
    <div class="row animate__animated animate__delay-0.1s animate__fadeIn">
        {% for notification in notifications %}
        {% if  notification.activity_details.done %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card shadow-custom card-hover">
                    <div class="card-body">
                        <h4 class="card-title">{{ notification.title }}</h4>
                        <p class="card-text">{{ notification.message }}</p>
                        <small class="text-muted">دریافت شده در: {{ notification.created_at_shamsi }}</small>
                        <div class="mt-3">
                            <a href="{% url 'submit_evaluation' notification.id %}" class="btn btn-primary btn-sm action-btn">
                                <i class="fas fa-comment-alt"></i> ثبت نظر
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
    
    </div>
                    
    <br>

    <!-- نمایش کارهای آینده -->
    <h3 class="text-center mb-4" style="color: #495057; font-weight: bold; font-size: 1.5em;">
        <i class="fas fa-users-cog" style="margin-left: 10px;"></i> :کارهای آینده
    </h3>
    <div class="row">
{% for futurework in futureworks %}
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card shadow-custom card-hover">
            <div class="card-body">
                <h4 class="card-title">{{ futurework.title }}</h4>
                <p class="card-text">وضعیت: {{ futurework.get_status_display }}</p>
                <small class="text-muted">تاریخ: {{ futurework.created_at_shamsi }}</small>

                <!-- دکمه ها کنار هم در یک ردیف -->
                <div class="d-flex justify-content-between mt-3 flex-wrap">
                    {% if not futurework.is_read %}
                        <!-- دکمه برای تغییر وضعیت به خوانده شده -->
                        <a href="{% url 'mark_futurework_read' futurework.id %}" class="btn btn-success px-4 py-2 mb-2" style="border-radius: 30px; background-color: #4CAF50; color: white; font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease;">
                            <i class="fas fa-check-circle"></i> خوانده شد
                        </a>
                    {% else %}
                        <!-- اگر خوانده شده باشد -->
                        <span class="badge badge-secondary mb-2" style="font-weight: bold; font-size: 1.1em;">این کار خوانده شده است</span>
                    {% endif %}

                        <!-- دکمه برای تغییر وضعیت به در حال انجام -->
                        <a href="{% url 'mark_as_in_progress' futurework.id %}" onclick="confirmAction(event, this)" class="btn btn-warning px-4 py-2 mb-2" style="border-radius: 30px; background-color: #FF9800; color: white; font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease;">
                            <i class="fas fa-spinner"></i> در حال انجام
                        </a>
                        
                        <script>
                            function confirmAction(event, element) {
                                // جلوگیری از دنبال کردن لینک پیش‌فرض
                                event.preventDefault();
                        
                                // هدایت به صفحه تایید
                                if (confirm("آیا مطمئن هستید که این کار را تایید می‌کنید؟")) {
                                    // اگر کاربر تایید کرد، به URL هدایت می‌شود
                                    window.location.href = element.href; // هدایت به URL که در href لینک است
                                } else {
                                    // هیچ کاری انجام نمی‌دهیم
                                    return false;
                                }
                            }
                        </script>
                        
                        <!-- اگر وضعیت انجام شده باشد -->
                       
                        <!-- دکمه برای تغییر وضعیت به انجام شده -->
                        <a href="{% url 'mark_as_done' futurework.id %}" onclick="confirmAction(event, this)" class="btn btn-primary px-4 py-2 mb-2" style="border-radius: 30px; background-color: #2196F3; color: white; font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease;">
                            <i class="fas fa-check"></i> وضعیت انجام شده
                        </a>
                        
                        <script>
                            function confirmAction(event, element) {
                                // جلوگیری از دنبال کردن لینک پیش‌فرض
                                event.preventDefault();
                        
                                // هدایت به صفحه تایید
                                if (confirm("آیا مطمئن هستید که این کار را تایید می‌کنید؟")) {
                                    // اگر کاربر تایید کرد، به URL هدایت می‌شود
                                    window.location.href = element.href; // هدایت به URL که در href لینک است
                                } else {
                                    // هیچ کاری انجام نمی‌دهیم
                                    return false;
                                }
                            }
                        </script>
                        
                        
                        
                </div>
            </div>
        </div>
    </div>
{% endfor %}

    
    </div>
</div>

{% endblock %}

<style>
    /* طراحی کارت‌ها */
    .card-hover {
        border-radius: 15px;
        background-color: #f8f9fa;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        padding: 15px;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    /* طراحی دکمه‌ها */
    .action-btn {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
        font-size: 1em;
        padding: 10px 15px;
        border-radius: 25px;
        text-transform: uppercase;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

    .action-btn:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    /* طراحی alert پیام‌ها */
    .custom-alert {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
        border-radius: 10px;
        padding: 15px;
    }

    /* طراحی کارت برای آینده */
    .shadow-custom {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 10px;
    }

    /* تنظیم فونت‌ها و چیدمان */
    h3 {
        font-size: 1.5em;
        font-weight: bold;
        color: #495057;
        text-align: center;
    }

    .card-title {
        font-size: 1.2em;
        font-weight: 600;
        color: #495057;
    }

    .card-text {
        font-size: 1.1em;
        color: #212529;
    }

    /* افزودن انیمیشن به کارت‌ها */
    .card-body {
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .card-hover {
            margin-bottom: 20px;
        }
    }

    /* طراحی آیکون */
    .action-btn i {
        margin-right: 5px;
    }

    h3 i {
        margin-left: 10px;
    }
</style>

<script src="https://kit.fontawesome.com/a076d05399.js"></script>