@canany(['hr_manager_hq', 'employees'])
    <div>
        @if ($myUser->is_hr_manager || $myUser->is_hr_hq || $myUser->add_employee)
            <div class="row">
                <div class="d-grid gap-1 d-sm-flex">
                    <a href="{{ route('admin.employees.create') }}" class="btn btn-success">
                        <i class="fa fa-plus"></i> Create new employee
                    </a>
                    <a href="#" class="btn btn-info" data-toggle="modal" data-target="#TempEmployee">
                        Saved drafts <span class="badge badge-light">{{ $EmpCount }}</span>
                    </a>
                </div>
                @if ($myUser->is_hr_manager || $myUser->is_hr_hq)
                    <div class="col-6 text-right">
                        {{-- <a href="{{ route('admin.employees.bulk_import') }}" class="btn btn-danger">
                            <i class="fa fa-download"></i> Bulk Import
                        </a> --}}
                    </div>
                @endif
            </div>
        @endif
        <hr class="bg-secondary">

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive mt-2">
                    <table id="UserList" class="table table-striped table-hover w-100"
                        style="table-layout: auto !important;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Employee Ref</th>
                                <th>Title</th>
                                <th style="width: 150px;">Names</th>
                                <th>Date Of Birth</th>
                                <th>e-mail</th>
                                <th>Job Title</th>
                                <th>Company</th>
                                <th>Department</th>
                                <th>Division</th>
                                <th>Role</th>
                                <th>Team</th>
                                <th>Level</th>
                                <th>Full Time/Part Time</th>
                                <th>Location</th>
                                <th>Country</th>
                                <th>Employee Type</th>
                                <th>Director</th>
                                <th>Holiday Approver</th>
                                <th>Is Director</th>
                                <th>Line Manager</th>
                                <th>Join Date</th>
                                <th>Leave Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data loaded via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Delete Modal Template -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title" id="deleteModalLabel">Move to Recycle Bin</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to move <b id="deleteName"></b> to the recycle bin?
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times mr-1"></i>
                        No, keep it</button>
                        <form id="deleteForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger">
                                <i class="fa fa-trash-alt mr-1"></i>
                                Yes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @script
            <script>
                $(document).ready(function() {
                    var table = $('#UserList').DataTable({
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        ajax: {
                            url: `{{ route('admin.employees.data') }}`,
                            type: 'GET',
                        },
                        columns: [{
                                data: 'id',
                                name: 'id',
                                searchBuilderType: 'num'
                            },
                            {
                                data: 'employee_ref',
                                name: 'employee_ref',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'title',
                                name: 'title',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'name',
                                name: 'name',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'dob',
                                name: 'dob',
                                searchBuilderType: 'date'
                            },
                            {
                                data: 'email',
                                name: 'email',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'jobtitle',
                                name: 'jobtitle',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'company',
                                name: 'company',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'department',
                                name: 'department',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'division',
                                name: 'division',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'role',
                                name: 'role',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'team_names',
                                name: 'team_names',
                                searchBuilderType: 'string',
                                render: function(data) {
                                    if (!data) return '';
                                    var teams = data.split(', ');
                                    return teams.map(function(team) {
                                        return '<span class="badge badge-secondary" style="font-size: 15px">' +
                                            team + '</span>';
                                    }).join(' ');
                                }
                            },
                            {
                                data: 'level',
                                name: 'level',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'fullparttime',
                                name: 'fullparttime',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'location',
                                name: 'location',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'country',
                                name: 'country',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'employee_type',
                                name: 'employee_type',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'director',
                                name: 'director',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'holiday_approver',
                                name: 'holiday_approver',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'is_director',
                                name: 'is_director',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'manager_names',
                                name: 'manager_names',
                                searchBuilderType: 'string'
                            },
                            {
                                data: 'join_date',
                                name: 'join_date',
                                searchBuilderType: 'date'
                            },
                            {
                                data: 'leave_date',
                                name: 'leave_date',
                                searchBuilderType: 'date'
                            },
                            {
                                data: 'status',
                                name: 'status',
                                searchBuilderType: 'num',
                                render: function(data) {
                                    if (data == 1) {
                                        return '<div class="d-flex align-items-center">' +
                                            '<div class="rounded-circle m-2" style="width: 10px; height: 10px; background-color: #29e68e;"></div>' +
                                            '<span>Current Employee</span></div>';
                                    } else {
                                        return '<div class="d-flex align-items-center">' +
                                            '<div class="rounded-circle m-2" style="width: 10px; height: 10px; background-color: #e62929;"></div>' +
                                            '<span>Ex-Employee</span></div>';
                                    }
                                }
                            },
                            {
                                data: null,
                                orderable: false,
                                searchable: false,
                                render: function(data, type, row) {
                                    // Determine Status Button (Activate vs Deactivate)
                                    // Status == 1 means currently active, so show "Deactivate" (Warning)
                                    // Status != 1 means currently inactive, so show "Activate" (Success)
                                    var statusBtn = row.status == 1 ?
                                        `<a href="#" class="btn btn-sm btn-outline-warning deactivate-link" data-id="${row.id}" data-toggle="tooltip" title="Deactivate">
                                            <i class="fas fa-user-alt-slash"></i>
                                         </a>` :
                                        `<a href="#" class="btn btn-sm btn-outline-success activate-link" data-id="${row.id}" data-toggle="tooltip" title="Activate">
                                            <i class="fas fa-user-check"></i>
                                         </a>`;

                                    // Build the Button Group
                                    return `
                                        <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                                            <!-- View Button (Secondary) -->
                                            <a href="/admin/employees/${row.id}" class="btn btn-sm btn-outline-secondary" data-toggle="tooltip" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <!-- Edit Button (Primary) -->
                                            <a href="/admin/employees/${row.id}/edit" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="Edit">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                            <!-- Status Button (Warning or Success) -->
                                            ${statusBtn}
                                            <!-- Delete Button (Red/Danger) -->
                                            <a href="#" class="btn btn-sm btn-outline-danger delete-link" data-id="${row.id}" data-name="${row.name}" data-toggle="tooltip" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    `;
                                }
                            }
                        ],
                        columnDefs: [{
                            targets: [4, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
                            visible: false
                        }],
                        lengthMenu: [
                            [10, 25, 50, 100, 500, 1000],
                            [10, 25, 50, 100, 500, 1000]
                        ],
                        fixedHeader: true,
                        layout: {
                            top1Start: {
                                buttons: [{
                                        extend: 'copy'
                                    },
                                    {
                                        extend: 'excel'
                                    },
                                    {
                                        extend: 'pdf'
                                    },
                                    {
                                        extend: 'print'
                                    },
                                    {
                                        extend: 'colvis',
                                        collectionLayout: 'fixed columns',
                                        popoverTitle: 'Column visibility control'
                                    },
                                ]
                            },
                            top2start: 'searchBuilder',
                            topStart: {
                                pageLength: {
                                    menu: [10, 25, 50, 100, 500, 1000]
                                },
                            },
                            topEnd: 'search',
                            bottomStart: 'info',
                            bottomEnd: 'paging'
                        },
                        pageLength: 10,
                        order: [
                            [23, 'desc'],
                            [3, 'asc']
                        ],
                        stateSave: true,
                        drawCallback: function() {
                            // Initialize tooltips after table is drawn
                            $('[data-toggle="tooltip"]').tooltip();
                        }
                    });

                    // Click on row to view employee (excluding actions column)
                    $('#UserList tbody').on('click', 'td:not(:last-child)', function() {
                        var data = table.row($(this).closest('tr')).data();
                        if (data) {
                            window.location.href = '/admin/employees/' + data.id;
                        }
                    });

                    // Handle delete button
                    $('#UserList').on('click', '.delete-link', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var id = $(this).data('id');
                        var name = $(this).data('name');
                        $('#deleteName').text(name);
                        $('#deleteForm').attr('action', '/admin/employees/' + id);
                        $('#deleteModal').modal('show');
                    });

                    // Handle activate button
                    $('#UserList').on('click', '.activate-link', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var id = $(this).data('id');
                        $.ajax({
                            url: '{{ route('admin.employees.activate', ':id') }}'.replace(':id', id),
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'PUT'
                            },
                            success: function(response) {
                                table.ajax.reload(null, false); // Reload without resetting pagination
                                // Optional: Show success message
                                console.log('Employee activated successfully');
                            },
                            error: function(xhr) {
                                console.error('Activation error:', xhr);
                                alert('Failed to activate employee');
                            }
                        });
                    });

                    // Handle deactivate button
                    $('#UserList').on('click', '.deactivate-link', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var id = $(this).data('id');
                        $.ajax({
                            url: '{{ route('admin.employees.deactivate', ':id') }}'.replace(':id', id),
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'PUT'
                            },
                            success: function(response) {
                                table.ajax.reload(null, false); // Reload without resetting pagination
                                // Optional: Show success message
                                console.log('Employee deactivated successfully');
                            },
                            error: function(xhr) {
                                console.error('Deactivation error:', xhr);
                                alert('Failed to deactivate employee');
                            }
                        });
                    });

                    // Debug: Log when searchBuilder changes
                    table.on('searchBuilder.preDefined', function(e, details) {
                        console.log('Search Builder criteria:', details);
                    });
                });
            </script>
        @endscript
    </div>
@endcan