{% extends 'base.html' %}

{% block title %}
گزارش جامع IT
{% endblock %}

{% block content %}

<div class="container-fluid">

    <!-- =========================================================
         HEADER
    ========================================================== -->

    <div class="report-header mb-4">

        <div class="text-center">

            <h6 class="mb-1 fw-bold">
                امارت اسلامی افغانستان
            </h6>

            <h6 class="mb-1 fw-bold">
                وزارت تحصیلات عالی
            </h6>

            <h5 class="mb-1 fw-bold">
                پوهنتون طبی چراغ
            </h5>

            <p class="mb-2 fw-bold text-muted">
                آمریت تکنالوژی معلوماتی
            </p>

            <h3 class="fw-bold mb-2">
                گزارش جامع وضعیت تکنالوژی معلوماتی
            </h3>

            <p class="text-muted mb-0">
                خلاصه وضعیت مکان‌ها، تجهیزات، فعالیت‌ها و تعمیرات
            </p>

        </div>

    </div>


    <!-- =========================================================
         DATE FILTER
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-body">

            <form method="get">

                <div class="row g-3 align-items-end">

                    <!-- از تاریخ -->
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label fw-bold">
                            از تاریخ
                        </label>

                        <input type="date" name="date_from" class="form-control report-date-input"
                            value="{{ date_from }}">
                    </div>

                    <!-- تا تاریخ -->
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label fw-bold">
                            تا تاریخ
                        </label>

                        <input type="date" name="date_to" class="form-control report-date-input" value="{{ date_to }}">
                    </div>

                    <!-- دکمه‌ها -->
                    <div class="col-lg-6 col-md-12">

                        <div class="report-action-buttons">

                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-bar-chart-line"></i>
                                تولید گزارش
                            </button>

                            <a href="{% url 'comprehensive_report_print' %}?date_from={{ date_from }}&date_to={{ date_to }}"
                                target="_blank" class="btn btn-outline-primary">
                                <i class="bi bi-printer"></i>
                                چاپ گزارش
                            </a>

                            <a href="{% url 'comprehensive_report_excel' %}?date_from={{ date_from }}&date_to={{ date_to }}"
                                class="btn btn-success">
                                <i class="bi bi-file-earmark-excel"></i>
                                خروجی Excel
                            </a>

                            <a href="{% url 'reports_home' %}" class="btn btn-outline-secondary report-back-button">
                                <i class="bi bi-arrow-right me-1"></i>
                                بازگشت به گزارش‌ها
                            </a>

                        </div>


                    </div>


                </div>

                <!-- پاک کردن فیلتر -->
                <div class="mt-3">
                    <a href="{% url 'comprehensive_report' %}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>
                        پاک کردن فیلتر
                    </a>
                </div>

            </form>
        </div>

    </div>


    <!-- =========================================================
         REPORT DATE INFORMATION
    ========================================================== -->

    {% if date_from or date_to %}

    <div class="alert alert-light border mb-4">

        <i class="bi bi-calendar3 me-2"></i>

        <strong>
            بازه گزارش:
        </strong>

        {% if date_from %}
        از {{ date_from }}
        {% endif %}

        {% if date_to %}
        تا {{ date_to }}
        {% endif %}

    </div>

    {% endif %}


    <!-- =========================================================
         SUMMARY CARDS
    ========================================================== -->

    <div class="row g-4 mb-4">


        <!-- Facilities -->

        <div class="col-md-6 col-xl-3">

            <div class="summary-card summary-blue">

                <div class="summary-icon">
                    <i class="bi bi-building"></i>
                </div>

                <div>

                    <div class="summary-title">
                        مکان‌ها
                    </div>

                    <div class="summary-number">
                        {{ total_facilities }}
                    </div>

                    <div class="summary-text">
                        مجموع مکان‌های ثبت‌شده
                    </div>

                </div>

            </div>

        </div>


        <!-- Assets -->

        <div class="col-md-6 col-xl-3">

            <div class="summary-card summary-green">

                <div class="summary-icon">
                    <i class="bi bi-pc-display"></i>
                </div>

                <div>

                    <div class="summary-title">
                        تجهیزات
                    </div>

                    <div class="summary-number">
                        {{ total_assets }}
                    </div>

                    <div class="summary-text">
                        مجموع تجهیزات ثبت‌شده
                    </div>

                </div>

            </div>

        </div>


        <!-- Activities -->

        <div class="col-md-6 col-xl-3">

            <div class="summary-card summary-orange">

                <div class="summary-icon">
                    <i class="bi bi-activity"></i>
                </div>

                <div>

                    <div class="summary-title">
                        فعالیت‌ها
                    </div>

                    <div class="summary-number">
                        {{ total_activities }}
                    </div>

                    <div class="summary-text">
                        فعالیت‌ها در بازه انتخاب‌شده
                    </div>

                </div>

            </div>

        </div>


        <!-- Maintenance -->

        <div class="col-md-6 col-xl-3">

            <div class="summary-card summary-red">

                <div class="summary-icon">
                    <i class="bi bi-tools"></i>
                </div>

                <div>

                    <div class="summary-title">
                        تعمیرات
                    </div>

                    <div class="summary-number">
                        {{ total_maintenance }}
                    </div>

                    <div class="summary-text">
                        سوابق تعمیرات در بازه انتخاب‌شده
                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         ATTENTION ITEMS
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white border-0 py-3">

            <h5 class="mb-0 fw-bold text-danger">

                <i class="bi bi-exclamation-triangle-fill me-2"></i>

                موارد نیازمند توجه

            </h5>

            <small class="text-muted">

                مواردی که نیاز به بررسی، پیگیری یا اقدام دارند

            </small>

        </div>


        <div class="card-body">

            {% if attention_items %}

            <div class="row g-3">

                {% for item in attention_items %}

                <div class="col-md-6 col-lg-4">

                    <div class="attention-item attention-{{ item.type }}">

                        <div class="attention-icon">

                            {% if item.type == 'danger' %}

                            <i class="bi bi-exclamation-circle-fill"></i>

                            {% elif item.type == 'warning' %}

                            <i class="bi bi-exclamation-triangle-fill"></i>

                            {% else %}

                            <i class="bi bi-info-circle-fill"></i>

                            {% endif %}

                        </div>


                        <div class="attention-content">

                            <div class="d-flex justify-content-between align-items-center mb-1">

                                <h6 class="mb-0 fw-bold">
                                    {{ item.title }}
                                </h6>

                                <span class="attention-count">
                                    {{ item.count }}
                                </span>

                            </div>

                            <p class="mb-0 text-muted">
                                {{ item.text }}
                            </p>

                        </div>

                    </div>

                </div>

                {% endfor %}

            </div>


            {% else %}

            <div class="text-center py-4">

                <div class="mb-3">

                    <i class="bi bi-check-circle-fill text-success" style="font-size: 48px;"></i>

                </div>

                <h6 class="fw-bold text-success">
                    مورد خاصی برای توجه وجود ندارد
                </h6>

                <p class="text-muted mb-0">
                    در حال حاضر هیچ مورد عاجل یا نیازمند پیگیری ثبت نشده است.
                </p>

            </div>

            {% endif %}

        </div>

    </div>


    <!-- =========================================================
         FACILITIES
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white border-0 py-3">

            <h5 class="mb-0 fw-bold">

                <i class="bi bi-building text-primary me-2"></i>

                وضعیت مکان‌ها

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-3">


                <div class="col-md-6">

                    <div class="status-box status-success">

                        <div class="status-icon">
                            <i class="bi bi-check-circle"></i>
                        </div>

                        <div>

                            <div class="status-title">
                                مکان‌های فعال
                            </div>

                            <div class="status-number">
                                {{ active_facilities }}
                            </div>

                        </div>

                    </div>

                </div>


                <div class="col-md-6">

                    <div class="status-box status-secondary">

                        <div class="status-icon">
                            <i class="bi bi-dash-circle"></i>
                        </div>

                        <div>

                            <div class="status-title">
                                مکان‌های غیرفعال
                            </div>

                            <div class="status-number">
                                {{ inactive_facilities }}
                            </div>

                        </div>

                    </div>

                </div>

            </div>


            <!-- Facility Types -->

            <div class="mt-4">

                <h6 class="fw-bold mb-3">
                    تفکیک نوع مکان
                </h6>

                <div class="row g-3">

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>صنف</span>
                            <strong>{{ facility_types.CLASSROOM }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>لابراتوار</span>
                            <strong>{{ facility_types.LABORATORY }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>دفتر</span>
                            <strong>{{ facility_types.OFFICE }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>اتاق جلسه</span>
                            <strong>{{ facility_types.MEETING_ROOM }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>سرور روم</span>
                            <strong>{{ facility_types.SERVER_ROOM }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>گدام</span>
                            <strong>{{ facility_types.STORE }}</strong>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="mini-stat">
                            <span>سایر</span>
                            <strong>{{ facility_types.OTHER }}</strong>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         ASSETS
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white border-0 py-3">

            <h5 class="mb-0 fw-bold">

                <i class="bi bi-pc-display text-success me-2"></i>

                وضعیت تجهیزات

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-3">


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat asset-active">
                        <span>فعال</span>
                        <strong>{{ asset_status.ACTIVE }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat asset-damaged">
                        <span>خراب</span>
                        <strong>{{ asset_status.DAMAGED }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat asset-repair">
                        <span>تحت ترمیم</span>
                        <strong>{{ asset_status.UNDER_REPAIR }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>در گدام</span>
                        <strong>{{ asset_status.STORED }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat asset-lost">
                        <span>مفقود</span>
                        <strong>{{ asset_status.LOST }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>خارج شده</span>
                        <strong>{{ asset_status.DISPOSED }}</strong>
                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         ACTIVITIES
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white border-0 py-3">

            <h5 class="mb-0 fw-bold">

                <i class="bi bi-activity text-warning me-2"></i>

                وضعیت فعالیت‌ها

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-3">


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>مجموع فعالیت‌ها</span>
                        <strong>{{ total_activities }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat activity-completed">
                        <span>تکمیل شده</span>
                        <strong>{{ completed_activities }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat activity-pending">
                        <span>در انتظار</span>
                        <strong>{{ pending_activities }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>در حال اجرا</span>
                        <strong>{{ in_progress_activities }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>لغو شده</span>
                        <strong>{{ cancelled_activities }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat activity-urgent">
                        <span>عاجل</span>
                        <strong>{{ urgent_activities }}</strong>
                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         MAINTENANCE
    ========================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white border-0 py-3">

            <h5 class="mb-0 fw-bold">

                <i class="bi bi-tools text-danger me-2"></i>

                وضعیت تعمیرات

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-3">


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>مجموع تعمیرات</span>
                        <strong>{{ total_maintenance }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat maintenance-completed">
                        <span>تکمیل شده</span>
                        <strong>{{ completed_maintenance }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat maintenance-pending">
                        <span>در انتظار تعمیر</span>
                        <strong>{{ pending_maintenance }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>در حال تعمیر</span>
                        <strong>{{ in_progress_maintenance }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat">
                        <span>ارسال شده به بیرون</span>
                        <strong>{{ sent_out_maintenance }}</strong>
                    </div>

                </div>


                <div class="col-md-6 col-lg-4">

                    <div class="mini-stat maintenance-danger">
                        <span>غیرقابل تعمیر</span>
                        <strong>{{ not_repairable_maintenance }}</strong>
                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         FOOTER NOTE
    ========================================================== -->

    <div class="alert alert-light border text-center mb-4">

        <i class="bi bi-info-circle me-1"></i>

        این گزارش بر اساس اطلاعات ثبت‌شده در سیستم مدیریت تکنالوژی معلوماتی تهیه شده است.

    </div>


</div>


<!-- =============================================================
     CSS
============================================================== -->

<style>
    /* ---------------------------------------------------------
       Report Header
    --------------------------------------------------------- */

    .report-header {
        background: #ffffff;
        border: 1px solid #e8edf3;
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    }


    /* ---------------------------------------------------------
       Summary Cards
    --------------------------------------------------------- */

    .summary-card {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 22px;
        min-height: 135px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e8edf3;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    }


    .summary-icon {
        width: 62px;
        height: 62px;
        min-width: 62px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }


    .summary-title {
        font-size: 14px;
        font-weight: 700;
        color: #475569;
        margin-bottom: 4px;
    }


    .summary-number {
        font-size: 30px;
        font-weight: 800;
        line-height: 1.1;
        color: #1e293b;
    }


    .summary-text {
        font-size: 12px;
        color: #64748b;
        margin-top: 5px;
    }


    .summary-blue .summary-icon {
        background: #eff6ff;
        color: #0d6efd;
    }


    .summary-green .summary-icon {
        background: #ecfdf5;
        color: #198754;
    }


    .summary-orange .summary-icon {
        background: #fff7ed;
        color: #f59e0b;
    }


    .summary-red .summary-icon {
        background: #fff1f2;
        color: #dc3545;
    }


    /* ---------------------------------------------------------
       Status Boxes
    --------------------------------------------------------- */

    .status-box {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #e9ecef;
    }


    .status-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }


    .status-success {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }


    .status-success .status-icon {
        background: #dcfce7;
        color: #198754;
    }


    .status-secondary {
        background: #f8fafc;
        border-color: #e2e8f0;
    }


    .status-secondary .status-icon {
        background: #e2e8f0;
        color: #64748b;
    }


    .status-title {
        color: #64748b;
        font-size: 13px;
        margin-bottom: 3px;
    }


    .status-number {
        color: #1e293b;
        font-size: 24px;
        font-weight: 800;
    }


    /* ---------------------------------------------------------
       Mini Statistics
    --------------------------------------------------------- */

    .mini-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 18px;
        min-height: 58px;
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid #e9ecef;
    }


    .mini-stat span {
        color: #64748b;
        font-size: 13px;
    }


    .mini-stat strong {
        color: #1e293b;
        font-size: 18px;
        font-weight: 800;
    }


    .asset-active,
    .activity-completed,
    .maintenance-completed {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }


    .asset-damaged,
    .activity-urgent,
    .maintenance-danger {
        background: #fff1f2;
        border-color: #fecdd3;
    }


    .asset-repair,
    .activity-pending,
    .maintenance-pending {
        background: #fff7ed;
        border-color: #fed7aa;
    }


    .asset-lost {
        background: #fef2f2;
        border-color: #fecaca;
    }


    /* ---------------------------------------------------------
       Attention Items
    --------------------------------------------------------- */

    .attention-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 18px;
        border-radius: 12px;
        border: 1px solid #e9ecef;
        background: #fff;
        height: 100%;
        transition: all 0.2s ease;
    }


    .attention-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    }


    .attention-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }


    .attention-content {
        flex: 1;
    }


    .attention-content h6 {
        font-size: 14px;
    }


    .attention-content p {
        font-size: 12px;
        line-height: 1.7;
    }


    .attention-count {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
    }


    /* Danger */

    .attention-danger {
        border-right: 4px solid #dc3545;
    }


    .attention-danger .attention-icon {
        background: #fff1f2;
        color: #dc3545;
    }


    .attention-danger .attention-count {
        background: #dc3545;
        color: #fff;
    }


    /* Warning */

    .attention-warning {
        border-right: 4px solid #f59e0b;
    }


    .attention-warning .attention-icon {
        background: #fff7ed;
        color: #f59e0b;
    }


    .attention-warning .attention-count {
        background: #f59e0b;
        color: #fff;
    }


    /* Info */

    .attention-info {
        border-right: 4px solid #0d6efd;
    }


    .attention-info .attention-icon {
        background: #eff6ff;
        color: #0d6efd;
    }


    .attention-info .attention-count {
        background: #0d6efd;
        color: #fff;
    }


    /* ---------------------------------------------------------
       Responsive
    --------------------------------------------------------- */

    @media (max-width: 768px) {

        .report-header {
            padding: 20px 15px;
        }


        .report-header h3 {
            font-size: 20px;
        }


        .summary-card {
            padding: 18px;
        }


        .summary-number {
            font-size: 25px;
        }


        .attention-item {
            padding: 15px;
        }

    }
</style>

{% endblock %}