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

{% block title %}{{ title }} - PX360{% endblock %}

{% block extra_css %}
<style>
    .page-header-gradient {
        background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
        color: white;
        padding: 1.5rem 2rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
    }

    .form-section {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }
    .form-section:hover {
        border-color: #005696;
        box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
    }

    .hh-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: #005696;
        color: white;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }
    .hh-btn-primary:hover {
        background: #007bbd;
    }

    .hh-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: white;
        color: #64748b;
        border: 2px solid #e2e8f0;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .hh-btn-secondary:hover {
        background: #f1f5f9;
        border-color: #005696;
    }
</style>
{% endblock %}

{% block content %}
<!-- Gradient Header -->
<div class="page-header-gradient">
    <div class="flex items-center gap-2 mb-3">
        <a href="{% url 'organizations:patient_list' %}" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl text-white hover:bg-white/30 transition text-sm font-semibold">
            <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
        </a>
    </div>
    <h1 class="text-2xl font-bold">
        {{ title }}
    </h1>
    <p class="text-white/80 mt-1">
        {% trans "Manage patient information and records" %}
    </p>
</div>

<form method="post">
    {% csrf_token %}
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Basic Information -->
        <div class="form-section">
            <h2 class="text-lg font-semibold text-navy mb-4 flex items-center gap-2">
                <i data-lucide="user" class="w-5 h-5"></i>
                {% trans "Basic Information" %}
            </h2>
            
            <div class="space-y-4">
                <div>
                    <label for="{{ form.mrn.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.mrn.label }}
                    </label>
                    {{ form.mrn }}
                    {% if form.mrn.help_text %}
                    <p class="text-xs text-slate mt-1">{{ form.mrn.help_text }}</p>
                    {% endif %}
                    {% if form.mrn.errors %}
                    <p class="text-xs text-red-600 mt-1">{{ form.mrn.errors.0 }}</p>
                    {% endif %}
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="{{ form.first_name.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.first_name.label }} *
                        </label>
                        {{ form.first_name }}
                        {% if form.first_name.errors %}
                        <p class="text-xs text-red-600 mt-1">{{ form.first_name.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.last_name.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.last_name.label }} *
                        </label>
                        {{ form.last_name }}
                        {% if form.last_name.errors %}
                        <p class="text-xs text-red-600 mt-1">{{ form.last_name.errors.0 }}</p>
                        {% endif %}
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="{{ form.first_name_ar.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.first_name_ar.label }}
                        </label>
                        {{ form.first_name_ar }}
                    </div>
                    <div>
                        <label for="{{ form.last_name_ar.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.last_name_ar.label }}
                        </label>
                        {{ form.last_name_ar }}
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="{{ form.national_id.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.national_id.label }}
                        </label>
                        {{ form.national_id }}
                    </div>
                    <div>
                        <label for="{{ form.date_of_birth.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.date_of_birth.label }}
                        </label>
                        {{ form.date_of_birth }}
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="{{ form.gender.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.gender.label }}
                        </label>
                        {{ form.gender }}
                    </div>
                    <div>
                        <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                            {{ form.status.label }}
                        </label>
                        {{ form.status }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="form-section">
            <h2 class="text-lg font-semibold text-navy mb-4 flex items-center gap-2">
                <i data-lucide="phone" class="w-5 h-5"></i>
                {% trans "Contact Information" %}
            </h2>
            
            <div class="space-y-4">
                <div>
                    <label for="{{ form.phone.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.phone.label }}
                    </label>
                    {{ form.phone }}
                </div>
                
                <div>
                    <label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.email.label }}
                    </label>
                    {{ form.email }}
                </div>
                
                <div>
                    <label for="{{ form.address.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.address.label }}
                    </label>
                    {{ form.address }}
                </div>
                
                <div>
                    <label for="{{ form.city.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.city.label }}
                    </label>
                    {{ form.city }}
                </div>
                
                <div>
                    <label for="{{ form.primary_hospital.id_for_label }}" class="block text-sm font-medium text-navy mb-1">
                        {{ form.primary_hospital.label }} *
                    </label>
                    {{ form.primary_hospital }}
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex gap-3 mt-6">
        <button type="submit" class="hh-btn hh-btn-primary">
            <i data-lucide="save" class="w-5 h-5"></i>
            {% trans "Save Patient" %}
        </button>
        <a href="{% url 'organizations:patient_list' %}" class="hh-btn hh-btn-secondary">
            <i data-lucide="x" class="w-5 h-5"></i>
            {% trans "Cancel" %}
        </a>
    </div>
</form>
{% endblock %}

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