@forelse ($password as $item)
    <tr data-id="{{ $item->id }}">
        <td align="center">
            <div class="control">
              <label class="form-switch is-warning">
                  <input type="checkbox" value="{{ $item->id }}" class="is-switch" @if ($item->status == 1) checked @endif>
                  <i></i>
              </label>
          </div>
        </td>
        <td>
            @if ($item->type == 'employee')
                {{ $item->title }} <span>({{ $item->user->name }})</span>
            @else
                {{ $item->title }}
            @endif
        </td>
        {{-- <td>{{ $item->category_document ?? ucfirst($item->type) }}</td> --}}
        <td>{{ date('d F Y', strtotime($item->updated_at)) }}</td>
        @role(['super_admin','user_admin'])
            <td class="has-text-centered">
                <button type="button" class="button h-button h-modal-trigger show-button-password" title="View Password"
                    data-id="{{ $item->id }}">
                    <span class="icon">
                        @include('components.icons.eye')
                    </span>
                </button>
                {{-- <button type="button" class="button h-button h-modal-trigger edit-button-password" title="Edit"
                    data-id="{{ $item->id }}">
                    <span class="icon">
                        @include('components.icons.pencil-alt')
                    </span>
                </button>
                <button type="button" class="button h-button h-modal-trigger delete-button-password" title="Delete"
                    data-id="{{ $item->id }}" data-category="{{ $item->category_document }}"
                    data-title="{{ $item->title }}" data-type="{{ $item->type }}"
                    data-user="{{ $item->type == 'employee' ? $item->user->name : '' }}">
                    <span class="icon">
                        @include('components.icons.trash')
                    </span>
                </button> --}}
            </td>
        @endrole
    </tr>

@empty
    <tr>
        <td colspan="5" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    function singleCheck(checkbox) {
        if (checkbox.checked) {
            // matikan semua checkbox lain
            document.querySelectorAll('.is-switch').forEach(function (cb) {
                if (cb !== checkbox) {
                    cb.checked = false;
                }
            });

            idValue = checkbox.value;

            $.ajax({
                method: 'GET',
                url: '{{url('/password-document/updatestatus')}}',
                data: {
                  idValue: idValue,
                }
            });

        } else {
            // kalau user coba uncheck, tetap dipaksa aktif lagi
            checkbox.checked = true;
        }
    }

    // pasang event listener ke semua checkbox
    document.querySelectorAll('.is-switch').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            singleCheck(this);
        });
    });

    $(document).on('click', '.edit-button-password', function() {
        const id = $(this).data('id');

        $.ajax({
            url: '{{ route('password-document.edit') }}',
            data: {
                id
            },
            success: (res) => {
                $('#container_modal_edit_password').html(res)
                $('#modal_edit_password_document').addClass('is-active')
            }
        })
    });

    $(document).on('click', '.show-button-password', function() {
        const id = $(this).data('id');

        $.ajax({
            url: '{{ route('password-document.show') }}',
            data: {
                id
            },
            success: (res) => {
                $('#container_modal_show_password').html(res)
                $('#modal_show_password_document').addClass('is-active')
            }
        })
    });

    $(document).on('click', '.delete-button-password', function() {
        const id = $(this).data('id');
        const title = $(this).data('title');
        const category = $(this).data('category');
        const type = $(this).data('type');
        const user = $(this).data('user');

        $('#modal-delete-password-document').addClass('is-active')
        $('#title_header').text(`Delete password document`)
        $('#passsword_document_id').val(id)

        const subtitle = type == 'employee' ? user : category + ' category'

        $('#subtitle').html(
            `Are you sure you want to remove the password for the <span class="fw-700">${subtitle}</span>? Documents in this ${type=='employee'?'worker':'category'} will no longer be protected.`
        )
    });

    $(document).off('submit', '#form_delete').on('submit', '#form_delete', function(e) {
        e.preventDefault();

        const id = $('#passsword_document_id').val();

        $.ajax({
            url: '{{ route('password-document.destroy') }}',
            type: 'POST',
            data: {
                id,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: (res) => {
                if (res.status) {
                    $('#modal-delete-password-document').removeClass('is-active');
                    showNotification('primary', 'Success', res.message);
                    getDataPasswordDocument();
                }
            },
            error: (err) => {
                $('#modal-delete-password-document').removeClass('is-active');
                showNotification('danger', 'Failed', err.responseJSON?.message ||
                    'An error occurred');
            }
        });
    });
</script>