@forelse ($employees as $e)
    @php
        $avatar = Util::linkFile('pas-photo', $e->pas_photo);

        $words = explode(' ', $e->name);
        $firstLetters = '';

        foreach ($words as $word) {
            $firstLetters .= strtoupper($word[0]);
        }

        $statusReturn = !empty($e->returnWorker) ? $e->returnWorker->status : null;
    @endphp
    @if(empty($statusReturn) || $statusReturn !== 'Approved')
    <tr class="clickable-row" data-id="{{ $e->id }}">
        <td class="has-text-centered">
            {{ $loop->index + 1 + $employees->perPage() * ($employees->currentPage() - 1) }}
        </td>
        <td class="has-text-centered" style="max-width: 50px">
            <label class="checkbox checkbox-create-checkin" data-id="{{ $e->id }}">
                <input type="checkbox" data-name="{{ $e->name }}" data-status="{{ $statusReturn }}" data
                    name="employee_id[]" value="{{ $e->id }}">
                <span class="span-checkbox"></span>
            </label>
        </td>
        <td>
            <div class="flex-media">
                <div class="h-avatar is-medium">
                    @if ($e->pas_photo)
                        <img class="avatar" src="{{ $avatar }}">
                    @else
                        <span class="avatar is-fake is-danger">
                            <span>{{ $firstLetters }}</span>
                        </span>
                    @endif
                </div>
                <div class="meta">
                    <div style="display: inline-flex; align-items: center; gap: 2px;">
                        <span>{{ $e->name }}</span>
                    </div>
                </div>
            </div>
        </td>
        <td class="has-text-centered">
            {{ $e->username ?? $e->nik }}
        </td>
        <td class="has-text-centered">
            {{ $e->roleEmployee->name }}
        </td>
    </tr>
    @endif
@empty
    <tr>
        <td colspan="9" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $(document).ready(function() {
        var checkedCheckboxes = JSON.parse(localStorage.getItem('checkedCheckboxes')) || [];

        checkedCheckboxes.forEach(function(checkboxId) {
            checkboxId = String(checkboxId).trim();

            var checkbox = $('.checkbox-create-checkin input[type="checkbox"][value="' + checkboxId +
                '"]');

            if (checkbox.length > 0) {
                checkbox.prop('checked', true);
                addHiddenInput(checkboxId);
            }
        });
    });

    $('body').on('click', '.clickable-row', function(e) {
        if ($(e.target).is('input[type="checkbox"], label, .span-checkbox')) {
            return;
        }

        var checkbox = $(this).find('input[type="checkbox"]');
        if (checkbox.length === 0) return;

        checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
    });

    $('body').on('change', '.checkbox-create-checkin input[type="checkbox"]', function() {
        var checkbox = $(this);
        var checkboxId = checkbox.val();
        const status = checkbox.data('status');

        const name = checkbox.data('name');

        let checkedCheckboxes = JSON.parse(localStorage.getItem('checkedCheckboxes')) || [];

        if (showStatusAlert(status, name) && status !== 'Approved') {
            checkbox.prop('checked', false);
            return;
        }

        if (checkbox.is(':checked')) {
            if (!checkedCheckboxes.includes(checkboxId)) {
                checkedCheckboxes.push(checkboxId);
            }
            addHiddenInput(checkboxId);
        } else {
            checkedCheckboxes = checkedCheckboxes.filter(id => id !== checkboxId);
            removeHiddenInput(checkboxId);
        }

        localStorage.setItem('checkedCheckboxes', JSON.stringify(checkedCheckboxes));
    });

    function addHiddenInput(checkboxId) {
        if ($('form input[type="hidden"][value="' + checkboxId + '"]').length === 0) {
            $('<input>', {
                type: 'hidden',
                name: 'id[]',
                value: checkboxId
            }).appendTo('form');
        }
    }

    function removeHiddenInput(checkboxId) {
        $('form input[type="hidden"][value="' + checkboxId + '"]').remove();
    }

    function showStatusAlert(status, name) {
        const statusMessages = {
            'Submit Document': 'Submit Document Worker',
            'Under Review': 'Documents Under Review from Early Return',
            'Decline': 'Decline from Early Return',
            'Approved': 'Approved from Early Return'
        };

        if (statusMessages[status]) {
            $('#container_modal_alert').html(modalAlert(statusMessages[status], name, message(name, status)));
            return true;
        }
        return false;
    }

    function modalAlert(title, name, message) {
        return `<div id="modal_alert" class="modal h-modal is-active">
                    <div class="modal-background h-modal-close"></div>
                    <div class="modal-content">
                        <div class="modal-card">
                            <div class="modal-card-head"><h3 class="dark-inverted">${title}</h3></div>
                            <div class="modal-card-body">
                                <div class="inner-content">
                                    <div class="section-placeholder">
                                        <div class="placeholder-content">
                                            <div class="fs-14 fw-500 mt-3">${message}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-card-foot is-centered">
                                <a class="button h-button h-modal-close" id="btn_close_modal">Close</a>
                            </div>
                        </div>
                    </div>
                </div>
                `
    }

    function message(name, status) {
        let message = '';
        switch (status) {
            case 'Under Review':
                message =
                    `The worker <span class="fw-600">${name}</span> was previously marked for early return and the document is still under review. Please wait until the review is complete.`
                break;
            case 'Decline':
                message =
                    `The worker <span class="fw-600">${name}</span> was previously marked for early return and is not eligible for Gate In`
                break;
            case 'Submit Document':
                message =
                    `The worker <span class="fw-600">${name}</span> was previously marked for early return and must submit the required documents before being eligible for Gate In. Please complete the submission first.`
                break;
            case 'Approved':
                message =
                    `The worker <span class="fw-600">${name}</span> was previously marked for early return and is Eligible to enter gate`
                break;
            default:
                break;
        }

        return message;
    }

    $(document).on('click', '#btn_close_modal', function() {
        $('#modal_alert').removeClass('is-active')
    })
</script>