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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        .analysis-kpi {
            min-height: 125px;
            border-left: 4px solid #5e72e4;
        }

        .analysis-value {
            font-size: 1.35rem;
            font-weight: 700;
            color: #344767;
        }

        .analysis-chart {
            min-height: 350px;
        }

        .analysis-table th {
            white-space: nowrap;
        }

        .delta-up {
            color: #2dce89;
        }

        .delta-down {
            color: #f5365c;
        }

        .kpi-detail-link,
        .security-kpi-link {
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .kpi-detail-link:hover,
        .kpi-detail-link:focus,
        .security-kpi-link:hover,
        .security-kpi-link:focus {
            transform: translateY(-2px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
            outline: 2px solid rgba(94, 114, 228, .25);
        }
    </style>

    <div class="container-fluid py-4">
        <div class="card shadow-sm mb-4">
            <div class="card-body p-3">
                <div class="d-flex flex-wrap justify-content-between align-items-end gap-3">
                    <div>
                        <h5 class="mb-1">Analisis Perubahan Pemegang Saham</h5>
                        <p class="text-sm text-muted mb-0">Bandingkan dua snapshot untuk menemukan perubahan yang perlu
                            ditindaklanjuti.</p>
                    </div>
                    <form method="GET" action="{{ url($url_menu) }}" class="d-flex flex-wrap align-items-end gap-2">
                        <div>
                            <label class="form-control-label" for="period_type">Tipe periode</label>
                            <select id="period_type" name="period_type" class="form-control">
                                <option value="harian" {{ ($period_type ?? 'harian') === 'harian' ? 'selected' : '' }}>
                                    Harian</option>
                                <option value="bulanan" {{ ($period_type ?? 'harian') === 'bulanan' ? 'selected' : '' }}>
                                    Bulanan</option>
                                <option value="tahunan" {{ ($period_type ?? 'harian') === 'tahunan' ? 'selected' : '' }}>
                                    Tahunan</option>
                            </select>
                        </div>
                        <div id="dailyDateRange"
                            class="d-flex flex-wrap align-items-end gap-2 {{ $period_type !== 'harian' ? 'd-none' : '' }}">
                            <div>
                                <label class="form-control-label" for="tanggal_awal">Tanggal awal</label>
                                <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control"
                                    value="{{ $filter_start_date }}">
                            </div>
                            <div>
                                <label class="form-control-label" for="tanggal_akhir">Tanggal akhir</label>
                                <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control"
                                    value="{{ $filter_end_date }}">
                            </div>
                        </div>
                        <div id="monthlyRange"
                            class="d-flex flex-wrap align-items-end gap-2 {{ $period_type !== 'bulanan' ? 'd-none' : '' }}">
                            <div>
                                <label class="form-control-label" for="bulan_awal">Bulan awal</label>
                                <input type="month" id="bulan_awal" name="bulan_awal" class="form-control"
                                    value="{{ $filter_start_month }}">
                            </div>
                            <div>
                                <label class="form-control-label" for="bulan_akhir">Bulan akhir</label>
                                <input type="month" id="bulan_akhir" name="bulan_akhir" class="form-control"
                                    value="{{ $filter_end_month }}">
                            </div>
                        </div>
                        <div id="yearlyRange"
                            class="d-flex flex-wrap align-items-end gap-2 {{ $period_type !== 'tahunan' ? 'd-none' : '' }}">
                            <div>
                                <label class="form-control-label" for="tahun_awal">Tahun awal</label>
                                <select id="tahun_awal" name="tahun_awal" class="form-control">
                                    @foreach ($available_period_years as $year)
                                        <option value="{{ $year }}" {{ $filter_start_year === $year ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="form-control-label" for="tahun_akhir">Tahun akhir</label>
                                <select id="tahun_akhir" name="tahun_akhir" class="form-control">
                                    @foreach ($available_period_years as $year)
                                        <option value="{{ $year }}" {{ $filter_end_year === $year ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-primary mb-0"><i class="fas fa-code-compare me-1"></i>Tampilkan</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-body p-2">
                <ul class="nav nav-tabs mb-0" id="shlintTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="summary-tab" data-bs-toggle="tab"
                            data-bs-target="#summaryTab" type="button" role="tab" aria-controls="summaryTab"
                            aria-selected="true">Per Investor</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="security-tab" data-bs-toggle="tab"
                            data-bs-target="#securityTab" type="button" role="tab" aria-controls="securityTab"
                            aria-selected="false">Per Sekuritas</button>
                    </li>
                    
                </ul>
            </div>
        </div>

        @if (count($period_alerts))
            <div class="alert alert-warning shadow-sm" role="alert">
                <div class="d-flex align-items-start gap-2">
                    <i class="fas fa-triangle-exclamation mt-1"></i>
                    <div>
                        <strong>Perbandingan tidak dapat ditampilkan.</strong>
                        <ul class="mb-0 ps-3">
                            @foreach ($period_alerts as $message)
                                <li>{{ $message }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <div class="tab-content" id="shlintTabContent">
            <div class="tab-pane fade show active" id="summaryTab" role="tabpanel" aria-labelledby="summary-tab">
                @if (empty($period_labels))
                    <div class="alert alert-info">Tidak ada data histori untuk periode terpilih.</div>
                @endif
                <div class="row g-3 mb-4">
                    @php
                        $isHolderComparison = in_array($period_type, ['harian', 'bulanan', 'tahunan'], true);
                        $kpiCards =
                            $isHolderComparison
                                ? [
                                    [
                                        'Total Pemegang Saham Awal',
                                        $summary['investors_before'],
                                        $period_start_label ?? '-',
                                        'fa-users',
                                        '',
                                    ],
                                    [
                                        'Total Pemegang Saham',
                                        $summary['investors_after'],
                                        'Klik untuk melihat seluruh pemegang',
                                        'fa-users',
                                        '',
                                        'Total',
                                    ],
                                    [
                                        'Bertambah',
                                        $summary['increased_count'],
                                        'Klik untuk melihat detail pemegang',
                                        'fa-arrow-trend-up',
                                        'delta-up',
                                        'Bertambah',
                                    ],
                                    [
                                        'Berkurang',
                                        $summary['decreased_count'],
                                        'Klik untuk melihat detail pemegang',
                                        'fa-arrow-trend-down',
                                        'delta-down',
                                        'Berkurang',
                                    ],
                                    [
                                        'Baru',
                                        $summary['new_count'],
                                        'Klik untuk melihat detail pemegang',
                                        'fa-user-plus',
                                        'delta-up',
                                        'Baru',
                                    ],
                                    [
                                        'Keluar',
                                        $summary['exited_count'],
                                        'Klik untuk melihat detail pemegang',
                                        'fa-user-minus',
                                        'delta-down',
                                        'Keluar',
                                    ],
                                ]
                                : [
                                    [
                                        'Saham Awal Periode',
                                        $summary['shares_before'],
                                        $period_start_label ?? '-',
                                        'fa-hourglass-start',
                                        '',
                                    ],
                                    [
                                        'Saham Akhir Periode',
                                        $summary['shares_after'],
                                        $period_end_label ?? '-',
                                        'fa-hourglass-end',
                                        '',
                                    ],
                                    [
                                        'Total Kenaikan Kepemilikan',
                                        $summary['total_accumulation'],
                                        number_format($summary['changed_investors'], 0, ',', '.') .
                                        ' investor mengalami perubahan',
                                        'fa-arrow-trend-up',
                                        'delta-up',
                                    ],
                                    [
                                        'Total Penurunan Kepemilikan',
                                        $summary['total_distribution'],
                                        'Akumulasi seluruh perubahan negatif',
                                        'fa-arrow-trend-down',
                                        'delta-down',
                                    ],
                                ];
                    @endphp
                    @foreach ($kpiCards as $card)
                        <div class="{{ $isHolderComparison ? 'col-xl col-md-4' : 'col-xl-3 col-md-6' }}">
                            <div class="card analysis-kpi shadow-sm h-100 {{ isset($card[5]) ? 'kpi-detail-link' : '' }}"
                                @if (isset($card[5])) data-detail-status="{{ $card[5] }}" role="button" tabindex="0"
                                    aria-label="Lihat detail pemegang dengan status {{ $card[5] }}" @endif>
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <p class="text-xs text-uppercase fw-bold text-muted mb-2">{{ $card[0] }}
                                            </p>
                                            <div class="analysis-value {{ $card[4] }}">
                                                {{ number_format($card[1], 0, ',', '.') }}</div>
                                            <small class="text-muted">{{ $card[2] }}</small>
                                        </div><i class="fas {{ $card[3] }} fa-2x text-primary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="card shadow-sm mb-4">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                            <div>
                                <h6 class="mb-1">
                                    {{ $isHolderComparison ? 'Tren Jumlah Pemegang Saham' : 'Pergerakan Total Saham Beredar' }}
                                </h6>
                                <p class="text-sm text-muted mb-1">
                                    @if (($period_type ?? 'bulanan') === 'harian')
                                        Menampilkan jumlah pemegang pada setiap snapshot dalam rentang tanggal.
                                    @elseif(($period_type ?? 'bulanan') === 'bulanan')
                                        Menampilkan jumlah pemegang dari snapshot terakhir setiap bulan.
                                    @else
                                        Menampilkan jumlah pemegang dari snapshot terakhir setiap tahun.
                                    @endif
                                </p>
                                <div class="text-sm text-muted">Periode: {{ $period_start_label ?? '-' }} →
                                    {{ $period_end_label ?? '-' }}</div>
                            </div>
                            <div class="badge bg-secondary text-uppercase py-2 px-3">
                                {{ ucfirst($period_type ?? 'bulanan') }}</div>
                        </div>
                        <div class="mt-3" style="min-height: 320px;">
                            <div id="periodShareChart" style="width: 100%; height: 320px;"></div>
                        </div>
                    </div>
                </div>

                @if ($isHolderComparison)
                    <div class="card shadow-sm mb-4">
                        <div class="card-header pb-0 d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div>
                                <h6 class="mb-1">Race Kepemilikan Pemegang Saham</h6>
                                <small class="text-muted">Pergerakan Top 10 pemegang saham per
                                    {{ ['harian' => 'snapshot harian', 'bulanan' => 'bulan', 'tahunan' => 'tahun'][$period_type] }}.
                                </small>
                            </div>
                            @if (count($daily_race_frames))
                            <div class="d-flex align-items-center gap-2">
                                <strong id="dailyRaceLabel">-</strong>
                                <button type="button" id="dailyRacePlay" class="btn btn-sm btn-primary mb-0">
                                    <i class="fas fa-play me-1"></i>Putar
                                </button>
                            </div>
                            @endif
                        </div>
                        <div class="card-body">
                            @if (count($daily_race_frames))
                            <div id="dailyShareholderRaceChart" style="height:460px"></div>
                            <input id="dailyRaceSlider" type="range" min="0"
                                max="{{ count($daily_race_frames) - 1 }}" value="0" class="form-range mt-3">
                            @else
                                <div class="d-flex align-items-center justify-content-center text-muted" style="height:320px">
                                    Data race tidak tersedia untuk periode yang dipilih.
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @if ($isHolderComparison)
                    <div class="card shadow-sm mb-4" id="detailTotal">
                        <div class="card-header pb-0 d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div>
                                <h6 class="mb-1">Detail Total Pemegang Saham</h6>
                                <small class="text-muted">Posisi kepemilikan pada {{ $period_end_label ?? '-' }}.</small>
                            </div>
                            <span class="badge bg-primary">{{ count($current_holders) }} pemegang</span>
                        </div>
                        <div class="card-body px-0 py-3 px-3">
                            <div class="table-responsive">
                                <table class="table table-sm table-hover table-striped align-middle analysis-table holder-detail-table mb-0"
                                    style="width:100%">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>Peringkat</th>
                                            <th>Investor</th>
                                            <th>SID</th>
                                            <th>Sekuritas</th>
                                            <th class="text-end">Jumlah Saham</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($current_holders as $row)
                                            <tr>
                                                <td data-order="{{ $row['after_rank'] ?? 0 }}">{{ $row['after_rank'] ?? '-' }}</td>
                                                <td>{{ $row['name'] }}</td>
                                                <td>{{ $row['sid'] }}</td>
                                                <td>{{ $row['security_code'] }}</td>
                                                <td data-order="{{ $row['after'] }}" class="text-end fw-bold">
                                                    {{ number_format($row['after'], 0, ',', '.') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    @php
                        $detailSections = [
                            ['Bertambah', 'detailBertambah', $accumulation, 'delta-up'],
                            ['Berkurang', 'detailBerkurang', $distribution, 'delta-down'],
                            ['Baru', 'detailBaru', $new_investors, 'delta-up'],
                            ['Keluar', 'detailKeluar', $exited_investors, 'delta-down'],
                        ];
                    @endphp
                    <div class="row g-4 mb-4">
                        @foreach ($detailSections as [$title, $id, $rows, $colorClass])
                            <div class="col-xl-6" id="{{ $id }}">
                                <div class="card shadow-sm h-100 p-3">
                                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">Detail Investor {{ $title }}</h6>
                                        <span class="badge bg-secondary">{{ count($rows) }}</span>
                                    </div>
                                    <div class="card-body px-0">
                                        <div class="table-responsive">
                                            <table class="table table-sm table-hover table-striped align-middle analysis-table holder-detail-table mb-0"
                                                style="width:100%">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th>Investor</th>
                                                        <th>SID</th>
                                                        <th class="text-end">Awal</th>
                                                        <th class="text-end">Akhir</th>
                                                        <th class="text-end">Selisih</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($rows as $row)
                                                        <tr>
                                                            <td>{{ $row['name'] }}</td>
                                                            <td>{{ $row['sid'] }}</td>
                                                            <td class="text-end">{{ number_format($row['before'], 0, ',', '.') }}</td>
                                                            <td class="text-end">{{ number_format($row['after'], 0, ',', '.') }}</td>
                                                            <td data-order="{{ abs($row['change']) }}"
                                                                class="text-end fw-bold {{ $colorClass }}">
                                                                {{ $row['change'] > 0 ? '+' : '' }}{{ number_format($row['change'], 0, ',', '.') }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="card shadow-sm p-2 mb-4">
                        <div class="card-header"><h6>Audit Seluruh Perubahan Investor</h6></div>
                        <div class="card-body px-0">
                            <div class="table-responsive" style="max-height:600px">
                                <table id="auditTable" class="table table-sm table-hover table-striped align-middle analysis-table mb-0" style="width:100%">
                                    <thead><tr><th>Investor</th><th>SID</th><th class="text-end">Awal</th><th class="text-end">Akhir</th><th class="text-end">Selisih</th><th class="text-center">Rank Awal</th><th class="text-center">Rank Akhir</th></tr></thead>
                                    <tbody>
                                        @foreach ($all_movements as $row)
                                            <tr><td>{{ $row['name'] }}</td><td>{{ $row['sid'] }}</td><td class="text-end">{{ number_format($row['before'], 0, ',', '.') }}</td><td class="text-end">{{ number_format($row['after'], 0, ',', '.') }}</td><td data-order="{{ $row['change'] }}" class="text-end {{ $row['change'] >= 0 ? 'delta-up' : 'delta-down' }}">{{ $row['change'] > 0 ? '+' : '' }}{{ number_format($row['change'], 0, ',', '.') }}</td><td class="text-center">{{ $row['before_rank'] ?? '-' }}</td><td class="text-center">{{ $row['after_rank'] ?? '-' }}</td></tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif

            </div>

            <div class="tab-pane fade" id="securityTab" role="tabpanel" aria-labelledby="security-tab">
                @php
                    $securityCards = [
                        ['Total Sekuritas Awal', $security_summary['investors_before'], $period_start_label ?? '-', 'fa-building', ''],
                        ['Total Sekuritas Akhir', $security_summary['investors_after'], $period_end_label ?? '-', 'fa-building-columns', ''],
                        ['Bertambah', $security_summary['increased_count'], 'Klik untuk melihat detail', 'fa-arrow-trend-up', 'delta-up', 'Bertambah'],
                        ['Berkurang', $security_summary['decreased_count'], 'Klik untuk melihat detail', 'fa-arrow-trend-down', 'delta-down', 'Berkurang'],
                        ['Baru', $security_summary['new_count'], 'Klik untuk melihat detail', 'fa-circle-plus', 'delta-up', 'Baru'],
                        ['Keluar', $security_summary['exited_count'], 'Klik untuk melihat detail', 'fa-circle-minus', 'delta-down', 'Keluar'],
                    ];
                @endphp
                <div class="row g-3 mb-4">
                    @foreach ($securityCards as $card)
                        <div class="col-xl-2 col-md-4">
                            <div class="card analysis-kpi shadow-sm h-100 {{ isset($card[5]) ? 'security-kpi-link' : '' }}"
                                @if (isset($card[5])) data-security-status="{{ $card[5] }}" role="button" tabindex="0" @endif>
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between gap-2">
                                        <div>
                                            <p class="text-xs text-uppercase fw-bold text-muted mb-2">{{ $card[0] }}</p>
                                            <div class="analysis-value {{ $card[4] }}">{{ number_format($card[1], 0, ',', '.') }}</div>
                                            <small class="text-muted">{{ $card[2] }}</small>
                                        </div>
                                        <i class="fas {{ $card[3] }} fa-2x text-primary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="card shadow-sm mb-4">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                            <div>
                                <h6 class="mb-1">Tren Jumlah Sekuritas</h6>
                                <p class="text-sm text-muted mb-1">Jumlah sekuritas aktif pada setiap snapshot periode terpilih.</p>
                                <div class="text-sm text-muted">Periode: {{ $period_start_label ?? '-' }} → {{ $period_end_label ?? '-' }}</div>
                            </div>
                            <div class="badge bg-secondary text-uppercase py-2 px-3">{{ ucfirst($period_type) }}</div>
                        </div>
                        <div id="securityTrendChart" style="width:100%;height:320px" class="mt-3"></div>
                    </div>
                </div>

                @if ($isHolderComparison)
                    <div class="card shadow-sm mb-4">
                        <div class="card-header pb-0 d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div>
                                <h6 class="mb-1">Race Kepemilikan per Sekuritas</h6>
                                <small class="text-muted">Pergerakan Top 10 sekuritas berdasarkan total kepemilikan saham.</small>
                            </div>
                            @if (count($security_race_frames))
                            <div class="d-flex align-items-center gap-2">
                                <strong id="securityRaceLabel">-</strong>
                                <button type="button" id="securityRacePlay" class="btn btn-sm btn-primary mb-0">
                                    <i class="fas fa-play me-1"></i>Putar
                                </button>
                            </div>
                            @endif
                        </div>
                        <div class="card-body">
                            @if (count($security_race_frames))
                            <div id="securityRaceChart" style="height:460px"></div>
                            <input id="securityRaceSlider" type="range" min="0"
                                max="{{ count($security_race_frames) - 1 }}" value="0" class="form-range mt-3">
                            @else
                                <div class="d-flex align-items-center justify-content-center text-muted" style="height:320px">
                                    Data race tidak tersedia untuk periode yang dipilih.
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                <div class="card shadow-sm mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">Detail Perubahan per Sekuritas</h6>
                            <small class="text-muted">Agregasi kepemilikan berdasarkan kode pemegang rekening.</small>
                        </div>
                        <span class="badge bg-primary">{{ count($security_holder_movements) }} sekuritas</span>
                    </div>
                    <div class="card-body px-0 py-3 px-3">
                        <div class="table-responsive">
                            <table id="securityDetailTable"
                                class="table table-sm table-hover table-striped align-middle analysis-table mb-0"
                                style="width:100%">
                                <thead class="thead-light" style="background-color:#00b7bd4f">
                                    <tr>
                                        <th>Sekuritas</th>
                                        <th>Kode</th>
                                        <th class="text-end">Awal</th>
                                        <th class="text-end">Akhir</th>
                                        <th class="text-end">Selisih</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($security_holder_movements as $row)
                                        <tr>
                                            <td>{{ $row['name'] }}</td>
                                            <td>{{ $row['code'] }}</td>
                                            <td class="text-end">{{ number_format($row['before'], 0, ',', '.') }}</td>
                                            <td class="text-end">{{ number_format($row['after'], 0, ',', '.') }}</td>
                                            <td data-order="{{ abs($row['change']) }}"
                                                class="text-end fw-bold {{ $row['change'] >= 0 ? 'delta-up' : 'delta-down' }}">
                                                {{ $row['change'] > 0 ? '+' : '' }}{{ number_format($row['change'], 0, ',', '.') }}
                                            </td>
                                            <td>{{ $row['status'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                @php
                    $securityDetailSections = collect(['Bertambah', 'Berkurang', 'Baru', 'Keluar'])
                        ->map(fn($status) => [
                            'status' => $status,
                            'rows' => $security_holder_movements
                                ->where('status', $status)
                                ->sortByDesc(fn($row) => abs($row['change']))
                                ->values(),
                            'color' => in_array($status, ['Bertambah', 'Baru'], true) ? 'delta-up' : 'delta-down',
                        ]);
                @endphp
                <div class="row g-4 mb-4">
                    @foreach ($securityDetailSections as $section)
                        <div class="col-xl-6" id="securityDetail{{ $section['status'] }}">
                            <div class="card shadow-sm h-100">
                                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">Sekuritas {{ $section['status'] }}</h6>
                                    <span class="badge bg-secondary">{{ count($section['rows']) }}</span>
                                </div>
                                <div class="card-body px-0 py-3 px-3">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover table-striped align-middle analysis-table security-status-table mb-0"
                                            style="width:100%">
                                            <thead class="thead-light" style="background-color:#00b7bd4f">
                                                <tr>
                                                    <th>Sekuritas</th>
                                                    <th>Kode</th>
                                                    <th class="text-end">Awal</th>
                                                    <th class="text-end">Akhir</th>
                                                    <th class="text-end">Selisih</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($section['rows'] as $row)
                                                    <tr>
                                                        <td>{{ $row['name'] }}</td>
                                                        <td>{{ $row['code'] }}</td>
                                                        <td class="text-end">{{ number_format($row['before'], 0, ',', '.') }}</td>
                                                        <td class="text-end">{{ number_format($row['after'], 0, ',', '.') }}</td>
                                                        <td data-order="{{ abs($row['change']) }}"
                                                            class="text-end fw-bold {{ $section['color'] }}">
                                                            {{ $row['change'] > 0 ? '+' : '' }}{{ number_format($row['change'], 0, ',', '.') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="tab-pane fade" id="raceTab" role="tabpanel" aria-labelledby="race-tab">
                <div class="card shadow-sm mb-4">
                    <div class="card-header pb-0 d-flex flex-column flex-md-row justify-content-between align-items-start">
                        <div>
                            <h6>Race Chart Investasi</h6>
                            <small class="text-muted">Data race chart diambil dari logika menu Skrcht (per
                                {{ $race_type_label }}).</small>
                        </div>
                        <a href="{{ url('skrcht') }}" class="btn btn-sm btn-outline-primary mt-3 mt-md-0">Buka Race
                            Chart</a>
                    </div>
                    <div class="card-body">
                        <form method="get" class="row g-3 mb-4">
                            <div class="col-md-3">
                                <label class="form-label">Jenis Race</label>
                                <select name="race_type" class="form-select">
                                    <option value="daily" {{ $race_type_selected === 'daily' ? 'selected' : '' }}>Harian
                                    </option>
                                    <option value="monthly" {{ $race_type_selected === 'monthly' ? 'selected' : '' }}>
                                        Bulanan</option>
                                    <option value="yearly" {{ $race_type_selected === 'yearly' ? 'selected' : '' }}>
                                        Tahunan</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tahun</label>
                                <select name="race_year" class="form-select">
                                    <option value="">Semua</option>
                                    @foreach ($race_available_years as $year)
                                        <option value="{{ $year }}"
                                            {{ $race_year_selected === $year ? 'selected' : '' }}>{{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Top</label>
                                <select name="race_limit" class="form-select">
                                    @foreach ([5, 10, 15, 20] as $limit)
                                        <option value="{{ $limit }}"
                                            {{ $race_limit === $limit ? 'selected' : '' }}>Top {{ $limit }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 d-grid">
                                <button type="submit" class="btn btn-primary">Muat Ulang Race</button>
                            </div>
                            <input type="hidden" name="period_type" value="{{ $period_type }}">
                            <input type="hidden" name="tanggal_awal" value="{{ request()->string('tanggal_awal') }}">
                            <input type="hidden" name="tanggal_akhir" value="{{ request()->string('tanggal_akhir') }}">
                            <input type="hidden" name="bulan_awal" value="{{ $filter_start_month }}">
                            <input type="hidden" name="bulan_akhir" value="{{ $filter_end_month }}">
                            <input type="hidden" name="tahun_awal" value="{{ $filter_start_year }}">
                            <input type="hidden" name="tahun_akhir" value="{{ $filter_end_year }}">
                        </form>

                        @if (count($race_frames))
                            <div class="row g-4">
                                <div class="col-xl-8">
                                    <div class="card card-body mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <strong id="raceFrameLabel">-</strong>
                                                <div class="text-muted" id="raceFrameDate"></div>
                                            </div>
                                            <div class="text-end">
                                                <div class="small text-muted">Total Saham</div>
                                                <div id="raceFrameTotal" class="h5 mb-0">-</div>
                                            </div>
                                        </div>
                                        <div id="raceChart" style="min-height:420px"></div>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <button type="button" id="racePrev"
                                                class="btn btn-sm btn-outline-secondary">Sebelumnya</button>
                                            <input id="raceFrameSlider" type="range" min="0"
                                                max="{{ count($race_frames) - 1 }}" value="0"
                                                class="form-range flex-grow-1 mx-2" />
                                            <button type="button" id="raceNext"
                                                class="btn btn-sm btn-outline-secondary">Selanjutnya</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="card card-body h-100">
                                        <h6 class="mb-3">Top {{ $race_limit }} Saat Ini</h6>
                                        <div class="table-responsive" style="max-height:500px">
                                            <table class="table table-sm table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>Rank</th>
                                                        <th>Investor</th>
                                                        <th class="text-end">Saham</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="raceTopTableBody"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="alert alert-secondary mb-0">
                                Tidak ada data race chart untuk parameter yang dipilih.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>


    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
        $(function() {
            const periodTypeInput = $('#period_type');
            const dailyDateRange = $('#dailyDateRange');
            const monthlyRange = $('#monthlyRange');
            const yearlyRange = $('#yearlyRange');

            function togglePeriodRange() {
                const isDaily = periodTypeInput.val() === 'harian';
                const isMonthly = periodTypeInput.val() === 'bulanan';
                const isYearly = periodTypeInput.val() === 'tahunan';
                dailyDateRange.toggleClass('d-none', !isDaily);
                monthlyRange.toggleClass('d-none', !isMonthly);
                yearlyRange.toggleClass('d-none', !isYearly);
            }

            periodTypeInput.on('change', togglePeriodRange);
            togglePeriodRange();

            if (typeof echarts === 'undefined') return;

            const isHolderReport = @json($isHolderComparison);
            const periodLabels = isHolderReport ?
                @json($daily_trend_labels ?? []) :
                @json($period_labels ?? []);
            const periodValues = isHolderReport ?
                @json($daily_trend_values ?? []) :
                @json($period_values ?? []);
            const periodChartEl = document.getElementById('periodShareChart');
            if (periodChartEl && Array.isArray(periodLabels) && periodLabels.length) {
                echarts.init(periodChartEl).setOption({
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            var p = Array.isArray(params) ? params[0] : params;
                            var value = Number((p && p.value) || p || 0);
                            return (p && p.name ? p.name : '') + '<br/>' + value.toLocaleString(
                                'id-ID') + (isHolderReport ? ' pemegang' : ' lembar');
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: periodLabels
                    },
                    yAxis: {
                        type: 'value',
                        name: isHolderReport ? 'Pemegang' : 'Total Saham',
                        axisLabel: {
                            formatter: function(value) {
                                return Number(value).toLocaleString('id-ID');
                            }
                        }
                    },
                    grid: {
                        left: 40,
                        right: 20,
                        bottom: 50,
                        top: 20
                    },
                    series: [{
                        name: isHolderReport ? 'Jumlah Pemegang' : 'Total Saham',
                        type: 'line',
                        smooth: true,
                        data: periodValues.map(v => Number(v || 0)),
                        areaStyle: {
                            opacity: 0.15
                        },
                        itemStyle: {
                            color: '#5e72e4'
                        }
                    }]
                });
            }

            const raceEntityColors = new Map();

            function raceEntityColor(key) {
                const normalizedKey = String(key);
                if (!raceEntityColors.has(normalizedKey)) {
                    const colorIndex = raceEntityColors.size;
                    const hue = Math.round((colorIndex * 137.508) % 360);
                    const lightnessLevels = [42, 56, 34, 64];
                    const lightness = lightnessLevels[Math.floor(colorIndex / 3) % lightnessLevels.length];
                    raceEntityColors.set(normalizedKey, `hsl(${hue}, 88%, ${lightness}%)`);
                }
                return raceEntityColors.get(normalizedKey);
            }

            if (isHolderReport) {
                const statusData = @json($daily_status_chart ?? []);
                const topIncreases = @json($top_increases ?? []);
                const topDecreases = @json($top_decreases ?? []);
                const statusEl = document.getElementById('dailyStatusChart');
                const increaseEl = document.getElementById('topIncreaseChart');
                const decreaseEl = document.getElementById('topDecreaseChart');

                if (statusEl) {
                    echarts.init(statusEl).setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c} ({d}%)'
                        },
                        legend: {
                            bottom: 0
                        },
                        series: [{
                            type: 'pie',
                            radius: ['42%', '68%'],
                            center: ['50%', '43%'],
                            data: statusData,
                            label: {
                                formatter: '{b}\n{c}'
                            }
                        }]
                    });
                }

                function renderMovementBar(element, rows, color) {
                    if (!element) return;
                    const chartRows = rows.slice().reverse();
                    echarts.init(element).setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function(params) {
                                const point = params[0];
                                return point.name + '<br/>' + Number(point.value).toLocaleString(
                                    'id-ID') + ' lembar';
                            }
                        },
                        grid: {
                            left: 10,
                            right: 20,
                            top: 10,
                            bottom: 10,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: params => Number(params.value).toLocaleString('id-ID')
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: chartRows.map(row => row.name),
                            axisLabel: {
                                width: 110,
                                overflow: 'truncate'
                            }
                        },
                        series: [{
                            type: 'bar',
                            data: chartRows.map(row => Math.abs(Number(row.change || 0))),
                            itemStyle: {
                                color: color,
                                borderRadius: [0, 4, 4, 0]
                            }
                        }]
                    });
                }

                renderMovementBar(increaseEl, topIncreases, '#2dce89');
                renderMovementBar(decreaseEl, topDecreases, '#f5365c');

                const dailyRaceFrames = @json($daily_race_frames ?? []);
                const dailyRaceEl = document.getElementById('dailyShareholderRaceChart');
                const dailyRaceSlider = document.getElementById('dailyRaceSlider');
                const dailyRaceLabel = document.getElementById('dailyRaceLabel');
                const dailyRacePlay = document.getElementById('dailyRacePlay');

                if (dailyRaceEl && dailyRaceFrames.length) {
                    const dailyRaceChart = echarts.init(dailyRaceEl);
                    let dailyRaceIndex = 0;
                    let dailyRaceTimer = null;

                    function renderDailyRace(index) {
                        dailyRaceIndex = Math.min(Math.max(index, 0), dailyRaceFrames.length - 1);
                        const frame = dailyRaceFrames[dailyRaceIndex];
                        const items = frame.items.slice().sort((a, b) => Number(b.shares) - Number(a.shares));
                        dailyRaceLabel.textContent = frame.label;
                        dailyRaceSlider.value = dailyRaceIndex;

                        dailyRaceChart.setOption({
                            animationDuration: 0,
                            animationDurationUpdate: 1200,
                            animationEasing: 'linear',
                            animationEasingUpdate: 'linear',
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { type: 'shadow' },
                                formatter: params => {
                                    const point = params[0].data;
                                    return `Peringkat ${point.rank} — ${point.entityName}<br/>${Number(point.value).toLocaleString('id-ID')} lembar`;
                                }
                            },
                            grid: { left: 20, right: 110, top: 15, bottom: 15, containLabel: true },
                            xAxis: {
                                type: 'value',
                                axisLabel: { formatter: value => Number(value).toLocaleString('id-ID') }
                            },
                            yAxis: {
                                type: 'category',
                                inverse: true,
                                data: items.map(item => item.name),
                                axisLabel: {
                                    width: 180,
                                    overflow: 'truncate',
                                    formatter: (value, index) => `#${index + 1} ${value}`
                                }
                            },
                            series: [{
                                type: 'bar',
                                realtimeSort: true,
                                data: items.map((item, index) => ({
                                    id: `investor:${item.sid || item.name}`,
                                    name: item.name,
                                    value: item.shares,
                                    rank: item.rank,
                                    entityName: item.name,
                                    itemStyle: { color: raceEntityColor(`investor:${item.sid || index}`) }
                                })),
                                universalTransition: true,
                                itemStyle: { borderRadius: [0, 5, 5, 0] },
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: params => Number(params.value).toLocaleString('id-ID')
                                }
                            }]
                        });
                    }

                    function stopDailyRace() {
                        if (dailyRaceTimer) window.clearInterval(dailyRaceTimer);
                        dailyRaceTimer = null;
                        dailyRacePlay.innerHTML = '<i class="fas fa-play me-1"></i>Putar';
                    }

                    function startDailyRace() {
                        if (dailyRaceFrames.length < 2) return;
                        if (dailyRaceIndex >= dailyRaceFrames.length - 1) renderDailyRace(0);
                        dailyRaceTimer = window.setInterval(function() {
                            if (dailyRaceIndex >= dailyRaceFrames.length - 1) {
                                stopDailyRace();
                                return;
                            }
                            renderDailyRace(dailyRaceIndex + 1);
                        }, 1500);
                        dailyRacePlay.innerHTML = '<i class="fas fa-pause me-1"></i>Jeda';
                    }

                    dailyRaceSlider.addEventListener('input', function(event) {
                        stopDailyRace();
                        renderDailyRace(Number(event.target.value));
                    });
                    dailyRacePlay.addEventListener('click', function() {
                        dailyRaceTimer ? stopDailyRace() : startDailyRace();
                    });

                    renderDailyRace(0);
                    startDailyRace();
                }
            }

            const securityTrendLabels = @json($security_trend_labels ?? []);
            const securityTrendValues = @json($security_trend_values ?? []);
            const securityRaceFrames = @json($security_race_frames ?? []);
            let securityChartsReady = false;

            function initializeSecurityCharts() {
                if (securityChartsReady) return;
                securityChartsReady = true;

                const trendElement = document.getElementById('securityTrendChart');
                if (trendElement && securityTrendLabels.length) {
                    echarts.init(trendElement).setOption({
                        tooltip: {
                            trigger: 'axis',
                            formatter: params => `${params[0].name}<br/>${Number(params[0].value).toLocaleString('id-ID')} sekuritas`
                        },
                        grid: { left: 45, right: 20, top: 20, bottom: 50 },
                        xAxis: { type: 'category', data: securityTrendLabels },
                        yAxis: {
                            type: 'value',
                            name: 'Sekuritas',
                            minInterval: 1,
                            axisLabel: { formatter: value => Number(value).toLocaleString('id-ID') }
                        },
                        series: [{
                            name: 'Jumlah Sekuritas',
                            type: 'line',
                            smooth: true,
                            data: securityTrendValues.map(value => Number(value || 0)),
                            areaStyle: { opacity: .15 },
                            itemStyle: { color: '#5e72e4' }
                        }]
                    });
                }

                const raceElement = document.getElementById('securityRaceChart');
                const raceSlider = document.getElementById('securityRaceSlider');
                const raceLabel = document.getElementById('securityRaceLabel');
                const racePlay = document.getElementById('securityRacePlay');
                if (!raceElement || !securityRaceFrames.length) return;

                const chart = echarts.init(raceElement);
                let frameIndex = 0;
                let timer = null;

                function renderFrame(index) {
                    frameIndex = Math.min(Math.max(index, 0), securityRaceFrames.length - 1);
                    const frame = securityRaceFrames[frameIndex];
                    const items = frame.items.slice().sort((a, b) => Number(b.shares) - Number(a.shares));
                    raceLabel.textContent = frame.label;
                    raceSlider.value = frameIndex;
                    chart.setOption({
                        animationDuration: 0,
                        animationDurationUpdate: 1200,
                        animationEasingUpdate: 'linear',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' },
                            formatter: params => {
                                const point = params[0].data;
                                return `Peringkat ${point.rank} — ${point.entityName}<br/>${Number(point.value).toLocaleString('id-ID')} lembar`;
                            }
                        },
                        grid: { left: 20, right: 110, top: 15, bottom: 15, containLabel: true },
                        xAxis: { type: 'value', axisLabel: { formatter: value => Number(value).toLocaleString('id-ID') } },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: items.map(item => item.name),
                            axisLabel: {
                                width: 180,
                                overflow: 'truncate',
                                formatter: (value, index) => `#${index + 1} ${value}`
                            }
                        },
                        series: [{
                            type: 'bar',
                            realtimeSort: true,
                            data: items.map((item, index) => ({
                                id: `security:${item.code || item.name}`,
                                name: item.name,
                                value: item.shares,
                                rank: item.rank,
                                entityName: item.name,
                                itemStyle: { color: raceEntityColor(`security:${item.code || index}`) }
                            })),
                            universalTransition: true,
                            itemStyle: { borderRadius: [0, 5, 5, 0] },
                            label: { show: true, position: 'right', formatter: params => Number(params.value).toLocaleString('id-ID') }
                        }]
                    });
                }

                function stopRace() {
                    if (timer) window.clearInterval(timer);
                    timer = null;
                    racePlay.innerHTML = '<i class="fas fa-play me-1"></i>Putar';
                }

                function startRace() {
                    if (securityRaceFrames.length < 2) return;
                    if (frameIndex >= securityRaceFrames.length - 1) renderFrame(0);
                    timer = window.setInterval(function() {
                        if (frameIndex >= securityRaceFrames.length - 1) return stopRace();
                        renderFrame(frameIndex + 1);
                    }, 1500);
                    racePlay.innerHTML = '<i class="fas fa-pause me-1"></i>Jeda';
                }

                raceSlider.addEventListener('input', event => {
                    stopRace();
                    renderFrame(Number(event.target.value));
                });
                racePlay.addEventListener('click', () => timer ? stopRace() : startRace());
                renderFrame(0);
                startRace();
            }

            document.getElementById('security-tab')?.addEventListener('shown.bs.tab', initializeSecurityCharts);

            if ($.fn.DataTable) {
                if ($('#alertsTable').length) {
                    $('#alertsTable').DataTable({
                    responsive: true,
                    autoWidth: false,
                    order: [
                        [5, 'desc']
                    ],
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    language: {
                        search: 'Cari:',
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ baris',
                        infoEmpty: 'Tidak ada data',
                        zeroRecords: 'Data tidak ditemukan',
                        paginate: {
                            first: 'Awal',
                            last: 'Akhir',
                            next: 'Selanjutnya',
                            previous: 'Sebelumnya'
                        }
                    },
                    columnDefs: [{
                        targets: [3, 4, 5],
                        className: 'text-end'
                    }, {
                        targets: [6],
                        className: 'text-center'
                    }]
                    });
                }

                const detailTableOptions = {
                    responsive: true,
                    autoWidth: false,
                    order: [[4, 'desc']],
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    language: {
                        search: 'Cari:',
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ baris',
                        infoEmpty: 'Tidak ada data',
                        zeroRecords: 'Data tidak ditemukan',
                        paginate: { first: 'Awal', last: 'Akhir', next: 'Selanjutnya', previous: 'Sebelumnya' }
                    }
                };

                $('.holder-detail-table').each(function() {
                    $(this).DataTable($.extend(true, {}, detailTableOptions));
                });

                if ($('#securityDetailTable').length) {
                    $('#securityDetailTable').DataTable({
                        ...detailTableOptions,
                        order: [[4, 'desc']],
                        columnDefs: [{ targets: [2, 3, 4], className: 'text-end' }]
                    });
                }

                $('.security-status-table').each(function() {
                    $(this).DataTable($.extend(true, {}, detailTableOptions));
                });

                if ($('#auditTable').length) {
                    $('#auditTable').DataTable({
                        ...detailTableOptions,
                        pageLength: 15,
                        columnDefs: [
                            { targets: [2, 3, 4], className: 'text-end' },
                            { targets: [5, 6], className: 'text-center' }
                        ]
                    });
                }

                $('.kpi-detail-link').on('click keydown', function(event) {
                    if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
                    event.preventDefault();

                    const status = String($(this).data('detail-status') || '');
                    const targets = {
                        Total: 'detailTotal',
                        Bertambah: 'detailBertambah',
                        Berkurang: 'detailBerkurang',
                        Baru: 'detailBaru',
                        Keluar: 'detailKeluar'
                    };
                    const target = document.getElementById(targets[status]);
                    if (!target) return;
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                });

                $('.security-kpi-link').on('click keydown', function(event) {
                    if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
                    event.preventDefault();
                    const status = String($(this).data('security-status') || '');
                    const target = document.getElementById('securityDetail' + status);
                    target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            }

            @if ($start_date && $end_date)
                const oldComp = @json($composition_before),
                    newComp = @json($composition_after),
                    concentration = @json($concentration),
                    securities = @json($security_movements);
                const comparison = (id, labels, oldValues, newValues) => echarts.init(document.getElementById(id))
                    .setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['Awal', 'Akhir'],
                            bottom: 0
                        },
                        grid: {
                            left: 65,
                            right: 20
                        },
                        xAxis: {
                            type: 'category',
                            data: labels
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: 'Awal',
                            type: 'bar',
                            data: oldValues,
                            itemStyle: {
                                color: '#adb5bd'
                            }
                        }, {
                            name: 'Akhir',
                            type: 'bar',
                            data: newValues,
                            itemStyle: {
                                color: '#5e72e4'
                            }
                        }]
                    });
                comparison('domicileChart', ['Lokal', 'Asing'], [oldComp.local, oldComp.foreign], [newComp.local,
                    newComp.foreign
                ]);
                comparison('typeChart', ['Individual', 'Institusi'], [oldComp.individual, oldComp.institution], [
                    newComp.individual, newComp.institution
                ]);
                comparison('concentrationChart', concentration.map(x => x.label), concentration.map(x => x.before),
                    concentration.map(x => x.after));
                echarts.init(document.getElementById('securityChart')).setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: 180,
                        right: 60
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        data: securities.map(x => x.name)
                    },
                    series: [{
                        type: 'bar',
                        data: securities.map(x => ({
                            value: x.change,
                            itemStyle: {
                                color: x.change >= 0 ? '#2dce89' : '#f5365c'
                            }
                        })),
                        label: {
                            show: true,
                            position: 'right'
                        }
                    }]
                });
            @endif

            @if (count($race_frames))
                const raceFrames = @json($race_frames);
                const raceChartEl = document.getElementById('raceChart');
                const raceFrameSlider = document.getElementById('raceFrameSlider');
                const raceFrameLabel = document.getElementById('raceFrameLabel');
                const raceFrameDate = document.getElementById('raceFrameDate');
                const raceFrameTotal = document.getElementById('raceFrameTotal');
                const raceTopBody = document.getElementById('raceTopTableBody');
                const racePrev = document.getElementById('racePrev');
                const raceNext = document.getElementById('raceNext');
                const raceChart = echarts.init(raceChartEl);

                const renderRaceFrame = (index) => {
                    const frame = raceFrames[index];
                    const raceItems = frame.items.slice().sort((a, b) => Number(b.shares) - Number(a.shares));
                    const labels = raceItems.map(item => item.name);
                    const values = raceItems.map((item, itemIndex) => ({
                        id: `account:${item.code || item.name}`,
                        name: item.name,
                        value: item.shares,
                        rank: item.rank,
                        entityName: item.name,
                        itemStyle: { color: raceEntityColor(`account:${item.code || itemIndex}`) }
                    }));
                    raceFrameLabel.textContent = frame.label;
                    raceFrameDate.textContent = frame.date;
                    raceFrameTotal.textContent = frame.total.toLocaleString('id-ID');
                    raceFrameSlider.value = index;

                    raceChart.setOption({
                        animationDuration: 0,
                        animationDurationUpdate: 1200,
                        animationEasingUpdate: 'linear',
                        tooltip: {
                            trigger: 'axis',
                            formatter: params => {
                                const data = params[0].data;
                                return `Peringkat ${data.rank || '-'} — ${data.entityName}<br/>Saham: ${Number(data.value).toLocaleString('id-ID')}`;
                            }
                        },
                        grid: {
                            left: 120,
                            right: 20,
                            top: 20,
                            bottom: 20
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: labels,
                            axisLabel: { formatter: (value, labelIndex) => `#${labelIndex + 1} ${value}` }
                        },
                        series: [{
                            type: 'bar',
                            realtimeSort: true,
                            data: values,
                            universalTransition: true,
                            itemStyle: { borderRadius: [0, 5, 5, 0] },
                            label: {
                                show: true,
                                position: 'right',
                                formatter: value => Number(value).toLocaleString('id-ID')
                            }
                        }]
                    });

                    raceTopBody.innerHTML = frame.items.map(item => `
                        <tr>
                            <td>${item.rank}</td>
                            <td>${item.name}</td>
                            <td class="text-end">${item.shares.toLocaleString('id-ID')}</td>
                        </tr>
                    `).join('');
                };

                let currentRaceIndex = 0;
                const updateFrame = (index) => {
                    currentRaceIndex = Math.min(Math.max(0, index), raceFrames.length - 1);
                    renderRaceFrame(currentRaceIndex);
                };

                racePrev.addEventListener('click', () => updateFrame(currentRaceIndex - 1));
                raceNext.addEventListener('click', () => updateFrame(currentRaceIndex + 1));
                raceFrameSlider.addEventListener('input', (event) => updateFrame(Number(event.target.value)));
                updateFrame(0);
            @endif
        });
    </script>
@endpush