@if ($authorize->add == '1')
    <div class="modal fade" id="syncInternModal" tabindex="-1" aria-labelledby="syncInternModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <form method="POST" action="{{ route('sysuser.sync-interns') }}" id="syncInternForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="syncInternModalLabel">Sinkron Peserta Magang</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-sm mb-3">Pilih peserta yang akan diproses (dibuat akun atau dinonaktifkan). Username menggunakan email dan
                            password awal <strong>Msjasset123</strong>.</p>
                        <div class="table-responsive">
                            <table class="table table-sm align-items-center" id="syncInternTable">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="checkAllInterns"
                                                    aria-label="Pilih semua">
                                        </th>
                        </div>
                        <th>Nama</th>
                        <th>Posisi</th>
                        <th>Dept</th>
                        <th>Email</th>
                        <th>Universitas</th>
                        <th>Periode</th>
                        <th>status</th>


                        </tr>
                        </thead>
                        <tbody id="syncInternTableBody">
                            <tr>
                                <td colspan="8" class="text-center text-secondary">Klik Sync untuk memuat
                                    data.</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
            </div>
            <div class="modal-footer">
                <span class="me-auto text-sm"><strong id="selectedInternCount">0</strong> peserta dipilih</span>
                <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary mb-0" id="submitSyncInterns" disabled>
                    <i class="fas fa-arrows-rotate me-1"></i> Proses
                </button>
            </div>
            </form>
        </div>
    </div>
    </div>

    <script>
        $(document).ready(function() {
            let syncInternDataTable = null;

            $('.dt-buttons').append(
                '<button type="button" class="btn btn-secondary" id="syncInternButton" data-bs-toggle="modal" data-bs-target="#syncInternModal"><span><i class="fas fa-arrows-rotate me-1 text-lg text-primary"></i><span class="font-weight-bold"> Sync</span></span></button>'
            );

            function escapeHtml(value) {
                return $('<div>').text(value == null ? '' : value).html();
            }

            function loadInternCandidates() {
                const body = $('#syncInternTableBody');
                if (syncInternDataTable) {
                    syncInternDataTable.destroy();
                    syncInternDataTable = null;
                }
                body.html(
                    '<tr><td colspan="8" class="text-center"><i class="fas fa-spinner fa-spin me-1"></i> Memuat data...</td></tr>'
                );
                $('#checkAllInterns').prop('checked', false).prop('indeterminate', false);

                $.get(@json(route('sysuser.sync-interns.candidates')))
                    .done(function(response) {
                        const participants = response.data || [];
                        if (participants.length === 0) {
                            body.html(
                                '<tr><td colspan="8" class="text-center text-secondary">Data peserta magang tidak tersedia.</td></tr>'
                            );
                            updateSyncSelection();
                            return;
                        }

                        const rows = participants.map(function(intern) {
                            const disabled = intern.already_synced ? ' disabled' : '';
                            
                            let status = '';
                            if (intern.already_synced) {
                                status = '<span class="badge bg-secondary">Sudah ada/tidak valid</span>';
                            } else if (intern.action_type === 'deactivate') {
                                status = '<span class="badge bg-warning">Nonaktifkan</span>';
                            } else {
                                status = '<span class="badge bg-success">Siap Buat Akun</span>';
                            }
                            
                            return '<tr>' +
                                '<td><div class="form-check"><input class="form-check-input intern-check" type="checkbox" name="intern_ids[]" value="' +
                                escapeHtml(intern.id) + '"' + disabled + '></div></td>' +
                                '<td>' + escapeHtml(intern.nama) + '</td>' +
                                '<td>' + escapeHtml(intern.low_name) + '</td>' +
                                '<td>' + escapeHtml(intern.dept_name) + '</td>' +
                                '<td>' + escapeHtml(intern.email) + '</td>' +
                                '<td>' + escapeHtml(intern.univ_name) + '</td>' +
                                '<td>' + escapeHtml(intern.start_period) + ' s/d ' + escapeHtml(intern
                                    .end_period) + '</td>' +
                                '<td>' + status + '</td></tr>';
                        }).join('');
                        body.html(rows);
                        syncInternDataTable = $('#syncInternTable').DataTable({
                            pageLength: 10,
                            lengthMenu: [10, 25, 50, 100],
                            order: [
                                [1, 'asc']
                            ],
                            columnDefs: [{
                                targets: 0,
                                orderable: false,
                                searchable: false
                            }],
                            language: {
                                search: 'Cari:',
                                lengthMenu: 'Tampilkan _MENU_ baris',
                                zeroRecords: 'Data peserta tidak ditemukan',
                                info: 'Data _START_ - _END_ dari _TOTAL_',
                                infoEmpty: 'Tidak ada data',
                                infoFiltered: '(disaring dari _MAX_ data)',
                                paginate: {
                                    first: 'Pertama',
                                    last: 'Terakhir',
                                    next: 'Berikutnya',
                                    previous: 'Sebelumnya'
                                }
                            }
                        });
                        updateSyncSelection();
                    })
                    .fail(function() {
                        body.html(
                            '<tr><td colspan="8" class="text-center text-danger">Data peserta magang gagal dimuat.</td></tr>'
                        );
                        updateSyncSelection();
                    });
            }

            function updateSyncSelection() {
                const checkboxes = syncInternDataTable ?
                    syncInternDataTable.$('.intern-check:enabled') : $('.intern-check:enabled');
                const selected = checkboxes.filter(':checked').length;
                const available = checkboxes.length;
                $('#selectedInternCount').text(selected);
                $('#submitSyncInterns').prop('disabled', selected === 0);
                $('#checkAllInterns').prop('checked', available > 0 && selected === available);
                $('#checkAllInterns').prop('indeterminate', selected > 0 && selected < available);
            }

            $('#checkAllInterns').on('change', function() {
                const checkboxes = syncInternDataTable ?
                    syncInternDataTable.$('.intern-check:enabled') : $('.intern-check:enabled');
                checkboxes.prop('checked', this.checked);
                updateSyncSelection();
            });

            $('#syncInternTableBody').on('change', '.intern-check', updateSyncSelection);

            $('#syncInternModal').on('show.bs.modal', loadInternCandidates);
            $('#syncInternModal').on('shown.bs.modal', function() {
                if (syncInternDataTable) {
                    syncInternDataTable.columns.adjust();
                }
            });

            $('#syncInternForm').on('submit', function() {
                if (syncInternDataTable) {
                    const form = $(this);
                    form.find('.sync-intern-hidden').remove();
                    syncInternDataTable.$('.intern-check:enabled:checked').each(function() {
                        $('<input>', {
                            type: 'hidden',
                            name: 'intern_ids[]',
                            value: this.value,
                            class: 'sync-intern-hidden'
                        }).appendTo(form);
                    });
                    syncInternDataTable.$('.intern-check').removeAttr('name');
                }
                $('#submitSyncInterns').prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');
            });
        });
    </script>
@endif