@php
    $frameId = uniqid('vpmtv');
@endphp
<div class="vpm-tv-widget">
    <iframe
        id="{{ $frameId }}"
        title="{{ $symbol }} chart"
        data-tv-symbol="{{ $symbol }}"
        scrolling="no"
        allowtransparency="true"
        frameborder="0"
        loading="lazy"
    ></iframe>
</div>
<script>
(function () {
    var frame = document.getElementById(@json($frameId));
    if (!frame) return;

    function currentTheme() {
        return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
    }

    function build() {
        var config = {
            symbol: frame.dataset.tvSymbol,
            width: '100%',
            height: '100%',
            dateRange: '12M',
            colorTheme: currentTheme(),
            trendLineColor: '#f97316',
            underLineColor: 'rgba(41, 98, 255, 0.3)',
            underLineBottomColor: 'rgba(41, 98, 255, 0)',
            isTransparent: false,
            autosize: true,
            chartOnly: false
        };
        frame.src = 'https://www.tradingview-widget.com/embed-widget/mini-symbol-overview/?locale=en&theme=' + config.colorTheme + '&_=' + Date.now() + '#' + encodeURIComponent(JSON.stringify(config));
    }

    build();
    window.addEventListener('vpm:theme-change', build);
})();
</script>