@extends('app')

@section('title', 'Pekerja')

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pekerja</h1>
            <p class="mt-1 text-sm text-gray-600">Urus pekerja organisasi anda</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Pekerja
        </button>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="flex gap-4">
            <div class="space-y-2">
                <label class="label">Cari</label>
                <input type="text" id="search" class="input" placeholder="Search by name, email, phone...">
            </div>
            <div class="space-y-2" id="filter-company-wrapper">
                <label class="label">Syarikat</label>
                <select id="filter-company" class="input">
                    <option value="">Semua Syarikat</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="label">Jabatan</label>
                <select id="filter-department" class="input">
                    <option value="">Semua Jabatan</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="label">Status Kehadiran</label>
                <select id="filter-attendance" class="input">
                    <option value="">All</option>
                    <option value="1">Aktif</option>
                    <option value="0">Tidak Aktif</option>
                </select>
            </div>
            <div class="flex items-end">
                <button onclick="loadEmployees()" class="btn btn-secondary">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Search
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Avatar</th>
                        <th>Nama</th>
                        <th>E-mel</th>
                        <th>Telefon</th>
                        <th>Syarikat</th>
                        <th>Jabatan</th>
                        <th>Jumlah Kehadiran</th>
                        <th>Status</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="employees-table">
                    <tr>
                        <td colspan="9" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200">
            <div id="pagination" class="flex items-center justify-between"></div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="employee-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Pekerja</h3>
            <form id="employee-form">
                <input type="hidden" id="employee-id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="name" class="label">Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" class="input w-full" required>
                        <span id="error-name" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="email" class="label">Email <span class="text-red-500">*</span></label>
                        <input type="email" id="email" class="input w-full" required>
                        <span id="error-email" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2" id="company-field">
                        <label for="id_company" class="label">Company <span class="text-red-500">*</span></label>
                        <select id="id_company" class="select w-full select2-modal" required>
                            <option value="">Pilih Syarikat</option>
                        </select>
                        <span id="error-id_company" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="id_department" class="label">Department <span class="text-red-500">*</span></label>
                        <select id="id_department" class="select w-full select2-modal" required>
                            <option value="">Pilih Jabatan</option>
                        </select>
                        <span id="error-id_department" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2">
                        <label for="phone_number" class="label">Nombor Telefon</label>
                        <input type="text" id="phone_number" class="input w-full">
                        <span id="error-phone_number" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2" id="password-field">
                        <label for="password" class="label">Kata Laluan <span class="text-red-500">*</span></label>
                        <input type="password" id="password" class="input w-full" required>
                        <span id="error-password" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4 space-y-2" id="password-confirmation-field">
                        <label for="password_confirmation" class="label">Sahkan Kata Laluan <span class="text-red-500">*</span></label>
                        <input type="password" id="password_confirmation" class="input w-full" required>
                        <span id="error-password_confirmation" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="address" class="label">Alamat</label>
                    <textarea id="address" class="textarea w-full" rows="3"></textarea>
                    <span id="error-address" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Details Modal -->
    <dialog id="view-modal" class="modal">
        <div class="modal-box max-w-3xl">
            <h3 class="font-bold text-lg mb-4">Employee Details</h3>
            <div id="employee-details">
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>
            <div class="modal-action">
                <button onclick="closeViewModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentEmployeeId = null;
        let departments = [];
        let companies = [];

        $(document).ready(function() {
            loadCompanies();
            loadDepartments();
            loadEmployees();
            initializeSelect2();

            // Hide company field if user is company role (id_role === 4)
            checkUserRoleAndHideCompanyField();

            // Search on enter
            $('#search').on('keypress', function(e) {
                if (e.which === 13) {
                    loadEmployees();
                }
            });

            // Form submit
            $('#employee-form').on('submit', function(e) {
                e.preventDefault();
                saveEmployee();
            });

            // Refresh icons when modals close
            $('#employee-modal, #view-modal').on('close', function() {
                setTimeout(function() {
                    if (window.lucide && typeof window.lucide.createIcons === 'function') {
                        window.lucide.createIcons();
                    }
                }, 100);
            });
        });

        function checkUserRoleAndHideCompanyField() {
            // Wait for currentUser to be available
            const checkUser = setInterval(function() {
                if (window.currentUser) {
                    clearInterval(checkUser);

                    // If user is company role (id_role === 4)
                    if (window.currentUser.id_role === 4) {
                        // Hide company field in modal
                        $('#company-field').hide();
                        $('#id_company').removeAttr('required');

                        // Hide company filter
                        $('#filter-company-wrapper').hide();
                    }
                }
            }, 100);
        }

        function initializeSelect2() {
            // Initialize Select2 for modal selects
            $('.select2-modal').select2({
                dropdownParent: $('#employee-modal'),
                allowClear: true,
                placeholder: 'Select an option',
                width: '100%'
            });
        }

        function loadCompanies() {
            window.apiRequest('/api/companies?per_page=100', {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data;
                    companies = paginationData.data || [];
                    let options = '<option value="">Pilih Syarikat</option>';
                    let filterOptions = '<option value="">Semua Syarikat</option>';

                    companies.forEach(function(company) {
                        options += `<option value="${company.id}">${company.name}</option>`;
                        filterOptions += `<option value="${company.id}">${company.name}</option>`;
                    });

                    $('#id_company').html(options);
                    $('#filter-company').html(filterOptions);

                    // Reinitialize Select2 after data loaded
                    $('#id_company').select2('destroy');
                    $('#id_company').select2({
                        dropdownParent: $('#employee-modal'),
                        allowClear: true,
                        placeholder: 'Pilih Syarikat',
                        width: '100%'
                    });
                })
                .catch(function(error) {
                    console.error('Error loading companies:', error);
                });
        }

        function loadDepartments() {
            window.apiRequest('/api/departments?per_page=100&status=ENABLE', {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data;
                    departments = paginationData.data || [];
                    let options = '<option value="">Pilih Jabatan</option>';
                    let filterOptions = '<option value="">Semua Jabatan</option>';

                    departments.forEach(function(dept) {
                        options += `<option value="${dept.id}">${dept.name}</option>`;
                        filterOptions += `<option value="${dept.id}">${dept.name}</option>`;
                    });

                    $('#id_department').html(options);
                    $('#filter-department').html(filterOptions);

                    // Reinitialize Select2 after data loaded
                    $('#id_department').select2('destroy');
                    $('#id_department').select2({
                        dropdownParent: $('#employee-modal'),
                        allowClear: true,
                        placeholder: 'Pilih Jabatan',
                        width: '100%'
                    });
                })
                .catch(function(error) {
                    console.error('Error loading departments:', error);
                });
        }

        function loadEmployees(page = 1) {
            currentPage = page;
            const search = $('#search').val();
            const company = $('#filter-company').val();
            const department = $('#filter-department').val();
            const attendance = $('#filter-attendance').val();

            let url = `/api/employees?page=${page}&per_page=10`;
            if (search) url += `&search=${search}`;
            if (company) url += `&id_company=${company}`;
            if (department) url += `&id_department=${department}`;
            if (attendance !== '') url += `&is_attendances=${attendance}`;

            $('#employees-table').html(`
                <tr>
                    <td colspan="9" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.apiRequest(url, {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data;
                    renderEmployees(paginationData);
                    renderPagination(paginationData);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#employees-table').html(`
                        <tr>
                            <td colspan="9" class="text-center py-8 text-red-500">
                                Failed to load employees
                            </td>
                        </tr>
                    `);
                });
        }

        function renderEmployees(data) {
            if (data.data.length === 0) {
                $('#employees-table').html(`
                    <tr>
                        <td colspan="9" class="text-center py-8 text-gray-500">
                            Tiada pekerja dijumpai
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            data.data.forEach(function(emp) {
                const avatarUrl =
                    `https://ui-avatars.com/api/?name=${encodeURIComponent(emp.name)}&background=3b82f6&color=fff`;
                const statusBadge = emp.is_attendances ?
                    '<span class="badge badge-success">Aktif</span>' :
                    '<span class="badge badge-ghost">Tidak Aktif</span>';

                html += `
                    <tr>
                        <td>
                            <div class="avatar">
                                <div class="w-10 rounded-full">
                                    <img src="${avatarUrl}" alt="${emp.name}" />
                                </div>
                            </div>
                        </td>
                        <td class="font-medium">${emp.name}</td>
                        <td>${emp.email}</td>
                        <td>${emp.phone_number || '-'}</td>
                        <td>${emp.company ? emp.company.name : '-'}</td>
                        <td>${emp.department ? emp.department.name : '-'}</td>
                        <td>${emp.total_attendances || 0}</td>
                        <td>${statusBadge}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewEmployee(${emp.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editEmployee(${emp.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteEmployee(${emp.id}, '${emp.name}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#employees-table').html(html);

            // Refresh Lucide icons
            setTimeout(function() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }, 50);
        }

        function renderPagination(data) {
            if (data.last_page <= 1) {
                $('#pagination').html('');
                return;
            }

            let html = `
                <div class="text-sm text-gray-600">
                    Showing ${data.from} to ${data.to} daripada ${data.total} rekod
                </div>
                <div class="btn-group">
            `;

            html += `
                <button onclick="loadEmployees(${data.current_page - 1})"
                    class="btn btn-sm" ${data.current_page === 1 ? 'disabled' : ''}>
                    Sebelum
                </button>
            `;

            for (let i = 1; i <= data.last_page; i++) {
                if (i === data.current_page) {
                    html += `<button class="btn btn-sm btn-active">${i}</button>`;
                } else {
                    html += `<button onclick="loadEmployees(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

            html += `
                <button onclick="loadEmployees(${data.current_page + 1})"
                    class="btn btn-sm" ${data.current_page === data.last_page ? 'disabled' : ''}>
                    Seterusnya
                </button>
            `;

            html += '</div>';
            $('#pagination').html(html);
        }

        function openCreateModal() {
            currentEmployeeId = null;
            $('#modal-title').text('Tambah Pekerja');
            $('#employee-form')[0].reset();
            $('#employee-id').val('');
            $('.text-red-500').addClass('hidden').text('');

            // Reset Select2
            $('#id_company').val('').trigger('change');
            $('#id_department').val('').trigger('change');

            // Show password fields for create
            $('#password-field').show();
            $('#password-confirmation-field').show();
            $('#password').attr('required', true);
            $('#password_confirmation').attr('required', true);

            // Hide company field if user is company role (id_role === 4)
            if (window.currentUser && window.currentUser.id_role === 4) {
                $('#company-field').hide();
                $('#id_company').removeAttr('required');
            } else {
                $('#company-field').show();
                $('#id_company').attr('required', true);
            }

            document.getElementById('employee-modal').showModal();
        }

        function viewEmployee(id) {
            $('#employee-details').html(`
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            `);
            document.getElementById('view-modal').showModal();

            window.apiRequest(`/api/employees/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const emp = response.data.data || response.data;
                    const avatarUrl =
                        `https://ui-avatars.com/api/?name=${encodeURIComponent(emp.name)}&background=3b82f6&color=fff&size=128`;

                    let html = `
                        <div class="flex flex-col items-center mb-6">
                            <img src="${avatarUrl}" alt="${emp.name}" class="w-32 h-32 rounded-full mb-4" />
                            <h2 class="text-2xl font-bold">${emp.name}</h2>
                            <p class="text-gray-600">${emp.email}</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-600">Syarikat</p>
                                <p class="font-medium">${emp.company ? emp.company.name : '-'}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Jabatan</p>
                                <p class="font-medium">${emp.department ? emp.department.name : '-'}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Nombor Telefon</p>
                                <p class="font-medium">${emp.phone_number || '-'}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Jumlah Kehadiran</p>
                                <p class="font-medium">${emp.total_attendances || 0}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Status</p>
                                <p class="font-medium">${emp.is_attendances ? 'Active' : 'Inactive'}</p>
                            </div>
                            <div class="col-span-2">
                                <p class="text-sm text-gray-600">Alamat</p>
                                <p class="font-medium">${emp.address || '-'}</p>
                            </div>
                        </div>
                    `;

                    $('#employee-details').html(html);
                })
                .catch(function(error) {
                    $('#employee-details').html(
                        '<p class="text-center text-red-500">Failed to load employee details</p>');
                });
        }

        function editEmployee(id) {
            currentEmployeeId = id;
            $('#modal-title').text('Edit Employee');
            $('.text-red-500').addClass('hidden').text('');
            // Hide password fields for edit (optional change)
            $('#password-field').hide();
            $('#password-confirmation-field').hide();
            $('#password').attr('required', false);
            $('#password_confirmation').attr('required', false);

            // Hide company field if user is company role
            if (window.currentUser && window.currentUser.id_role === 4) {
                $('#company-field').hide();
                $('#id_company').removeAttr('required');
            }

            apiRequest(`/api/employees/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const emp = response.data;
                    $('#employee-id').val(emp.id);
                    $('#name').val(emp.name);
                    $('#email').val(emp.email);
                    $('#phone_number').val(emp.phone_number);
                    $('#address').val(emp.address);

                    // Set Select2 values and trigger change
                    // Only set company if user is not company role
                    if (window.currentUser && window.currentUser.id_role !== 4) {
                        $('#id_company').val(emp.id_company).trigger('change');
                    }
                    $('#id_department').val(emp.id_department).trigger('change');

                    document.getElementById('employee-modal').showModal();
                })
                .catch(function(error) {
                    alert('Failed to load employee data');
                });
        }

        function saveEmployee() {
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const data = {
                name: $('#name').val(),
                email: $('#email').val(),
                id_department: $('#id_department').val(),
                phone_number: $('#phone_number').val(),
                address: $('#address').val()
            };

            // Only add id_company if user is NOT company role (id_role !== 4)
            if (window.currentUser && window.currentUser.id_role !== 4) {
                data.id_company = $('#id_company').val();
            }

            // Add password if creating new employee
            if (!currentEmployeeId) {
                data.password = $('#password').val();
                data.password_confirmation = $('#password_confirmation').val();
            } else if ($('#password').val()) {
                // If editing and password is filled, include it
                data.password = $('#password').val();
                data.password_confirmation = $('#password_confirmation').val();
            }

            const url = currentEmployeeId ?
                `/api/employees/${currentEmployeeId}` :
                '/api/employees';

            const method = currentEmployeeId ? 'PUT' : 'POST';

            apiRequest(url, {
                    method: method,
                    data: JSON.stringify(data)
                })
                .then(function(response) {
                    closeModal();
                    loadEmployees(currentPage);
                    alert(response.message || 'Employee saved successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to save employee');
                    }
                })
                .finally(function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                });
        }

        function deleteEmployee(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) {
                return;
            }

            apiRequest(`/api/employees/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    loadEmployees(currentPage);
                    alert(response.message || 'Employee deleted successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        alert(error.xhr.responseJSON.message);
                    } else {
                        alert('Failed to delete employee');
                    }
                });
        }

        function closeModal() {
            document.getElementById('employee-modal').close();
        }

        function closeViewModal() {
            document.getElementById('view-modal').close();
        }
    </script>
@endpush