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

<br />
<br />
<br />
<div id="printableArea">
<div class="container mt-5">
    <h1 class="mb-4 text-center text-success ">کارنامه‌ نهایی</h1>
    <br />

    <!-- اطلاعات شخص -->
    <div class="card mb-4 shadow-lg rounded animate__animated animate__delay-0.1s animate__fadeIn">
        <div class="col-mt-10 text-start">
                {% if person.person_private_info.pic %}
                    <img src="{{ person.person_private_info.pic.url }}" alt="تصویر" class="rounded-circle" width="80" height="80">
                {% else %}
                    <img src="{% static 'media\users\default_profile.png' %}" alt="تصویر پیش‌فرض"  class="rounded-circle" width="80" height="80">
                {% endif %}
            </div>
        <div class="row text-center">
            <div class="col-md-6 mb-3 ">
                <label for="name" class="font-weight-bold text-dark">نام:</label>
                <div class="form-control-plaintext p-2" style="background-color: #d6d6d6; border-radius: 8px;">
                    {{ person.user.first_name }} {{ person.user.last_name }}
                </div>
            </div>
            
            <div class="col-md-6 mb-3">
                <label for="ringName" class="font-weight-bold text-dark">حلقه:</label>
                <div class="form-control-plaintext p-2" style="background-color: #d6d6d6; border-radius: 8px;">
                    {{ ring_name }}
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <label for="sardoshi" class="font-weight-bold text-dark">سردوشی:</label>
                <div class="form-control-plaintext p-2" style="background-color: #d6d6d6; border-radius: 8px;">
                    {{ sardoshi }}
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <label for="major" class="font-weight-bold text-dark">سرگروه حلقه:</label>
                <div class="form-control-plaintext p-2" style="background-color: #d6d6d6; border-radius: 8px;">
                    {{ major }}
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <label for="date" class="font-weight-bold text-dark">بازه زمانی:</label>
                <div class="form-control-plaintext p-2" style="background-color: #d6d6d6; border-radius: 8px;">
                    {{ baze }}  ({{ end_date|date:"Y/m/d" }}تا{{ start_date|date:"Y/m/d" }} )

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

        <!-- جدول کارنامه‌ها -->
        <h4 class="mb-4 text-center">جزئیات کارنامه‌ها</h4>
        {% for card in report_cards %}
        <div class="table-responsive">
            <table class="table table-bordered bg-light text-center">
                <thead class="text-white" style="background-color: #f4efef;">
                    <tr style="color: #222222;">
                        <th>عنوان</th>
                        <th>سرگروه</th>
                        <th>تعلیم و تربیت</th>
                        <th>علمی و آموزشی</th>
                        <th>ورزشی و اردویی</th>
                        <th>سیاست‌گذاری</th>
                        <th>فرماندهی</th>
                        <th>امام جماعت</th>
                        <th class="text-warning">معدل</th>
                        {% if card.title.title == 'نهایی' %}

                        <th class="text-success">معدل کل</th>
                        {% endif %}

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ card.title.title }}</td>
                        <td>{{ card.sargroh }}</td>
                        <td>{{ card.talimvatarbiat }}</td>
                        <td>{{ card.elmivaamozeshi }}</td>
                        <td>{{ card.varzeshivaordoee }}</td>
                        {% if card.title.title == 'مستمر' %}
                        <td>-</td>
                        {%else%}
                        <td>{{ card.syasatgozari }}</td>
                        {% endif %}
                        <td>{{ card.farmandehi }}</td>
                        <td>{{ card.emamjamaat }}</td>
                        {% if card.title.title == 'نهایی' %}
                        <td class="fw-bold text-s">{{ average_score|floatformat:2 }}</td>
                        {% else %}
                        <td class="fw-bold text-s">{{ regular_average_score|floatformat:2 }}</td>
                        {% endif %}
                    </tr>
                    {% if card.title.title == 'نهایی' %}
                    {% for continuous_card in continuous_report_cards %}
                    <tr>
                        <td>{{ continuous_card.title.title }}</td>
                        <td>{{ continuous_card.sargroh }}</td>
                        <td>{{ continuous_card.talimvatarbiat }}</td>
                        <td>{{ continuous_card.elmivaamozeshi }}</td>
                        <td>{{ continuous_card.varzeshivaordoee }}</td>
                        <td>-</td>
                        <td>{{ continuous_card.farmandehi }}</td>
                        <td>{{ continuous_card.emamjamaat }}</td>
                        {% if card.title.title == 'مستمر' %}
                        <td class="fw-bold text-s">{{ average_score|floatformat:2 }}</td>
                        {% else %}
                        <td class="fw-bold text-s">{{ regular_average_score|floatformat:2 }}</td>
                        <td>{{ total_average_score }}</td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                    {% endif %}

                </tbody>
            </table>
        </div>
        {% endfor %}
        {% for card in report_cards %}

{% if card.title.title == 'نهایی' %}
    {% if show_upgrade_form and show_upgrade_form1 %}
    <div class="alert alert-success mt-4 shadow-lg rounded p-4">
        <h5 class="text-center text-dark mb-4">ارتقا سردوشی</h5>
        <p class="text-center  mb-4" style="color: antiquewhite ;">معدل شما بالای 18 است. برای ارتقای سردوشی لطفاً موافقت خود را ثبت کنید. این ارتقا باید توسط حفاظت تأیید شود.</p>
        <form action="{% url 'upgrade_sardoshi' person.id %}" method="post">
            {% csrf_token %}
            <div class="form-check mb-3">
                <div class="form-check d-flex justify-content-center align-items-center">
                    <input class="form-check-input" type="checkbox" id="agree" name="agree" required>
                </div>
                <br>
                <label class="form-check-label d-block text-center" for="agree">
                    موافقت خود را اعلام می‌کنم
                </label>
                
            </div>
            <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-success btn-lg shadow-sm hover-scale">ثبت درخواست</button>
            </div>
        </form>
    </div>
    {% endif %}
    {% endif %}
    
    {% endfor %}


    </div>
</div>
</div>
<div class="text-center mt-4">
    <style>
        @media print {
            .no-print {
                display: none !important;
            }
            body {
                background: white !important;
                color: black !important;
            }
            .container {
                box-shadow: none !important;
                border: none !important;
            }
            .card {
                background-color: white !important;
                color: black !important;
                box-shadow: none !important;
            }
            .table {
                background: white !important;
            }
            .table thead {
                background: #000 !important;
                color: white !important;
            }
            /* فیکس کردن استایل فیلدهای نمایش فقط خواندنی */
            .form-control-plaintext {
                background-color: #f8f9fa !important;
                border: 1px solid #ddd !important;
                color: black !important;
                padding: 0.375rem 0.75rem !important;
                font-size: 1rem !important;
                font-weight: 400 !important;
            }
            img {
                display: block;
                max-width: 100px;
                max-height: 100px;
            }
            @media print {
    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .col-md-6 {
        width: 48%; /* نصف عرض برای دو ستون */
        display: inline-block;
    }
}

        }
    </style>
    
<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 %}