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

{% block title %}{% trans "Inquiry 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: #17a2b8;
        animation: scaleIn 0.5s ease-in-out;
    }
    @keyframes scaleIn {
        0% { transform: scale(0); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    .inquiry-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;
    }
</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 "Inquiry Created Successfully!" %}</h2>
        <p class="text-muted">
            {% trans "The inquiry has been logged and will be responded to as soon as possible." %}
        </p>

        <!-- Inquiry Details -->
        <div class="inquiry-details">
            <h5 class="mb-4">
                <i class="bi bi-chat-left-text me-2"></i>{% trans "Inquiry Details" %}
            </h5>
            
            <div class="detail-row">
                <strong>{% trans "Inquiry ID:" %}</strong>
                <span class="text-muted">#{{ inquiry.id|slice:":8" }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Subject:" %}</strong>
                <span>{{ inquiry.subject }}</span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Contact:" %}</strong>
                <span>
                    {% if inquiry.patient %}
                        {{ inquiry.patient.get_full_name }} (MRN: {{ inquiry.patient.mrn }})
                    {% else %}
                        {{ inquiry.contact_name }}
                    {% endif %}
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Phone:" %}</strong>
                <span>
                    {% if inquiry.patient %}
                        {{ inquiry.patient.phone }}
                    {% else %}
                        {{ inquiry.contact_phone }}
                    {% endif %}
                </span>
            </div>
            
            {% if inquiry.contact_email %}
            <div class="detail-row">
                <strong>{% trans "Email:" %}</strong>
                <span>{{ inquiry.contact_email }}</span>
            </div>
            {% endif %}
            
            <div class="detail-row">
                <strong>{% trans "Hospital:" %}</strong>
                <span>{{ inquiry.hospital.name_en }}</span>
            </div>
            
            {% if inquiry.department %}
            <div class="detail-row">
                <strong>{% trans "Department:" %}</strong>
                <span>{{ inquiry.department.name_en }}</span>
            </div>
            {% endif %}
            
            <div class="detail-row">
                <strong>{% trans "Category:" %}</strong>
                <span>
                    <span class="badge bg-info text-white">
                        {{ inquiry.get_category_display }}
                    </span>
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Status:" %}</strong>
                <span>
                    <span class="badge bg-primary">
                        {{ inquiry.get_status_display }}
                    </span>
                </span>
            </div>
            
            <div class="detail-row">
                <strong>{% trans "Created:" %}</strong>
                <span>{{ inquiry.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 inquiry has been logged in the system" %}</li>
                <li>{% trans "A call center interaction record has been created" %}</li>
                <li>{% trans "The appropriate department will be notified" %}</li>
                <li>{% trans "The caller will be contacted once a response is available" %}</li>
                <li>{% trans "You can track the inquiry status in the inquiries 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:inquiry_detail' inquiry.id %}" class="btn btn-info text-white btn-lg">
                <i class="bi bi-eye me-2"></i>{% trans "View Inquiry" %}
            </a>
            <a href="{% url 'callcenter:create_inquiry' %}" class="btn btn-outline-info btn-lg">
                <i class="bi bi-plus-circle me-2"></i>{% trans "Create Another" %}
            </a>
            <a href="{% url 'callcenter:inquiry_list' %}" class="btn btn-outline-secondary btn-lg">
                <i class="bi bi-list me-2"></i>{% trans "View All Inquiries" %}
            </a>
        </div>
    </div>
</div>
{% endblock %}