{% extends "layouts/base.html" %}

{% load i18n %}

{% block title %}{% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %} - PX360{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <a href="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}" class="btn btn-outline-secondary mb-2">
                <i class="fas fa-arrow-left"></i> {% trans "Cancel" %}
            </a>
            <h1 class="page-title">
                {% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
            </h1>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <form method="post" class="card">
            {% csrf_token %}
            
            <!-- Personal Information -->
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user"></i> {% trans "Personal Information" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label">
                                {% trans "First Name" %} <span class="text-danger">*</span>
                            </label>
                            {{ form.first_name }}
                            {% if form.first_name.errors %}
                            <div class="text-danger small">{{ form.first_name.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label">
                                {% trans "Last Name" %} <span class="text-danger">*</span>
                            </label>
                            {{ form.last_name }}
                            {% if form.last_name.errors %}
                            <div class="text-danger small">{{ form.last_name.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="{{ form.first_name_ar.id_for_label }}" class="form-label">
                                {% trans "First Name (Arabic)" %}
                            </label>
                            {{ form.first_name_ar }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="{{ form.last_name_ar.id_for_label }}" class="form-label">
                                {% trans "Last Name (Arabic)" %}
                            </label>
                            {{ form.last_name_ar }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Role Information -->
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-briefcase"></i> {% trans "Role Information" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="{{ form.staff_type.id_for_label }}" class="form-label">
                        {% trans "Staff Type" %} <span class="text-danger">*</span>
                    </label>
                    {{ form.staff_type }}
                    {% if form.staff_type.errors %}
                    <div class="text-danger small">{{ form.staff_type.errors.0 }}</div>
                    {% endif %}
                </div>
                <div class="mb-3">
                    <label for="{{ form.job_title.id_for_label }}" class="form-label">
                        {% trans "Job Title" %} <span class="text-danger">*</span>
                    </label>
                    {{ form.job_title }}
                    {% if form.job_title.errors %}
                    <div class="text-danger small">{{ form.job_title.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Professional Information -->
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-id-card"></i> {% trans "Professional Information" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="{{ form.employee_id.id_for_label }}" class="form-label">
                        {% trans "Employee ID" %} <span class="text-danger">*</span>
                    </label>
                    {{ form.employee_id }}
                    {% if form.employee_id.errors %}
                    <div class="text-danger small">{{ form.employee_id.errors.0 }}</div>
                    {% endif %}
                </div>
                <div class="mb-3">
                    <label for="{{ form.email.id_for_label }}" class="form-label">
                        {% trans "Email" %}
                    </label>
                    {{ form.email }}
                    {% if form.email.errors %}
                    <div class="text-danger small">{{ form.email.errors.0 }}</div>
                    {% endif %}
                    <small class="text-muted">{% trans "Required for creating a user account" %}</small>
                </div>
                {% if form.license_number %}
                <div class="mb-3">
                    <label for="{{ form.license_number.id_for_label }}" class="form-label">
                        {% trans "License Number" %}
                    </label>
                    {{ form.license_number }}
                    {% if form.license_number.errors %}
                    <div class="text-danger small">{{ form.license_number.errors.0 }}</div>
                    {% endif %}
                </div>
                {% endif %}
                {% if form.specialization %}
                <div class="mb-3">
                    <label for="{{ form.specialization.id_for_label }}" class="form-label">
                        {% trans "Specialization" %}
                    </label>
                    {{ form.specialization }}
                    {% if form.specialization.errors %}
                    <div class="text-danger small">{{ form.specialization.errors.0 }}</div>
                    {% endif %}
                </div>
                {% endif %}
            </div>

            <!-- Organization -->
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-building"></i> {% trans "Organization" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="{{ form.hospital.id_for_label }}" class="form-label">
                        {% trans "Hospital" %} <span class="text-danger">*</span>
                    </label>
                    {{ form.hospital }}
                    {% if form.hospital.errors %}
                    <div class="text-danger small">{{ form.hospital.errors.0 }}</div>
                    {% endif %}
                </div>
                <div class="mb-3">
                    <label for="{{ form.department.id_for_label }}" class="form-label">
                        {% trans "Department" %}
                    </label>
                    {{ form.department }}
                    {% if form.department.errors %}
                    <div class="text-danger small">{{ form.department.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Status -->
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle"></i> {% trans "Status" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="{{ form.status.id_for_label }}" class="form-label">
                        {% trans "Status" %}
                    </label>
                    {{ form.status }}
                    {% if form.status.errors %}
                    <div class="text-danger small">{{ form.status.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {% trans "Save" %}
                </button>
                <a href="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}" class="btn btn-secondary">
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>

    <div class="col-lg-4">
        <!-- User Account Creation -->
        {% if not form.instance.user %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user-plus"></i> {% trans "Create User Account" %}
                </h5>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    {% trans "Check this box to automatically create a user account for this staff member. A username will be generated and credentials will be emailed to the staff member." %}
                </p>
                
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" name="create_user" id="create_user">
                    <label class="form-check-label" for="create_user">
                        {% trans "Create user account" %}
                    </label>
                </div>
                
                <div class="alert alert-info small">
                    <i class="fas fa-info-circle"></i>
                    {% trans "The staff member must have an email address to create a user account." %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Tips -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-lightbulb"></i> {% trans "Tips" %}
                </h5>
            </div>
            <div class="card-body">
                <ul class="small text-muted mb-0">
                    <li>{% trans "All fields marked with * are required" %}</li>
                    <li>{% trans "Employee ID must be unique" %}</li>
                    <li>{% trans "Email is required for user account creation" %}</li>
                    <li>{% trans "License number is required for physicians" %}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.form-control, .form-select {
    border-radius: 0.375rem;
}
</style>
{% endblock %}