{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-person-gear text-primary"></i>
                {{ title }}
            </h2>

            <p class="text-muted mb-0">
                {{ "Create a new user" if not user else "Edit user details" }}
            </p>

        </div>

        <a href="/users" class="btn btn-secondary">

            <i class="bi bi-arrow-left"></i>

            Back

        </a>

    </div>

    <!-- Form -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white">

            <i class="bi bi-person"></i>

            User Information

        </div>

        <div class="card-body">

            <form method="post" action="{{ '/users/new' if not user else '/users/' + user.id|string + '/edit' }}">

                <div class="row">

                    <!-- Username -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">Username *</label>

                        <input type="text" name="username" class="form-control" value="{{ user.username if user else '' }}" required>

                    </div>

                    <!-- Full Name -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">Full Name</label>

                        <input type="text" name="full_name" class="form-control" value="{{ user.full_name if user else '' }}">

                    </div>

                    <!-- Email -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">Email *</label>

                        <input type="email" name="email" class="form-control" value="{{ user.email if user else '' }}" required>

                    </div>

                    <!-- Password -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">Password {% if user %}(Leave blank to keep current){% else %}*{% endif %}</label>

                        <input type="password" name="password" class="form-control" {% if not user %}required{% endif %}>

                    </div>

                    <!-- ✅ DEPARTMENT DROPDOWN -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            <i class="bi bi-building"></i> Department *
                        </label>

                        <select name="department_id" class="form-select" required>
                            <option value="">-- Select Department --</option>
                            {% for dept in departments %}
                            <option value="{{ dept.id }}" 
                                {% if user and user.department_id == dept.id %}selected{% endif %}>
                                {{ dept.name }}
                                {% if dept.abbreviation %}({{ dept.abbreviation }}){% endif %}
                            </option>
                            {% endfor %}
                        </select>

                        <small class="text-muted">
                            <i class="bi bi-info-circle"></i>
                            Department determines what the user sees on their dashboard
                        </small>

                    </div>

                    <!-- ✅ ROLE DROPDOWN -->
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            <i class="bi bi-person-badge"></i> Role *
                        </label>

                        <select name="role" class="form-select" required>
                            <option value="user" {% if user and user.role == 'user' %}selected{% endif %}>User</option>
                            <option value="Admin" {% if user and user.role == 'Admin' %}selected{% endif %}>Admin</option>
                            <option value="Director" {% if user and user.role == 'Director' %}selected{% endif %}>Director</option>
                            <option value="Engineer" {% if user and user.role == 'Engineer' %}selected{% endif %}>Engineer</option>
                            <option value="Procurement" {% if user and user.role == 'Procurement' %}selected{% endif %}>Procurement</option>
                            <option value="Accounts" {% if user and user.role == 'Accounts' %}selected{% endif %}>Accounts</option>
                            <option value="HR" {% if user and user.role == 'HR' %}selected{% endif %}>HR</option>
                            <option value="Workshop" {% if user and user.role == 'Workshop' %}selected{% endif %}>Workshop</option>
                        </select>

                        <small class="text-muted">
                            <i class="bi bi-info-circle"></i>
                            Role determines what actions the user can perform
                        </small>

                    </div>

                    <!-- ✅ DEPARTMENT HEAD CHECKBOX -->
                    <div class="col-md-6 mb-3">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="is_department_head" class="form-check-input" value="true" 
                                {% if user and user.is_department_head %}checked{% endif %}>
                            <label class="form-check-label">
                                <i class="bi bi-person-badge text-primary"></i>
                                Department Head
                            </label>
                            <small class="text-muted d-block">
                                Department heads can view all tasks and data in their department
                            </small>
                        </div>
                    </div>

                    <!-- ✅ ACTIVE CHECKBOX -->
                    <div class="col-md-6 mb-3">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="is_active" class="form-check-input" value="true" 
                                {% if not user or user.is_active %}checked{% endif %}>
                            <label class="form-check-label">
                                <i class="bi bi-check-circle text-success"></i>
                                Active
                            </label>
                            <small class="text-muted d-block">
                                Inactive users cannot log in to the system
                            </small>
                        </div>
                    </div>

                    <!-- ✅ DEPARTMENT INFO DISPLAY (for editing) -->
                    {% if user and user.department %}
                    <div class="col-12 mb-3">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i>
                            <strong>Current Department:</strong> {{ user.department.name }}
                            {% if user.department.abbreviation %}({{ user.department.abbreviation }}){% endif %}
                            {% if user.is_department_head %}
                            <span class="badge bg-primary">Department Head</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                </div>

                <div class="text-end">

                    <a href="/users" class="btn btn-secondary">Cancel</a>

                    <button type="submit" class="btn btn-primary">

                        <i class="bi bi-save"></i>

                        Save User

                    </button>

                </div>

            </form>

        </div>

    </div>

    <!-- ✅ Department Info Card (for existing users) -->
    {% if user and user.department %}
    <div class="card shadow-sm mt-4">
        <div class="card-header bg-light">
            <i class="bi bi-building"></i>
            Department Information
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <strong>Department:</strong> {{ user.department.name }}
                </div>
                <div class="col-md-4">
                    <strong>Abbreviation:</strong> {{ user.department.abbreviation or 'N/A' }}
                </div>
                <div class="col-md-4">
                    <strong>Head Status:</strong>
                    {% if user.is_department_head %}
                    <span class="badge bg-success">Yes</span>
                    {% else %}
                    <span class="badge bg-secondary">No</span>
                    {% endif %}
                </div>
            </div>
            {% if user.department.description %}
            <div class="mt-2">
                <strong>Description:</strong> {{ user.department.description }}
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

</div>

<!-- ✅ JavaScript: Show/hide department info -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const departmentSelect = document.querySelector('select[name="department_id"]');
    const deptInfoDiv = document.querySelector('.alert-info');
    
    if (departmentSelect && deptInfoDiv) {
        departmentSelect.addEventListener('change', function() {
            // You could add logic here to show department-specific info
            // or pre-select roles based on department
            const selectedDept = this.options[this.selectedIndex]?.text;
            if (selectedDept) {
                console.log('Selected department:', selectedDept);
            }
        });
    }
});
</script>

{% endblock %}