@extends('app')

@section('title', 'Jabatan')

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

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="flex items-center gap-2">
                <label class="label">Search : </label>
                <input type="text" id="search" class="input" placeholder="Search by name or description...">
            </div>
            <div class="flex items-center gap-2">
                <label class="label">Status : </label>
                <select id="filter-status" class="input">
                    <option value="">Semua Status</option>
                    <option value="ENABLE">Enable</option>
                    <option value="DISABLED">Disabled</option>
                </select>
            </div>
            <div class="flex items-end">
                <button onclick="loadDepartments()" 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>ID</th>
                        <th>Syarikat</th>
                        <th>Nama</th>
                        <th>Penerangan</th>
                        <th>Status</th>
                        <th>Pekerja</th>
                        <th>Created At</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="departments-table">
                    <tr>
                        <td colspan="8" 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="department-modal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Jabatan</h3>
            <form id="department-form">
                <input type="hidden" id="department-id">

                <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="input w-full" 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="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="description" class="label">Penerangan</label>
                    <textarea id="description" class="textarea w-full" rows="3"></textarea>
                    <span id="error-description" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="status" class="label">Status <span class="text-red-500">*</span></label>
                    <select id="status" class="input w-full" required>
                        <option value="ENABLE">Enable</option>
                        <option value="DISABLED">Disabled</option>
                    </select>
                    <span id="error-status" 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>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentDepartmentId = null;

        $(document).ready(function() {
            loadDepartments();
            initializeCompanySelect2();
            controlCompanyFieldVisibility();

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

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

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

        function initializeCompanySelect2() {
            $('#id_company').select2({
                placeholder: 'Search and select company...',
                allowClear: true,
                ajax: {
                    url: '/api/companies',
                    dataType: 'json',
                    delay: 250,
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('auth_token')
                    },
                    data: function(params) {
                        return {
                            search: params.term,
                            per_page: 10
                        };
                    },
                    processResults: function(response) {
                        return {
                            results: response.data.data.map(function(company) {
                                return {
                                    id: company.id,
                                    text: company.name
                                };
                            })
                        };
                    },
                    cache: true
                },
                dropdownParent: $('#department-modal')
            });
        }

        function controlCompanyFieldVisibility() {
            if (window.currentUser) {
                if (window.currentUser.id_role === 1 || window.currentUser.id_role === "1") {
                    // Admin: Show company select2
                    $('#company-field').show();
                    $('#id_company').prop('required', true);
                } else {
                    // Company: Hide company select2
                    $('#company-field').hide();
                    $('#id_company').prop('required', false);
                }
            }
        }

        function loadDepartments(page = 1) {
            currentPage = page;
            const search = $('#search').val();
            const status = $('#filter-status').val();

            let url = `/api/departments?page=${page}&per_page=10`;
            if (search) url += `&search=${search}`;
            if (status) url += `&status=${status}`;

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

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

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

            let html = '';
            data.data.forEach(function(dept) {
                const statusBadge = dept.status === 'ENABLE' ?
                    '<span class="badge badge-success">Enable</span>' :
                    '<span class="badge badge-error">Disabled</span>';

                const companyName = dept.company ? dept.company.name : '-';

                html += `
                    <tr>
                        <td>${dept.id}</td>
                        <td>${companyName}</td>
                        <td class="font-medium">${dept.name}</td>
                        <td>${dept.description || '-'}</td>
                        <td>${statusBadge}</td>
                        <td>${dept.employees_count || 0}</td>
                        <td>${new Date(dept.created_at).toLocaleDateString()}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="editDepartment(${dept.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteDepartment(${dept.id}, '${dept.name}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#departments-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">
            `;

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

            // Page numbers
            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="loadDepartments(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

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

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

        function openCreateModal() {
            currentDepartmentId = null;
            $('#modal-title').text('Tambah Jabatan');
            $('#department-form')[0].reset();
            $('#department-id').val('');
            $('#id_company').val(null).trigger('change');
            $('.text-red-500').addClass('hidden').text('');
            controlCompanyFieldVisibility();
            document.getElementById('department-modal').showModal();
        }

        function editDepartment(id) {
            currentDepartmentId = id;
            $('#modal-title').text('Edit Department');
            $('.text-red-500').addClass('hidden').text('');

            apiRequest(`/api/departments/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const dept = response.data;
                    $('#department-id').val(dept.id);
                    $('#name').val(dept.name);
                    $('#description').val(dept.description);
                    $('#status').val(dept.status);

                    // Set company select2 value if admin
                    if (window.currentUser && (window.currentUser.id_role === 1 || window.currentUser.id_role === "1")) {
                        if (dept.id_company && dept.company) {
                            const option = new Option(dept.company.name, dept.id_company, true, true);
                            $('#id_company').append(option).trigger('change');
                        }
                    }

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

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

            const data = {
                name: $('#name').val(),
                description: $('#description').val(),
                status: $('#status').val()
            };

            // Add id_company based on user role
            if (window.currentUser && (window.currentUser.id_role === 1 || window.currentUser.id_role === "1")) {
                // Admin: Get from select2
                data.id_company = $('#id_company').val();
            } else {
                // Company: Use user's id_company
                data.id_company = window.currentUser.id_company;
            }

            const url = currentDepartmentId ?
                `/api/departments/${currentDepartmentId}` :
                '/api/departments';

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

            apiRequest(url, {
                    method: method,
                    data: JSON.stringify(data)
                })
                .then(function(response) {
                    closeModal();
                    loadDepartments(currentPage);
                    alert(response.message || 'Department 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 department');
                    }
                })
                .finally(function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                });
        }

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

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

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

            // Refresh icons after modal close
            setTimeout(function() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }, 100);
        }
    </script>
@endpush