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

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

{% block extra_css %}
<style>
.success-container {
    max-width: 700px;
    margin: 4rem auto;
    text-align: center;
    padding: 3rem;
}

.success-icon {
    font-size: 6rem;
    color: #28a745;
    margin-bottom: 2rem;
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.success-card {
    background: white;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.reference-number {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
    margin: 2rem 0;
    letter-spacing: 2px;
}

.info-box {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 1.5rem;
    text-align: left;
    margin: 2rem 0;
    border-radius: 4px;
}

.info-box h4 {
    color: #2c3e50;
    margin-top: 0;
}

.info-box ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.info-box li {
    margin-bottom: 0.5rem;
}

.btn-primary-custom {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    text-decoration: none;
    margin: 0.5rem;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.btn-secondary-custom {
    background: #6c757d;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    text-decoration: none;
    margin: 0.5rem;
}

.btn-secondary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.contact-info {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.contact-info p {
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.contact-info strong {
    color: #2c3e50;
}
</style>
{% endblock %}

{% block content %}
<div class="success-container">
    <div class="success-card">
        <div class="success-icon">
            <i class="fas fa-check-circle"></i>
        </div>

        <h1 style="color: #2c3e50; margin-bottom: 1rem;">
            {% trans "Complaint Submitted Successfully!" %}
        </h1>

        <p class="lead" style="color: #6c757d;">
            {% trans "Thank you for your feedback. Your complaint has been received and is being reviewed." %}
        </p>

        <div class="reference-number">
            #{{ reference_number }}
        </div>

        <p style="color: #6c757d;">
            <i class="fas fa-info-circle"></i>
            {% trans "Please save this reference number for your records. You will need it to track your complaint status." %}
        </p>

        <div class="info-box">
            <h4><i class="fas fa-clock"></i> {% trans "What Happens Next?" %}</h4>
            <ul>
                <li>{% trans "Your complaint will be reviewed by our team within 24 hours" %}</li>
                <li>{% trans "You will receive updates via phone or email based on the contact information provided" %}</li>
                <li>{% trans "Our typical response time is 24-48 hours depending on severity" %}</li>
                <li>{% trans "You can check the status of your complaint using your reference number" %}</li>
            </ul>
        </div>

        <div class="info-box">
            <h4><i class="fas fa-phone"></i> {% trans "Need Immediate Assistance?" %}</h4>
            <p style="margin-bottom: 0;">
                {% trans "If your complaint is urgent, please contact our Patient Relations department directly at:" %}
            </p>
            <p style="font-size: 1.2rem; margin: 1rem 0; color: #3498db;">
                <i class="fas fa-phone"></i> 920-000-0000
            </p>
            <p style="margin-bottom: 0; color: #6c757d;">
                {% trans "Available Saturday to Thursday, 8:00 AM - 8:00 PM" %}
            </p>
        </div>

        <div style="margin-top: 2rem;">
            <a href="{% url 'complaints:public_complaint_submit' %}" class="btn-primary-custom">
                <i class="fas fa-plus-circle"></i> {% trans "Submit Another Complaint" %}
            </a>
            <a href="/" class="btn-secondary-custom">
                <i class="fas fa-home"></i> {% trans "Return to Home" %}
            </a>
        </div>

        <div class="contact-info">
            <p>
                <strong>{% trans "Need Help?" %}</strong>
            </p>
            <p>
                <i class="fas fa-envelope"></i> {% trans "Email:" %}
                <a href="mailto:patient.relations@healthcare.sa">patient.relations@healthcare.sa</a>
            </p>
            <p>
                <i class="fas fa-globe"></i> {% trans "Website:" %}
                <a href="https://www.healthcare.sa">www.healthcare.sa</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}