@use('App\Services\ApexChartService')
@props([
    'id' => 'chart-' . uniqid(),
    'title' => '',
    'subtitle' => '',
    'chart' => [
        ...ApexChartService::$chart,
        'type' => 'line',
    ],
    'colors' => ApexChartService::$colors,
    'series' => [],
    'categories' => [],
])
<div id="{{ $id }}"></div>
@once
    @vite('resources/js/plugins/apexcharts.js')
@endonce

@push('scripts')
  <script type="module">
    const chartId = "{{ $id }}";
    let tooltipVisible = false;
    let keepTooltipVisible = false;
    let lastHoveredDataPoint = null;

    const options = {
        chart: {
            ...@json($chart),
             events: {
                dataPointMouseEnter: function (event, chartContext, opts) {
                        window.activeTooltipContext = {
                            seriesIndex: opts.seriesIndex,
                            dataPointIndex: opts.dataPointIndex
                        };
                        const tooltipContent = options.tooltip.custom({
                            series: chartContext.w.globals.series,
                            seriesIndex: opts.seriesIndex,
                            dataPointIndex: opts.dataPointIndex,
                            w: chartContext.w
                        });

                        let manualTooltip = document.getElementById('manual-apexcharts-tooltip');
                        if (!manualTooltip) {
                            manualTooltip = document.createElement('div');
                            manualTooltip.id = 'manual-apexcharts-tooltip';
                            manualTooltip.style.position = 'fixed';
                            manualTooltip.style.zIndex = '9999';
                            document.body.appendChild(manualTooltip);
                        }

                        manualTooltip.innerHTML = tooltipContent;
                        manualTooltip.style.display = 'block';

                        const tooltipWidth = 250;
                        const tooltipHeight = 250;

                        let left = event.clientX + 10;
                        let top = event.clientY + 10;

                        if (left + tooltipWidth > window.innerWidth) {
                            left = event.clientX - tooltipWidth - 10;
                        }

                        if (top + tooltipHeight > window.innerHeight) {
                            top = event.clientY - tooltipHeight - 10;
                        }

                        left = Math.max(10, left);
                        top = Math.max(10, top);

                        manualTooltip.style.left = `${left}px`;
                        manualTooltip.style.top = `${top}px`;
                },

            }
        },
        stroke: {
            width: 2,
        },
        markers: {
            size: 4,
            hover: {
                size: 5,
            }

        },
        colors: @json($colors),
        series: @json($series),
        title: {
            text: '{{ $title }}',
            style: {
                fontSize: '14px',
                fontWeight: 500,
            },
        },
        subtitle: {
            text: '{{ $subtitle }}',
        },
        xaxis: {
            categories: @json($categories)
        },
        yaxis: {
            labels: {
                formatter: function (value) {
                    return rupiah(value);
                }
            },
        },
        tooltip: {
            x: {
                format: "MMM yyyy"
            },
            shared: false,
            intersect: true,
            enabled: false,
            custom: function({ series, seriesIndex, dataPointIndex, w }) {
                const category = w.globals.labels[dataPointIndex];
                    const dates = @json($categories);

                    let tooltipContent = `
                    <div style="
                        background: #fff;
                        border-radius: 10px;
                        border:1px solid #e0e0e0;
                        color: #333;
                        font-size: 14px;
                        width: auto;
                        max-height: 300px;
                        z-index: 9999;
                        display: flex;
                        flex-direction: column;
                    ">`;

                    tooltipContent += `
                    <div style="
                        font-size: 13px;
                        color: #333;
                        padding: 5px;
                        padding-left:15px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        background: #edf0ef;
                        border:1px solid #e0e0e0;

                    ">
                        ${dates[dataPointIndex]}
                    </div>`;

                    let total = 0;
                    tooltipContent += `
                    <div style="
                        flex-grow: 1;
                        overflow-y: auto;
                        padding: 10px;
                        max-height: 150px;
                    ">`;

                    w.config.series.forEach((seriesItem, index) => {
                        const value = series[index] ? series[index][dataPointIndex] : null;
                        const isActive = w.globals.series[index].length > 0;

                        if (isActive) {
                            const color = w.config.colors[index];
                            tooltipContent += `
                                <div style="
                                    color: #555;
                                    font-size: 12px;
                                    margin-top: 10px;
                                    display: flex;
                                    align-items: center;
                                ">
                                    <span style="
                                        display: inline-block;
                                        width: 12px;
                                        height: 12px;
                                        background-color: ${color};
                                        border-radius: 50%;
                                        margin-right: 10px;
                                    "></span>
                                    <span style="margin-right: 8px;">${seriesItem.name}:</span>
                                    <strong> ${value.toLocaleString()} </strong>
                                </div>
                            `;
                            total += value;
                        }
                    });

                    tooltipContent += `</div>`;

                    // Footer
                    tooltipContent += `
                    <div style="
                        text-align: center;
                        padding: 5px;
                        height: 40px;
                        background: #edf0ef;
                        border:1px solid #e0e0e0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: bold;
                    ">
                        Total: ${total.toLocaleString()}
                    </div>
                    </div>`;

                    return tooltipContent;
            },
        },

    };

    const chart = new ApexCharts(document.querySelector("#{{ $id }}"), options);
    chart.render();
    document.addEventListener('click', function(event) {
        const chartElement = document.querySelector('#{{ $id }}');
        const manualTooltip = document.getElementById('manual-apexcharts-tooltip');
        if (manualTooltip && !manualTooltip.contains(event.target))
        {

            manualTooltip.style.display = 'none';
            window.activeTooltipContext = null;
        }
    });
    document.addEventListener('mousemove', function (event) {
        const chartElement = document.querySelector('#{{ $id }}');
        const manualTooltip = document.getElementById('manual-apexcharts-tooltip');
        if (
            manualTooltip &&
            chartElement &&
            !chartElement.contains(event.target) &&
            !manualTooltip.contains(event.target)
        ) {
            manualTooltip.style.display = 'none';
            window.activeTooltipContext = null;
        }
    });
</script>

@endpush