{% extends "layouts/base.html" %}
{% load i18n %}{% get_current_language as LANG %}

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

{% block extra_css %}
<style>
    #staffForm input[type="text"],
    #staffForm input[type="email"],
    #staffForm input[type="tel"],
    #staffForm select,
    #staffForm textarea {
        @apply w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm;
    }
    #staffForm textarea {
        @apply resize-none;
    }
    #staffForm input[type="checkbox"] {
        @apply w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy;
    }

    .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="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}" 
           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">
        {% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
    </h1>
    <p class="text-white/80 mt-1">
        {% if form.instance.pk %}{% trans "Update staff member information" %}{% else %}{% trans "Create a new staff member record" %}{% endif %}
    </p>
</div>

<!-- Main Content Grid -->
<div class="grid grid-cols-12 gap-8">
    <!-- Left Column (Form) -->
    <div class="col-span-8">
        <form method="post" id="staffForm" class="space-y-6">
            {% csrf_token %}
            
            <!-- Personal Information -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                    <i data-lucide="user" class="w-5 h-5 text-blue"></i>
                    {% trans "Personal Information" %}
                </h3>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.first_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "First Name" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="{{ form.first_name.name }}" id="{{ form.first_name.id_for_label }}" 
                               value="{{ form.first_name.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               required>
                        {% if form.first_name.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.first_name.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.last_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Last Name" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="{{ form.last_name.name }}" id="{{ form.last_name.id_for_label }}" 
                               value="{{ form.last_name.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               required>
                        {% if form.last_name.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.last_name.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.first_name_ar.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "First Name (Arabic)" %}
                        </label>
                        <input type="text" name="{{ form.first_name_ar.name }}" id="{{ form.first_name_ar.id_for_label }}" 
                               value="{{ form.first_name_ar.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               dir="rtl">
                    </div>
                    <div>
                        <label for="{{ form.last_name_ar.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Last Name (Arabic)" %}
                        </label>
                        <input type="text" name="{{ form.last_name_ar.name }}" id="{{ form.last_name_ar.id_for_label }}" 
                               value="{{ form.last_name_ar.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               dir="rtl">
                    </div>
                </div>
            </section>

            <!-- Role Information -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                    <i data-lucide="briefcase" class="w-5 h-5 text-blue"></i>
                    {% trans "Role Information" %}
                </h3>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.staff_type.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Staff Type" %} <span class="text-red-500">*</span>
                        </label>
                        <select name="{{ form.staff_type.name }}" id="{{ form.staff_type.id_for_label }}" 
                                class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm" required>
                            <option value="">{% trans "Select Type" %}</option>
                            {% for choice in form.staff_type.field.choices %}
                            <option value="{{ choice.0 }}" {% if form.staff_type.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                            {% endfor %}
                        </select>
                        {% if form.staff_type.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.staff_type.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.job_title.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Job Title" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="{{ form.job_title.name }}" id="{{ form.job_title.id_for_label }}" 
                               value="{{ form.job_title.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               required>
                        {% if form.job_title.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.job_title.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </section>

            <!-- Professional Information -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                    <i data-lucide="id-card" class="w-5 h-5 text-blue"></i>
                    {% trans "Professional Information" %}
                </h3>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.employee_id.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Employee ID" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="{{ form.employee_id.name }}" id="{{ form.employee_id.id_for_label }}" 
                               value="{{ form.employee_id.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                               required>
                        {% if form.employee_id.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.employee_id.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Email" %}
                        </label>
                        <input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}" 
                               value="{{ form.email.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                        {% if form.email.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.email.errors.0 }}
                        </div>
                        {% endif %}
                        <p class="text-slate text-xs mt-1">{% trans "Required for user account creation" %}</p>
                    </div>
                    {% if form.license_number %}
                    <div>
                        <label for="{{ form.license_number.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "License Number" %}
                        </label>
                        <input type="text" name="{{ form.license_number.name }}" id="{{ form.license_number.id_for_label }}" 
                               value="{{ form.license_number.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                        {% if form.license_number.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.license_number.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if form.specialization %}
                    <div>
                        <label for="{{ form.specialization.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Specialization" %}
                        </label>
                        <input type="text" name="{{ form.specialization.name }}" id="{{ form.specialization.id_for_label }}" 
                               value="{{ form.specialization.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                        {% if form.specialization.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.specialization.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    <div>
                        <label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Phone" %}
                        </label>
                        <input type="tel" name="{{ form.phone.name }}" id="{{ form.phone.id_for_label }}" 
                               value="{{ form.phone.value|default:'' }}" 
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                    </div>
                </div>
            </section>

            <!-- Organization -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                    <i data-lucide="building-2" class="w-5 h-5 text-blue"></i>
                    {% trans "Organization" %}
                </h3>
                <div class="grid grid-cols-1 gap-6">
                    <!-- Hospital (hidden, auto-set by HospitalFieldMixin) -->
                    {{ form.hospital }}
                    
                    <!-- Department -->
                    <div>
                        <label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Department" %}
                        </label>
                        <select name="{{ form.department.name }}" id="{{ form.department.id_for_label }}" data-tomselect
                                class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                            <option value="">{% trans "Select Department" %}</option>
                            {% for choice in form.department.field.choices %}
                            {% if choice.0 %}
                            <option value="{{ choice.0 }}" {% if form.department.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        {% if form.department.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.department.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </section>

            <!-- Status -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                    <i data-lucide="toggle-left" class="w-5 h-5 text-blue"></i>
                    {% trans "Status" %}
                </h3>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.status.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Status" %}
                        </label>
                        <select name="{{ form.status.name }}" id="{{ form.status.id_for_label }}" 
                                class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                            {% for choice in form.status.field.choices %}
                            <option value="{{ choice.0 }}" {% if form.status.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                            {% endfor %}
                        </select>
                        {% if form.status.errors %}
                        <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {{ form.status.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <div class="flex items-center gap-3 p-4 bg-light/30 rounded-xl">
                        <input type="checkbox" name="{{ form.is_head.name }}" id="{{ form.is_head.id_for_label }}" 
                               class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy"
                               {% if form.is_head.value %}checked{% endif %}>
                        <div>
                            <label for="{{ form.is_head.id_for_label }}" class="text-sm font-semibold text-navy block">
                                {% trans "Department Head" %}
                            </label>
                            <p class="text-xs text-slate">{% trans "Mark as head of department" %}</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Actions -->
            <div class="flex items-center gap-4 pt-4">
                <button type="submit" class="hh-btn hh-btn-primary">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    {% trans "Save" %}
                </button>
                <a href="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}" 
                   class="hh-btn hh-btn-secondary">
                    <i data-lucide="x" class="w-5 h-5"></i>
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>

    <!-- Right Column (Sidebar) -->
    <div class="col-span-4 space-y-6">
        
        <!-- Create User Account -->
        {% if not form.instance.pk or not form.instance.user %}
        <section class="form-section">
            <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                <i data-lucide="user-plus" class="w-4 h-4 text-blue"></i>
                {% trans "User Account" %}
            </h3>
            <div class="flex items-start gap-3 p-4 bg-light/30 rounded-xl">
                <input type="checkbox" name="create_user" id="create_user" 
                       class="w-5 h-5 mt-0.5 text-navy border-slate-300 rounded focus:ring-navy">
                <div>
                    <label for="create_user" class="text-sm font-semibold text-navy block">
                        {% trans "Create user account" %}
                    </label>
                    <p class="text-xs text-slate mt-1">
                        {% trans "Automatically create a login account. Credentials will be emailed to the staff member." %}
                    </p>
                </div>
            </div>
            <div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
                <p class="text-blue-700 text-xs flex items-start gap-2">
                    <i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                    {% trans "Email address is required to create a user account." %}
                </p>
            </div>
        </section>
        {% endif %}

        <!-- Tips -->
        <section class="form-section">
            <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                {% trans "Tips" %}
            </h3>
            <ul class="space-y-3 text-sm text-slate">
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                    <span>{% trans "All fields marked with * are required" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                    <span>{% trans "Employee ID must be unique" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                    <span>{% trans "Email is required for user account creation" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                    <span>{% trans "License number is required for physicians" %}</span>
                </li>
            </ul>
        </section>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hospitalField = document.querySelector('input[name="hospital"]');
    // Use the correct ID generated by Django form (id_department)
    const departmentSelect = document.getElementById('id_department');
    
    // Only proceed if both fields exist on the page
    if (!departmentSelect) {
        return;
    }
    
    // Function to load departments based on hospital
    function loadDepartments(hospitalId) {
        if (!hospitalId) {
            departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
            return;
        }
        
        departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
        
        fetch('/organizations/api/departments/?hospital=' + hospitalId)
            .then(response => response.json())
            .then(data => {
                const results = data.results || data;
                departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
                
                results.forEach(dept => {
                    const option = document.createElement('option');
                    option.value = dept.id;
                    option.textContent = {% if LANG == 'ar' %}dept.name_ar || dept.name{% else %}dept.name{% endif %};
                    departmentSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error loading departments:', error);
                departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
            });
    }
    
    // If hospital is hidden, get initial hospital value and load departments
    if (hospitalField && hospitalField.type === 'hidden' && hospitalField.value) {
        loadDepartments(hospitalField.value);
    }
});
</script>
{% endblock %}
