HH/templates/callcenter/inquiry_success.html

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

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

{% block extra_css %}
<style>
    @keyframes scaleIn {
        0% { transform: scale(0); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto py-12 text-center">
    <div class="[animation:scaleIn_0.5s_ease-in-out] mb-6 inline-flex items-center justify-center w-20 h-20 bg-teal-100 rounded-full">
        <i data-lucide="check-circle" class="w-10 h-10 text-teal-600"></i>
    </div>

    <h2 class="text-2xl font-bold text-gray-900 mb-2">{% trans "Inquiry Created Successfully!" %}</h2>
    <p class="text-sm text-slate-500">
        {% trans "The inquiry has been logged and will be responded to as soon as possible." %}
    </p>

    <div class="section-card text-left mt-8">
        <div class="section-header bg-slate-700">
            <div class="section-icon bg-slate-600">
                <i data-lucide="file-text" class="w-5 h-5 text-white"></i>
            </div>
            <h3 class="text-white font-semibold">{% trans "Inquiry Details" %}</h3>
        </div>

        <div class="p-6">
            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Inquiry ID:" %}</span>
                <span class="text-sm text-gray-800 flex-1 font-mono">#{{ inquiry.id|slice:":8" }}</span>
            </div>

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Subject:" %}</span>
                <span class="text-sm text-gray-800 flex-1">{{ inquiry.subject }}</span>
            </div>

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Contact:" %}</span>
                <span class="text-sm text-gray-800 flex-1">
                    {% if inquiry.patient %}
                        {{ inquiry.patient.get_full_name }} (MRN: {{ inquiry.patient.mrn }})
                    {% else %}
                        {{ inquiry.contact_name }}
                    {% endif %}
                </span>
            </div>

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Phone:" %}</span>
                <span class="text-sm text-gray-800 flex-1">
                    {% if inquiry.patient %}
                        {{ inquiry.patient.phone }}
                    {% else %}
                        {{ inquiry.contact_phone }}
                    {% endif %}
                </span>
            </div>

            {% if inquiry.contact_email %}
            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Email:" %}</span>
                <span class="text-sm text-gray-800 flex-1">{{ inquiry.contact_email }}</span>
            </div>
            {% endif %}

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Hospital:" %}</span>
                <span class="text-sm text-gray-800 flex-1">{{ inquiry.hospital.get_localized_name }}</span>
            </div>

            {% if inquiry.department %}
            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Department:" %}</span>
                <span class="text-sm text-gray-800 flex-1">{{ inquiry.department.get_localized_name }}</span>
            </div>
            {% endif %}

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Category:" %}</span>
                <span class="text-sm text-gray-800 flex-1">
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-teal-100 text-teal-700">
                        {{ inquiry.get_category_display }}
                    </span>
                </span>
            </div>

            <div class="flex py-3 border-b border-slate-100">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Status:" %}</span>
                <span class="text-sm text-gray-800 flex-1">
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-blue-100 text-blue-700">
                        {{ inquiry.get_status_display }}
                    </span>
                </span>
            </div>

            <div class="flex py-3">
                <span class="text-sm font-semibold text-slate-500 w-36">{% trans "Created:" %}</span>
                <span class="text-sm text-gray-800 flex-1">{{ inquiry.created_at|date:"Y-m-d H:i" }}</span>
            </div>
        </div>
    </div>

    <div class="section-card text-left mt-6">
        <div class="section-header bg-blue-600">
            <div class="section-icon bg-blue-500">
                <i data-lucide="info" class="w-5 h-5 text-white"></i>
            </div>
            <h3 class="text-white font-semibold">{% trans "Next Steps" %}</h3>
        </div>
        <div class="p-6">
            <ul class="space-y-2 text-sm text-gray-700">
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-blue-600 mt-0.5 shrink-0"></i>
                    {% trans "The inquiry has been logged in the system" %}
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-blue-600 mt-0.5 shrink-0"></i>
                    {% trans "A call center interaction record has been created" %}
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-blue-600 mt-0.5 shrink-0"></i>
                    {% trans "The appropriate department will be notified" %}
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-blue-600 mt-0.5 shrink-0"></i>
                    {% trans "The caller will be contacted once a response is available" %}
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-blue-600 mt-0.5 shrink-0"></i>
                    {% trans "You can track the inquiry status in the inquiries list" %}
                </li>
            </ul>
        </div>
    </div>

    <div class="flex flex-wrap items-center justify-center gap-3 mt-8">
        <a href="{% url 'inquiries:inquiry_detail' inquiry.id %}" class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-xl font-semibold text-sm hover:bg-opacity-90 transition">
            <i data-lucide="eye" class="w-4 h-4"></i>
            {% trans "View Inquiry" %}
        </a>
        <a href="{% url 'callcenter:create_inquiry' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-teal-600 text-white rounded-xl font-semibold text-sm hover:bg-teal-700 transition">
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
            {% trans "Create Another" %}
        </a>
        <a href="{% url 'callcenter:inquiry_list' %}" class="inline-flex items-center gap-2 px-6 py-3 border-2 border-slate-200 rounded-xl font-semibold text-sm text-slate-600 hover:bg-slate-50 transition">
            <i data-lucide="list" class="w-4 h-4"></i>
            {% trans "View All Inquiries" %}
        </a>
    </div>
</div>
{% endblock %}