{% extends 'base.html' %}
{% load static %}

{% block title %}{{ staff.get_display_name }} - Staff Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Staff Details</h1>
        <div>
            <a href="{% url 'staff:staff_edit' staff.pk %}" class="btn btn-warning">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{% url 'staff:staff_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to List
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Personal Information Card -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Personal Information</h6>
                </div>
                <div class="card-body text-center">
                    {% if staff.photo %}
                    <img src="{{ staff.photo.url }}" class="rounded-circle mb-3" width="150" height="150"
                         alt="{{ staff.get_display_name }}">
                    {% else %}
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-3"
                         style="width: 150px; height: 150px; font-size: 3rem;">
                        {{ staff.user.first_name|first|upper }}{{ staff.user.last_name|first|upper }}
                    </div>
                    {% endif %}
                    <h4>{{ staff.get_display_name }}</h4>
                    <p class="text-muted">{{ staff.get_role_display }}</p>
                    <p class="text-muted small">Employee ID: {{ staff.employee_id }}</p>
                </div>
            </div>
        </div>

        <!-- Details -->
        <div class="col-lg-8">
            <!-- Employment Details -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Employment Details</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm">
                            <tr>
                                <th style="width:200px;">Title</th>
                                <td>{{ staff.get_title_display|default:"—" }}</td>
                            </tr>
                            <tr>
                                <th>Full Name</th>
                                <td>{{ staff.user.first_name }} {{ staff.user.last_name }}</td>
                            </tr>
                            <tr>
                                <th>Username</th>
                                <td><code>{{ staff.user.username }}</code></td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ staff.user.email|default:"—" }}</td>
                            </tr>
                            <tr>
                                <th>Primary Phone</th>
                                <td>
                                    {% if staff.phone_number %}
                                        {{ staff.phone_country_code }} {{ staff.phone_number }}
                                    {% else %}
                                        <span class="text-muted">Not provided</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Alternate Phone</th>
                                <td>
                                    {% if staff.alternate_phone %}
                                        {{ staff.alt_phone_country_code }} {{ staff.alternate_phone }}
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Role</th>
                                <td><span class="badge bg-primary">{{ staff.get_role_display }}</span></td>
                            </tr>
                            <tr>
                                <th>Department</th>
                                <td>{{ staff.get_department_display }}</td>
                            </tr>
                            <tr>
                                <th>Employment Status</th>
                                <td>
                                    {% if staff.employment_status == 'permanent' %}
                                    <span class="badge bg-success">Permanent</span>
                                    {% elif staff.employment_status == 'contract' %}
                                    <span class="badge bg-info">Contract</span>
                                    {% else %}
                                    <span class="badge bg-warning text-dark">{{ staff.get_employment_status_display }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Hire Date</th>
                                <td>{{ staff.hire_date|date:"d M Y"|default:"Not set" }}</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>
                                    {% if staff.is_active %}
                                    <span class="badge bg-success">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Emergency Contact -->
            {% if staff.emergency_contact_name %}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-danger">
                        <i class="fas fa-ambulance me-2"></i>Emergency Contact
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-sm">
                        <tr>
                            <th style="width:200px;">Name</th>
                            <td>{{ staff.emergency_contact_name }}</td>
                        </tr>
                        <tr>
                            <th>Phone</th>
                            <td>
                                {% if staff.emergency_contact_phone %}
                                    {{ staff.emergency_phone_country_code }} {{ staff.emergency_contact_phone }}
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Relationship</th>
                            <td>{{ staff.emergency_contact_relationship|default:"—" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}