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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">

        {{-- ===== HEADER ===== --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">Dashboard</h6>
                                <p class="text-sm mb-0">Dashboard MSJA STOCK</p>
                            </div>
                            <div class="text-end">
                                <p class="text-xs text-uppercase font-weight-bold mb-1 text-secondary">Tanggal Dashboard</p>
                                <h6 class="mb-0">
                                    @if($selected_tanggal ?? null)
                                        <i class="fas fa-calendar-check text-success me-1"></i>
                                        {{ \Carbon\Carbon::parse($selected_tanggal)->format('d F Y') }}
                                    @else
                                        <span class="text-secondary">Belum ada data</span>
                                    @endif
                                </h6>
                                <form method="GET" action="{{ url()->current() }}"
                                    class="d-flex justify-content-end align-items-center mt-2">
                                    <div class="input-group input-group-sm mb-0 shadow-sm rounded d-flex flex-nowrap"
                                        style="max-width: 250px;">
                                        <span class="input-group-text bg-white text-secondary border-0 pe-2"
                                            style="cursor: pointer;"
                                            onclick="this.nextElementSibling.querySelector('input').showPicker()">
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>

                                        <div class="input-date-wrapper">
                                            <input type="date" name="tanggal"
                                                class="form-control form-control-sm border-0 ps-1 shadow-none hide-calendar-icon"
                                                style="cursor: pointer; background-color: white; width: 100%; height: 100%;"
                                                value="{{ $selected_tanggal ?? '' }}" onclick="this.showPicker()" required>
                                        </div>

                                        <button type="submit"
                                            class="btn btn-sm bg-primary text-white mb-0 px-3 m-0 rounded-start-0"
                                            style="box-shadow: none;">
                                            <i class="fas fa-filter me-1 d-none d-sm-inline"></i> Terapkan
                                        </button>
                                    </div>
                                </form>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== SUMMARY CARDS ===== --}}
        <div class="row">
            {{-- Card: Total Saham Beredar --}}
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Saham Beredar</p>

                                    {{-- Display Jumlah Saham (default) --}}
                                    <div id="sahamCount">
                                        <h5 class="font-weight-bolder">
                                            {{ number_format($total_saham ?? 0, 0, ',', '.') }}
                                        </h5>
                                        <p class="mb-0">
                                            @if(($saham_change ?? 0) > 0)
                                                <span class="text-success text-sm font-weight-bolder">
                                                    <i class="fas fa-arrow-up"></i>
                                                    +{{ number_format($saham_change, 0, ',', '.') }}
                                                </span>
                                                dari periode sebelumnya
                                            @elseif(($saham_change ?? 0) < 0)
                                                <span class="text-danger text-sm font-weight-bolder">
                                                    <i class="fas fa-arrow-down"></i>
                                                    {{ number_format($saham_change, 0, ',', '.') }}
                                                </span>
                                                dari periode sebelumnya
                                            @else
                                                <span class="text-secondary text-sm font-weight-bolder">
                                                    <i class="fas fa-minus"></i> Tidak ada perubahan
                                                </span>
                                            @endif
                                        </p>
                                    </div>

                                    {{-- Display Nilai Total Saham (hidden by default) --}}
                                    <div id="sahamValue" style="display: none;">
                                        <h5 class="font-weight-bolder">
                                            Rp {{ number_format(($total_saham ?? 0) * ($harga_saham ?? 0), 0, ',', '.') }}
                                        </h5>
                                        <p class="mb-0">
                                            @php
                                                $prev_total_saham = ($total_saham ?? 0) - ($saham_change ?? 0);
                                                $prev_harga_saham = ($harga_saham ?? 0) - ($harga_change ?? 0);
                                                $total_value_change = (($total_saham ?? 0) * ($harga_saham ?? 0)) - ($prev_total_saham * $prev_harga_saham);
                                            @endphp
                                            @if($total_value_change > 0)
                                                <span class="text-success text-sm font-weight-bolder">
                                                    <i class="fas fa-arrow-up"></i> +Rp
                                                    {{ number_format($total_value_change, 0, ',', '.') }}
                                                </span>

                                            @elseif($total_value_change < 0)
                                                <span class="text-danger text-sm font-weight-bolder">
                                                    <i class="fas fa-arrow-down"></i> Rp
                                                    {{ number_format(abs($total_value_change), 0, ',', '.') }}
                                                </span>

                                            @else
                                                <span class="text-secondary text-sm font-weight-bolder">
                                                    <i class="fas fa-minus"></i> Tidak ada perubahan
                                                </span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 text-end d-flex flex-column align-items-end justify-content-between">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="fas fa-coins text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                                <div class="form-check form-switch mb-0 mt-2">
                                    <input class="form-check-input" type="checkbox" id="toggleSahamValue"
                                        style="cursor: pointer;">
                                    <label class="form-check-label text-xs" for="toggleSahamValue"
                                        style="cursor: pointer;">Nilai</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card: Total Investor --}}
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Investor</p>
                                    <h5 class="font-weight-bolder">
                                        {{ number_format($total_investor ?? 0, 0, ',', '.') }}
                                    </h5>
                                    <p class="mb-0">
                                        @if(($investor_change ?? 0) > 0)
                                            <span class="text-success text-sm font-weight-bolder">
                                                <i class="fas fa-user-plus"></i>
                                                +{{ number_format($investor_change, 0, ',', '.') }} Baru
                                            </span>
                                        @elseif(($investor_change ?? 0) < 0)
                                            <span class="text-danger text-sm font-weight-bolder">
                                                <i class="fas fa-user-minus"></i>
                                                {{ number_format($investor_change, 0, ',', '.') }}
                                            </span>
                                        @else
                                            <span class="text-secondary text-sm font-weight-bolder">
                                                <i class="fas fa-minus"></i> Tidak ada perubahan
                                            </span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="fas fa-users text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card: Harga Saham --}}
            <div class="col-xl-4 col-sm-6">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Harga Saham</p>
                                    <h5 class="font-weight-bolder">
                                        Rp. {{ number_format($harga_saham ?? 0, 0, ',', '.') }}
                                    </h5>
                                    <p class="mb-0">
                                        @if(($harga_change ?? 0) > 0)
                                            <span class="text-success text-sm font-weight-bolder">
                                                <i class="fas fa-arrow-up"></i> Rp.
                                                {{ number_format($harga_change, 0, ',', '.') }}
                                            </span>
                                        @elseif(($harga_change ?? 0) < 0)
                                            <span class="text-danger text-sm font-weight-bolder">
                                                <i class="fas fa-arrow-down"></i> Rp.
                                                {{ number_format(abs($harga_change), 0, ',', '.') }}
                                            </span>
                                        @else
                                            <span class="text-secondary text-sm font-weight-bolder">
                                                <i class="fas fa-minus"></i> Tidak ada perubahan
                                            </span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="fas fa-chart-line text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== PERGERAKAN HARGA SAHAM MSJA ===== --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h6 class="text-capitalize mb-0">MSJA - PT. Multi Spunindo Jaya Tbk.</h6>
                            <h6 class="text-right">Sumber: finance.yahoo.com</h6>
                            <h3 id="stock-current-price" class="font-weight-bolder mt-1 mb-0">...</h3>
                            <p id="stock-price-change" class="text-sm mb-0">Memuat...</p>
                        </div>
                        <div class="btn-group" role="group" aria-label="Stock ranges" id="stock-filter-container">
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="1d" data-interval="5m">1D</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="5d" data-interval="15m">1W</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="1mo" data-interval="1d">1M</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="3mo" data-interval="1d">3M</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="ytd" data-interval="1d">YTD</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="1y" data-interval="1d">1Y</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn active" style="background-color: #343a40; color: white;" data-range="3y" data-interval="1wk">3Y</button>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 px-2 px-md-3 stock-filter-btn" data-range="5y" data-interval="1wk">5Y</button>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-saham-msja" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== CHART 1: TREND KEPEMILIKAN PER KATEGORI (LINE) ===== --}}
        <div class="row mt-4">
            <div class="col-lg-8 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Trend Komunitas Kepemilikan Saham MSJA</h6>
                        <p class="text-sm mb-0">
                            Data 7 periode terakhir &mdash; per kategori (list group)
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-trend" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== CHART 2: KOMPOSISI KEPEMILIKAN (DOUGHNUT) ===== --}}
            <div class="col-lg-4">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Komposisi Kepemilikan Saham</h6>
                        <p class="text-sm mb-0">Berdasarkan kategori per tanggal terakhir</p>
                    </div>
                    <div class="card-body p-3 d-flex align-items-center">
                        <div class="chart w-100">
                            <canvas id="chart-pie" class="chart-canvas" height="260"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== CHART 3: KOMPOSISI SEKURITAS (BAR HORIZONTAL) ===== --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card z-index-2">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Komposisi Pemegang Rekening (Sekuritas)</h6>
                        <p class="text-sm mb-0">
                            Top 10 kepemilikan saham per pemegang rekening &mdash; di luar kategori khusus
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-sekuritas" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== TOP 10 INVESTOR KEPEMILIKAN TERBANYAK ===== --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-capitalize">Top 10 Investor dengan Kepemilikan Terbanyak</h6>
                                <p class="text-sm mb-0">Berdasarkan total jumlah kepemilikan saham pada tanggal terakhir</p>
                            </div>
                            {{-- <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                <i class="fas fa-trophy text-lg opacity-10" aria-hidden="true"></i>
                            </div> --}}
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">
                                            No</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Nama Investor</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Nomor SID</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Sekuritas</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2 text-end pe-4">
                                            Total Kepemilikan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($top_investors ?? []) as $index => $inv)
                                        <tr>
                                            <td class="ps-3">
                                                <span class="text-xs font-weight-bold">{{ $index + 1 }}</span>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div
                                                        class="icon icon-shape icon-sm bg-gradient-primary shadow text-center rounded-circle me-2">
                                                        <i class="fas fa-user text-white text-xs" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ $inv->nama_investor ?? '-' }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-xs font-weight-bold">{{ $inv->nomor_sid }}</span>
                                            </td>
                                            <td>
                                                <span
                                                    class="text-xs">{{ $inv->nama_pemegang_rekening ?? $inv->kode_pemegang_rekening ?? '-' }}</span>
                                            </td>
                                            <td class="text-end pe-4">
                                                <span
                                                    class="text-sm font-weight-bold">{{ number_format($inv->total_saham, 0, ',', '.') }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <span class="text-secondary text-sm">Belum ada data investor</span>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>

    @if(($tanggal_fallback ?? false) && ($selected_tanggal ?? null))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                if (typeof Swal === 'undefined') {
                    return;
                }

                Swal.fire({
                    title: 'Tanggal Tidak Tersedia',
                    text: 'Data tanggal yang dipilih tidak tersedia, ditampilkan data terakhir tanggal {{ \Carbon\Carbon::parse($selected_tanggal)->format('d F Y') }}.',
                    icon: 'warning',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#fb6340'
                });
            });
        </script>
    @endif

    <script>
        (function () {
            // =========================
            // COLOR PALETTE
            // =========================
            var colors = [
                '#5e72e4', '#2dce89', '#fb6340', '#f5365c', '#11cdef',
                '#8965e0', '#ffd600', '#172b4d', '#32b6a0', '#e14eca'
            ];

            // =========================
            // CHART 1: TREND LINE (per Kategori)
            // =========================
            var ctx1 = document.getElementById("chart-trend").getContext("2d");
            var trendLabels = {!! $chart_labels ?? '[]' !!};
            var kategoriDatasets = @json($kategori_datasets ?? []);

            var datasets1 = [];
            for (var i = 0; i < kategoriDatasets.length; i++) {
                var color = colors[i % colors.length];
                var grad = ctx1.createLinearGradient(0, 0, 0, 300);
                grad.addColorStop(0, color + '33');
                grad.addColorStop(1, color + '05');

                datasets1.push({
                    label: kategoriDatasets[i].nama,
                    data: kategoriDatasets[i].data,
                    borderColor: color,
                    backgroundColor: grad,
                    borderWidth: 2.5,
                    pointRadius: 4,
                    pointBackgroundColor: color,
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                    tension: 0.35,
                    fill: true
                });
            }

            new Chart(ctx1, {
                type: "line",
                data: { labels: trendLabels, datasets: datasets1 },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'circle',
                                padding: 15,
                                font: { size: 11, family: "Open Sans" }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(23,43,77,0.95)',
                            padding: 10,
                            cornerRadius: 6,
                            callbacks: {
                                label: function (ctx) {
                                    return ctx.dataset.label + ': ' + ctx.parsed.y.toLocaleString('id-ID');
                                }
                            }
                        }
                    },
                    interaction: { intersect: false, mode: 'index' },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { drawBorder: false, borderDash: [4, 4], color: '#e9ecef' },
                            ticks: {
                                padding: 10,
                                color: '#8898aa',
                                font: { size: 11, family: "Open Sans" },
                                callback: function (v) { return v.toLocaleString('id-ID'); }
                            }
                        },
                        x: {
                            grid: { display: false },
                            ticks: {
                                padding: 10,
                                color: '#8898aa',
                                font: { size: 11, family: "Open Sans" }
                            }
                        }
                    }
                }
            });

            // =========================
            // CHART 2: DOUGHNUT (Komposisi Kepemilikan)
            // =========================
            var ctx2 = document.getElementById("chart-pie").getContext("2d");
            var pieLabels = {!! $pie_labels ?? '[]' !!};
            var pieValues = {!! $pie_values ?? '[]' !!};
            var pieColors = colors.slice(0, pieLabels.length);

            new Chart(ctx2, {
                type: "doughnut",
                data: {
                    labels: pieLabels,
                    datasets: [{
                        data: pieValues,
                        backgroundColor: pieColors,
                        borderWidth: 2,
                        borderColor: '#fff',
                        hoverOffset: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '60%',
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'circle',
                                padding: 12,
                                font: { size: 11, family: "Open Sans" }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(23,43,77,0.95)',
                            padding: 10,
                            cornerRadius: 6,
                            callbacks: {
                                label: function (ctx) {
                                    var total = ctx.dataset.data.reduce(function (a, b) { return a + b; }, 0);
                                    var pct = total > 0 ? ((ctx.parsed / total) * 100).toFixed(1) : 0;
                                    return ctx.label + ': ' + ctx.parsed.toLocaleString('id-ID') + ' (' + pct + '%)';
                                }
                            }
                        }
                    }
                }
            });

            // =========================
            // CHART 3: BAR HORIZONTAL (Sekuritas)
            // =========================
            var ctx3 = document.getElementById("chart-sekuritas").getContext("2d");
            var sekLabels = {!! $sekuritas_labels ?? '[]' !!};
            var sekValues = {!! $sekuritas_values ?? '[]' !!};

            // Dynamic height based on number of bars
            var barCanvas = document.getElementById("chart-sekuritas");
            var barHeight = Math.max(300, sekLabels.length * 35);
            barCanvas.parentElement.style.height = barHeight + 'px';

            var barColors = [];
            for (var j = 0; j < sekLabels.length; j++) {
                barColors.push(colors[j % colors.length]);
            }

            new Chart(ctx3, {
                type: "bar",
                data: {
                    labels: sekLabels,
                    datasets: [{
                        label: "Total Kepemilikan Saham",
                        data: sekValues,
                        backgroundColor: barColors,
                        borderRadius: 4,
                        maxBarThickness: 18
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(23,43,77,0.95)',
                            padding: 10,
                            cornerRadius: 6,
                            callbacks: {
                                label: function (ctx) {
                                    return 'Total: ' + ctx.parsed.x.toLocaleString('id-ID') + ' lembar';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: { drawBorder: false, borderDash: [4, 4], color: '#e9ecef' },
                            ticks: {
                                color: '#8898aa',
                                font: { size: 11, family: "Open Sans" },
                                callback: function (v) { return v.toLocaleString('id-ID'); }
                            }
                        },
                        y: {
                            grid: { display: false },
                            ticks: {
                                color: '#525f7f',
                                font: { size: 11, family: "Open Sans" },
                                padding: 5
                            }
                        }
                    }
                }
            });
        })();
    </script>

    {{-- Toggle Script untuk Total Saham Beredar --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggle = document.getElementById('toggleSahamValue');
            const sahamCount = document.getElementById('sahamCount');
            const sahamValue = document.getElementById('sahamValue');

            if (toggle && sahamCount && sahamValue) {
                toggle.addEventListener('change', function () {
                    if (this.checked) {
                        // Show value view
                        sahamCount.style.display = 'none';
                        sahamValue.style.display = 'block';
                    } else {
                        // Show count view
                        sahamCount.style.display = 'block';
                        sahamValue.style.display = 'none';
                    }
                });
            }
        });
    </script>
    <style>
        input[type="date"].hide-calendar-icon::-webkit-calendar-picker-indicator {
            background: transparent;
            bottom: 0;
            color: transparent;
            cursor: pointer;
            height: auto;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: auto;
            margin: 0;
            padding: 0;
            opacity: 0;
        }
        .input-date-wrapper {
            position: relative;
            flex: 1 1 auto;
        }
    </style>

    {{-- Script untuk Data Pergerakan Harga Saham MSJA --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const ctxSaham = document.getElementById("chart-saham-msja");
            if (!ctxSaham) return;

            let sahamChart = null;

            async function setChartSaham(range, interval) {
                // Gunakan endpoint dari controller backend kita
                const url = `{{ route('api.stock.msja') }}?range=${range}&interval=${interval}`;

                try {
                    const response = await fetch(url);
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const data = await response.json();

                    if (data.error) {
                        throw new Error(data.error);
                    }

                    const result = data.chart.result[0];
                    const meta = result.meta;
                    const timestamps = result.timestamp;
                    const quotes = result.indicators.quote[0];

                    let closes = quotes.close;

                    // Mengabaikan nilai null pada respons api
                    const validData = [];
                    const validLabels = [];

                    for(let i = 0; i < timestamps.length; i++) {
                        if(closes[i] !== null) {
                            const date = new Date(timestamps[i] * 1000);
                            let label = '';
                            if (range === '1d') {
                                label = date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
                            } else if (range === '5d') {
                                const dFmt = date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: '2-digit' });
                                const tFmt = date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }).replace('.', ':');
                                label = `${dFmt} ${tFmt}`;
                            } else {
                                label = date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
                            }
                            validLabels.push(label);
                            validData.push(closes[i]);
                        }
                    }

                    if (validData.length === 0) throw new Error("Data saham kosong");

                    // Hitung current price dan perubahannya untuk range tersebut
                    const currentPrice = meta.regularMarketPrice !== undefined ? meta.regularMarketPrice : validData[validData.length - 1];
                    const firstPrice = validData[0];
                    const lastPrice = validData[validData.length - 1];

                    const priceEl = document.getElementById('stock-current-price');
                    const changeEl = document.getElementById('stock-price-change');

                    if(priceEl) {
                        priceEl.innerText = new Intl.NumberFormat('id-ID').format(currentPrice);
                    }

                    if(changeEl) {
                        const diff = lastPrice - firstPrice;
                        const pct = (diff / firstPrice) * 100;

                        let sign = diff > 0 ? '+' : '';
                        let colorClass = diff > 0 ? 'text-success' : (diff < 0 ? 'text-danger' : 'text-secondary');
                        let iconClass = diff > 0 ? 'fa-arrow-up' : (diff < 0 ? 'fa-arrow-down' : 'fa-minus');

                        changeEl.innerHTML = `<span class="${colorClass} font-weight-bolder text-sm"><i class="fas ${iconClass}"></i> ${sign}${new Intl.NumberFormat('id-ID').format(diff)} (${sign}${pct.toFixed(2)}%)</span> <span class="text-secondary text-xs">dalam periode ini</span>`;
                    }

                    // Tentukan warna garis grafik (naik / turun pada rentang yang dipilih)
                    let isUp = lastPrice >= firstPrice;
                    let lineColor = isUp ? '#2dce89' : '#f5365c';
                    let grad = ctxSaham.getContext('2d').createLinearGradient(0, 0, 0, 300);
                    grad.addColorStop(0, isUp ? 'rgba(45, 206, 137, 0.4)' : 'rgba(245, 54, 92, 0.4)');
                    grad.addColorStop(1, isUp ? 'rgba(45, 206, 137, 0.0)' : 'rgba(245, 54, 92, 0.0)');

                    if (sahamChart) {
                        sahamChart.destroy();
                    }

                    sahamChart = new Chart(ctxSaham, {
                        type: 'line',
                        data: {
                            labels: validLabels,
                            datasets: [{
                                label: 'Harga',
                                data: validData,
                                borderColor: lineColor,
                                backgroundColor: grad,
                                borderWidth: 2.5,
                                pointRadius: 0,
                                pointHoverRadius: 6,
                                pointBackgroundColor: lineColor,
                                fill: true,
                                tension: 0.2
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    backgroundColor: 'rgba(23,43,77,0.95)',
                                    padding: 10,
                                    cornerRadius: 6,
                                    intersect: false,
                                    mode: 'index',
                                    callbacks: {
                                        label: function(context) {
                                            let val = context.parsed.y;
                                            return 'Rp ' + new Intl.NumberFormat('id-ID').format(val);
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    grid: { display: false },
                                    ticks: { maxTicksLimit: 8, color: '#8898aa', font: { size: 11, family: "Open Sans" } }
                                },
                                y: {
                                    position: 'right',
                                    grid: { drawBorder: false, color: '#e9ecef', borderDash: [4, 4] },
                                    ticks: {
                                        callback: function(value) { return new Intl.NumberFormat('id-ID').format(value); },
                                        color: '#8898aa',
                                        font: { size: 11, family: "Open Sans" }
                                    }
                                }
                            },
                            interaction: {
                                mode: 'index',
                                intersect: false
                            }
                        }
                    });

                } catch (error) {
                    console.error("Gagal mengambil data saham:", error);
                    const priceEl = document.getElementById('stock-current-price');
                    if(priceEl) priceEl.innerText = "Gagal memuat data";
                    const changeEl = document.getElementById('stock-price-change');
                    if (changeEl) changeEl.innerHTML = "";
                }
            }

            // Inisialisasi awal (Default 3Y)
            setChartSaham('3y', '1wk');

            // Event untuk Filter Buttons
            const buttons = document.querySelectorAll('.stock-filter-btn');
            buttons.forEach(btn => {
                btn.addEventListener('click', function() {
                    buttons.forEach(b => {
                        b.classList.remove('active');
                        b.style.backgroundColor = '';
                        b.style.color = '';
                    });

                    this.classList.add('active');
                    this.style.backgroundColor = '#343a40';
                    this.style.color = 'white';

                    const range = this.getAttribute('data-range');
                    const interval = this.getAttribute('data-interval');
                    setChartSaham(range, interval);
                });
            });
        });
    </script>
@endpush