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

{% 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;
    }
</style>
{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <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 border border-slate-200 rounded-xl text-slate hover:text-navy hover:bg-light transition text-sm font-semibold">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
    </a>
</div>

<!-- Breadcrumb & Header -->
<header class="mb-6">
    <div class="flex items-center gap-2 text-sm text-slate mb-2">
        <a href="{% url 'organizations:staff_list' %}">{% trans "Staff" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="font-bold text-navy">
            {% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
        </span>
    </div>
    <h1 class="text-2xl font-bold text-navy">
        {% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
    </h1>
</header>

<!-- 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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <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-2 gap-6">
                    <div>
                        <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Hospital" %} <span class="text-red-500">*</span>
                        </label>
                        <select name="{{ form.hospital.name }}" id="{{ form.hospital.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 Hospital" %}</option>
                            {% for choice in form.hospital.field.choices %}
                            {% if choice.0 %}
                            <option value="{{ choice.0 }}" {% if form.hospital.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        {% if form.hospital.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.hospital.errors.0 }}
                        </div>
                        {% endif %}
                    </div>
                    <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 }}" 
                                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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <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="bg-gradient-to-r from-navy to-blue text-white px-8 py-3 rounded-xl hover:opacity-90 transition font-semibold flex items-center gap-2 shadow-md">
                    <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="px-8 py-3 border border-slate-200 rounded-xl text-slate hover:bg-light transition font-semibold">
                    {% 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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
            <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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
            <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 %}