@forelse ($history_mcu as $item)
    <tr>
        <td>{{ $loop->index + 1 + $history_mcu->perPage() * ($history_mcu->currentPage() - 1) }}</td>
        <td class="has-text-centered">
            {{ $item->mcu_verification_number }}
        </td>
        <td class="has-text-centered">
            {{ $item->mcu_result }}
        </td>
        <td class="has-text-centered">
            {{ date('d F Y', strtotime($item->mcu_validation)) }}
        </td>
        <td class="has-text-centered">
            <a class="button h-button" id="btn_{{ $item->id }}"
                onclick="downloadFileMCU('{{ $item->employee_mcu_id }}','{{ $item->employee->name }}','{{ $item->id }}')">
                @lang('app.download')
            </a>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="5" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

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

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

        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('checkedMCUHistory', JSON.stringify(checkedCheckboxes));
    });

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

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

    $('.checkbox-mcu-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');
            }
        }
    });

    function downloadFileMCU(mcuID, employeeName, btnID) {

        $(`#btn_${btnID}`).addClass('is-loading')

        $.ajax({
            url: urlDownloadFileMCU,
            data: {
                mcu_id: mcuID,
                name: employeeName
            },
            success: (res) => {
                if (res.status) {
                    let link = document.createElement('a');
                    link.href = res.download_url;
                    link.setAttribute('download', '');
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                    $(`#btn_${btnID}`).removeClass('is-loading')
                    showNotification('primary', 'success', 'Success download file MCU')
                } else {
                    $(`#btn_${btnID}`).removeClass('is-loading')
                    showNotification('error', 'error', 'Download URL not found!')
                }
            },
            error: (xhr, error) => {
                $(`#btn_${btnID}`).removeClass('is-loading')
                showNotification('danger', 'Failed', 'Download Failed!')
            }
        })
    }
</script>