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

{% block title %}{% trans "Submit Complaint" %} - PX360{% endblock %}

{% block extra_css %}
<style>
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}
.type-badge.ed { background: #fef3c7; color: #92400e; }
.type-badge.ip { background: #dbeafe; color: #1e40af; }
.type-badge.op { background: #d1fae5; color: #065f46; }
.type-badge.daycase { background: #f3e8ff; color: #6b21a8; }
.type-badge.appointment { background: #fce7f3; color: #9d174d; }
.vip-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.form-textarea {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
    resize: none;
}
.form-textarea:focus {
    outline: none;
    border-color: #007bbd;
    box-shadow: 0 0 0 4px rgba(0, 123, 189, 0.1);
    transform: translateY(-1px);
}
</style>
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 py-8 md:py-12">
    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm text-slate mb-6">
        <a href="{% url 'complaints:patient_complaint_portal' session.token %}"
           class="hover:text-navy transition flex items-center gap-1 group font-medium">
            <i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
            {% trans "Hospitals" %}
        </a>
        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
        <a href="{% url 'complaints:patient_complaint_hospital_visits' session.token visit.hospital.id %}"
           class="hover:text-navy transition font-medium">
            {{ visit.hospital.name }}
        </a>
        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
        <span class="font-bold text-navy">{% trans "Complaint Form" %}</span>
    </nav>

    <!-- Visit Summary -->
    <div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-6 animate-fade-in">
        <div class="p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-navy/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="calendar-check" class="w-5 h-5 text-navy"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
                        <span class="font-mono text-xs text-slate bg-slate-100 px-2 py-0.5 rounded-md">{{ visit.admission_id }}</span>
                        {% if visit.is_vip %}<span class="vip-badge">VIP</span>{% endif %}
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div class="bg-slate-50 rounded-xl p-3">
                    <p class="text-xs text-slate font-semibold uppercase tracking-wider mb-0.5">{% trans "Admission" %}</p>
                    <p class="font-medium text-gray-800 text-sm">{{ visit.admit_date|date:"d M Y, H:i" }}</p>
                </div>
                <div class="bg-slate-50 rounded-xl p-3">
                    <p class="text-xs text-slate font-semibold uppercase tracking-wider mb-0.5">{% trans "Doctor" %}</p>
                    <p class="font-medium text-gray-800 text-sm truncate">{{ visit.doctor_display }}</p>
                </div>
                {% if visit.discharge_date %}
                <div class="bg-green-50 rounded-xl p-3">
                    <p class="text-xs text-green-600 font-semibold uppercase tracking-wider mb-0.5">{% trans "Discharge" %}</p>
                    <p class="font-medium text-green-700 text-sm">{{ visit.discharge_date|date:"d M Y, H:i" }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Complaint Form -->
    <div class="glass-card rounded-2xl shadow-xl overflow-hidden animate-slide-up" style="animation-delay: 0.1s">
        <div class="p-6 border-b border-slate-100">
            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
                <div class="w-9 h-9 bg-navy/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="edit-3" class="w-5 h-5 text-navy"></i>
                </div>
                {% trans "Describe Your Complaint" %}
            </h2>
            <p class="text-sm text-slate mt-1">{% trans "Please provide details about the issue you experienced" %}</p>
        </div>

        <form method="post" class="p-6">
            {% csrf_token %}
            <input type="hidden" name="session_id" value="{{ session.id }}">

            {% if error %}
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700 flex items-center gap-3">
                <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
                {{ error }}
            </div>
            {% endif %}

            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                    {% trans "Complaint Details" %} <span class="text-red-500">*</span>
                </label>
                <textarea id="description" name="description" rows="6" required
                          class="form-textarea"
                          placeholder="{% trans 'Please describe what happened, when it occurred, and any staff involved...' %}"></textarea>
            </div>

            <button type="submit" 
                    class="w-full px-6 py-3.5 bg-gradient-to-r from-navy to-blue text-white font-bold rounded-xl hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 flex items-center justify-center gap-2 btn-hover">
                <i data-lucide="send" class="w-5 h-5"></i>
                {% trans "Submit Complaint" %}
            </button>
        </form>
    </div>

    <p class="text-xs text-slate/60 text-center mt-6 animate-slide-up" style="animation-delay: 0.2s">
        <i data-lucide="shield-check" class="w-3 h-3 inline mr-1"></i>
        {% trans "Your complaint will be reviewed by our team and you'll receive updates via SMS." %}
    </p>
</div>
{% endblock %}

{% block extra_js %}
<script>
    lucide.createIcons();
</script>
{% endblock %}