{# Employee Form Partial - Used in Add/Edit Employee Modal #}
<form id="employeeForm" class="form-horizontal" data-parsley-validate="">

    {# Hidden fields for employee ID and CSRF token #}
    <input type="hidden" name="employeeId" id="employeeId" value="{{ employee.id|default('') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

    {# Photo Section #}
    <div class="form-group">
        <div class="col-sm-12 text-center">
            <div class="employee-photo-container" style="margin-bottom: 15px;">
                {% if employee.photoUrl %}
                    <img src="{{ employee.photoUrl }}" alt="{{ employee.fullName }}" class="employee-photo-preview"
                         style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #ddd;">
                {% else %}
                    <div class="employee-photo-placeholder" style="width: 120px; height: 120px; border-radius: 50%; background-color: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #ddd;">
                        <i class="fa fa-user fa-4x" style="color: #ccc;"></i>
                    </div>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="photoFile" class="btn btn-sm btn-secondary">
                    <i class="fa fa-upload"></i> Upload New Photo
                </label>
                <input type="file" id="photoFile" name="photoFile" accept="image/*" style="display: none;">
                {% if employee.photoUrl %}
                    <button type="button" class="btn btn-sm btn-danger" id="removePhotoBtn">
                        <i class="fa fa-trash"></i> Remove Photo
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    <hr>

    {# Basic Information Section #}
    <h4 class="text-primary">Basic Information</h4>
    {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}
        <div class="alert alert-info">
            <i class="fa fa-info-circle"></i> Name and email are synced from {{ employee.source|capitalize }} and cannot be edited here.
        </div>
    {% endif %}

    <div class="form-group">
        <label for="firstName" class="col-sm-3 control-label">First Name <span class="text-danger">*</span></label>
        <div class="col-sm-9">
            <input type="text" class="form-control {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}"
                   id="firstName" name="firstName"
                   value="{{ employee.firstName|default('') }}"
                   placeholder="First Name"
                   {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}
                   data-parsley-pattern="/^[a-z ,.'-]+$/i"
                   required
                   minlength="2"
                   maxlength="50">
        </div>
    </div>

    <div class="form-group">
        <label for="lastName" class="col-sm-3 control-label">Last Name <span class="text-danger">*</span></label>
        <div class="col-sm-9">
            <input type="text" class="form-control {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}"
                   id="lastName" name="lastName"
                   value="{{ employee.lastName|default('') }}"
                   placeholder="Last Name"
                   {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}
                   data-parsley-pattern="/^[a-z ,.'-]+$/i"
                   required
                   minlength="2"
                   maxlength="50">
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-sm-3 control-label">Email</label>
        <div class="col-sm-9">
            <input type="email" class="form-control {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}"
                   id="email" name="email"
                   value="{{ employee.email|default('') }}"
                   placeholder="email@example.com"
                   {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}
                   data-parsley-type="email">
        </div>
    </div>

    <div class="form-group">
        <label for="phone" class="col-sm-3 control-label">Phone</label>
        <div class="col-sm-9">
            <input type="tel" class="form-control"
                   id="phone" name="phone"
                   value="{{ employee.phone|default('') }}"
                   placeholder="(555) 555-5555"
                   data-parsley-pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$">
            <span class="help-block">Format: (555) 555-5555 or 555-555-5555</span>
        </div>
    </div>

    <hr>

    {# Position & Role Section #}
    <h4 class="text-primary">Position & Role</h4>

    <div class="form-group">
        <label for="position" class="col-sm-3 control-label">Position</label>
        <div class="col-sm-9">
            <input type="text" class="form-control {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}"
                   id="position" name="position"
                   value="{{ employee.position|default('') }}"
                   placeholder="e.g., Store Manager, Sales Associate"
                   {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}readonly{% endif %}
                   maxlength="100">
            {% if employee.source is defined and employee.source in ['wheniwork', 'homebase'] %}
                <span class="help-block">Position may be synced from {{ employee.source|capitalize }}</span>
            {% endif %}
        </div>
    </div>

    <div class="form-group">
        <label for="role" class="col-sm-3 control-label">Role</label>
        <div class="col-sm-9">
            <select class="form-control" id="role" name="role">
                <option value="1" {% if employee.role is defined and employee.role == 1 %}selected{% endif %}>Manager</option>
                <option value="2" {% if employee.role is defined and employee.role == 2 %}selected{% endif %}>Buyer</option>
                <option value="3" {% if employee.role is defined and employee.role == 3 %}selected{% endif %}>Sorter</option>
                <option value="4" {% if employee.role is not defined or employee.role == 4 %}selected{% endif %}>Employee</option>
            </select>
            <span class="help-block">Role determines system permissions</span>
        </div>
    </div>

    <div class="form-group">
        <label for="hourlyRate" class="col-sm-3 control-label">Hourly Rate</label>
        <div class="col-sm-9">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="number" class="form-control"
                       id="hourlyRate" name="hourlyRate"
                       value="{{ employee.hourlyRate|default('') }}"
                       placeholder="0.00"
                       step="0.01"
                       min="0"
                       max="999.99"
                       data-parsley-pattern="^\d+(\.\d{1,2})?$">
            </div>
        </div>
    </div>

    <hr>

    {# Employment Dates Section #}
    <h4 class="text-primary">Employment Dates</h4>

    <div class="form-group">
        <label for="hireDate" class="col-sm-3 control-label">Hire Date</label>
        <div class="col-sm-9">
            <input type="date" class="form-control"
                   id="hireDate" name="hireDate"
                   value="{{ employee.hireDate|default('') }}">
        </div>
    </div>

    <div class="form-group" id="terminationDateGroup" {% if not employee.terminationDate %}style="display: none;"{% endif %}>
        <label for="terminationDate" class="col-sm-3 control-label">Termination Date</label>
        <div class="col-sm-9">
            <input type="date" class="form-control"
                   id="terminationDate" name="terminationDate"
                   value="{{ employee.terminationDate|default('') }}">
            <span class="help-block">Set this when deactivating an employee</span>
        </div>
    </div>

    <div class="form-group">
        <label for="leaveStartDate" class="col-sm-3 control-label">Leave Start Date</label>
        <div class="col-sm-9">
            <input type="date" class="form-control"
                   id="leaveStartDate" name="leaveStartDate"
                   value="{{ employee.leaveStartDate|default('') }}">
        </div>
    </div>

    <div class="form-group">
        <label for="leaveEndDate" class="col-sm-3 control-label">Leave End Date</label>
        <div class="col-sm-9">
            <input type="date" class="form-control"
                   id="leaveEndDate" name="leaveEndDate"
                   value="{{ employee.leaveEndDate|default('') }}">
            <span class="help-block">Leave blank for indefinite leave</span>
        </div>
    </div>

    <hr>

    {# Emergency Contact Section #}
    <h4 class="text-primary">Emergency Contact</h4>

    <div class="form-group">
        <label for="emergencyContactName" class="col-sm-3 control-label">Contact Name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   id="emergencyContactName" name="emergencyContactName"
                   value="{{ employee.emergencyContactName|default('') }}"
                   placeholder="Full Name"
                   data-parsley-pattern="/^[a-z ,.'-]+$/i"
                   maxlength="100">
        </div>
    </div>

    <div class="form-group">
        <label for="emergencyContactPhone" class="col-sm-3 control-label">Contact Phone</label>
        <div class="col-sm-9">
            <input type="tel" class="form-control"
                   id="emergencyContactPhone" name="emergencyContactPhone"
                   value="{{ employee.emergencyContactPhone|default('') }}"
                   placeholder="(555) 555-5555"
                   data-parsley-pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$">
        </div>
    </div>

    <hr>

    {# Settings Section #}
    <h4 class="text-primary">Settings</h4>

    <div class="form-group">
        <label for="dailyEmailEnabled" class="col-sm-3 control-label">Daily Email Reports</label>
        <div class="col-sm-9">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="dailyEmailEnabled" name="dailyEmailEnabled" value="1"
                           {% if employee.dailyEmailEnabled is defined and employee.dailyEmailEnabled %}checked{% endif %}>
                    Send daily email reports to this employee
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="drsEmployeeId" class="col-sm-3 control-label">DRS Employee ID</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   id="drsEmployeeId" name="drsEmployeeId"
                   value="{{ employee.drsEmployeeId|default('') }}"
                   placeholder="DRS System ID"
                   maxlength="50">
            <span class="help-block">Link to external DRS/POS system</span>
        </div>
    </div>

    <div class="form-group">
        <label for="active" class="col-sm-3 control-label">Status</label>
        <div class="col-sm-9">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="active" name="active" value="1"
                           {% if employee.active is not defined or employee.active %}checked{% endif %}>
                    Employee is active
                </label>
            </div>
            <span class="help-block">Inactive employees will not appear in schedules or assignments</span>
        </div>
    </div>

    {% if employee.id is defined %}
        <hr>

        {# System Info Section - Only shown in edit mode #}
        <h4 class="text-primary">System Information</h4>

        <div class="form-group">
            <label class="col-sm-3 control-label">Source</label>
            <div class="col-sm-9">
                <p class="form-control-static">
                    {% if employee.source == 'homegrown' %}
                        <span class="badge bg-secondary">Homegrown</span>
                    {% elseif employee.source == 'wheniwork' %}
                        <span class="badge bg-info">When I Work</span>
                    {% elseif employee.source == 'homebase' %}
                        <span class="badge bg-primary">Homebase</span>
                    {% else %}
                        <span class="badge bg-secondary">{{ employee.source|capitalize }}</span>
                    {% endif %}
                </p>
            </div>
        </div>

        {% if employee.externalId %}
            <div class="form-group">
                <label class="col-sm-3 control-label">External ID</label>
                <div class="col-sm-9">
                    <p class="form-control-static">{{ employee.externalId }}</p>
                </div>
            </div>
        {% endif %}

        <div class="form-group">
            <label class="col-sm-3 control-label">Created At</label>
            <div class="col-sm-9">
                <p class="form-control-static">{{ employee.createdAt|default('N/A') }}</p>
            </div>
        </div>

        {% if employee.lastSyncedAt %}
            <div class="form-group">
                <label class="col-sm-3 control-label">Last Synced</label>
                <div class="col-sm-9">
                    <p class="form-control-static">{{ employee.lastSyncedAt }}</p>
                </div>
            </div>
        {% endif %}
    {% endif %}

    {# Form validation messages #}
    <div class="bs-callout bs-callout-warning hidden">
        <h4>Validation Error</h4>
        <p>Please check the form for errors.</p>
    </div>

    <div class="bs-callout bs-callout-info hidden">
        <h4>Success!</h4>
        <p>Form is valid and ready to submit.</p>
    </div>

</form>

<style>
    .readonly {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }
    .employee-photo-preview, .employee-photo-placeholder {
        margin: 0 auto;
        display: block;
    }
</style>

<script>
    $(document).ready(function() {
        // Initialize Parsley validation
        $('#employeeForm').parsley();

        // Handle photo file selection
        $('#photoFile').on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    // Update preview
                    var photoContainer = $('.employee-photo-container');
                    photoContainer.html(
                        '<img src="' + e.target.result + '" alt="Photo Preview" class="employee-photo-preview" ' +
                        'style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #ddd;">'
                    );
                };
                reader.readAsDataURL(file);
            }
        });

        // Handle remove photo button
        $('#removePhotoBtn').on('click', function() {
            if (confirm('Are you sure you want to remove this photo?')) {
                // Reset photo to placeholder
                $('.employee-photo-container').html(
                    '<div class="employee-photo-placeholder" style="width: 120px; height: 120px; border-radius: 50%; background-color: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #ddd;">' +
                    '<i class="fa fa-user fa-4x" style="color: #ccc;"></i>' +
                    '</div>'
                );
                // Add a hidden field to indicate photo removal
                if ($('#removePhoto').length === 0) {
                    $('#employeeForm').append('<input type="hidden" name="removePhoto" id="removePhoto" value="1">');
                }
                $(this).remove();
            }
        });

        // Show/hide termination date based on active status
        $('#active').on('change', function() {
            if (!$(this).is(':checked')) {
                $('#terminationDateGroup').slideDown();
            } else {
                $('#terminationDateGroup').slideUp();
                $('#terminationDate').val('');
            }
        });

        // Validate leave dates
        $('#leaveStartDate, #leaveEndDate').on('change', function() {
            var startDate = $('#leaveStartDate').val();
            var endDate = $('#leaveEndDate').val();

            if (startDate && endDate && startDate > endDate) {
                alert('Leave end date must be after leave start date');
                $('#leaveEndDate').val('');
            }
        });
    });
</script>