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

<br />
<br />
<br />
<br />
<div id="printableArea">
<div class="container mt-4 animate__animated animate__delay-0.1s animate__fadeIn">
    <!-- بخش اطلاعات کارنامه -->
    <div class="card mb-4 shadow-sm p-3 mb-5 bg-white rounded">
        <div class="card-body">
            <div  >
                {% if report_card.person.person_private_info.pic %}
                <img src="{{report_card.person.person_private_info.pic.url}}" alt="تصویر" class="d-flex float-right rounded-circle" width="80px" height="80px">
                {% else %}
                <img src="{% static 'media\users\default_profile.png' %}" alt="تصویر پیش‌فرض" width="80px" height="80px" class="d-flex float-right rounded-circle" />
                 {% endif %} 
            </div>
            <div>
            <h4><strong>نام:</strong> {{ report_card.person }}</h4>
            <p><strong>حلقه:</strong> {{ report_card.ring }}</p>
            <p><strong>سرگروه حلقه:</strong> {{ report_card.ring.major }}</p>
            <p><strong>بازه زمانی:</strong> {{ report_card.date }}</p>
            
            </div>
        </div>
        
    </div>


    <!-- بخش جزئیات کارنامه -->
    <h2 class="mb-4 text-center">جزئیات کارنامه: {{ report_card.title }}</h2>

    <div class="table-responsive">  <!-- فعال کردن اسکرول افقی در حالت موبایل -->
        <table class="table table-bordered bg-light text-center"> <!-- اضافه کردن بکگراند به جدول -->
            <thead class="bg-light-dark ">  <!-- اضافه کردن بکگراند به هدر جدول -->
                <tr >
                    <th> شاخصه ها</th>
                    <th>امتیاز</th>

                </tr>
            </thead>
            <tbody>
                {% for detail in details %}
                    <tr>
                        <td>{{ detail.index.title }}</td>
                        <td>{{ detail.score }}</td>

                    </tr>
                    
                    {% empty %}
                    <tr>
                        <td colspan="2" class="text-center">هیچ جزئیاتی یافت نشد.</td>
                    </tr>
                    
                    {% endfor %}

                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-right"><strong>معدل کل:</strong></td>
                            <td id="total-average" class="text-center">{{ report_card.average_score|default:0.00 }}</td> <!-- نمایش میانگین نمرات -->
                        </tr>
                    </tfoot>
                    
                  
                        
            </tbody>
        </table>
    </div>
</div>

</div>

<style>
    @media print {
.no-print {
    display: none !important;
}
}

</style>
<div class="text-center mt-4">

<button class="btn btn-primary btn-lg no-print" onclick="window.print()">پرینت کارنامه</button></div>
<script>
    function printReport() {
        var printContents = document.getElementById("printableArea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
        location.reload();
    }
</script>

{% endblock %}