{% extends "base.html" %}
{% block title %}Create Employee Contract{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/create.css') }}">

<div class="container mt-4">
    <div class="form-header text-center mb-0">
        <h1><i class="bi bi-person-plus"></i> Create Employee Contract</h1>
    </div>
    <div class="form-card">
        <nav class="mb-4">
            <a href="{{ url_for('employees.index') }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left"></i> Back to Employee List
            </a>
        </nav>

        <form id="employeeForm" action="{{ url_for('employees.create') }}" method="POST" class="needs-validation" novalidate>
            <!-- Employee Details -->
            <div class="section-header mb-4">
                <h5><i class="bi bi-person-badge"></i> Employee Details</h5>
                <hr>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-6 position-relative">
                    <label for="employee_name" class="form-label fw-bold">Full Name (Title Including) <span class="text-danger">*</span></label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="employee_name" 
                        name="employee_name"
                        value="{{ form_data.employee_name | default('') }}" 
                        placeholder="Type employee name..." 
                        autocomplete="off"
                        required>
                    <div class="invalid-feedback">Please enter full name (including title).</div>

                    <!-- Autocomplete Dropdown -->
                    <div id="employee-suggestions" 
                        class="dropdown-menu w-100" 
                        style="max-height: 300px; overflow-y: auto; display: none;">
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="position_title" class="form-label fw-bold">Position <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="position_title" name="position_title"
                           value="{{ form_data.position_title | default('') }}" placeholder="e.g., Capacity Development Specialist" required>
                    <div class="invalid-feedback">Please enter position title.</div>
                </div>
                <div class="col-12">
                    <label for="employee_address" class="form-label">Address</label>
                    <textarea class="form-control" id="employee_address" name="employee_address" rows="2"
                              placeholder="Complete address">{{ form_data.employee_address | default('') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label for="employee_tel" class="form-label">Phone Number</label>
                    <input type="tel" class="form-control" id="employee_tel" name="employee_tel"
                           value="{{ form_data.employee_tel | default('') }}" placeholder="e.g., 012 953 650">
                </div>
                <div class="col-md-6">
                    <label for="employee_email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="employee_email" name="employee_email"
                           value="{{ form_data.employee_email | default('') }}" placeholder="e.g., name@example.com">
                </div>
            </div>

            <!-- Contract Details -->
            <div class="section-header mb-4">
                <h5><i class="bi bi-file-earmark-contract"></i> Contract Details</h5>
                <hr>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                <label for="contract_no" class="form-label fw-bold">Contract Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="contract_no" name="contract_no"
                    value="{{ form_data.contract_no | default('NGOF-UDC/001') }}" 
                    placeholder="e.g. NGOF-UDC/001" required>
                <small class="text-muted">Can be shared by multiple employees</small>
            </div>
                <div class="col-md-4">
                    <label for="contract_type" class="form-label fw-bold">Contract Type <span class="text-danger">*</span></label>
                    <select class="form-select" id="contract_type" name="contract_type" required>
                        <option value="" disabled {{ '' if not form_data.contract_type else 'selected' }}>Select Contract Type</option>
                        <option value="Fixed Duration Contract (FDC)" 
                                {{ 'selected' if form_data.contract_type == 'Fixed Duration Contract (FDC)' else '' }}>
                            Fixed Duration Contract (FDC)
                        </option>
                        <option value="Undefined Duration Contract (UDC)" 
                                {{ 'selected' if form_data.contract_type == 'Undefined Duration Contract (UDC)' else '' }}>
                            Undefined Duration Contract (UDC)
                        </option>
                    </select>
                    <div class="invalid-feedback">Please select a contract type.</div>
                </div>
                <div class="col-md-4">
                    <label for="working_hours" class="form-label">Working Hours</label>
                    <input type="text" class="form-control" id="working_hours" name="working_hours"
                           value="{{ form_data.working_hours | default('Monday to Friday: 08:00am-12:00pm and 01:30pm-05:00pm') }}">
                </div>

                <div class="col-md-6">
                    <label for="start_date" class="form-label fw-bold">Starting Date <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="start_date" name="start_date"
                               value="{{ form_data.start_date | default('') }}" required>
                        <span class="input-group-text calendar-icon"><i class="bi bi-calendar"></i></span>
                        <div class="invalid-feedback">Please select a start date.</div>
                    </div>
                </div>

                <!-- End Date Field - Will be hidden for UDC -->
                <div class="col-md-6" id="end_date_container">
                    <label for="end_date" class="form-label fw-bold">End Date <span class="text-danger" id="end_date_required">*</span></label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="end_date" name="end_date"
                               value="{{ form_data.end_date | default('') }}">
                        <span class="input-group-text calendar-icon"><i class="bi bi-calendar"></i></span>
                        <div class="invalid-feedback">End date must be on or after start date.</div>
                    </div>
                    <small class="text-muted">Leave blank for Undefined Duration Contract</small>
                </div>
            </div>

            <!-- Salary & Benefits -->
            <div class="section-header mb-4">
                <h5><i class="bi bi-currency-dollar"></i> Salary & Other Benefits</h5>
                <hr>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label for="salary_amount" class="form-label fw-bold">Salary in Amount (USD) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="salary_amount" name="salary_amount"
                           value="{{ form_data.salary_amount | default('') }}" min="0" step="0.01" required>
                    <small id="salary_formatted" class="text-muted"></small>
                    <div class="invalid-feedback">Please enter a valid salary amount.</div>
                </div>
                <div class="col-md-4">
                    <label for="salary_grade" class="form-label">Salary Scale</label>
                    <input type="text" class="form-control" id="salary_grade" name="salary_grade"
                           value="{{ form_data.salary_grade | default('G4/L5') }}" placeholder="e.g., G4/L5">
                </div>
                <div class="col-md-4">
                    <label for="salary_amount_words" class="form-label">Salary in Amount (Words)</label>
                    <input type="text" class="form-control" id="salary_amount_words" name="salary_amount_words"
                           value="{{ form_data.salary_amount_words | default('') }}" readonly>
                </div>

                <div class="col-md-3">
                    <label for="medical_allowance" class="form-label">Medical Allowance</label>
                    <input type="number" class="form-control" id="medical_allowance" name="medical_allowance"
                           value="{{ form_data.medical_allowance | default('150') }}" min="0" step="0.01">
                </div>
                <div class="col-md-3">
                    <label for="child_education_allowance" class="form-label">Child Education</label>
                    <input type="number" class="form-control" id="child_education_allowance" name="child_education_allowance"
                           value="{{ form_data.child_education_allowance | default('60') }}" min="0" step="0.01">
                </div>
                <div class="col-md-3">
                    <label for="delivery_benefit" class="form-label">Delivery Benefit</label>
                    <input type="number" class="form-control" id="delivery_benefit" name="delivery_benefit"
                           value="{{ form_data.delivery_benefit | default('200') }}" min="0" step="0.01">
                </div>
                <div class="col-md-3">
                    <label for="death_benefit" class="form-label">Death Benefit</label>
                    <input type="number" class="form-control" id="death_benefit" name="death_benefit"
                           value="{{ form_data.death_benefit | default('200') }}" min="0" step="0.01">
                </div>

                <div class="col-md-6">
                    <label for="severance_percentage" class="form-label">Severance (%)</label>
                    <input type="number" class="form-control" id="severance_percentage" name="severance_percentage"
                           value="{{ form_data.severance_percentage | default('8.33') }}" min="0" step="0.01" max="100">
                </div>
                <div class="col-md-6">
                    <div class="form-check mt-4">
                        <input class="form-check-input" type="checkbox" id="thirteenth_month_salary" name="thirteenth_month_salary"
                               {{ 'checked' if form_data.thirteenth_month_salary | default(True) else '' }}>
                        <label class="form-check-label" for="thirteenth_month_salary">Include 13th Month Salary</label>
                    </div>
                </div>
            </div>

            <!-- Organization Details -->
            <div class="section-header mb-4">
                <h5><i class="bi bi-building"></i> Organization Details</h5>
                <hr>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label for="organization_name" class="form-label">Organization Name</label>
                    <input type="text" class="form-control" id="organization_name" name="organization_name"
                           value="{{ form_data.organization_name | default('The NGO Forum on Cambodia') }}">
                </div>
                <div class="col-md-4">
                    <label for="representative_name" class="form-label">Representative Name</label>
                    <input type="text" class="form-control" id="representative_name" name="representative_name"
                           value="{{ form_data.representative_name | default('Mr. Soeung Saroeun') }}">
                </div>
                <div class="col-md-4">
                    <label for="representative_title" class="form-label">Representative Title</label>
                    <input type="text" class="form-control" id="representative_title" name="representative_title"
                           value="{{ form_data.representative_title | default('Executive Director') }}">
                </div>
                <div class="col-12">
                    <label for="organization_address" class="form-label">Address</label>
                    <textarea class="form-control" id="organization_address" name="organization_address" rows="2">
                        {{ form_data.organization_address | default('#9-11, St. 476, Sangkat Toul Tompong I, Khan Chamka Morn, Phnom Penh, Cambodia') }}
                    </textarea>
                </div>
                <div class="col-md-4">
                    <label for="organization_tel" class="form-label">Phone Number</label>
                    <input type="tel" class="form-control" id="organization_tel" name="organization_tel"
                           value="{{ form_data.organization_tel | default('023 214 429') }}">
                </div>
                <div class="col-md-4">
                    <label for="organization_email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="organization_email" name="organization_email"
                           value="{{ form_data.organization_email | default('info@ngoforum.org.kh') }}">
                </div>
                <div class="col-md-4">
                    <label for="organization_fax" class="form-label">Fax</label>
                    <input type="text" class="form-control" id="organization_fax" name="organization_fax"
                           value="{{ form_data.organization_fax | default('023 994 063') }}">
                </div>
            </div>

            <!-- Signatures -->
            <div class="section-header mb-4">
                <h5><i class="bi bi-pen"></i> Signatures</h5>
                <hr>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="employer_signature_name" class="form-label">Employer Signature</label>
                    <input type="text" class="form-control" id="employer_signature_name" name="employer_signature_name"
                           value="{{ form_data.employer_signature_name | default('Mr. Soeung Saroeun') }}">
                </div>
                <div class="col-md-6">
                    <label for="employee_signature_name" class="form-label">Employee Signature</label>
                    <input type="text" class="form-control" id="employee_signature_name" name="employee_signature_name"
                           value="{{ form_data.employee_signature_name | default('') }}">
                </div>

                <div class="col-md-6">
                    <label for="employer_signature_date" class="form-label">Employer Signature Date</label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="employer_signature_date" name="employer_signature_date"
                               value="{{ form_data.employer_signature_date | default('') }}">
                        <span class="input-group-text calendar-icon"><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="employee_signature_date" class="form-label">Employee Signature Date</label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="employee_signature_date" name="employee_signature_date"
                               value="{{ form_data.employee_signature_date | default('') }}">
                        <span class="input-group-text calendar-icon"><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="text-center mt-5">
                <button type="submit" class="btn btn-primary btn-lg px-5">
                    <i class="bi bi-save"></i> Create Employee Contract
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('employeeForm');
    const contractType = document.getElementById('contract_type');
    const contractNo = document.getElementById('contract_no');
    const startDate = document.getElementById('start_date');
    const endDate = document.getElementById('end_date');
    const endDateContainer = document.getElementById('end_date_container');
    const endDateRequired = document.getElementById('end_date_required');
    const employerSigDate = document.getElementById('employer_signature_date');
    const employeeSigDate = document.getElementById('employee_signature_date');
    const salaryAmount = document.getElementById('salary_amount');
    const salaryWords = document.getElementById('salary_amount_words');
    const salaryFormatted = document.getElementById('salary_formatted');
    const employeeNameInput = document.getElementById('employee_name');
    const employeeSignature = document.getElementById('employee_signature_name');
    const suggestionsBox = document.getElementById('employee-suggestions');

    // === TOGGLE END DATE VISIBILITY & REQUIREMENT ===
    function toggleEndDateField() {
        const isUDC = contractType.value === 'Undefined Duration Contract (UDC)';
        if (isUDC) {
            endDateContainer.style.display = 'none';
            endDate.removeAttribute('required');
            endDateRequired.style.display = 'none';
            endDate.value = '';
            endDate.setCustomValidity('');
        } else {
            endDateContainer.style.display = 'block';
            endDate.setAttribute('required', 'required');
            endDateRequired.style.display = 'inline';
        }
        updateContractNumber();
    }

    // === UPDATE CONTRACT NUMBER BASED ON TYPE ===
    function updateContractNumber() {
        if (!contractType.value) return;
        const typeCode = contractType.value.includes('FDC') ? 'FDC' : 'UDC';
        let numPart = contractNo.value.split('/').pop() || '001';
        if (!/^\d+$/.test(numPart)) numPart = '001';
        contractNo.value = `NGOF-${typeCode}/${numPart.padStart(3, '0')}`;
    }

    // === VALIDATE DATES ONLY WHEN END DATE IS VISIBLE ===
    function validateDates() {
        if (endDateContainer.style.display === 'none') {
            endDate.setCustomValidity('');
            return;
        }
        if (startDate.value && endDate.value && new Date(endDate.value) < new Date(startDate.value)) {
            endDate.setCustomValidity('End date must be on or after start date.');
        } else {
            endDate.setCustomValidity('');
        }
    }

    function syncSignatureDates() {
        if (startDate.value) {
            if (!employerSigDate.value) employerSigDate.value = startDate.value;
            if (!employeeSigDate.value) employeeSigDate.value = startDate.value;
        }
    }

    // === AUTOCOMPLETE EMPLOYEE SEARCH (unchanged) ===
    let debounceTimer;
    employeeNameInput.addEventListener('input', function () {
        const query = this.value.trim();
        clearTimeout(debounceTimer);
        
        if (query.length < 2) {
            suggestionsBox.style.display = 'none';
            return;
        }

        debounceTimer = setTimeout(() => {
            fetch(`/employees/api/employees/search?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    suggestionsBox.innerHTML = '';
                    if (data.length === 0) {
                        suggestionsBox.style.display = 'none';
                        return;
                    }

                    data.forEach(emp => {
                        const item = document.createElement('a');
                        item.className = 'dropdown-item py-2';
                        item.href = '#';
                        item.innerHTML = `
                            <strong>${escapeHtml(emp.name)}</strong><br>
                            <small class="text-muted">
                                ${escapeHtml(emp.position)} | ${escapeHtml(emp.phone || 'No phone')} | ${escapeHtml(emp.email || 'No email')}
                            </small>
                        `;
                        item.onclick = (e) => {
                            e.preventDefault();
                            fillEmployeeData(emp);
                            suggestionsBox.style.display = 'none';
                            employeeNameInput.value = emp.name;
                        };
                        suggestionsBox.appendChild(item);
                    });

                    suggestionsBox.style.display = 'block';
                })
                .catch(err => {
                    console.error('Search failed:', err);
                    suggestionsBox.style.display = 'none';
                });
        }, 300);
    });

    document.addEventListener('click', (e) => {
        if (!employeeNameInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
            suggestionsBox.style.display = 'none';
        }
    });

    function fillEmployeeData(emp) {
        document.getElementById('position_title').value = emp.position || '';
        document.getElementById('employee_address').value = emp.address || '';
        document.getElementById('employee_tel').value = emp.phone || '';
        document.getElementById('employee_email').value = emp.email || '';
        if (!employeeSignature.value) {
            employeeSignature.value = emp.name;
        }
    }

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // === SALARY TO WORDS (unchanged) ===
    function numberToWords(num) {
        if (num === 0) return 'Zero';
        const ones = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];
        const teens = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
        const tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
        const scales = ['', 'Thousand', 'Million', 'Billion'];

        function chunkToWords(n) {
            let w = '';
            const h = Math.floor(n / 100);
            const r = n % 100;
            if (h > 0) w += ones[h] + ' Hundred ';
            if (r > 0) {
                if (r < 10) w += ones[r];
                else if (r < 20) w += teens[r - 10];
                else {
                    w += tens[Math.floor(r / 10)];
                    if (r % 10 > 0) w += '-' + ones[r % 10];
                }
            }
            return w.trim();
        }

        const parts = [];
        let scale = 0;
        while (num > 0) {
            const chunk = num % 1000;
            if (chunk > 0) parts.unshift(chunkToWords(chunk) + (scales[scale] ? ' ' + scales[scale] : ''));
            num = Math.floor(num / 1000);
            scale++;
        }
        return parts.join(' ').trim();
    }

    function convertSalaryToWords() {
        const value = parseFloat(salaryAmount.value) || 0;
        if (value <= 0) {
            salaryWords.value = '';
            salaryFormatted.textContent = '';
            return;
        }
        const integerPart = Math.floor(value);
        const decimalPart = Math.round((value - integerPart) * 100);
        let words = numberToWords(integerPart) + ' US Dollars';
        if (decimalPart > 0) words += ' and ' + numberToWords(decimalPart) + ' Cents';
        words += ' only';
        salaryWords.value = words;
        salaryFormatted.textContent = 'Formatted: $' + value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    // === EVENT LISTENERS ===
    contractType.addEventListener('change', toggleEndDateField);
    startDate.addEventListener('change', validateDates);
    endDate.addEventListener('change', validateDates);
    startDate.addEventListener('change', syncSignatureDates);
    salaryAmount.addEventListener('input', convertSalaryToWords);

    document.querySelectorAll('.calendar-icon').forEach(icon => {
        icon.addEventListener('click', () => {
            const input = icon.parentElement.querySelector('input[type="date"]');
            if (input) input.showPicker();
        });
    });

    form.addEventListener('submit', function (e) {
        validateDates();
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
        salaryWords.removeAttribute('readonly');
    });

    // === INITIALIZE ON PAGE LOAD ===
    toggleEndDateField();   // Critical: Apply correct state on load/edit
    updateContractNumber();
    convertSalaryToWords();
    syncSignatureDates();
});
</script>
{% endblock %}