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

{% load i18n %}

{% block title %}{{ staff.get_full_name }} - {% trans "Staff Details" %}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <a href="{% url 'organizations:staff_list' %}" class="btn btn-outline-secondary mb-2">
                <i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
            </a>
            <h1 class="page-title">{{ staff.get_full_name }}</h1>
            <p class="text-muted">{{ staff.job_title }} | {{ staff.get_staff_type_display }}</p>
        </div>
        <div>
            {% if user.is_px_admin or user.is_hospital_admin %}
            <a href="{% url 'organizations:staff_update' staff.id %}" class="btn btn-primary">
                <i class="fas fa-edit"></i> {% trans "Edit" %}
            </a>
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <!-- Bilingual Names -->
        <div class="card mb-4">
            <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 class="text-muted small">{% trans "First Name (English)" %}</label>
                            <div class="fw-bold">{{ staff.first_name }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="text-muted small">{% trans "Last Name (English)" %}</label>
                            <div class="fw-bold">{{ staff.last_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="text-muted small">{% trans "First Name (Arabic)" %}</label>
                            <div class="fw-bold" dir="rtl">{{ staff.first_name_ar|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="text-muted small">{% trans "Last Name (Arabic)" %}</label>
                            <div class="fw-bold" dir="rtl">{{ staff.last_name_ar|default:"-" }}</div>
                        </div>
                    </div>
                </div>
                {% if staff.license_number %}
                <div class="mb-3">
                    <label class="text-muted small">{% trans "License Number" %}</label>
                    <div class="fw-bold">{{ staff.license_number }}</div>
                </div>
                {% endif %}
                {% if staff.specialization %}
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Specialization" %}</label>
                    <div class="fw-bold">{{ staff.specialization }}</div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Organization Information -->
        <div class="card mb-4">
            <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 class="text-muted small">{% trans "Hospital" %}</label>
                    <div class="fw-bold">{{ staff.hospital.name }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Department" %}</label>
                    <div class="fw-bold">{{ staff.department.name|default:"-" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Employee ID" %}</label>
                    <div class="fw-bold">{{ staff.employee_id }}</div>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-envelope"></i> {% trans "Contact Information" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Email" %}</label>
                    <div class="fw-bold">
                        {% if staff.email %}
                        <a href="mailto:{{ staff.email }}">{{ staff.email }}</a>
                        {% else %}
                        -
                        {% endif %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Phone" %}</label>
                    <div class="fw-bold">
                        {% if staff.phone %}
                        <a href="tel:{{ staff.phone }}">{{ staff.phone }}</a>
                        {% else %}
                        -
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Demographics -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle"></i> {% trans "Demographics" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Gender" %}</label>
                    <div class="fw-bold">
                        {% if staff.gender %}
                        <span class="text-capitalize">{{ staff.gender }}</span>
                        {% else %}
                        -
                        {% endif %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Country" %}</label>
                    <div class="fw-bold">{{ staff.country|default:"-" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Location" %}</label>
                    <div class="fw-bold">{{ staff.location|default:"-" }}</div>
                </div>
            </div>
        </div>

        <!-- Hierarchy -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-sitemap"></i> {% trans "Hierarchy" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Reports To" %}</label>
                    <div class="fw-bold">
                        {% if staff.report_to %}
                        <a href="{% url 'organizations:staff_detail' staff.report_to.id %}" class="text-decoration-none">
                            {{ staff.report_to }}
                        </a>
                        {% else %}
                        -
                        {% endif %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Direct Reports" %}</label>
                    <div>
                        {% if staff.direct_reports.exists %}
                        <ul class="list-unstyled mb-0">
                            {% for direct_report in staff.direct_reports.all %}
                            <li><a href="{% url 'organizations:staff_detail' direct_report.id %}" class="text-decoration-none">{{ direct_report }}</a></li>
                            {% endfor %}
                        </ul>
                        {% else %}
                        -
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Details -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-list"></i> {% trans "Additional Details" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Section" %}</label>
                    <div class="fw-bold">{{ staff.section|default:"-" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Subsection" %}</label>
                    <div class="fw-bold">{{ staff.subsection|default:"-" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Department (Original)" %}</label>
                    <div class="fw-bold">{{ staff.department_name|default:"-" }}</div>
                </div>
                {% if staff.name %}
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Full Name (Original)" %}</label>
                    <div class="fw-bold">{{ staff.name }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- User Account -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user-circle"></i> {% trans "User Account" %}
                </h5>
            </div>
            <div class="card-body">
                {% if staff.user %}
                <div class="alert alert-success mb-3">
                    <i class="fas fa-check-circle"></i> {% trans "User account exists" %}
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Username" %}</label>
                    <div class="fw-bold">{{ staff.user.username }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Email" %}</label>
                    <div class="fw-bold">{{ staff.user.email }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Active" %}</label>
                    <div>
                        {% if staff.user.is_active %}
                        <span class="badge bg-success">{% trans "Yes" %}</span>
                        {% else %}
                        <span class="badge bg-danger">{% trans "No" %}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Created" %}</label>
                    <div>{{ staff.user.date_joined|date:"Y-m-d H:i" }}</div>
                </div>
                {% if user.is_px_admin or user.is_hospital_admin %}
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-outline-warning" onclick="sendInvitation()">
                        <i class="fas fa-envelope"></i> {% trans "Resend Invitation Email" %}
                    </button>
                    <button type="button" class="btn btn-outline-danger" onclick="unlinkUserAccount()">
                        <i class="fas fa-user-minus"></i> {% trans "Unlink User Account" %}
                    </button>
                </div>
                {% endif %}
                {% else %}
                <div class="alert alert-warning mb-3">
                    <i class="fas fa-exclamation-circle"></i> {% trans "No user account" %}
                </div>
                <p class="text-muted small mb-3">
                    {% trans "This staff member does not have a user account and cannot log in to the system." %}
                </p>
                {% if user.is_px_admin or user.is_hospital_admin %}
                {% if staff.email %}
                <button type="button" class="btn btn-success w-100" onclick="createUserAccount()">
                    <i class="fas fa-user-plus"></i> {% trans "Create User Account" %}
                </button>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> {% trans "Add an email address to create a user account." %}
                </div>
                {% endif %}
                {% endif %}
                {% endif %}
            </div>
        </div>

        <!-- Status -->
        <div class="card mb-4">
            <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 class="text-muted small">{% trans "Staff Status" %}</label>
                    <div>
                        {% if staff.status == 'active' %}
                        <span class="badge bg-success fs-6">{% trans "Active" %}</span>
                        {% else %}
                        <span class="badge bg-secondary fs-6">{% trans "Inactive" %}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Created" %}</label>
                    <div>{{ staff.created_at|date:"Y-m-d H:i" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">{% trans "Last Updated" %}</label>
                    <div>{{ staff.updated_at|date:"Y-m-d H:i" }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Create User Account" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to create a user account for" %} <strong>{{ staff.get_full_name }}</strong>?</p>
                <p class="text-muted small">{% trans "A username will be generated automatically and credentials will be emailed to" %} <strong>{{ staff.email }}</strong>.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-primary" onclick="confirmCreateUser()">{% trans "Create Account" %}</button>
            </div>
        </div>
    </div>
</div>

<!-- Send Invitation Modal -->
<div class="modal" id="sendInvitationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Send Invitation Email" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to send a new invitation email to" %} <strong>{{ staff.get_full_name }}</strong>?</p>
                <p class="text-muted small">{% trans "A new password will be generated and sent to" %} <strong>{{ staff.email }}</strong>.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-primary" onclick="confirmSendInvitation()">{% trans "Send Email" %}</button>
            </div>
        </div>
    </div>
</div>

<!-- Unlink User Modal -->
<div class="modal" id="unlinkUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Unlink User Account" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to unlink the user account from" %} <strong>{{ staff.get_full_name }}</strong>?</p>
                <p class="text-warning small">{% trans "This will remove login access for this staff member. The user account will still exist but will no longer be linked to this staff profile." %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-danger" onclick="confirmUnlinkUser()">{% trans "Unlink Account" %}</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
function createUserAccount() {
    new bootstrap.Modal(document.getElementById('createUserModal')).show();
}

function confirmCreateUser() {
    const btn = event.target;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
    
    fetch(`/organizations/api/staff/{{ staff.id }}/create_user_account/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        bootstrap.Modal.getInstance(document.getElementById('createUserModal')).hide();
        if (data.message) {
            alert(data.message);
        }
        location.reload();
    })
    .catch(error => {
        alert('Error: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = 'Create Account';
    });
}

function sendInvitation() {
    new bootstrap.Modal(document.getElementById('sendInvitationModal')).show();
}

function confirmSendInvitation() {
    const btn = event.target;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
    
    fetch(`/organizations/api/staff/{{ staff.id }}/send_invitation/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        bootstrap.Modal.getInstance(document.getElementById('sendInvitationModal')).hide();
        if (data.message) {
            alert(data.message);
        }
        location.reload();
    })
    .catch(error => {
        alert('Error: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = 'Send Email';
    });
}

function unlinkUserAccount() {
    new bootstrap.Modal(document.getElementById('unlinkUserModal')).show();
}

function confirmUnlinkUser() {
    const btn = event.target;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Unlinking...';
    
    fetch(`/organizations/api/staff/{{ staff.id }}/unlink_user/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        bootstrap.Modal.getInstance(document.getElementById('unlinkUserModal')).hide();
        if (data.message) {
            alert(data.message);
        }
        location.reload();
    })
    .catch(error => {
        alert('Error: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = 'Unlink Account';
    });
}
</script>
{% endblock %}