@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    {{-- Filter Card --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <form method="GET" action="{{ URL::to($url_menu) }}" id="lapskr-filter-form">
                <div class="row gx-4 align-items-end">
                    <div class="col-auto">
                        <label class="form-control-label fw-bold">Tanggal</label>
                        <input type="date" class="form-control" name="tanggal"
                            value="{{ $tanggal_selected ?? '' }}">
                    </div>
                    <div class="col-auto">
                        <label class="form-control-label fw-bold">Kategori</label>
                        <select class="form-control" name="kategori_id" style="min-width: 200px;">
                            <option value="">-- Semua Kategori --</option>
                            @foreach ($kategori_options ?? [] as $opt)
                                <option value="{{ $opt->id }}" {{ ($kategori_selected ?? '') == $opt->id ? 'selected' : '' }}>
                                    {{ $opt->nama_kategori }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn mb-0 text-white" style="background-color: #fb6340;">
                            <i class="fas fa-search me-1"></i> Filter
                        </button>
                    </div>
                    <div class="col-auto">
                        <input type="hidden" name="view_mode" id="view-mode-input" value="{{ $view_mode ?? 'saham' }}" {{ ($view_mode ?? 'saham') == 'saham' ? 'disabled' : '' }}>
                        <button type="button" id="btn-toggle-view" class="btn mb-0 text-white" style="background-color: #11cdef;">
                            <i class="fas fa-exchange-alt me-1"></i>
                            <span id="btn-toggle-view-label">{{ ($view_mode ?? 'saham') == 'saham' ? 'Jumlah Investor' : 'Jumlah Saham' }}</span>
                        </button>
                    </div>
                    <div class="col-auto">
                        <a id="export-pdf-btn"
                           href="{{ !empty($encrypted_filter_query) ? route('lapskr.exportPdf', ['q' => $encrypted_filter_query]) : route('lapskr.exportPdf') }}"
                           class="btn mb-0 text-white" style="background-color: #d63031;">
                            <i class="fas fa-file-pdf me-1"></i> Export PDF
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container-fluid py-4" id="lapskr-content" data-view-mode="{{ $view_mode ?? 'saham' }}">
        {{-- Definisi Lebar Kolom agar seragam untuk semua tabel --}}
        @php
            $widthKode = "150px";
            $widthNama = "350px";
            $widthTgl  = "120px";
        @endphp

        {{-- Total Saham Keseluruhan --}}
        <div class="row mb-3">
            <div class="col-12 text-end">
                <span class="fw-bold text-dark">
                    <span id="total-keseluruhan-label">{{ ($view_mode ?? 'saham') == 'investor' ? 'TOTAL JUMLAH INVESTOR' : 'TOTAL JUMLAH KEPEMILIKAN SAHAM' }}</span> :
                    <span id="total-keseluruhan-value"
                        data-saham="{{ $total_saham_keseluruhan_modes['saham'] ?? 0 }}"
                        data-investor="{{ $total_saham_keseluruhan_modes['investor'] ?? 0 }}">{{ number_format($total_saham_keseluruhan ?? 0, 0, ',', '.') }}</span>
                </span>
            </div>
        </div>

        @if (!empty($sekuritas_report) || !empty($kategori_report))
            <br>
            <br>
            <div class="mb-4">
                <div class="d-flex align-items-center mb-3">
                    <hr class="flex-grow-1 m-0" style="border-color: #5e72e4; opacity: 0.5;">
                    <span class="px-3 fw-bold text-uppercase" style="font-size: 0.9rem; letter-spacing: 1px; color: #5e72e4;">
                        <i class="fas fa-university me-2"></i> Data Sekuritas / Pemegang Rekening
                    </span>
                    <hr class="flex-grow-1 m-0" style="border-color: #5e72e4; opacity: 0.5;">
                </div>

                <div class="card mb-3">
                    <div class="card-header p-3 d-flex justify-content-between align-items-center"
                        style="background-color: #FAFAFA;">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-uppercase fw-bold me-3">Pemegang Rekening</h6>
                            <span class="badge bg-gradient-primary" style="font-size: 0.7rem;">
                                <i class="fas fa-building me-1"></i>{{ count($sekuritas_report) }} Sekuritas
                            </span>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        @if (!empty($sekuritas_report))
                            <div class="table-responsive">
                                {{-- Table 1 --}}
                                <table class="table table-bordered table-hover align-items-center mb-0 report-table w-100" style="table-layout: fixed;">
                                    <colgroup>
                                        <col style="width: {{ $widthKode }};">
                                        <col style="width: {{ $widthNama }};">
                                        @foreach ($tanggal_columns as $date)
                                            <col style="width: {{ $widthTgl }};">
                                        @endforeach
                                    </colgroup>
                                    <thead class="bg-primary text-white">
                                        <tr>
                                            <th class="text-uppercase text-xxs font-weight-bolder"
                                                style="width: {{ $widthKode }};">Kode Pemegang Rekening</th>
                                            <th class="text-uppercase text-xxs font-weight-bolder"
                                                style="width: {{ $widthNama }};">Nama Pemegang Rekening</th>
                                            @foreach ($tanggal_columns as $date)
                                                <th class="text-uppercase text-xxs font-weight-bolder text-center"
                                                    style="width: {{ $widthTgl }};">
                                                    {{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($sekuritas_report as $row)
                                            <tr>
                                                <td class="text-xs">{{ $row['kode_pemegang_rekening'] }}</td>
                                                <td class="text-xs text-wrap">{{ $row['nama_pemegang_rekening'] }}</td>
                                                @foreach ($tanggal_columns as $date)
                                                    <td class="text-xs text-center">
                                                        @if ($row['dates'][$date]['value_saham'] !== null || $row['dates'][$date]['value_investor'] !== null)
                                                                <button type="button"
                                                                    class="holding-detail-link"
                                                                    data-scope="sekuritas"
                                                                    data-target-kategori=""
                                                                    data-sid=""
                                                                    data-kode="{{ $row['kode_pemegang_rekening'] }}"
                                                                    data-tanggal="{{ $date }}"
                                                                    data-tanggal-label="{{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}"
                                                                    title="Klik untuk lihat detail investor"
                                                                    style="background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit; cursor: pointer;">
                                                                    <span class="mode-value"
                                                                        data-saham="{{ $row['dates'][$date]['value_saham'] ?? 0 }}"
                                                                        data-investor="{{ $row['dates'][$date]['value_investor'] ?? 0 }}">{{ number_format($row['dates'][$date]['value'], 0, ',', '.') }}</span>
                                                                </button>
                                                            <i class="fas ms-1 mode-change {{ $row['dates'][$date]['change'] === 'up' ? 'fa-arrow-up text-success' : ($row['dates'][$date]['change'] === 'down' ? 'fa-arrow-down text-danger' : 'd-none') }}"
                                                                data-change-saham="{{ $row['dates'][$date]['change_saham'] ?? '' }}"
                                                                data-change-investor="{{ $row['dates'][$date]['change_investor'] ?? '' }}"></i>
                                                        @endif
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="fw-bold" style="background-color: #f8f9fa;">
                                            <td class="text-xs pe-4" colspan="2"><strong>Total</strong></td>
                                            @foreach ($tanggal_columns as $date)
                                                <td class="text-xs text-center mode-total-cell"
                                                    data-saham="{{ $sekuritas_totals[$date]['saham'] ?? 0 }}"
                                                    data-investor="{{ $sekuritas_totals[$date]['investor'] ?? 0 }}">
                                                    <strong>{{ number_format($sekuritas_totals[$date]['value'] ?? 0, 0, ',', '.') }}</strong>
                                                </td>
                                            @endforeach
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @else
                            <p class="text-sm text-muted mb-0">Tidak ada data sekuritas untuk ditampilkan.</p>
                        @endif
                    </div>
                </div>
            </div>

            @if (!empty($kategori_report))
                <div class="mb-4">
                    <div class="d-flex align-items-center mb-3">
                        <hr class="flex-grow-1 m-0" style="border-color: #2dce89; opacity: 0.5;">
                        <span class="px-3 fw-bold text-uppercase text-success" style="font-size: 0.9rem; letter-spacing: 1px;">
                            <i class="fas fa-list me-2"></i> Kategori Khusus (List Group)
                        </span>
                        <hr class="flex-grow-1 m-0" style="border-color: #2dce89; opacity: 0.5;">
                    </div>

                    @php $sectionIndex = 0; @endphp
                    @foreach ($kategori_report as $section)
                        @php $currentIdx = $sectionIndex++; @endphp
                        <div class="card mb-3 kategori-section">
                            {{-- Category Header --}}
                            <div class="card-header p-3 cursor-pointer d-flex justify-content-between align-items-center"
                                data-bs-toggle="collapse" data-bs-target="#section-{{ $currentIdx }}"
                                aria-expanded="false" aria-controls="section-{{ $currentIdx }}"
                                style="background-color: #FAFAFA; cursor: pointer;">
                                <div class="d-flex align-items-center">
                                    <h6 class="mb-0 text-uppercase fw-bold me-3">
                                        {{ $section['kategori']->nama_kategori }}
                                    </h6>
                                    <span class="badge bg-primary" style="font-size: 0.7rem;">
                                        <i class="fas fa-users me-1"></i>{{ $section['total_investor'] }} Investor
                                    </span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="fw-bold me-3">
                                        <span class="kategori-total-label">{{ ($view_mode ?? 'saham') == 'investor' ? 'TOTAL INVESTOR' : 'TOTAL SAHAM' }}</span> :
                                        <span class="kategori-total-value"
                                            data-saham="{{ $section['total_modes']['saham'] ?? 0 }}"
                                            data-investor="{{ $section['total_modes']['investor'] ?? 0 }}">{{ number_format($section['total_saham'], 0, ',', '.') }}</span>
                                    </span>
                                    <i class="fas fa-chevron-right collapse-icon"></i>
                                </div>
                            </div>

                            {{-- Category Body --}}
                            <div class="collapse show" id="section-{{ $currentIdx }}">
                                <div class="card-body p-3">
                                    @if (!empty($section['investors']))
                                        <p class="text-sm mb-2">
                                            <strong>Total Investor : {{ $section['total_investor'] }}</strong>
                                        </p>
                                        <div class="table-responsive">
                                            {{-- Table 2 --}}
                                            <table class="table table-bordered table-hover align-items-center mb-0 report-table w-100" style="table-layout: fixed;">
                                                <colgroup>
                                                    <col style="width: {{ $widthKode }};">
                                                    <col style="width: {{ $widthNama }};">
                                                    @foreach ($tanggal_columns as $date)
                                                        <col style="width: {{ $widthTgl }};">
                                                    @endforeach
                                                </colgroup>
                                                <thead class="bg-primary text-white">
                                                    <tr>
                                                        <th class="text-uppercase text-xxs font-weight-bolder"
                                                            style="width: {{ $widthKode }};">Kode Pemegang Rekening</th>
                                                        <th class="text-uppercase text-xxs font-weight-bolder"
                                                            style="width: {{ $widthNama }};">Nama Pemegang Rekening</th>
                                                        @foreach ($tanggal_columns as $date)
                                                            <th class="text-uppercase text-xxs font-weight-bolder text-center"
                                                                style="width: {{ $widthTgl }};">
                                                                {{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}
                                                            </th>
                                                        @endforeach
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($section['investors'] as $investor)
                                                        <tr>
                                                            <td class="text-xs">{{ $investor['kode_pemegang_rekening'] }}</td>
                                                            <td class="text-xs text-wrap">{{ $investor['nama_pemegang_rekening'] }}</td>
                                                            @foreach ($tanggal_columns as $date)
                                                                <td class="text-xs text-center">
                                                                    @if ($investor['dates'][$date]['value_saham'] !== null || $investor['dates'][$date]['value_investor'] !== null)
                                                                        <button type="button"
                                                                            class="holding-detail-link"
                                                                            data-scope="kategori"
                                                                            data-target-kategori="{{ $section['kategori']->id }}"
                                                                            data-sid="{{ $investor['nomor_sid'] ?? '' }}"
                                                                            data-kode="{{ $investor['kode_pemegang_rekening'] }}"
                                                                            data-tanggal="{{ $date }}"
                                                                            data-tanggal-label="{{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}"
                                                                            title="Klik untuk lihat detail investor"
                                                                            style="background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit; cursor: pointer;">
                                                                            <span class="mode-value"
                                                                                data-saham="{{ $investor['dates'][$date]['value_saham'] ?? 0 }}"
                                                                                data-investor="{{ $investor['dates'][$date]['value_investor'] ?? 0 }}">{{ number_format($investor['dates'][$date]['value'], 0, ',', '.') }}</span>
                                                                        </button>
                                                                        <i class="fas ms-1 mode-change {{ $investor['dates'][$date]['change'] === 'up' ? 'fa-arrow-up text-success' : ($investor['dates'][$date]['change'] === 'down' ? 'fa-arrow-down text-danger' : 'd-none') }}"
                                                                            data-change-saham="{{ $investor['dates'][$date]['change_saham'] ?? '' }}"
                                                                            data-change-investor="{{ $investor['dates'][$date]['change_investor'] ?? '' }}"></i>
                                                                    @endif
                                                                </td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr class="fw-bold" style="background-color: #f8f9fa;">
                                                        <td class="text-xs pe-4" colspan="2"><strong>Total</strong></td>
                                                        @foreach ($tanggal_columns as $date)
                                                            <td class="text-xs text-center mode-total-cell"
                                                                data-saham="{{ $section['totals'][$date]['saham'] ?? 0 }}"
                                                                data-investor="{{ $section['totals'][$date]['investor'] ?? 0 }}">
                                                                <strong>{{ number_format($section['totals'][$date]['value'] ?? 0, 0, ',', '.') }}</strong>
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    @else
                                        <p class="text-sm text-muted mb-0">Tidak ada data investor untuk kategori ini.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- GRAND TOTAL (Pemegang Rekening + Semua Kategori) --}}
            @if (!empty($grand_totals))
                <div class="card mb-3">
                    <div class="card-body p-3">
                        <div class="table-responsive">
                            {{-- Table 3 - Disamakan Strukturnya --}}
                            <table class="table table-bordered align-items-center mb-0 w-100" style="table-layout: fixed;">
                                <colgroup>
                                    <col style="width: {{ $widthKode }};">
                                    <col style="width: {{ $widthNama }};">
                                    @foreach ($tanggal_columns as $date)
                                        <col style="width: {{ $widthTgl }};">
                                    @endforeach
                                </colgroup>
                                <tfoot>
                                    <tr class="fw-bold" style="background-color: #e9ecef; ">
                                        {{-- Menggunakan colspan=2 agar posisinya sejajar dengan 'Kode' dan 'Nama' --}}
                                        <td class="text-xs text-uppercase pe-4" colspan="2"><strong>Grand Total</strong></td>
                                        @foreach ($tanggal_columns as $date)
                                            <td class="text-xs text-center mode-total-cell"
                                                data-saham="{{ $grand_totals[$date]['saham'] ?? 0 }}"
                                                data-investor="{{ $grand_totals[$date]['investor'] ?? 0 }}">
                                                <strong>{{ number_format($grand_totals[$date]['value'] ?? 0, 0, ',', '.') }}</strong>
                                            </td>
                                        @endforeach
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

        @else
            <div class="card">
                <div class="card-body p-4 text-center">
                    <p class="text-muted mb-0">Tidak ada data untuk ditampilkan. Silakan pilih tanggal dan filter.</p>
                </div>
            </div>
        @endif
    </div>

    <div class="modal fade" id="sekuritasDetailModal" tabindex="-1" aria-labelledby="sekuritasDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sekuritasDetailModalLabel">List Investor</h5>
                    <button type="button"
                        class="btn btn-link text-dark p-0 ms-auto"
                        data-bs-dismiss="modal"
                        data-dismiss="modal"
                        aria-label="Close"
                        style="text-decoration: none; border: 0; box-shadow: none;">
                        <span aria-hidden="true" style="font-size: 1.75rem; line-height: 1;">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-wrap gap-3 mb-3">
                        <span class="text-sm"><strong>Kode Pemegang Rekening:</strong> <span id="modal-kode-pemegang">-</span></span>
                        <span class="text-sm"><strong>Tanggal:</strong> <span id="modal-tanggal-pemegang">-</span></span>
                    </div>

                    <div id="modal-detail-loading" class="text-center py-4 d-none">
                        <span class="text-sm text-secondary">Memuat data investor...</span>
                    </div>

                    <div class="table-responsive">
                        <table id="sekuritas-detail-table" class="table table-bordered table-hover align-items-center mb-0">
                            <thead class="bg-info text-white">
                                <tr>
                                    <th class="text-uppercase text-xxs font-weight-bolder">No</th>
                                    <th class="text-uppercase text-xxs font-weight-bolder">Nama Investor</th>
                                    <th class="text-uppercase text-xxs font-weight-bolder">Nomor SID</th>
                                    <th class="text-uppercase text-xxs font-weight-bolder">Nama Pemegang Rekening</th>
                                    <th class="text-uppercase text-xxs font-weight-bolder">Kode Pemegang Rekening</th>
                                    <th class="text-uppercase text-xxs font-weight-bolder text-end">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody id="modal-detail-body">
                                <tr>
                                    <td colspan="6" class="text-center text-sm text-secondary">Klik nilai pada tabel untuk melihat detail investor.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            // Toggle chevron icon on collapse
            $('.kategori-section .card-header').on('click', function() {
                var icon = $(this).find('.collapse-icon');
                var target = $(this).data('bs-target');
                $(target).on('shown.bs.collapse', function() {
                    icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
                });
                $(target).on('hidden.bs.collapse', function() {
                    icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
                });
            });

            // Initialize DataTables on report tables
            $('.report-table').each(function() {
                $(this).DataTable({
                    autoWidth: false, // PENTING: Mencegah datatables merusak lebar tabel
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    ordering: false,
                    searching: true,
                    info: true,
                    language: {
                        search: "Cari:",
                        lengthMenu: "Tampilkan _MENU_ data",
                        info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(difilter dari _MAX_ total data)",
                        zeroRecords: "Data tidak ditemukan",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        }
                    }
                });
            });

            var detailModalEl = document.getElementById('sekuritasDetailModal');
            var detailModal = detailModalEl ? new bootstrap.Modal(detailModalEl) : null;
            var detailEndpoint = "{{ route('lapskr.detailInvestor') }}";
            var kategoriSelected = "{{ $kategori_selected ?? '' }}";
            var detailTableSelector = '#sekuritas-detail-table';
            var contentContainer = $('#lapskr-content');
            var currentMode = contentContainer.data('view-mode') || 'saham';

            function formatNumberId(value) {
                return new Intl.NumberFormat('id-ID').format(value || 0);
            }

            function setModeOnPage(mode) {
                currentMode = mode === 'investor' ? 'investor' : 'saham';

                contentContainer.attr('data-view-mode', currentMode);
                $('#view-mode-input').val(currentMode).prop('disabled', currentMode === 'saham');

                $('#btn-toggle-view-label').text(currentMode === 'saham' ? 'Jumlah Investor' : 'Jumlah Saham');
                $('#total-keseluruhan-label').text(currentMode === 'investor' ? 'TOTAL JUMLAH INVESTOR' : 'TOTAL JUMLAH KEPEMILIKAN SAHAM');

                $('.kategori-total-label').text(currentMode === 'investor' ? 'TOTAL INVESTOR' : 'TOTAL SAHAM');

                var totalKeseluruhan = $('#total-keseluruhan-value').data(currentMode);
                $('#total-keseluruhan-value').text(formatNumberId(totalKeseluruhan));

                // Grab all elements, including those detached by DataTables pagination
                var tables = $.fn.dataTable.tables(true);
                var allNodes = tables.length > 0 ? $(tables).DataTable().cells().nodes().to$() : $();
                var allContainers = $().add(document).add(allNodes);

                allContainers.find('.mode-value').add('.mode-value').each(function() {
                    var value = $(this).data(currentMode);
                    $(this).text(formatNumberId(value));
                });

                allContainers.find('.kategori-total-value').add('.kategori-total-value').each(function() {
                    var value = $(this).data(currentMode);
                    $(this).text(formatNumberId(value));
                });

                allContainers.find('.mode-total-cell').add('.mode-total-cell').each(function() {
                    var value = $(this).data(currentMode);
                    $(this).find('strong').text(formatNumberId(value));
                });

                allContainers.find('.mode-change').add('.mode-change').each(function() {
                    var change = $(this).data(currentMode === 'investor' ? 'change-investor' : 'change-saham');
                    $(this).removeClass('fa-arrow-up fa-arrow-down text-success text-danger d-none');

                    if (change === 'up') {
                        $(this).addClass('fa-arrow-up text-success');
                    } else if (change === 'down') {
                        $(this).addClass('fa-arrow-down text-danger');
                    } else {
                        $(this).addClass('d-none');
                    }
                });

                var exportHref = $('#export-pdf-btn').attr('href');
                if (exportHref) {
                    var url = new URL(exportHref, window.location.origin);
                    if (currentMode === 'investor') {
                        url.searchParams.set('view_mode', currentMode);
                    } else {
                        url.searchParams.delete('view_mode');
                    }
                    $('#export-pdf-btn').attr('href', url.pathname + url.search);
                }

                $('.report-table').each(function() {
                    if ($.fn.DataTable.isDataTable(this)) {
                        $(this).DataTable().rows().invalidate('dom').draw(false);
                    }
                });
            }

            $('#btn-toggle-view').on('click', function() {
                var nextMode = currentMode === 'saham' ? 'investor' : 'saham';
                setModeOnPage(nextMode);
            });

            setModeOnPage(currentMode);

            function initDetailDataTable() {
                return $(detailTableSelector).DataTable({
                    autoWidth: false,
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    ordering: false,
                    searching: true,
                    info: true,
                    language: {
                        search: "Cari:",
                        lengthMenu: "Tampilkan _MENU_ data",
                        info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(difilter dari _MAX_ total data)",
                        emptyTable: "Tidak ada detail investor untuk ditampilkan",
                        zeroRecords: "Data tidak ditemukan",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        }
                    }
                });
            }

            function rebuildDetailDataTable() {
                if ($.fn.DataTable.isDataTable(detailTableSelector)) {
                    $(detailTableSelector).DataTable().destroy();
                }
                initDetailDataTable();
            }

            $(document).on('click', '.holding-detail-link', function() {
                if (!detailModal) {
                    return;
                }

                var scope = $(this).data('scope') || 'sekuritas';
                var targetKategoriId = $(this).data('target-kategori') || '';
                var nomorSid = $(this).data('sid') || '';
                var kode = $(this).data('kode');
                var tanggal = $(this).data('tanggal');
                var tanggalLabel = $(this).data('tanggal-label');

                $('#sekuritasDetailModalLabel').text('List Investor');
                $('#modal-kode-pemegang').text(kode || '-');
                $('#modal-tanggal-pemegang').text(tanggalLabel || '-');

                if ($.fn.DataTable.isDataTable(detailTableSelector)) {
                    $(detailTableSelector).DataTable().destroy();
                }
                $('#modal-detail-body').html('');
                $('#modal-detail-loading').removeClass('d-none');
                detailModal.show();

                $.ajax({
                    url: detailEndpoint,
                    method: 'GET',
                    dataType: 'json',
                    data: {
                        scope: scope,
                        kode_pemegang_rekening: kode,
                        tanggal: tanggal,
                        kategori_id: kategoriSelected,
                        target_kategori_id: targetKategoriId,
                        nomor_sid: nomorSid
                    }
                }).done(function(response) {
                    $('#modal-detail-loading').addClass('d-none');

                    var rows = response && response.rows ? response.rows : [];
                    if (!rows.length) {
                        $('#modal-detail-body').html(
                            '<tr><td colspan="6" class="text-center text-sm text-secondary">Tidak ada detail investor untuk kode dan tanggal ini.</td></tr>'
                        );
                        rebuildDetailDataTable();
                        return;
                    }

                    var html = '';
                    $.each(rows, function(index, row) {
                        html += '<tr>' +
                            '<td class="text-xs">' + (index + 1) + '</td>' +
                            '<td class="text-xs">' + (row.nama_investor || '-') + '</td>' +
                            '<td class="text-xs">' + (row.nomor_sid || '-') + '</td>' +
                            '<td class="text-xs">' + (row.nama_pemegang_rekening || '-') + '</td>' +
                            '<td class="text-xs">' + (row.kode_pemegang_rekening || '-') + '</td>' +
                            '<td class="text-xs text-end fw-bold">' + formatNumberId(row.jumlah) + '</td>' +
                            '</tr>';
                    });
                    $('#modal-detail-body').html(html);
                    rebuildDetailDataTable();
                }).fail(function() {
                    $('#modal-detail-loading').addClass('d-none');
                    $('#modal-detail-body').html(
                        '<tr><td colspan="6" class="text-center text-sm text-danger">Gagal memuat detail investor. Coba lagi.</td></tr>'
                    );
                    rebuildDetailDataTable();
                });
            });
        });
    </script>
@endpush