{% extends "base_page.html" %}

{% block title %}Edit Employee{% endblock %}
{% block page_title %}Edit Employee{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-user-edit me-2"></i>Edit Employee</h3>
            <a href="{{ url_for('admin_employees') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to List
            </a>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Employee Information</h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">First Name *</label>
                            <input type="text" name="name" class="form-control" value="{{ employee.name }}" 
                                   required maxlength="200">
                            <div class="form-text">Maximum 200 characters</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Name *</label>
                            <input type="text" name="last_name" class="form-control" value="{{ employee.last_name }}" 
                                   required maxlength="200">
                            <div class="form-text">Maximum 200 characters</div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ employee.email }}" 
                                   maxlength="500">
                            <div class="form-text">Maximum 500 characters</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Mobile Phone</label>
                            <input type="tel" name="mobile_phone" class="form-control" value="{{ employee.mobile_phone }}" 
                                   maxlength="100">
                            <div class="form-text">Maximum 100 characters</div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Birthday</label>
                            <input type="date" name="birthday" class="form-control" value="{{ employee.birthday_form }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Position</label>
                            <select name="position_id" class="form-select">
                                <option value="">Select Position</option>
                                {% for position in positions %}
                                <option value="{{ position.id }}" {% if position.id == employee.position_id %}selected{% endif %}>
                                    {{ position.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Employee Photo</label>
                            <div class="photo-upload-section">
                                <div class="current-photo mb-2">
                                    <img id="currentPhoto" src="{{ employee.photo_path or '/static/images/default_avatar.png' }}" 
                                         alt="Current Photo" class="img-thumbnail" style="max-width: 100px; max-height: 100px;">
                                </div>
                                <input type="file" id="photoUpload" class="form-control" accept="image/*">
                                <input type="hidden" name="photo_url" id="photoUrl" value="{{ employee.photo_path or '' }}">
                                <div id="uploadProgress" class="mt-2" style="display: none;">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                    </div>
                                    <small class="text-muted">Uploading photo...</small>
                                </div>
                                <div id="uploadError" class="mt-2 text-danger" style="display: none;"></div>
                                <small class="form-text text-muted">Select an image file to upload to Cloudinary</small>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Info:</strong> Employee hired on {{ employee.hire_date }}, current position: {{ employee.position_name }}
                    </div>

                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ url_for('admin_employees') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-danger ms-2" 
                                    onclick="confirmDelete('{{ employee.id }}', '{{ employee.name }} {{ employee.last_name }}')">
                                <i class="fas fa-trash me-2"></i>Delete Employee
                            </button>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fas fa-user-times fa-3x text-danger mb-3"></i>
                    <h5>Are you sure you want to delete this employee?</h5>
                    <p class="text-muted mb-3">
                        <strong id="employeeName"></strong>
                    </p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. The employee and all related data will be permanently deleted.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Delete Employee
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Cloudinary Upload Widget -->
<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const photoUpload = document.getElementById('photoUpload');
    const currentPhoto = document.getElementById('currentPhoto');
    const photoUrl = document.getElementById('photoUrl');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadError = document.getElementById('uploadError');
    const progressBar = uploadProgress.querySelector('.progress-bar');

    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const name = document.querySelector('input[name="name"]').value;
        const lastName = document.querySelector('input[name="last_name"]').value;
        const email = document.querySelector('input[name="email"]').value;
        const phone = document.querySelector('input[name="mobile_phone"]').value;
        
        let errors = [];
        
        if (name.length > 255) errors.push('First name cannot exceed 255 characters.');
        if (lastName.length > 255) errors.push('Last name cannot exceed 255 characters.');
        if (email.length > 500) errors.push('Email cannot exceed 500 characters.');
        if (phone.length > 100) errors.push('Mobile phone cannot exceed 100 characters.');
        
        if (errors.length > 0) {
            e.preventDefault();
            alert('Validation errors:\n' + errors.join('\n'));
            return false;
        }
    });

    // Cloudinary configuration
    const cloudName = 'dbc6revtz';
    const uploadPreset = 'hr_proyekti';

    // Optimize existing Cloudinary URLs
    function optimizeCloudinaryUrl(url) {
        if (url && url.includes('cloudinary.com')) {
            return url.replace(
                '/upload/',
                '/upload/c_fill,w_200,h_200,q_auto:good,f_auto,dpr_auto/'
            );
        }
        return url;
    }

    // Optimize current photo if it's a Cloudinary URL
    if (currentPhoto.src && currentPhoto.src.includes('cloudinary.com')) {
        const optimizedSrc = optimizeCloudinaryUrl(currentPhoto.src);
        currentPhoto.src = optimizedSrc;
        if (photoUrl.value && photoUrl.value.includes('cloudinary.com')) {
            photoUrl.value = optimizedSrc;
        }
    }

    photoUpload.addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (!file) return;

        // Validate file type
        if (!file.type.startsWith('image/')) {
            showError('Please select a valid image file.');
            return;
        }

        // Validate file size (max 10MB)
        if (file.size > 10 * 1024 * 1024) {
            showError('File size must be less than 10MB.');
            return;
        }

        uploadToCloudinary(file);
    });

    function uploadToCloudinary(file) {
        hideError();
        showProgress();

        const formData = new FormData();
        formData.append('file', file);
        formData.append('upload_preset', uploadPreset);
        formData.append('cloud_name', cloudName);
        
        // Add employee ID to public_id for organization
        const employeeId = '{{ employee.id }}';
        formData.append('public_id', `hr_system/employees/employee_${employeeId}_${Date.now()}`);

        const xhr = new XMLHttpRequest();

        // Track upload progress
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.style.width = percentComplete + '%';
                progressBar.textContent = Math.round(percentComplete) + '%';
            }
        });

        xhr.addEventListener('load', function() {
            hideProgress();
            
            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.secure_url) {
                        // Create optimized URL with Cloudinary transformations
                        const optimizedUrl = response.secure_url.replace(
                            '/upload/',
                            '/upload/c_fill,w_200,h_200,q_auto:good,f_auto,dpr_auto/'
                        );
                        
                        // Update the hidden input with the optimized Cloudinary URL
                        photoUrl.value = optimizedUrl;
                        
                        // Update the preview image
                        currentPhoto.src = optimizedUrl;
                        
                        // Show success message
                        showSuccess('Photo uploaded successfully!');
                    } else {
                        showError('Upload failed: Invalid response from Cloudinary.');
                    }
                } catch (e) {
                    showError('Upload failed: Invalid response format.');
                }
            } else {
                showError('Upload failed: ' + xhr.statusText);
            }
        });

        xhr.addEventListener('error', function() {
            hideProgress();
            showError('Upload failed: Network error occurred.');
        });

        // Send the request to Cloudinary
        xhr.open('POST', `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`);
        xhr.send(formData);
    }

    function showProgress() {
        uploadProgress.style.display = 'block';
        progressBar.style.width = '0%';
        progressBar.textContent = '0%';
    }

    function hideProgress() {
        uploadProgress.style.display = 'none';
    }

    function showError(message) {
        uploadError.textContent = message;
        uploadError.style.display = 'block';
        setTimeout(hideError, 5000);
    }

    function hideError() {
        uploadError.style.display = 'none';
    }

    function showSuccess(message) {
        // Create a temporary success message
        const successDiv = document.createElement('div');
        successDiv.className = 'mt-2 text-success';
        successDiv.textContent = message;
        uploadError.parentNode.insertBefore(successDiv, uploadError.nextSibling);
        
        setTimeout(() => {
            if (successDiv.parentNode) {
                successDiv.parentNode.removeChild(successDiv);
            }
        }, 3000);
    }
});

function confirmDelete(employeeId, employeeName) {
    // Set employee name in modal
    document.getElementById('employeeName').textContent = employeeName;
    
    // Set form action
    document.getElementById('deleteForm').action = `/admin/employees/delete/${employeeId}`;
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}
</script>
{% endblock %}