@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mb-2 mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>

                            </div>
                        </div>
                        {{-- alert --}}
                        @include('components.alert')
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="mb-2">
                                <button type="button" class="btn btn-success mb-0" data-bs-toggle="modal"
                                    data-bs-target="#modalUploadCsv">
                                    <i class="fas fa-upload me-1"></i><span class="font-weight-bold"> Upload Data Raw</span>
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table display" id="list_header">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>Action</th>
                                            <th>No</th>
                                            <th>Tanggal Investasi</th>
                                            <th>Tanggal Download</th>
                                            <th>Total Lembar Saham</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($list as $dt)
                                            <tr>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        title="View Data"
                                                        onclick="window.location='{{ url($url_menu . '/show/' . encrypt($dt->harga_saham_id)) }}'">
                                                        <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                    @if ($authorize->delete == '1')
                                                        <form
                                                            action="{{ url($url_menu . '/' . encrypt($dt->harga_saham_id)) }}"
                                                            method="POST" style="display: inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-danger mb-0"
                                                                title="Hapus Data"
                                                                onclick="return deleteData(event, '{{ \Carbon\Carbon::parse($dt->tanggal_investasi)->locale('id')->isoFormat('D MMMM YYYY') }}', 'Hapus')">
                                                                <i class="fas fa-trash"> </i><span class="font-weight-bold">
                                                                    Hapus</span>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </td>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ \Carbon\Carbon::parse($dt->tanggal_investasi)->locale('id')->isoFormat('D MMMM YYYY') }}
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($dt->tanggal_download)->locale('id')->isoFormat('D MMMM YYYY') }}
                                                </td>
                                                <td>{{ number_format($dt->total_lembar_saham, 0, ',', '.') }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Upload CSV --}}
    <div class="modal fade" id="modalUploadCsv" tabindex="-1" aria-labelledby="modalUploadCsvLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadCsvLabel"><i class="fas fa-upload me-2"></i>Upload Data Raw
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formUploadCsv" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        {{-- File Input - Multiple --}}
                        <div class="row mb-3">
                            <label for="file_csv" class="col-sm-3 col-form-label">File CSV <span
                                    class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="file" class="form-control" id="file_csv" name="file_csv[]"
                                        accept=".csv" multiple required>
                                    <button type="button" class="btn btn-info mb-0" id="btnCheckCsv" disabled>
                                        <i class="fas fa-search me-1"></i>Check
                                    </button>
                                </div> 
                                {{-- Data Sample --}}
                                <small class="text-muted">Format file: .csv (maks. 10MB per file). Bisa pilih beberapa file
                                    sekaligus.</small>
                            </div>
                        </div>
                        {{-- Selected Files List --}}
                        <div id="selectedFilesArea" style="display: none;">
                            <div class="mb-2">
                                <span class="badge bg-info" id="selectedFilesCount"></span>
                            </div>
                            <div id="selectedFilesList" class="mb-2"></div>
                        </div>
                        {{-- Preview Area - Table for multiple files --}}
                        <div id="csvPreviewArea" style="display: none;">
                            <hr class="horizontal dark">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm align-items-center mb-0" id="previewTable">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="text-xs font-weight-bolder" style="width: 15px;">No</th>
                                            <th class="text-xs font-weight-bolder">Nama File</th>
                                            <th class="text-xs font-weight-bolder">Total Data</th>
                                            <th class="text-xs font-weight-bolder">Total Lembar Saham</th>
                                            <th class="text-xs font-weight-bolder">Tgl Download</th>
                                            <th class="text-xs font-weight-bolder">Tgl Investasi</th>
                                            <th class="text-xs font-weight-bolder text-center" style="width: 120px;">Status
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="previewTableBody">
                                    </tbody>
                                </table>
                            </div>
                            <div id="csvWarningArea" style="display: none;" class="mt-2">
                                <div class="alert alert-warning mb-0 py-2">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    <span id="csvWarningMessage"></span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-primary" id="btnSimpanCsv" disabled>
                            <i class="fas fa-save me-1"></i>Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Loading & Progress --}}
    <div class="modal fade" id="modalLoading" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);">
                <div class="modal-body text-center py-4 px-4">
                    <div id="csvSpinner" class="mb-3">
                        <div class="spinner-border text-primary" style="width: 2.5rem; height: 2.5rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <h5 class="fw-bold mb-3" id="csvLoadingText">Memeriksa file CSV...</h5>
                    {{-- Progress Bar --}}
                    <div id="csvProgressArea" style="display: none;">
                        <div class="progress mb-2" style="height: 20px; border-radius: 10px; background-color: #e9ecef;">
                            <div id="csvProgressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                                role="progressbar"
                                style="width: 0%; border-radius: 10px; background: linear-gradient(90deg, #028284, #00b7bd);"
                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                        <div id="csvProgressFiles" class="text-start mt-3" style="max-height: 200px; overflow-y: auto;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="loadingOverlay"
        style="
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white">
            Loading...
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        //set table header into datatables
        $('#list_header').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            "pageLength": 15,
            responsive: true,
            ordering: false,
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    exportOptions: {
                        columns: ':visible:not(:first-child):not(:last-child)'
                    },
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                    exportOptions: {
                        columns: ':visible:not(:first-child):not(:last-child)'
                    },
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                    exportOptions: {
                        columns: ':visible:not(:first-child):not(:last-child)'
                    },
                },
            ]
        });
        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>272</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>272</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>273</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>273</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>274</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msja/resources/views/transc/trdrw/list.blade.php</b> on line <b>274</b><br />
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }

        // ==================== Upload CSV (Multiple Files) ====================
        // Accumulated files using DataTransfer
        var accumulatedFiles = new DataTransfer();

        function renderFileList() {
            var files = accumulatedFiles.files;
            var count = files.length;
            $('#btnCheckCsv').prop('disabled', count === 0);
            // Reset preview when files change
            $('#csvPreviewArea').hide();
            $('#csvWarningArea').hide();
            $('#btnSimpanCsv').prop('disabled', true);

            if (count > 0) {
                var listHtml = '<div class="d-flex flex-wrap gap-2">';
                for (var i = 0; i < count; i++) {
                    listHtml += '<span class="badge bg-light text-dark border me-1 mb-1">' +
                        '<i class="fas fa-file-csv me-1"></i>' + files[i].name +
                        ' <a href="#" class="text-danger ms-1 remove-file" data-index="' + i +
                        '" title="Hapus"><i class="fas fa-times"></i></a>' +
                        '</span>';
                }
                listHtml += '</div>';
                $('#selectedFilesCount').html(count + ' file dipilih');
                $('#selectedFilesList').html(listHtml);
                $('#selectedFilesArea').show();
            } else {
                $('#selectedFilesArea').hide();
                $('#selectedFilesList').empty();
            }
        }

        // Accumulate files when user picks new files
        $('#file_csv').on('change', function() {
            var newFiles = this.files;
            for (var i = 0; i < newFiles.length; i++) {
                // Avoid adding duplicate file names
                var isDuplicate = false;
                for (var j = 0; j < accumulatedFiles.files.length; j++) {
                    if (accumulatedFiles.files[j].name === newFiles[i].name && accumulatedFiles.files[j].size ===
                        newFiles[i].size) {
                        isDuplicate = true;
                        break;
                    }
                }
                if (!isDuplicate) {
                    accumulatedFiles.items.add(newFiles[i]);
                }
            }
            // Sync input with accumulated files
            this.files = accumulatedFiles.files;
            renderFileList();
        });

        // Remove individual file from accumulated list
        $(document).on('click', '.remove-file', function(e) {
            e.preventDefault();
            var idx = $(this).data('index');
            var newDt = new DataTransfer();
            for (var i = 0; i < accumulatedFiles.files.length; i++) {
                if (i !== idx) {
                    newDt.items.add(accumulatedFiles.files[i]);
                }
            }
            accumulatedFiles = newDt;
            $('#file_csv')[0].files = accumulatedFiles.files;
            renderFileList();
        });

        // Reset modal on close
        $('#modalUploadCsv').on('hidden.bs.modal', function() {
            $('#formUploadCsv')[0].reset();
            accumulatedFiles = new DataTransfer();
            $('#btnCheckCsv').prop('disabled', true);
            $('#btnSimpanCsv').prop('disabled', true);
            $('#csvPreviewArea').hide();
            $('#csvWarningArea').hide();
            $('#modalLoading').modal('hide');
            $('#selectedFilesArea').hide();
            $('#selectedFilesList').empty();
            $('#previewTableBody').empty();
        });

        // Check CSV button click - multiple files
        $('#btnCheckCsv').on('click', function() {
            var formData = new FormData();
            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
            for (var i = 0; i < accumulatedFiles.files.length; i++) {
                formData.append('file_csv[]', accumulatedFiles.files[i]);
            }
            var $btn = $(this);

            // Show loading modal
            $('#csvPreviewArea').hide();
            $('#csvSpinner').show();
            $('#csvProgressArea').hide();
            $('#csvLoadingText').text('Memeriksa file CSV...');
            // $('#loadingOverlay').show();
            console.log('modal count:', $('#modalLoading').length);
            console.log('is shown:', $('#modalLoading').hasClass('show'));
            console.log('body class:', $('body').attr('class'));
            console.log('backdrop:', $('.modal-backdrop').length);
            $btn.prop('disabled', true);

            $('#modalLoading').modal('show');

            setTimeout(() => {
                 $.ajax({
                url: '{{ route('trdrw.checkCsv') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {

                    if (response.status == 'success') {
                        console.log($('#modalLoading').data('bs.modal'));
                        console.log('Response from checkCsv:', response);
                        console.log('close modal loading');
                        console.log('is shown before hide:', $('#modalLoading').hasClass('show'));
                        // if ($('#modalLoading').hasClass('show')) {
                        //     setTimeout(() => {
                        //         $('#modalLoading').modal('hide');
                        //     }, 3000);
                        // }
                        $('#modalLoading').modal('hide');
                        // $('#loadingOverlay').hide();
                        console.log('end close modal loading');

                        $btn.prop('disabled', false);

                        var results = response.data;
                        var $tbody = $('#previewTableBody');
                        $tbody.empty();

                        var hasValid = false;
                        var hasDuplicate = false;
                        var hasError = false;
                        var hasHoliday = false;
                        var duplicateNames = [];
                        var holidayNames = [];
                        // Track file indices yang libur agar di-skip saat upload
                        window.holidayFileIndices = [];

                        $.each(results, function(i, item) {
                            var statusBadge = '';
                            var rowClass = '';

                            if (item.is_holiday) {
                                // Hari libur/weekend: tampilkan status Libur saja
                                statusBadge =
                                    '<span class="badge bg-danger"><i class="fas fa-calendar-times me-1"></i>Libur</span>';
                                rowClass = 'table-danger';
                                hasHoliday = true;
                                holidayNames.push(item.tanggal_download + ' (' + item
                                    .holiday_info + ')');
                                window.holidayFileIndices.push(item.file_index);
                            } else if (item.status === 'ok') {
                                statusBadge =
                                    '<span class="badge bg-success"><i class="fas fa-check me-1"></i>OK</span>';
                                hasValid = true;
                            } else if (item.status === 'duplicate') {
                                statusBadge =
                                    '<span class="badge bg-warning text-dark"><i class="fas fa-exclamation-triangle me-1"></i>Duplikat</span>';
                                rowClass = 'table-warning';
                                hasDuplicate = true;
                                duplicateNames.push(item.tanggal_download);
                            } else {
                                statusBadge =
                                    '<span class="badge bg-danger"><i class="fas fa-times me-1"></i>Error</span>';
                                rowClass = 'table-danger';
                                hasError = true;
                            }

                            var formattedSaham = item.total_lembar_saham ? Number(item
                                    .total_lembar_saham).toLocaleString('id-ID') + ' lembar' :
                                '-';

                            var row = '<tr class="' + rowClass + '">' +
                                '<td class="text-xs">' + (i + 1) + '</td>' +
                                '<td class="text-xs">' + item.file_name + '</td>' +
                                '<td class="text-xs">' + (item.total_rows ? Number(item
                                        .total_rows).toLocaleString('id-ID') + ' investor' :
                                    '-') + '</td>' +
                                '<td class="text-xs">' + formattedSaham + '</td>' +
                                '<td class="text-xs">' + (item.tanggal_download || item
                                    .message || '-') + '</td>' +
                                '<td class="text-xs">' + (item.tanggal_investasi || '-') +
                                '</td>' +
                                '<td class="text-xs text-center">' + statusBadge + '</td>' +
                                '</tr>';
                            $tbody.append(row);
                        });

                        $('#csvPreviewArea').show();

                        // Show warning messages
                        var warningMessages = [];
                        if (hasDuplicate) {
                            warningMessages.push(
                                'File dengan tanggal duplikat akan <strong>menggantikan data lama</strong> saat upload: <strong>' +
                                duplicateNames.join(', ') + '</strong>');
                        }
                        if (hasHoliday) {
                            warningMessages.push(
                                '<i class="fas fa-calendar-times me-1 text-danger"></i><strong>Perhatian:</strong> Beberapa file memiliki tanggal download pada <strong>hari libur/weekend</strong>: <strong>' +
                                holidayNames.join(', ') +
                                '</strong>. File tersebut <strong>tidak akan disimpan</strong>.');
                        }

                        if (warningMessages.length > 0) {
                            $('#csvWarningMessage').html(warningMessages.join('<br><br>'));
                            $('#csvWarningArea').show();
                        } else {
                            $('#csvWarningArea').hide();
                        }

                        // Enable save if there are valid or duplicate files (duplicates will replace)
                        $('#btnSimpanCsv').prop('disabled', !(hasValid || hasDuplicate));
                    } else {
                        var msg = response.message || 'Terjadi kesalahan saat memeriksa file.';
                        Swal.fire({
                            title: 'Error',
                            text: msg,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    console.log('INI RESPONSE ASLI:');
                    console.log(xhr.responseText);

                    $('#modalLoading').modal('hide');
                    $btn.prop('disabled', false);

                    Swal.fire({
                        title: 'Error RAW',
                        html: '<pre style="text-align:left">' + xhr.responseText + '</pre>',
                        icon: 'error'
                    });
                }
            });
            }, 3000);
           
        });

        // Simpan CSV button click - upload file satu per satu dengan progress bar
        $('#btnSimpanCsv').on('click', function() {
            // Filter out holiday files sebelum upload
            var allFiles = accumulatedFiles.files;
            var holidayIndices = window.holidayFileIndices || [];
            var filteredDt = new DataTransfer();
            var skippedHolidayNames = [];
            for (var fi = 0; fi < allFiles.length; fi++) {
                if (holidayIndices.indexOf(fi) === -1) {
                    filteredDt.items.add(allFiles[fi]);
                } else {
                    skippedHolidayNames.push(allFiles[fi].name);
                }
            }
            var files = filteredDt.files;
            var $btn = $(this);
            var fileCount = files.length;

            if (fileCount === 0) {
                Swal.fire({
                    title: 'Tidak Ada File',
                    text: 'Semua file jatuh pada hari libur/weekend dan tidak bisa disimpan.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            var confirmText = 'Apakah Anda yakin ingin menyimpan ' + fileCount + ' file CSV?';
            if (skippedHolidayNames.length > 0) {
                confirmText += ' (' + skippedHolidayNames.length + ' file libur dilewati: ' + skippedHolidayNames
                    .join(', ') + ')';
            }

            Swal.fire({
                title: 'Konfirmasi Upload',
                text: confirmText,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    $btn.prop('disabled', true);
                    $('#csvSpinner').hide();
                    $('#csvProgressArea').show();
                    $('#csvProgressFiles').empty();
                    $('#csvProgressBar').css('width', '0%').attr('aria-valuenow', 0).text('0%');
                    $('#csvLoadingText').text('Mengupload ' + fileCount + ' file...');
                    $('#modalLoading').modal('show');

                    var successFiles = [];
                    var skippedFiles = [];
                    var totalInserted = 0;
                    var processed = 0;

                    function updateProgress(current, total, fileName, status) {
                        var pct = Math.round((current / total) * 100);
                        $('#csvProgressBar').css('width', pct + '%').attr('aria-valuenow', pct).text(pct +
                            '%');

                        var icon = '',
                            badgeClass = '';
                        if (status === 'success') {
                            icon = '<i class="fas fa-check-circle text-success me-1"></i>';
                            badgeClass = 'bg-success';
                        } else if (status === 'skipped') {
                            icon = '<i class="fas fa-forward text-warning me-1"></i>';
                            badgeClass = 'bg-warning text-dark';
                        } else if (status === 'error') {
                            icon = '<i class="fas fa-times-circle text-danger me-1"></i>';
                            badgeClass = 'bg-danger';
                        } else {
                            icon = '<i class="fas fa-spinner fa-spin text-primary me-1"></i>';
                            badgeClass = 'bg-info';
                        }

                        var statusLabel = status === 'uploading' ? 'Uploading...' : (status === 'skipped' ?
                            'Dilewati' : (status === 'error' ? 'Gagal' : 'Berhasil'));
                        var fileEntry = '<div class="d-flex align-items-center mb-1">' +
                            icon + '<span class="text-xs me-2">' + fileName + '</span>' +
                            '<span class="badge ' + badgeClass + ' text-xs">' + statusLabel + '</span>' +
                            '</div>';

                        // Update or append file entry
                        var entryId = 'progress-file-' + current;
                        if ($('#' + entryId).length) {
                            $('#' + entryId).html(fileEntry);
                        } else {
                            $('#csvProgressFiles').append('<div id="' + entryId + '">' + fileEntry +
                                '</div>');
                        }
                    }

                    function uploadFile(index) {
                        if (index >= fileCount) {
                            // All files done
                            // $('#modalLoading').modal('hide');
                            $('#modalUploadCsv').modal('hide');

                            var detailHtml = '<div class="text-start">';
                            if (successFiles.length > 0) {
                                detailHtml +=
                                    '<p class="mb-1 fw-bold text-success"><i class="fas fa-check-circle me-1"></i>Berhasil:</p><ul class="mb-2">';
                                successFiles.forEach(function(f) {
                                    detailHtml += '<li class="text-sm">' + f + '</li>';
                                });
                                detailHtml += '</ul>';
                            }
                            if (skippedFiles.length > 0) {
                                detailHtml +=
                                    '<p class="mb-1 fw-bold text-warning"><i class="fas fa-exclamation-triangle me-1"></i>Dilewati / Gagal:</p><ul class="mb-0">';
                                skippedFiles.forEach(function(f) {
                                    detailHtml += '<li class="text-sm">' + f + '</li>';
                                });
                                detailHtml += '</ul>';
                            }
                            detailHtml += '</div>';

                            Swal.fire({
                                title: 'Upload Selesai!',
                                html: '<p>' + successFiles.length + ' file berhasil, ' +
                                    totalInserted + ' data investor disimpan.</p>' + detailHtml,
                                icon: 'success',
                                confirmButtonColor: '#028284'
                            }).then(() => {
                                location.reload();
                            });
                            return;
                        }

                        var file = files[index];
                        var singleFormData = new FormData();
                        singleFormData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        singleFormData.append('file_csv[]', file);

                        updateProgress(index + 1, fileCount, file.name, 'uploading');
                        $('#csvLoadingText').text('Mengupload file ' + (index + 1) + ' dari ' + fileCount +
                            ': ' + file.name);

                        function pollUpload(uploadId) {
                            var statusUrl = '{{ route('trdrw.upload.status', ['id' => '__UPLOAD_ID__']) }}'
                                .replace('__UPLOAD_ID__', uploadId);

                            $.get(statusUrl).done(function(statusResponse) {
                                var upload = statusResponse.data;
                                var rowProgress = upload.total_rows > 0
                                    ? ' (' + upload.processed_rows.toLocaleString('id-ID') + '/' +
                                        upload.total_rows.toLocaleString('id-ID') + ' baris)'
                                    : '';
                                $('#csvLoadingText').text(upload.message + rowProgress);

                                if (upload.status === 'queued' || upload.status === 'processing') {
                                    setTimeout(function() { pollUpload(uploadId); }, 2000);
                                    return;
                                }

                                processed++;
                                if (upload.status === 'completed' && upload.result) {
                                    var result = upload.result;
                                    (result.success_files || []).forEach(function(f) { successFiles.push(f); });
                                    (result.skipped_files || []).forEach(function(f) { skippedFiles.push(f); });
                                    totalInserted += result.total_inserted || 0;
                                    updateProgress(index + 1, fileCount, file.name,
                                        (result.success_files || []).length ? 'success' : 'skipped');
                                } else {
                                    skippedFiles.push(file.name + ' (' + upload.message + ')');
                                    updateProgress(index + 1, fileCount, file.name, 'error');
                                }
                                uploadFile(index + 1);
                            }).fail(function() {
                                setTimeout(function() { pollUpload(uploadId); }, 3000);
                            });
                        }

                        $.ajax({
                            url: '{{ route('trdrw.upload') }}',
                            type: 'POST',
                            data: singleFormData,
                            processData: false,
                            contentType: false,
                            timeout: 120000,
                            success: function(response) {
                                if (response.status === 'accepted' && response.data.uploads.length) {
                                    $('#csvLoadingText').text('File masuk antrean dan menunggu diproses...');
                                    pollUpload(response.data.uploads[0].id);
                                } else {
                                    skippedFiles.push(file.name);
                                    updateProgress(index + 1, fileCount, file.name, 'error');
                                    uploadFile(index + 1);
                                }
                            },
                            error: function(xhr) {
                                processed++;
                                skippedFiles.push(file.name + ' (Error)');
                                updateProgress(index + 1, fileCount, file.name, 'error');
                                uploadFile(index + 1);
                            }
                        });
                    }

                    // Start uploading files one by one
                    uploadFile(0);
                }
            });
        });
    </script>
@endpush