{% extends 'doctor/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.analyze %} {% endblock %}
{% block sidebar.assistants %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.timeslot %} {% endblock %}
{% block sidebar.shop %} {% endblock %}
{% block sidebar.food %} {% endblock %}
{% block sidebar.points %} {% endblock %}
{% block sidebar.chat_inbox %} {% endblock %}
{% block sidebar.file_upload %} class="active" {% endblock %}

{% block content %}
<div class="content">
    <div class="row">
        <div class="col-sm-12 col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header text-right">
                    <h4 class="card-title" style="color: #009A6E;">
                        {% trans "تحلیل آزمایش‌خون" %}
                    </h4>
                    <p class="mb-0" style="direction: rtl;">
                        {% trans "در این صفحه می‌توانید آزمایش‌های خون خود را آپلود کنید تا گزارش تحلیلی آن‌ها تولید شده و در اختیار شما قرار گیرد." %}
                    </p>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" class="text-right" style="direction: rtl;">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="file" style="font-weight: 600; color: #009A6E;">
                                {% trans "انتخاب فایل" %}
                            </label>
                            <input type="file"
                                   class="form-control"
                                   id="file"
                                   name="file"
                                   style="background-color: #f5f7fb; border-radius: 10px;">
                        </div>
                        <div class="form-group">
                            <label for="company_group" style="font-weight: 600; color: #009A6E;">
                                {% trans "انتخاب گروه شرکت (اختیاری)" %}
                            </label>
                            <select id="company_group"
                                    name="company_group"
                                    class="form-control"
                                    style="background-color: #f5f7fb; border-radius: 10px;">
                                <option value="">{% trans "بدون انتخاب (استفاده از گروه کاربر اول)" %}</option>
                                {% for company in available_company_groups %}
                                <option value="{{ company.id }}">{{ company.name|default:company.group_id }}</option>
                                {% empty %}
                                <option value="" disabled>{% trans "هیچ گروه شرکتی یافت نشد" %}</option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted" style="direction: rtl;">
                                {% trans "در صورت انتخاب، تمام کاربران به این گروه شرکت اختصاص داده می‌شوند." %}
                            </small>
                        </div>
                        <div class="form-group">
                            <label for="description" style="font-weight: 600; color: #009A6E;">
                                {% trans "توضیحات (اختیاری)" %}
                            </label>
                            <textarea id="description"
                                      name="description"
                                      rows="3"
                                      class="form-control"
                                      style="direction: rtl; background-color: #f5f7fb; border-radius: 10px;"
                                      placeholder="{% trans 'توضیح کوتاهی درباره این فایل بنویسید...' %}"></textarea>
                        </div>
                        <button type="submit"
                                class="btn btn-primary"
                                style="border-radius: 10px; background-color: #009A6E; border-color: #009A6E;">
                            {% trans "ارسال فایل" %}
                        </button>
                        <small class="form-text text-muted mt-2" style="direction: rtl;">
                            {% trans "پس از آپلود، نتایج و داشبورد تحلیلی آزمایش خون در پایین همین صفحه نمایش داده می‌شود." %}
                        </small>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% if error_message %}
    <div class="row mt-3">
        <div class="col-sm-12 col-md-8 offset-md-2">
            <div class="alert alert-danger text-right" style="direction: rtl;">
                {{ error_message }}
            </div>
        </div>
    </div>
    {% endif %}

    {% if patients_analysis %}
    {% for patient in patients_analysis %}
    <div class="row mt-4">
        <div class="col-sm-12 col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header text-right">
                    <h5 class="card-title" style="color: #009A6E;">
                        {% trans "داشبورد سلامت آزمایش خون" %} - {{ patient.name }}
                    </h5>
                    {% if patient.national_id %}
                    <p class="mb-1" style="direction: rtl; font-size: 14px;">
                        {% trans "کد ملی" %}: {{ patient.national_id }}
                    </p>
                    {% endif %}
                    {% if patient.test_date %}
                    <p class="mb-0" style="direction: rtl; font-size: 14px;">
                        {% trans "تاریخ آزمایش" %}: {{ patient.test_date }}
                    </p>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% with blood_health=patient.analysis %}
                    <div class="row">
                        {% if blood_health.Overall_Health_Score %}
                        <!-- Overall health score container -->
                        <div class="col-md-12 mb-4">
                            <div class="border rounded p-3" style="background-color: #f5f7fb;">
                                <h6 class="text-right" style="color: #009A6E;">
                                    {% trans "امتیاز کلی سلامت" %}: {{ blood_health.Overall_Health_Score }} / 100
                                </h6>
                                <p class="mb-1 text-right" style="direction: rtl;">
                                    {% trans "این امتیاز ترکیبی از تمام شاخص‌های عملکرد بدن است." %}
                                </p>
                                <div class="progress">
                                    <div class="progress-bar"
                                         role="progressbar"
                                         style="background-color: #009A6E;"
                                         data-score="{{ blood_health.Overall_Health_Score }}"
                                         aria-valuenow="{{ blood_health.Overall_Health_Score }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if blood_health.Index_Details %}
                        <!-- Detailed Index containers with test results -->
                        {% for index_name, index_data in blood_health.Index_Details.items %}
                        <div class="col-md-12 mb-4">
                            <div class="border rounded p-3" style="background-color: #f5f7fb;">
                                <h6 class="text-right mb-3" style="color: #009A6E; font-size: 18px;">
                                    {{ index_name }} - {% trans "امتیاز" %}: {{ index_data.score }} / 100
                                    <span class="badge badge-info" style="font-size: 12px; margin-right: 10px;">{{ index_data.status }}</span>
                                </h6>
                                <div class="progress mb-3">
                                    <div class="progress-bar"
                                         role="progressbar"
                                         style="background-color: #36b37e;"
                                         data-score="{{ index_data.score }}"
                                         aria-valuenow="{{ index_data.score }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100">
                                    </div>
                                </div>
                                
                                {% if index_data.warnings %}
                                <div class="alert alert-warning text-right" style="direction: rtl;">
                                    <strong>{% trans "هشدارها" %}:</strong>
                                    <ul class="mb-0" style="padding-right: 20px;">
                                        {% for warning in index_data.warnings %}
                                        <li>{{ warning }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endif %}
                                
                                {% if index_data.details %}
                                <div class="mt-3">
                                    <h6 class="text-right mb-2" style="color: #009A6E; font-size: 14px;">
                                        {% trans "جزئیات آزمایش‌ها" %}:
                                    </h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered text-right" style="direction: rtl;">
                                            <thead style="background-color: #009A6E; color: white;">
                                                <tr>
                                                    <th>{% trans "نام آزمایش" %}</th>
                                                    <th>{% trans "مقدار" %}</th>
                                                    <th>{% trans "امتیاز" %}</th>
                                                    <th>{% trans "وضعیت" %}</th>
                                                    <th>{% trans "توصیه‌های سبک زندگی" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for detail in index_data.details %}
                                                <tr>
                                                    <td><strong>{{ detail.test }}</strong></td>
                                                    <td>{{ detail.value|default:"-" }}</td>
                                                    <td>
                                                        {% if detail.score is not None %}
                                                        <span class="badge {% if detail.score >= 90 %}badge-success{% elif detail.score >= 70 %}badge-info{% else %}badge-warning{% endif %}">
                                                            {{ detail.score }}
                                                        </span>
                                                        {% else %}
                                                        -
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <span class="badge {% if detail.status == 'ایده‌آل' %}badge-success{% elif detail.status == 'طبیعی' %}badge-info{% elif detail.status == 'نیازمند بررسی' %}badge-warning{% else %}badge-secondary{% endif %}">
                                                            {{ detail.status }}
                                                        </span>
                                                    </td>
                                                    <td style="font-size: 12px;">
                                                        {% if detail.feedback %}
                                                        {{ detail.feedback }}
                                                        {% else %}
                                                        -
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                        {% endif %}
                        
                        {% if blood_health.Risks %}
                        <!-- Risk calculations -->
                        <div class="col-md-12 mb-4">
                            <div class="border rounded p-3" style="background-color: #fff3cd;">
                                <h6 class="text-right mb-3" style="color: #856404; font-size: 18px;">
                                    {% trans "محاسبه ریسک‌های سلامتی" %}
                                </h6>
                                
                                {% if blood_health.Risks.cardio %}
                                <div class="mb-3 p-2 border rounded" style="background-color: white;">
                                    <h6 class="text-right" style="color: #009A6E;">
                                        {% trans "ریسک قلبی-عروقی (CVD)" %}
                                    </h6>
                                    <p class="text-right mb-1" style="direction: rtl;">
                                        <strong>{% trans "احتمال" %}:</strong> 
                                        {% if blood_health.Risks.cardio.value is not None %}
                                        {{ blood_health.Risks.cardio.value }}%
                                        {% else %}
                                        {% trans "داده ناکافی" %}
                                        {% endif %}
                                    </p>
                                    <p class="text-right mb-0" style="direction: rtl; font-size: 14px;">
                                        <span class="badge {{ blood_health.Risks.cardio.color }}">{{ blood_health.Risks.cardio.label }}</span>
                                    </p>
                                    <p class="text-right mt-2 mb-0" style="direction: rtl; font-size: 13px;">
                                        {{ blood_health.Risks.cardio.description }}
                                    </p>
                                </div>
                                {% endif %}
                                
                                {% if blood_health.Risks.diabetes %}
                                <div class="mb-3 p-2 border rounded" style="background-color: white;">
                                    <h6 class="text-right" style="color: #009A6E;">
                                        {% trans "ریسک دیابت" %}
                                    </h6>
                                    <p class="text-right mb-1" style="direction: rtl;">
                                        <strong>{% trans "احتمال" %}:</strong> 
                                        {% if blood_health.Risks.diabetes.value is not None %}
                                        {{ blood_health.Risks.diabetes.value }}%
                                        {% else %}
                                        {% trans "داده ناکافی" %}
                                        {% endif %}
                                    </p>
                                    <p class="text-right mb-0" style="direction: rtl; font-size: 14px;">
                                        <span class="badge {{ blood_health.Risks.diabetes.color }}">{{ blood_health.Risks.diabetes.label }}</span>
                                    </p>
                                    <p class="text-right mt-2 mb-0" style="direction: rtl; font-size: 13px;">
                                        {{ blood_health.Risks.diabetes.description }}
                                    </p>
                                </div>
                                {% endif %}
                                
                                {% if blood_health.Risks.liver %}
                                <div class="mb-3 p-2 border rounded" style="background-color: white;">
                                    <h6 class="text-right" style="color: #009A6E;">
                                        {% trans "ریسک کبد چرب (FLI)" %}
                                    </h6>
                                    <p class="text-right mb-1" style="direction: rtl;">
                                        <strong>{% trans "شاخص FLI" %}:</strong> 
                                        {% if blood_health.Risks.liver.value is not None %}
                                        {{ blood_health.Risks.liver.value }}
                                        {% else %}
                                        {% trans "داده ناکافی" %}
                                        {% endif %}
                                    </p>
                                    <p class="text-right mb-0" style="direction: rtl; font-size: 14px;">
                                        <span class="badge {{ blood_health.Risks.liver.color }}">{{ blood_health.Risks.liver.label }}</span>
                                    </p>
                                    <p class="text-right mt-2 mb-0" style="direction: rtl; font-size: 13px;">
                                        {{ blood_health.Risks.liver.description }}
                                    </p>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}
</div>
{% endblock %}

{% block script %}
<script>
    (function() {
        var bars = document.querySelectorAll('.progress-bar[data-score]');
        bars.forEach(function(bar) {
            var score = parseFloat(bar.getAttribute('data-score')) || 0;
            if (score < 0) score = 0;
            if (score > 100) score = 100;
            bar.style.width = score + '%';
        });
    })();
</script>
{% endblock %}