{% extends "layouts/public_base.html" %}
{% load i18n %}

{% block title %}{% trans "Complaint Submitted" %}{% endblock %}

{% block extra_css %}
<style>
    @keyframes scaleIn {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .success-checkmark {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scaleIn 0.5s ease-out;
    }

    .reference-card {
        background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
        position: relative;
        overflow: hidden;
    }

    .reference-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: float 4s ease-in-out infinite;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-light via-blue-50 to-light py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
        <!-- Success Icon Animation -->
        <div class="text-center mb-8">
            <div class="success-checkmark inline-flex items-center justify-center bg-gradient-to-br from-green-400 to-green-600 shadow-xl shadow-green-200">
                <i data-lucide="check" class="w-16 h-16 text-white"></i>
            </div>
        </div>

        <!-- Main Card -->
        <div class="glass-card rounded-3xl shadow-2xl p-8 md:p-12 animate-fade-in">
            <!-- Header -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-navy mb-4">
                    {% trans "Complaint Submitted Successfully!" %}
                </h1>
                <p class="text-slate text-lg leading-relaxed">
                    {% trans "Thank you for your feedback. Your complaint has been received and is being reviewed." %}
                </p>
            </div>

            <!-- Reference Number -->
            <div class="reference-card rounded-2xl p-8 text-center mb-8 shadow-xl">
                <div class="relative z-10">
                    <div class="text-sm text-white/80 font-semibold mb-3 uppercase tracking-wider">
                        {% trans "Reference Number" %}
                    </div>
                    <div class="text-4xl md:text-5xl font-bold text-white tracking-widest font-mono">
                        #{{ reference_number }}
                    </div>
                    <p class="text-white/70 text-xs mt-4">
                        {% trans "Save this number for future tracking" %}
                    </p>
                </div>
            </div>

            <!-- What Happens Next -->
            <div class="bg-gradient-to-br from-blue-50 to-light rounded-2xl p-6 mb-6 border-2 border-blue-100">
                <h4 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="clock" class="w-6 h-6 text-blue-600"></i>
                    {% trans "What Happens Next?" %}
                </h4>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate">{% trans "Your complaint will be reviewed by our team within 24 hours" %}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate">{% trans "You will receive updates via phone or email based on the contact information provided" %}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate">{% trans "Our typical response time is 24-48 hours depending on severity" %}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate">{% trans "You can check the status of your complaint using your reference number" %}</span>
                    </li>
                </ul>
            </div>

            <!-- Urgent Contact Box -->
            <div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-6 mb-8 border-2 border-orange-200">
                <h4 class="text-lg font-bold text-navy mb-3 flex items-center gap-2">
                    <i data-lucide="phone-call" class="w-6 h-6 text-orange-600"></i>
                    {% trans "Need Immediate Assistance?" %}
                </h4>
                <p class="text-slate mb-4">
                    {% trans "If your complaint is urgent, please contact our Patient Relations department directly at:" %}
                </p>
                <div class="bg-white rounded-xl p-5 text-center mb-4 shadow-sm">
                    <a href="tel:9200000000" class="text-2xl font-bold text-blue-600 hover:text-blue-700 transition inline-flex items-center gap-2">
                        <i data-lucide="phone" class="w-6 h-6"></i> 920-000-0000
                    </a>
                </div>
                <p class="text-sm text-slate text-center">
                    {% trans "Available Saturday to Thursday, 8:00 AM - 8:00 PM" %}
                </p>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 justify-center mb-8">
                <a href="{% url 'complaints:public_complaint_track' %}?reference={{ reference_number }}"
                   class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-blue-200 hover:shadow-xl hover:-translate-y-1 btn-hover">
                    <i data-lucide="search" class="w-5 h-5"></i>
                    {% trans "Track Your Complaint" %}
                </a>
                <a href="{% url 'complaints:public_complaint_submit' %}"
                   class="inline-flex items-center justify-center gap-2 bg-slate-600 hover:bg-slate-700 text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-slate-200 hover:shadow-xl hover:-translate-y-1 btn-hover">
                    <i data-lucide="plus-circle" class="w-5 h-5"></i>
                    {% trans "Submit Another" %}
                </a>
                <a href="/"
                   class="inline-flex items-center justify-center gap-2 bg-white border-2 border-slate-200 hover:border-navy hover:bg-navy hover:text-white text-slate-700 px-8 py-4 rounded-xl font-bold transition hover:-translate-y-1 btn-hover">
                    <i data-lucide="home" class="w-5 h-5"></i>
                    {% trans "Home" %}
                </a>
            </div>

            <!-- Contact Information -->
            <div class="border-t border-slate-200 pt-6">
                <div class="flex flex-col sm:flex-row gap-6 justify-center text-sm">
                    <a href="mailto:patient.relations@healthcare.sa" class="flex items-center gap-2 text-slate-600 hover:text-blue-600 transition">
                        <i data-lucide="mail" class="w-4 h-4"></i>
                        <span class="font-medium">patient.relations@healthcare.sa</span>
                    </a>
                    <a href="https://www.healthcare.sa" target="_blank" class="flex items-center gap-2 text-slate-600 hover:text-blue-600 transition">
                        <i data-lucide="globe" class="w-4 h-4"></i>
                        <span class="font-medium">www.healthcare.sa</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Footer Note -->
        <div class="text-center mt-8">
            <p class="text-slate text-sm">
                {% trans "Your feedback helps us improve our services" %}
                <i data-lucide="heart" class="w-4 h-4 inline-block text-red-500 mx-1"></i>
            </p>
        </div>
    </div>
</div>
{% endblock %}