{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="{{ language }}" dir="{% if language == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if language == 'ar' %}شكراً لك{% else %}Thank You{% endif %} - PX360</title>
    <link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        @keyframes scaleIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .success-icon { animation: scaleIn 0.5s ease-out; }
    </style>
</head>
<body class="bg-gray-100 p-4 md:p-10 min-h-screen flex items-center justify-center">

    <div class="max-w-4xl w-full bg-white shadow-2xl relative overflow-hidden border-t-[20px] border-navy">

        <!-- Header -->
        <div class="p-8 pb-4 flex justify-between items-start">
            <div class="flex items-center">
                <img src="{% static 'img/HH_P_H_Logo.png' %}" alt="HH Hospital" class="h-10 md:h-12 object-contain">
            </div>
            <div class="text-end">
                <h1 class="text-2xl font-bold text-[#2c3e50]">{% if language == 'ar' %}شكراً لك{% else %}Thank You{% endif %}</h1>
                <h1 class="text-2xl font-bold text-[#2c3e50]">{% if language == 'ar' %}لمشاركتك{% else %}for Your Feedback{% endif %}</h1>
            </div>
        </div>

        <!-- Body -->
        <div class="px-8 md:px-10 py-8 text-center text-[#2c3e50]">

            <!-- Success Icon -->
            <div class="success-icon w-24 h-24 bg-emerald-500 rounded-full flex items-center justify-center mx-auto mb-8">
                <svg class="w-12 h-12 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
            </div>

            <!-- Message -->
            <p class="text-lg text-gray-600 max-w-md mx-auto leading-relaxed mb-8">
                {% if language == 'ar' %}
                نقدر وقتك وملاحظاتك القيمة. ستساعدنا إجاباتك في تحسين تجربة المرضى وتقديم رعاية أفضل.
                {% else %}
                We appreciate your time and valuable feedback. Your responses will help us improve patient experience and deliver better care.
                {% endif %}
            </p>

            <!-- Score Display -->
            {% if survey.total_score %}
            <div class="bg-gray-50 rounded-xl p-6 max-w-xs mx-auto mb-8">
                <p class="text-3xl font-bold text-navy">{{ survey.total_score|floatformat:1 }}<span class="text-lg text-gray-400 font-medium"> / 5.0</span></p>
                <p class="text-sm text-gray-400 mt-1">
                    {% if language == 'ar' %}تقييمك الإجمالي{% else %}Your Overall Rating{% endif %}
                </p>
            </div>
            {% endif %}

            <!-- Close Message -->
            <p class="text-sm text-gray-400">
                {% if language == 'ar' %}
                يمكنك الآن إغلاق هذه الصفحة بأمان
                {% else %}
                You may now safely close this page
                {% endif %}
            </p>
        </div>

        <!-- Footer -->
        <div class="mt-8 bg-navy text-white p-8 pb-16 text-center space-y-1">
            <p class="text-sm font-medium">
                {% if language == 'ar' %}
                شكراً لمشاركتك في تحسين تجربة المرضى
                {% else %}
                Thank you for helping us improve patient experience.
                {% endif %}
            </p>
            <p class="text-sm font-medium opacity-75">PX360</p>
            <p class="text-xs font-medium opacity-50 mt-1">
                Powered by <a href="https://tenhal.sa" target="_blank" class="text-white hover:underline">tenhal.sa</a>
            </p>
        </div>

        <!-- Decorative Corner Triangles -->
        <div class="absolute bottom-0 left-0 w-full h-12 pointer-events-none z-10">
            <div class="absolute bottom-0 left-0 border-r-[100px] border-b-[50px] border-r-transparent border-b-navy-dark"></div>
            <div class="absolute bottom-0 right-0 border-l-[100px] border-b-[50px] border-l-transparent border-b-navy-dark"></div>
        </div>
    </div>

</body>
</html>
