@forelse ($history_duty as $hd)
    @php
        $avatar = Util::linkFile('pas_photo', $hd->employee->pas_photo);

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

        foreach ($words as $word) {
            $firstLetters .= strtoupper($word[0]);
        }
    @endphp
    <tr>
        <td>{{ $loop->index + 1 + $history_duty->perPage() * ($history_duty->currentPage() - 1) }}</td>
        <td class="has-text-centered">
            {{ $hd->gate }}
        </td>
        <td class="has-text-centered">
            {{ $hd->position }}
        </td>
        <td class="has-text-centered">
            {{ $hd->company }}
        </td>
        <td>
            {{ date('d F Y H:i', strtotime($hd->start_duty)) }}
        </td>
        <td>
            {{ date('d F Y H:i', strtotime($hd->end_duty)) }}
        </td>
        <td>
            @php
                if ($hd->status == 'In Progress') {
                    $icon = 'timer.svg';
                    $class = 'bg-blue';
                } elseif ($hd->status == 'Incomplete') {
                    $icon = 'do_disturb.svg';
                    $class = 'is-danger';
                } elseif ($hd->status == 'Hold') {
                    $icon = 'pending.svg';
                    $class = 'is-warning';
                } elseif ($hd->status == 'Scheduled') {
                    $icon = 'calendar.svg';
                    $class = 'bg-grey';
                } else {
                    $icon = 'ic-check-circle.svg';
                    $class = 'is-success';
                }

            @endphp
            <span class="tag {{ $class }} fs-12 fw-700 text-white" style="display: flex; align-items: center;">
                <img src="{{ url('assets/img/icons/' . $icon) }}" class="mr-2">
                {{ $hd->status }}
            </span>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="7" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $('body').on('change', '.checkbox-duty-history input[type="checkbox"]', function() {
        var checkboxId = $(this).val();

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

        if ($(this).is(':checked')) {
            if (!checkedCheckboxes.includes(checkboxId)) {
                checkedCheckboxes.push(checkboxId);

                if ($('form input[type="hidden"][value="' + checkboxId + '"]').length === 0) {
                    $('<input>', {
                        type: 'hidden',
                        name: 'id[]',
                        value: checkboxId
                    }).appendTo('form');
                }
            }
        } else {
            let index = checkedCheckboxes.indexOf(checkboxId);
            if (index > -1) {
                checkedCheckboxes.splice(index, 1);
                $('form input[type="hidden"][value="' + checkboxId + '"]').remove();
            }
        }

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

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

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

    $('.checkbox-duty-history input[type="checkbox"]').each(function() {
        var checkboxId = $(this).val();

        if (checkedCheckboxes.includes(checkboxId)) {
            $(this).prop('checked', true);

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