@include('layouts.header', ['title' => 'Add Survey Details'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-sidebar')

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Name Of The Project: {{ $project['name'] ?? 'N/A' }}</h4>
                                <h4 class="page-title">Structure</h4>
                                <h4 class="page-title">
                                {{ isset($surveyData['structure_use'])
                                    ? ($surveyData['structure_use'] == 2
                                        ? 'Commercial'
                                        : ($surveyData['structure_use'] == 3
                                            ? 'Residential + Commercial'
                                            : 'N/A'))
                                    : 'N/A'
                                }}
                                </h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Details Of Employees</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="document_type" class="form-label">Add Employees <span class="text-danger">*</span></label>
                                                <button id="addEmployeeBtn" class="btn btn-success">+ Add Employee</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Container where forms get added -->
                                        <div id="employeeFormContainer"></div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div id="employeeList" class="mt-3"></div>
                                        </div>
                                    </div>



                                </div>

                                <div class="card-footer border-top border-light d-flex justify-content-between">
                                    <a href="{{ route('agencyUser.add.commercial.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                    <button id="saveNextBtn" class="btn btn-success" onclick="submitEmployeeData()">Submit</button>
                                </div>

                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <!--  Select2 Plugin Js -->
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(document).ready(function() {

            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif

        });
    </script>

<script>
const API_TOKEN = "{{ $token }}"; // passed from backend securely
const projectId = "{{ $projectId }}";
const surveyId = "{{ $surveyId }}";
const agencyUserId = "{{ $user['id'] }}";
const backendEmployees = @json($surveyData["survey_user_commercial"][0]["employees"] ?? []);

let formCounter = 0;

document.getElementById('addEmployeeBtn').addEventListener('click', () => {
    addEmployeeForm();
});

function addEmployeeForm(employeeData = {}, isEdit = false) {
    console.log('add employee', employeeData);

    formCounter++;

    const formId = `employeeForm${formCounter}`;
    const container = document.getElementById('employeeFormContainer');
    // Prevent multiple forms
    if (container.querySelector('form')) {
        return;
    }
    document.getElementById('addEmployeeBtn').disabled = true;

    const formHtml = `
        <form id="${formId}" class="mb-4" onsubmit="${isEdit ? `updateEmployee(event, '${formId}', ${employeeData.id}, ${employeeData.from_backend})` : `saveEmployee(event, '${formId}')`}">
            <input type="hidden" name="is_edit" value="${isEdit}">
            <input type="hidden" name="project_id" value="{{$projectId}}">
            <input type="hidden" name="survey_id" value="{{$surveyId}}">
            <input type="hidden" name="agency_user_id" value="{{$user['id']}}">
            <input type="hidden" name="commercial_id" value="{{ $surveyData['survey_user_commercial'][0]['id'] ?? '' }}">
            <div class="card">
                <div class="card-body">
                    <div class="row">

                        <div class="col-lg-6 mt-3">
                            <label>Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="emp_name" value="${employeeData.emp_name || ''}" placeholder="Enter Name">
                            <div class="text-danger error-message" data-error-for="emp_name"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Age <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="age" maxlength="3" value="${employeeData.age || ''}" placeholder="Enter Age">
                            <div class="text-danger error-message" data-error-for="age"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Gender <span class="text-danger">*</span></label>
                            <select class="form-control gender-select" name="gender_id">
                                <option value="">Select Gender</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="gender_id"></div>
                            <!-- Hidden input shown when "Other" is selected -->
                            <div class="mt-2 gender-other-field d-none">
                                <input type="text" class="form-control" name="gender_other" placeholder="Enter other gender" value="${employeeData.gender_other || ''}">
                                <div class="text-danger error-message" data-error-for="gender_other"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Literacy Status <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="literacy_status" value="${employeeData.literacy_status || ''}" placeholder="Enter value">
                            <div class="text-danger error-message" data-error-for="literacy_status"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Class Attended <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="class_attended" value="${employeeData.class_attended || ''}" placeholder="Enter value">
                            <div class="text-danger error-message" data-error-for="class_attended"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Travel time from residence (in minutes) <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="travel_time_from_residence" maxlength="100" value="${employeeData.travel_time_from_residence || ''}" placeholder="Enter time">
                            <div class="text-danger error-message" data-error-for="travel_time_from_residence"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Monthly Range <span class="text-danger">*</span></label>
                            <select class="form-control monthly-income-range-select" name="monthly_range_id">
                                <option value="">Select Monthly Range</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="monthly_range_id"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Nature of work <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="nature_of_work" maxlength="100" value="${employeeData.nature_of_work || ''}" placeholder="Enter value">
                            <div class="text-danger error-message" data-error-for="nature_of_work"></div>
                        </div>

                    </div>
                </div>

                <div class="card-footer border-top border-light">
                    <button type="submit" class="btn btn-success">Save Employee</button>
                </div>
            </div>
        </form>
    `;

    container.insertAdjacentHTML('beforeend', formHtml);

    // Populate dropdowns after inserting form
    populateDropdowns(formId, employeeData);
}

function saveEmployee(e, formId) {
    e.preventDefault();

    const form = document.getElementById(formId);
    const formData = new FormData(form);

    // Clear old errors
    form.querySelectorAll('.error-message').forEach(el => el.textContent = '');

    let hasError = false;

    // Name: Only alphabets
    const emp_name = formData.get('emp_name').trim();
    if (!/^[A-Za-z\s]+$/.test(emp_name)) {
        showError(form, 'emp_name', 'Name must contain only alphabets.');
        hasError = true;
    }

    // Age: must be numeric and > 0
    const age = formData.get('age').trim();
    if (!age || isNaN(age) || parseInt(age) <= 0) {
        showError(form, 'age', 'Enter a valid age.');
        hasError = true;
    }

    // Required fields check
    const requiredFields = [
        'emp_name',
        'age',
        'gender_id',
        'literacy_status',
        'class_attended',
        'travel_time_from_residence',
        'monthly_range_id',
        'nature_of_work'
    ];

    requiredFields.forEach(field => {
        const value = formData.get(field);
        if (!value || value.trim() === '') {
            showError(form, field, 'This field is required.');
            hasError = true;
        }
    });

    if (hasError) return;

    // Construct employee object
    const newEmployee = {
        id: Date.now(),
        emp_name,
        age,
        gender_id: formData.get('gender_id'),
        gender_other: formData.get('gender_other') || null,
        literacy_status: formData.get('literacy_status'),
        class_attended: formData.get('class_attended'),
        travel_time_from_residence: formData.get('travel_time_from_residence'),
        monthly_range_id: formData.get('monthly_range_id'),
        nature_of_work: formData.get('nature_of_work'),
        from_backend: false
    };

    let employees = JSON.parse(localStorage.getItem('employees') || '[]');
    employees.push(newEmployee);
    localStorage.setItem('employees', JSON.stringify(employees));

    form.remove();
    document.getElementById('addEmployeeBtn').disabled = false; // Re-enable button
    displayEmployees();
}

function showError(form, fieldName, message) {
    const errorDiv = form.querySelector(`.error-message[data-error-for="${fieldName}"]`);
    if (errorDiv) errorDiv.textContent = message;
}

function displayEmployees() {
    const backend = backendEmployees || [];
    const local = JSON.parse(localStorage.getItem('employees') || '[]');

    // Add from_backend flag for API deletion
    const backendWithFlag = backend.map(m => ({ ...m, from_backend: true }));

    // Avoid duplicates by Aadhaar or custom key
    const combined = [
        ...backendWithFlag,
        ...local
    ];

    const listContainer = document.getElementById('employeeList');
    listContainer.innerHTML = '';
    combined.forEach(employee => {
        const item = document.createElement('div');
        item.className = "border rounded p-3 mb-3";

        item.innerHTML = `
            <h5><strong>Employee Details:</strong></h5>
            <div class="row align-items-center">
                <div class="col-md-8">
                    <strong>Name:</strong> ${employee.emp_name} <br>
                    <strong>Age:</strong> ${employee.age}
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-warning btn-sm me-2" onclick="editEmployee(${employee.id}, ${employee.from_backend})">
                        Edit
                    </button>
                    <button class="btn btn-danger btn-sm" onclick="deleteEmployee(${employee.id}, ${employee.from_backend})">
                        Delete
                    </button>
                </div>
            </div>
        `;

        listContainer.appendChild(item);
    });
}

function editEmployee(id, fromBackend) {
    const container = document.getElementById('employeeFormContainer');
    if (container.querySelector('form')) return;

    document.getElementById('addEmployeeBtn').disabled = true;

    if (fromBackend) {
        fetch(`{{ config('app.api_url') }}/api/surveys_commercialemployee_list/${id}/edit`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer {{ $token }}`,
                'Accept': 'application/json',
            },
        })
        .then(res => {
            if (!res.ok) throw new Error('Failed to fetch employee data');
            return res.json();
        })
        .then(data => {
            data.data.commercial_employee.from_backend = true;
            addEmployeeForm(data.data.commercial_employee, true); // true = editing mode
        })
        .catch(err => {
            console.error(err);
            toastr.error('Error fetching employee data.');
            document.getElementById('addEmployeeBtn').disabled = false;
        });
    } else {
        const localEmployees = JSON.parse(localStorage.getItem('employees') || '[]');
        const employee = localEmployees.find(m => m.id === id);
        if (employee) {
            addEmployeeForm(employee, true);
        }
    }
}

function updateEmployee(event, formId, id, fromBackend) {
    event.preventDefault();

    const form = document.getElementById(formId);
    const formData = new FormData(form);

    // Clear old errors
    form.querySelectorAll('.error-message').forEach(el => el.textContent = '');

    let hasError = false;

    // Name: Only alphabets
    const emp_name = formData.get('emp_name').trim();
    if (!/^[A-Za-z\s]+$/.test(emp_name)) {
        showError(form, 'emp_name', 'Name must contain only alphabets.');
        hasError = true;
    }

    // Age: must be numeric and > 0
    const age = formData.get('age').trim();
    if (!age || isNaN(age) || parseInt(age) <= 0) {
        showError(form, 'age', 'Enter a valid age.');
        hasError = true;
    }

    // Required fields check
    const requiredFields = [
        'emp_name',
        'age',
        'gender_id',
        'literacy_status',
        'class_attended',
        'travel_time_from_residence',
        'monthly_range_id',
        'nature_of_work'
    ];

    requiredFields.forEach(field => {
        const value = formData.get(field);
        if (!value || value.trim() === '') {
            showError(form, field, 'This field is required.');
            hasError = true;
        }
    });

    if (hasError) return;

    const payload = Object.fromEntries(formData.entries());

    if (fromBackend) {
        fetch(`{{ config('app.api_url') }}/api/surveys_commercialemployee_list_update/${id}`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ $token }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(res => {
            if (!res.ok) {
                throw new Error('Failed to update employee.');
            }
            return res.json();
        })
        .then(response => {
            toastr.success('Employee updated successfully!');
            document.getElementById('employeeFormContainer').innerHTML = '';
            document.getElementById('addEmployeeBtn').disabled = false;
            location.reload();
            //displayEmployees();
        })
        .catch(error => {
            console.error('Error updating employee:', error);
            toastr.error('An error occurred while updating the employee.');
        });

    } else {
        // LocalStorage Update
        let local = JSON.parse(localStorage.getItem('employees') || '[]');
        const index = local.findIndex(m => m.id == id);

        if (index !== -1) {
            local[index] = { ...local[index], ...payload };
            localStorage.setItem('employees', JSON.stringify(local));
            //alert('Local employee updated!');

        } else {
            toastr.error('Employee not found in localStorage!');
        }

        document.getElementById('employeeFormContainer').innerHTML = '';
        document.getElementById('addEmployeeBtn').disabled = false;
        displayEmployees();
    }
}

/*function deleteEmployee(id) {
    let employees = JSON.parse(localStorage.getItem('employees') || '[]');
    employees = employees.filter(m => m.id !== id);
    localStorage.setItem('employees', JSON.stringify(employees));
    displayEmployees();
}*/

function deleteEmployee(id, fromBackend = false) {
    if (fromBackend) {
        if (!confirm('Are you sure you want to delete this saved employee?')) return;

        fetch(`{{ config('app.api_url') }}/api/surveys_commercialemployee_delete/${id}`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ $token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(result => {
            if (result.status === 'success') {
                toastr.success('Employee deleted successfully!');
                location.reload();
            } else {
                toastr.error(result.message || 'Failed to delete employee.');
            }
        })
        .catch(err => {
            console.error(err);
            toastr.error('Something went wrong.');
        });

    } else {
        let employees = JSON.parse(localStorage.getItem('employees') || '[]');
        employees = employees.filter(m => m.id !== id);
        localStorage.setItem('employees', JSON.stringify(employees));
        displayEmployees();
    }
}

function handleGenderChange(selectElement) {
    const container = selectElement.closest('.col-lg-6');
    const otherInputDiv = container.querySelector('.gender-other-field');

    if (selectElement.value === '3') {
        otherInputDiv.classList.remove('d-none');
    } else {
        otherInputDiv.classList.add('d-none');
        otherInputDiv.querySelector('input').value = '';
    }
}

async function populateDropdowns(formId, employeeData = {}) {
    console.log('employeeData', employeeData);
    const token = "{{ $token }}"; // assuming you're passing it from backend

    const headers = {
        'Authorization': `Bearer ${token}`
    };

    try {
        const [monthlyIncomeRangeRes, genderRes] = await Promise.all([
            fetch("{{ config('app.api_url') }}/api/monthly_income_range", { headers }),
            fetch("{{ config('app.api_url') }}/api/gender", { headers }),
        ]);

        const monthlyIncomeRange = await monthlyIncomeRangeRes.json();
        const gender = await genderRes.json();

        const form = document.getElementById(formId);

        const monthlyIncomeRangeSelect = form.querySelector('.monthly-income-range-select');
        monthlyIncomeRange.data.monthly_range_lists.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.range;
            // Set selected if editing and match found
            if (employeeData.monthly_range_id && employeeData.monthly_range_id == occ.id) {
                option.selected = true;
            }
            monthlyIncomeRangeSelect.appendChild(option);
        });

        const genderSelect = form.querySelector('.gender-select');
        gender.data.gender.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (employeeData.gender_id && employeeData.gender_id == occ.id) {
                option.selected = true;
            }
            genderSelect.appendChild(option);
        });
        // Handle show/hide for gender other
        genderSelect.addEventListener('change', function () {
            handleGenderChange(this);
        });
        handleGenderChange(genderSelect);

        if (employeeData.gender_id == 3 && employeeData.gender_other) {
            const container = genderSelect.closest('.col-lg-6');
            const otherInput = container.querySelector('.gender-other-field input');
            if (otherInput) {
                otherInput.value = employeeData.gender_other;
            }
        }

    } catch (err) {
        console.error('Dropdown fetch failed:', err);
        alert('Failed to load dropdown data. Please try again.');
    }
}


async function submitEmployeeData() {

    let projectId = @json(encrypt($projectId));
let surveyId = @json(encrypt($surveyId));
    const employees = JSON.parse(localStorage.getItem('employees') || '[]');
    const backend = backendEmployees || [];

    // ✅ Check if there's no employee locally AND no employee in backend
    if (employees?.length === 0 && backend?.length === 0) {
        toastr.error("Please add at least one employee.");
        return;
    }
    if (employees?.length === 0 && backend?.length != 0) {
        toastr.success('Submission successful!');
        localStorage.removeItem('employees');
        // window.location.href = `/agency-user/project-details/{{ $projectId }}`;
         window.location.href = `/agency-user/project-details/${projectId}`;
        return false;
    }

    const formData = new FormData();

    formData.append('project_id', '{{ $projectId }}');
    formData.append('survey_id', '{{ $surveyId }}');
    formData.append('agency_user_id', '{{ $user["id"] }}');
    formData.append('commercial_id', '{{ $surveyData["survey_user_commercial"][0]["id"] ?? "" }}');

    // Add employees
    employees.forEach((employee, index) => {
        Object.keys(employee).forEach(key => {
            if (employee[key] !== null && employee[key] !== undefined) {
                formData.append(`records[${index}][${key}]`, employee[key]);
            }
        });
    });

    try {
        const res = await fetch("{{ config('app.api_url') }}/api/add_surveys_commercial_employee", {
            method: "POST",
            headers: {
                'Authorization': `Bearer {{$token}}`
            },
            body: formData
        });

        const result = await res.json();
        if (res.ok) {
            toastr.success('Submission successful!');
            localStorage.removeItem('employees');
            // window.location.href = `/agency-user/project-details/{{ $projectId }}`;
             window.location.href = `/agency-user/project-details/${projectId}`;
        } else {
            toastr.error("Error: " + result.message);
        }
    } catch (error) {
        toastr.error("Something went wrong");
        console.error(error);
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', displayEmployees);

</script>

</body>

</html>