{% extends 'layouts/base.html' %}
{% load i18n %}

{% block title %}{% trans "Inquiry Detail" %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "Inquiry Detail" %}</h1>
            <p class="text-muted">{{ inquiry.subject }}</p>
        </div>
        <div>
            <a href="{% url 'complaints:inquiry_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Inquiry Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Inquiry Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>{% trans "Subject" %}:</strong><br>
                            {{ inquiry.subject }}
                        </div>
                        <div class="col-md-6">
                            <strong>{% trans "Status" %}:</strong><br>
                            {% if inquiry.status == 'open' %}
                                <span class="badge bg-warning">{% trans "Open" %}</span>
                            {% elif inquiry.status == 'in_progress' %}
                                <span class="badge bg-info">{% trans "In Progress" %}</span>
                            {% elif inquiry.status == 'resolved' %}
                                <span class="badge bg-success">{% trans "Resolved" %}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ inquiry.get_status_display }}</span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>{% trans "Category" %}:</strong><br>
                            <span class="badge bg-secondary">{{ inquiry.get_category_display }}</span>
                        </div>
                        <div class="col-md-6">
                            <strong>{% trans "Created" %}:</strong><br>
                            {{ inquiry.created_at|date:"Y-m-d H:i" }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <strong>{% trans "Message" %}:</strong><br>
                        <p class="mt-2">{{ inquiry.message|linebreaks }}</p>
                    </div>

                    {% if inquiry.response %}
                    <div class="alert alert-success">
                        <strong>{% trans "Response" %}:</strong><br>
                        <p class="mt-2 mb-0">{{ inquiry.response|linebreaks }}</p>
                        <small class="text-muted">
                            {% trans "Responded by" %} {{ inquiry.responded_by.get_full_name }} 
                            {% trans "on" %} {{ inquiry.responded_at|date:"Y-m-d H:i" }}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Response Form -->
            {% if can_edit and inquiry.status != 'resolved' and inquiry.status != 'closed' %}
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Respond to Inquiry" %}</h6>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'complaints:inquiry_respond' inquiry.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label">{% trans "Response" %}</label>
                            <textarea name="response" class="form-control" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane"></i> {% trans "Send Response" %}
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Contact Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Contact Information" %}</h6>
                </div>
                <div class="card-body">
                    {% if inquiry.patient %}
                        <p><strong>{% trans "Patient" %}:</strong><br>
                        {{ inquiry.patient.get_full_name }}<br>
                        <small class="text-muted">MRN: {{ inquiry.patient.mrn }}</small></p>
                        
                        {% if inquiry.patient.phone %}
                        <p><strong>{% trans "Phone" %}:</strong><br>{{ inquiry.patient.phone }}</p>
                        {% endif %}
                        
                        {% if inquiry.patient.email %}
                        <p><strong>{% trans "Email" %}:</strong><br>{{ inquiry.patient.email }}</p>
                        {% endif %}
                    {% else %}
                        {% if inquiry.contact_name %}
                        <p><strong>{% trans "Name" %}:</strong><br>{{ inquiry.contact_name }}</p>
                        {% endif %}
                        
                        {% if inquiry.contact_phone %}
                        <p><strong>{% trans "Phone" %}:</strong><br>{{ inquiry.contact_phone }}</p>
                        {% endif %}
                        
                        {% if inquiry.contact_email %}
                        <p><strong>{% trans "Email" %}:</strong><br>{{ inquiry.contact_email }}</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>

            <!-- Organization -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Organization" %}</h6>
                </div>
                <div class="card-body">
                    <p><strong>{% trans "Hospital" %}:</strong><br>{{ inquiry.hospital.name }}</p>
                    
                    {% if inquiry.department %}
                    <p><strong>{% trans "Department" %}:</strong><br>{{ inquiry.department.name }}</p>
                    {% endif %}
                    
                    {% if inquiry.assigned_to %}
                    <p><strong>{% trans "Assigned To" %}:</strong><br>{{ inquiry.assigned_to.get_full_name }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}