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

{% block content %}
<div class="container-fluid p-4">
    <div class="card shadow-sm border-0" style="border-radius: 12px;">
        <div class="card-header bg-white border-0">
            <h4 class="fw-bold" style="color: #0e2e63;">
                {% if employee %}Edit{% else %}Add New{% endif %} Employee
            </h4>
        </div>
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">First Name *</label>
                        <input type="text" name="first_name" class="form-control" value="{{ employee.first_name|default:'' }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Last Name *</label>
                        <input type="text" name="last_name" class="form-control" value="{{ employee.last_name|default:'' }}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Email *</label>
                        <input type="email" name="email" class="form-control" value="{{ employee.email|default:'' }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Phone *</label>
                        <input type="text" name="phone" class="form-control" value="{{ employee.phone|default:'' }}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="male" {% if employee.gender == 'male' %}selected{% endif %}>Male</option>
                            <option value="female" {% if employee.gender == 'female' %}selected{% endif %}>Female</option>
                            <option value="other" {% if employee.gender == 'other' %}selected{% endif %}>Other</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control" value="{{ employee.date_of_birth|date:'Y-m-d'|default:'' }}">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Address</label>
                    <textarea name="address" class="form-control" rows="3">{{ employee.address|default:'' }}</textarea>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Department</label>
                        <select name="department" class="form-select">
                            <option value="">Select Department</option>
                            {% for dept in departments %}
                            <option value="{{ dept.id }}" {% if employee.department.id == dept.id %}selected{% endif %}>
                                {{ dept.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Designation</label>
                        <select name="designation" class="form-select">
                            <option value="">Select Designation</option>
                            {% for desg in designations %}
                            <option value="{{ desg.id }}" {% if employee.designation.id == desg.id %}selected{% endif %}>
                                {{ desg.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Employment Type</label>
                        <select name="employment_type" class="form-select">
                            <option value="full_time" {% if employee.employment_type == 'full_time' %}selected{% endif %}>Full Time</option>
                            <option value="part_time" {% if employee.employment_type == 'part_time' %}selected{% endif %}>Part Time</option>
                            <option value="contract" {% if employee.employment_type == 'contract' %}selected{% endif %}>Contract</option>
                            <option value="intern" {% if employee.employment_type == 'intern' %}selected{% endif %}>Intern</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Joining Date</label>
                        <input type="date" name="joining_date" class="form-control" value="{{ employee.joining_date|date:'Y-m-d'|default:'' }}">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Bio</label>
                    <textarea name="bio" class="form-control" rows="3">{{ employee.bio|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Skills</label>
                    <input type="text" name="skills" class="form-control" value="{{ employee.skills|default:'' }}" placeholder="Python, Django, React, etc.">
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">LinkedIn</label>
                        <input type="url" name="linkedin" class="form-control" value="{{ employee.linkedin|default:'' }}" placeholder="https://linkedin.com/in/...">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">GitHub</label>
                        <input type="url" name="github" class="form-control" value="{{ employee.github|default:'' }}" placeholder="https://github.com/...">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">Twitter</label>
                        <input type="url" name="twitter" class="form-control" value="{{ employee.twitter|default:'' }}" placeholder="https://twitter.com/...">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Profile Picture</label>
                    <input type="file" name="profile_picture" class="form-control" accept="image/*">
                    {% if employee.profile_picture %}
                    <small class="text-muted">Current: {{ employee.profile_picture.name }}</small>
                    {% endif %}
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="is_active" class="form-check-input" {% if employee.is_active or not employee %}checked{% endif %}>
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="display_on_website" class="form-check-input" {% if employee.display_on_website or not employee %}checked{% endif %}>
                            <label class="form-check-label">Display on Website</label>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
                        <i class="fas fa-save me-2"></i> {% if employee %}Update{% else %}Create{% endif %} Employee
                    </button>
                    <a href="{% url 'employee_admin' %}" class="btn btn-light">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}