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

{% block title %}
{% if department.id %}Edit Department: {{ department.name }}{% else %}Create New Department{% endif %}
{% endblock %}

{% block css %}
<!-- Select2 CSS -->
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2-bootstrap5-theme/select2-bootstrap5.min.css' %}" rel="stylesheet" />
<style>
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    }
    .form-floating > label {
        padding: 1rem 0.75rem;
    }
    .form-check-input:checked {
        background-color: #2d62ed;
        border-color: #2d62ed;
    }
    .help-text {
        font-size: 0.85rem;
        color: #6c757d;
    }
    .required-field label::after {
        content: " *";
        color: #dc3545;
    }
    .accordion-button:not(.collapsed) {
        background-color: rgba(45, 98, 237, 0.1);
        color: #2d62ed;
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:department_list' %}">Departments</a></li>
    <li class="breadcrumb-item active">
        {% if department.id %}Edit Department{% else %}Create Department{% endif %}
    </li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    {% if department.id %}Edit Department: {{ department.name }}{% else %}Create New Department{% endif %}
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <!-- begin panel-heading -->
            <div class="panel-heading">
                <h4 class="panel-title">
                    {% if department.id %}Edit Department Information{% else %}Department Information{% endif %}
                </h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <!-- end panel-heading -->
            
            <!-- begin panel-body -->
            <div class="panel-body">
                <form method="post" id="departmentForm">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <strong>Error!</strong> Please correct the errors below.
                        {% if form.non_field_errors %}
                        <ul>
                            {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <div class="row">
                        <!-- Basic Information -->
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Basic Information</h5>
                                </div>
                                <div class="card-body">
                                    <!-- Department Name -->
                                    <div class="form-floating mb-3 required-field">
                                        {{ form.name }}
                                        <label for="{{ form.name.id_for_label }}">Department Name</label>
                                        {% if form.name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.name.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.name.help_text %}
                                        <div class="help-text mt-1">{{ form.name.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Department Code -->
                                    <div class="form-floating mb-3 required-field">
                                        {{ form.department_code }}
                                        <label for="{{ form.department_code.id_for_label }}">Department Code</label>
                                        {% if form.department_code.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.department_code.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.department_code.help_text %}
                                        <div class="help-text mt-1">{{ form.department_code.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Department Type -->
                                    <div class="form-floating mb-3 required-field">
                                        {{ form.department_type }}
                                        <label for="{{ form.department_type.id_for_label }}">Department Type</label>
                                        {% if form.department_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.department_type.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.department_type.help_text %}
                                        <div class="help-text mt-1">{{ form.department_type.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Parent Department -->
                                    <div class="mb-3">
                                        <label for="{{ form.parent_department.id_for_label }}" class="form-label">Parent Department</label>
                                        {{ form.parent_department }}
                                        {% if form.parent_department.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.parent_department.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.parent_department.help_text %}
                                        <div class="help-text mt-1">{{ form.parent_department.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Department Head -->
                                    <div class="mb-3">
                                        <label for="{{ form.department_head.id_for_label }}" class="form-label">Department Head</label>
                                        {{ form.department_head }}
                                        {% if form.department_head.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.department_head.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.department_head.help_text %}
                                        <div class="help-text mt-1">{{ form.department_head.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Is Active -->
                                    <div class="form-check form-switch mb-3">
                                        {{ form.is_active }}
                                        <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                            Department is active
                                        </label>
                                        {% if form.is_active.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.is_active.errors }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Additional Information -->
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Additional Information</h5>
                                </div>
                                <div class="card-body">
                                    <!-- Location -->
                                    <div class="form-floating mb-3">
                                        {{ form.location }}
                                        <label for="{{ form.location.id_for_label }}">Location</label>
                                        {% if form.location.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.location.errors }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Cost Center -->
                                    <div class="form-floating mb-3">
                                        {{ form.cost_center }}
                                        <label for="{{ form.cost_center.id_for_label }}">Cost Center</label>
                                        {% if form.cost_center.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.cost_center.errors }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Annual Budget -->
                                    <div class="form-floating mb-3">
                                        {{ form.annual_budget }}
                                        <label for="{{ form.annual_budget.id_for_label }}">Annual Budget</label>
                                        {% if form.annual_budget.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.annual_budget.errors }}
                                        </div>
                                        {% endif %}
                                        {% if form.annual_budget.help_text %}
                                        <div class="help-text mt-1">{{ form.annual_budget.help_text }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Description -->
                                    <div class="mb-3">
                                        <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                                        {{ form.description }}
                                        {% if form.description.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.description.errors }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Notes -->
                                    <div class="mb-3">
                                        <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                                        {{ form.notes }}
                                        {% if form.notes.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.notes.errors }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Help Accordion -->
                    <div class="accordion mb-4" id="helpAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="helpHeading">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#helpCollapse" aria-expanded="false" aria-controls="helpCollapse">
                                    <i class="fas fa-question-circle me-2"></i> Help & Guidelines
                                </button>
                            </h2>
                            <div id="helpCollapse" class="accordion-collapse collapse" aria-labelledby="helpHeading" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6>Department Information Guidelines</h6>
                                            <ul>
                                                <li><strong>Department Name:</strong> Use a clear, descriptive name that reflects the department's function.</li>
                                                <li><strong>Department Code:</strong> Use a unique, short code (typically 2-6 characters) for system identification.</li>
                                                <li><strong>Department Type:</strong> Select the appropriate classification for the department.</li>
                                                <li><strong>Parent Department:</strong> If this is a sub-department, select its parent department.</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <h6>Best Practices</h6>
                                            <ul>
                                                <li>Ensure department codes are unique across the organization.</li>
                                                <li>Assign a department head to improve accountability and communication.</li>
                                                <li>Provide a detailed description to clarify the department's purpose and responsibilities.</li>
                                                <li>Use the notes field for any temporary or additional information.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'hr:department_list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Departments
                        </a>
                        <div>
                            <button type="reset" class="btn btn-default me-2">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 
                                {% if department.id %}Update Department{% else %}Create Department{% endif %}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end panel-body -->
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<!-- Select2 JS -->
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2
        $('#{{ form.parent_department.id_for_label }}').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select a parent department (optional)',
            allowClear: true
        });
        
        $('#{{ form.department_head.id_for_label }}').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select a department head (optional)',
            allowClear: true
        });
        
        // Form validation
        $('#departmentForm').on('submit', function(e) {
            let isValid = true;
            
            // Check required fields
            if ($('#{{ form.name.id_for_label }}').val() === '') {
                $('#{{ form.name.id_for_label }}').addClass('is-invalid');
                isValid = false;
            } else {
                $('#{{ form.name.id_for_label }}').removeClass('is-invalid');
            }
            
            if ($('#{{ form.department_code.id_for_label }}').val() === '') {
                $('#{{ form.department_code.id_for_label }}').addClass('is-invalid');
                isValid = false;
            } else {
                $('#{{ form.department_code.id_for_label }}').removeClass('is-invalid');
            }
            
            if (!isValid) {
                e.preventDefault();
                
                // Show alert
                $('html, body').animate({
                    scrollTop: 0
                }, 200);
                
                // Add alert if not exists
                if ($('.alert-danger').length === 0) {
                    $('.panel-body').prepend(
                        '<div class="alert alert-danger">' +
                        '<strong>Error!</strong> Please fill in all required fields.' +
                        '</div>'
                    );
                }
            }
        });
    });
</script>
{% endblock %}