{% load jalali_tags %}

{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'admin/jquery.ui.datepicker.jalali/themes/base/jquery-ui.min.css' %}">
<script src="{% static 'admin/js/django_jalali.min.js' %}"></script>
<div class="container mt-30">
    <h2 class="mb-4 text-center">ریزفعالیت‌های {{ main_task.mainTask}}</h2>
     
    {% include 'profile/message.html' %}
    
    <!-- activity_details_list.html -->
    <div class="card mb-4 shadow-lg rounded animate__animated animate__delay-0.1s animate__fadeIn" style="max-width: 900px; margin: 20px auto; border-radius: 15px;">
        <div class="card-body">
            <div class="row text-center">
                <div class="col-md-4 mb-3">
                    <label for="raste" class="font-weight-bold text-muted">رسته:</label>
                    <div class="form-control-plaintext p-2" style="background-color: #f7f7f7; border-radius: 8px;">
                        {{ main_task.get_raste_categories_display }}
                    </div>
                </div>
                <div class="col-md-8 mb-3 ">
                    <label for="mainTask" class="font-weight-bold text-muted">وظایف اصلی:</label>
                    <div class="form-control-plaintext p-2" style="background-color: #f7f7f7; border-radius: 8px;">
                        {{ main_task.mainTask }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if roles_status.ادمین_اصلی or roles_status.فرماندهی  or roles_status.جانشین or roles_status.نیرو_انسانی %}
 
    <a href="{% url 'activity_details_create' main_task.id %}" class="btn btn-success mb-3">افزودن ریزفعالیت جدید</a>
{%endif%}
    <div class="table-responsive animate__animated animate__delay-0.1s animate__fadeIn">
        <table class="table table-bordered bg-light text-center ">
            <thead class="bg-dark text-white">
                <tr>
                    <th>ردیف</th>
                    <th>ریزفعالیت</th>
                    <th>ضریب</th>
                    <th>انجام شده؟</th>
                    <th>توضیحات</th>
                    <th>تاریخ انجام</th>
                    {% if not roles_status.اعضای_کانون%}

                    <th>عملیات</th>
                    {%endif%}

                </tr>
            </thead>
            <tbody>
                {% for activity in activities %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                     <td>{{ activity.microActivity }}</td>
                    <td>{{ activity.ratio }}</td>
                    <td>{{ activity.done|yesno:"بله,خیر" }}</td>
                    <td>{{ activity.description|default:"-" }}</td>
                    <td>{{ activity.time }}</td>
                    {% if not roles_status.اعضای_کانون%}

                    <td>
                        
                        <div class="text-center d-flex justify-content-center">
                            {% if activity.done %}
    <a href="#" class="text-muted mx-1" title="قبلاً انجام شده" onclick="event.preventDefault();">
        <i class="fas fa-check-circle" style="color: gray;"></i>
    </a>
{% else %}
    <a href="#" class="text-success mx-1"
       onclick="openModal('{{ activity.pk }}', '{{ activity.microActivity }}', this); event.preventDefault();"
       title="انجام شود؟">
        <i class="fas fa-check-circle" style="color: green;"></i>
    </a>
{% endif %}

                            <a href="#" class="text-danger mx-1" onclick="openCancelModal('{{ activity.pk }}', '{{ activity.microActivity }}'); event.preventDefault();" title="لغو تایید">
                                <i class="fas fa-times-circle" style="color: red;"></i>
                            </a>
                            {% if roles_status.ادمین_اصلی or roles_status.فرماندهی or roles_status.نیرو_انسانی %}
                            <a href="{% url 'activity_details_update' activity.pk %}" class="text-warning mx-1" title="ویرایش">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'activity_details_delete' activity.pk %}" class="text-danger mx-1" title="حذف">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                        {% endif %}
                    </td>
                    {% endif %}
     
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center">هیچ ریزفعالیتی یافت نشد.</td>

                </tr>

                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if roles_status.ادمین_اصلی or roles_status.فرماندهی or roles_status.جانشین or roles_status.نیرو_انسانی %}
    <a href="{% url 'duties_and_activities_by_category' main_task.raste_categories %}" class="btn btn-secondary">بازگشت به لیست وظایف</a>
{% else %}
    <a href="{% url 'my_duties' %}" class="btn btn-secondary">بازگشت به لیست وظایف</a>
{% endif %}

</div>

<!-- تایید انجام -->
<div class="modal fade" id="doneModal" tabindex="-1" aria-labelledby="doneModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="doneForm" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="doneModalLabel">تایید انجام ریزفعالیت</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                </div>
                <div class="modal-body">
                    <p>آیا مطمئنید که این ریزفعالیت انجام شده است؟</p>
                    <p><strong>ریزفعالیت:</strong> <span id="activityName"></span></p>
                    <div class="form-group">
                        <label for="description">توضیحات:</label>
                        <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="time">زمان انجام:</label>
                        <input class="form-control jalali_date-input" id="time" name="time" required>
                    </div>
                    
                    
                </div>
                <div class="modal-footer">
                    <a href="/meeting/duties/{{ main_task.id }}/activities/" class="btn btn-secondary" data-bs-dismiss="modal">لغو</a>
                    <button type="submit" class="btn btn-primary">ثبت</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- لغو تایید -->
<div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="cancelForm" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="cancelModalLabel">لغو تایید انجام ریزفعالیت</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                </div>
                <div class="modal-body">
                    <p>آیا مطمئنید که این ریزفعالیت لغو شود؟</p>
                    <p><strong>ریزفعالیت:</strong> <span id="cancelActivityName"></span></p>
                    <div class="form-group">
                        <label for="cancelDescription">توضیحات:</label>
                        <textarea class="form-control" id="cancelDescription" name="description" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="/meeting/duties/{{ main_task.id }}/activities/" class="btn btn-secondary" data-bs-dismiss="modal">لغو</a>
                    <button type="submit" class="btn btn-danger">ثبت</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $(".jalali_date-input").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            showButtonPanel: true,
        });
    });
</script>

<script>
    function openModal(activityId, activityName) {
        const form = document.getElementById('doneForm');
        form.action = `{% url 'activity_done' 0 %}`.replace('0', activityId);
        document.getElementById('activityName').textContent = activityName;
        const modal = new bootstrap.Modal(document.getElementById('doneModal'));
        modal.show();
    }

    function openCancelModal(activityId, activityName) {
        const form = document.getElementById('cancelForm');
        form.action = `{% url 'activity_not_done' 0 %}`.replace('0', activityId);
        document.getElementById('cancelActivityName').textContent = activityName;
        const modal = new bootstrap.Modal(document.getElementById('cancelModal'));
        modal.show();
    }
</script>
{% endblock %}