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

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

{% block content %}
<div class="p-6">
  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center gap-2 mb-2">
      <a href="{% url 'organizations:patient_list' %}" class="text-blue hover:text-navy">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
      </a>
    </div>
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
      <i data-lucide="user-plus" class="w-7 h-7"></i>
      {{ title }}
    </h1>
  </div>

  <form method="post" class="max-w-4xl">
    {% csrf_token %}
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Basic Information -->
      <div class="card">
        <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="card">
        <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="btn-primary flex items-center gap-2">
        <i data-lucide="save" class="w-4 h-4"></i>
        {% trans "Save Patient" %}
      </button>
      <a href="{% url 'organizations:patient_list' %}" class="btn-secondary">
        {% trans "Cancel" %}
      </a>
    </div>
  </form>
</div>
{% endblock %}

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