{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}
<!-- لینک به فایل CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- لینک به فایل JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="custom-bg">
    <div class="container py-5">
        <h2 class="text-center text-light fw-bold mb-4">📋 لیست کارنامه واحدها</h2>
        <br>
        <br>
        
        <!-- دکمه ریست کارنامه‌ها -->
        <div class="text-center mb-4">
            <!-- دکمه ریست همه ریز فعالیت‌ها -->
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmationModal">🔄 ریست همه ریز فعالیت‌ها</button>
        </div>
        
     <!-- مودال تایید -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content rounded-4 shadow-lg" style="font-family: 'Vazir', sans-serif;">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="confirmationModalLabel">تایید عملیات</h5>
                <!-- دکمه بستن حذف شده -->
            </div>
            <div class="modal-body text-center">
                <p class="fs-4 mb-4">آیا مطمئنید که می‌خواهید همه ریز فعالیت‌ها را ریست کنید؟</p>
                <div class="d-flex justify-content-center">
                    <i class="bi bi-exclamation-triangle-fill text-warning fs-1"></i>
                </div>
            </div>
            <div class="modal-footer border-0 d-flex justify-content-between">
                <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">لغو</button>
                <form method="POST" action="{% url 'reset_activity_details' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger px-4">تایید</button>
                </form>
            </div>
        </div>
    </div>
</div>


        
        
        <div class="row justify-content-center animate__animated animate__delay-0.1s animate__fadeIn">
            {% for category in categories %}
            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                <a href="{% url 'reportcard_unit_by_category' category.0 %}" class="custom-card">
                    <div class="custom-card-body">
                        <h5 class="custom-card-title">{{ category.1 }}</h5>
                        <p class="custom-card-text">📌 مشاهده فعالیت‌های این واحد</p>
                    </div>
                </a>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-danger text-center fw-bold">
                    ⚠ هیچ رسته‌ای موجود نیست!
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<style>
    /* پس‌زمینه زیبا */
    .custom-bg {
        background: linear-gradient(135deg, #2b5876,#4e4376);
        min-height: 200vh;
        padding-top: 60px;
    }

    /* کارت‌های جذاب */
    .custom-card {
        display: block;
        text-decoration: none;
        background: white;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

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

    .custom-card-body {
        padding: 20px;
        text-align: center;
    }

    .custom-card-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #2b5876;
    }

    .custom-card-text {
        font-size: 0.9rem;
        color: #555;
        margin-top: 8px;
    }

</style>

{% endblock %}