{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Complaint Created" %} - {% trans "Call Center" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .success-container {
        max-width: 800px;
        margin: 50px auto;
        text-align: center;
    }
    .success-icon {
        font-size: 5rem;
        color: #28a745;
        animation: scaleIn 0.5s ease-in-out;
    }
    @keyframes scaleIn {
        0% { transform: scale(0); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    .complaint-details {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 30px;
        margin: 30px 0;
        text-align: left;
    }
    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #dee2e6;
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .badge-severity-critical { background: #dc3545; }
    .badge-severity-high { background: #fd7e14; }
    .badge-severity-medium { background: #ffc107; color: #000; }
    .badge-severity-low { background: #28a745; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="success-container">
        <!-- Success Icon -->
        <div class="success-icon">
            <i class="bi bi-check-circle-fill"></i>
        </div>
        
        <!-- Success Message -->
        <h2 class="mt-4 mb-2">{% trans "Complaint Created Successfully!" %}</h2>
        <p class="text-muted">
            {% trans "The complaint has been logged and will be processed according to SLA guidelines." %}
        </p>

        <!-- Complaint Details -->
        <div class="complaint-details">
            <h5 class="mb-4">
                <i class="bi bi-file-earmark-text me-2"></i>{% trans "Complaint Details" %}
            </h5>
            
            <div class="detail-row">
                <strong>{% trans "Complaint ID:" %}</strong>
                <span class="text-muted">#{{ complaint.id|slice:":8" }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Title:" %}</strong>
                <span>{{ complaint.title }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Patient:" %}</strong>
                <span>
                    {% if complaint.patient %}
                        {{ complaint.patient.get_full_name }} (MRN: {{ complaint.patient.mrn }})
                    {% else %}
                        {% trans "N/A" %}
                    {% endif %}
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Hospital:" %}</strong>
                <span>{{ complaint.hospital.name_en }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Category:" %}</strong>
                <span>{{ complaint.get_category_display }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Severity:" %}</strong>
                <span>
                    <span class="badge badge-severity-{{ complaint.severity }}">
                        {{ complaint.get_severity_display }}
                    </span>
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Priority:" %}</strong>
                <span>
                    <span class="badge bg-secondary">
                        {{ complaint.get_priority_display }}
                    </span>
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "SLA Deadline:" %}</strong>
                <span class="text-danger">
                    <i class="bi bi-clock me-1"></i>
                    {{ complaint.due_at|date:"Y-m-d H:i" }}
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Created:" %}</strong>
                <span>{{ complaint.created_at|date:"Y-m-d H:i" }}</span>
            </div>
        </div>

        <!-- Next Steps -->
        <div class="alert alert-info text-start">
            <h6 class="alert-heading">
                <i class="bi bi-info-circle me-2"></i>{% trans "Next Steps" %}
            </h6>
            <ul class="mb-0">
                <li>{% trans "The complaint has been automatically assigned based on hospital rules" %}</li>
                <li>{% trans "A call center interaction record has been created" %}</li>
                <li>{% trans "The responsible team will be notified" %}</li>
                <li>{% trans "You can track the complaint status in the complaints list" %}</li>
            </ul>
        </div>

        <!-- Action Buttons -->
        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-4">
            <a href="{% url 'complaints:complaint_detail' complaint.id %}" class="btn btn-primary btn-lg">
                <i class="bi bi-eye me-2"></i>{% trans "View Complaint" %}
            </a>
            <a href="{% url 'callcenter:create_complaint' %}" class="btn btn-outline-primary btn-lg">
                <i class="bi bi-plus-circle me-2"></i>{% trans "Create Another" %}
            </a>
            <a href="{% url 'callcenter:complaint_list' %}" class="btn btn-outline-secondary btn-lg">
                <i class="bi bi-list me-2"></i>{% trans "View All Complaints" %}
            </a>
        </div>
    </div>
</div>
{% endblock %}