@php
    $chartX = 80;
    $chartY = 30;
    $chartWidth = 680;
    $yPerSD = 340 / 6;
    $yPaddingPx = 0.5 * $yPerSD;
    $chartHeight = 6 * $yPerSD + 2 * $yPaddingPx;
    $centerY = $chartY + $chartHeight / 2;
    $topY = $centerY - 3 * $yPerSD;
    $bottomY = $centerY + 3 * $yPerSD;
    $clipTop = $chartY;
    $clipBottom = $chartY + $chartHeight;

    $daySecs = 86400;
    $dataDaysMap = [];
    foreach ($lots as $lot) {
        foreach ($lot['points'] as $p) {
            $day = (int) (($p['x'] / 1000) / $daySecs);
            $dataDaysMap[$day] = true;
        }
    }
    $dataDays = array_keys($dataDaysMap);
    sort($dataDays);
    $nDays = count($dataDays);
    $hasPoints = $nDays > 0;
    $singleDay = $nDays < 2;
    $timeRange = $singleDay ? 1 : $nDays - 1;
    $labelStep = ($nDays > 1 && $chartWidth / ($nDays - 1) < 40) ? (int) ceil(40 / ($chartWidth / ($nDays - 1))) : 1;
    $dayToIndex = array_flip($dataDays);

    $chartTitle = '';
    if ($hasPoints) {
        $firstLot = $lots[0] ?? null;
        if ($firstLot) {
            $chartTitle = $firstLot['test_name'] . ' — ' . $firstLot['lot_name'] . ' / ' . $firstLot['lot_no'];
        }
    }
@endphp
<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="chartClip">
            <rect x="{{ $chartX }}" y="{{ $clipTop }}" width="{{ $chartWidth }}" height="{{ $clipBottom - $clipTop }}" />
        </clipPath>
    </defs>

    @if($chartTitle && ($isFirstChart ?? false))
        <text x="{{ $chartX }}" y="16" font-size="11" font-weight="bold" fill="#333" font-family="Arial, sans-serif">{{ $chartTitle }}</text>
    @endif

    <rect x="{{ $chartX }}" y="{{ $topY }}" width="{{ $chartWidth }}" height="{{ $yPerSD }}" fill="#FFE0B2" />
    <rect x="{{ $chartX }}" y="{{ $centerY + 2 * $yPerSD }}" width="{{ $chartWidth }}" height="{{ $yPerSD }}" fill="#FFE0B2" />
    <rect x="{{ $chartX }}" y="{{ $centerY - 2 * $yPerSD }}" width="{{ $chartWidth }}" height="{{ $yPerSD }}" fill="#FFF9C4" />
    <rect x="{{ $chartX }}" y="{{ $centerY + $yPerSD }}" width="{{ $chartWidth }}" height="{{ $yPerSD }}" fill="#FFF9C4" />

    @foreach([-2.5, -1.5, -0.5, 0.5, 1.5, 2.5] as $hsd)
        <line x1="{{ $chartX }}" y1="{{ $centerY + $hsd * $yPerSD }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY + $hsd * $yPerSD }}" stroke="#E0E0E0" stroke-dasharray="2,4" />
    @endforeach

    <g clip-path="url(#chartClip)">
        <line x1="{{ $chartX }}" y1="{{ $topY }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $topY }}" stroke="#999" stroke-dasharray="4,4" />
        <line x1="{{ $chartX }}" y1="{{ $centerY - 2 * $yPerSD }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY - 2 * $yPerSD }}" stroke="#999" stroke-dasharray="4,4" />
        <line x1="{{ $chartX }}" y1="{{ $centerY - $yPerSD }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY - $yPerSD }}" stroke="#999" stroke-dasharray="4,4" />
        <line x1="{{ $chartX }}" y1="{{ $centerY }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY }}" stroke="#000" stroke-width="2" />
        <line x1="{{ $chartX }}" y1="{{ $centerY + $yPerSD }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY + $yPerSD }}" stroke="#999" stroke-dasharray="4,4" />
        <line x1="{{ $chartX }}" y1="{{ $centerY + 2 * $yPerSD }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $centerY + 2 * $yPerSD }}" stroke="#999" stroke-dasharray="4,4" />
        <line x1="{{ $chartX }}" y1="{{ $bottomY }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $bottomY }}" stroke="#999" stroke-dasharray="4,4" />

        @foreach($dataDays as $dayIndex => $day)
            @php
                $xPos = $singleDay
                    ? $chartX + $chartWidth / 2
                    : $chartX + ($dayIndex / $timeRange) * $chartWidth;
            @endphp
            <line x1="{{ $xPos }}" y1="{{ $clipTop }}" x2="{{ $xPos }}" y2="{{ $clipBottom }}" stroke="#EEE" stroke-dasharray="1,3" />
        @endforeach

        @foreach($lots as $lot)
            @php
                $polylinePoints = '';
                foreach ($lot['points'] as $p) {
                    if (abs($p['normY']) > 3.3) continue;
                    $day = (int) (($p['x'] / 1000) / $daySecs);
                    $dayIndex = $dayToIndex[$day] ?? -1;
                    if ($dayIndex < 0) continue;
                    $xPos = $singleDay
                        ? $chartX + $chartWidth / 2
                        : $chartX + ($dayIndex / $timeRange) * $chartWidth;
                    $yPos = $centerY - $p['normY'] * $yPerSD;
                    if ($polylinePoints) { $polylinePoints .= ' '; }
                    $polylinePoints .= number_format($xPos, 1, '.', '') . ',' . number_format($yPos, 1, '.', '');
                }
            @endphp
            @if($polylinePoints && !$singleDay)
                <polyline points="{{ $polylinePoints }}" fill="none" stroke="#28a745" stroke-width="2" />
            @endif
            @foreach($lot['points'] as $p)
                @php
                    $day = (int) (($p['x'] / 1000) / $daySecs);
                    $dayIndex = $dayToIndex[$day] ?? -1;
                    if ($dayIndex < 0) continue;
                    $xPos = $singleDay
                        ? $chartX + $chartWidth / 2
                        : $chartX + ($dayIndex / $timeRange) * $chartWidth;
                    $yPos = $centerY - $p['normY'] * $yPerSD;
                @endphp
                @if(abs($p['normY']) > 3.3)
                    @if($p['normY'] > 0)
                        <polygon points="{{ $xPos - 4 }},{{ $topY + 8 }} {{ $xPos }},{{ $topY }} {{ $xPos + 4 }},{{ $topY + 8 }}" fill="#28a745" />
                        <text x="{{ $xPos + 7 }}" y="{{ $topY + 6 }}" font-size="8" fill="#28a745" font-family="Arial, sans-serif">{{ number_format($p['y'], 1) }}</text>
                    @else
                        <polygon points="{{ $xPos - 4 }},{{ $bottomY - 8 }} {{ $xPos }},{{ $bottomY }} {{ $xPos + 4 }},{{ $bottomY - 8 }}" fill="#28a745" />
                        <text x="{{ $xPos + 7 }}" y="{{ $bottomY + 5 }}" font-size="8" fill="#28a745" font-family="Arial, sans-serif">{{ number_format($p['y'], 1) }}</text>
                    @endif
                @elseif($p['is_outlier'] ?? false)
                    <circle cx="{{ $xPos }}" cy="{{ $yPos }}" r="6" fill="none" stroke="#28a745" stroke-width="2.5" />
                @else
                    <circle cx="{{ $xPos }}" cy="{{ $yPos }}" r="4" fill="#28a745" />
                @endif
                <line x1="{{ $xPos }}" y1="{{ $chartY + $chartHeight + 1 }}" x2="{{ $xPos }}" y2="{{ $chartY + $chartHeight + 7 }}" stroke="#000" stroke-width="1" />
            @endforeach
        @endforeach
    </g>

    <line x1="{{ $chartX }}" y1="{{ $chartY + $chartHeight + 4 }}" x2="{{ $chartX + $chartWidth }}" y2="{{ $chartY + $chartHeight + 4 }}" stroke="#000" stroke-width="1.5" />

    @php
        $labelDefs = [
            ['text' => '3S', 'lineY' => $topY, 'bold' => false],
            ['text' => '2S', 'lineY' => $centerY - 2 * $yPerSD, 'bold' => false],
            ['text' => '1S', 'lineY' => $centerY - $yPerSD, 'bold' => false],
            ['text' => 'Mean', 'lineY' => $centerY, 'bold' => true],
            ['text' => '-1S', 'lineY' => $centerY + $yPerSD, 'bold' => false],
            ['text' => '-2S', 'lineY' => $centerY + 2 * $yPerSD, 'bold' => false],
            ['text' => '-3S', 'lineY' => $bottomY, 'bold' => false],
        ];
    @endphp
    @foreach($labelDefs as $lbl)
        @php
            $textY = $lbl['bold'] ? $lbl['lineY'] - 4 : $lbl['lineY'] + 5;
            $pillY = $lbl['bold'] ? $lbl['lineY'] - 11 : $lbl['lineY'] - 6;
        @endphp
        <rect x="{{ $chartX - 2 }}" y="{{ $pillY }}" width="28" height="14" fill="#fff" stroke="none" rx="2" />
        <text x="{{ $chartX + 6 }}" y="{{ $textY }}" text-anchor="start" font-size="12" font-weight="{{ $lbl['bold'] ? 'bold' : 'normal' }}" fill="{{ $lbl['bold'] ? '#000' : '#333' }}" font-family="Arial, sans-serif">{{ $lbl['text'] }}</text>
    @endforeach

    @foreach($dataDays as $dayIndex => $day)
        @php
            $xPos = $singleDay
                ? $chartX + $chartWidth / 2
                : $chartX + ($dayIndex / $timeRange) * $chartWidth;
            $dateLabel = date('d-M', $day * $daySecs);
        @endphp
        <line x1="{{ $xPos }}" y1="{{ $chartY + $chartHeight + 4 }}" x2="{{ $xPos }}" y2="{{ $chartY + $chartHeight + 9 }}" stroke="#000" stroke-width="1" />
        @if($singleDay || $dayIndex % $labelStep == 0 || $dayIndex == $nDays - 1)
            <text x="{{ $xPos }}" y="{{ $chartY + $chartHeight + 22 }}" text-anchor="end" font-size="10" fill="#555" font-family="Arial, sans-serif" transform="rotate(-45, {{ $xPos }}, {{ $chartY + $chartHeight + 22 }})">{{ $dateLabel }}</text>
        @endif
    @endforeach

    @if($lots && $hasPoints && ($isFirstChart ?? false))
        @php
            $legX = $chartX + $chartWidth + 15;
            $legY = $chartY + 8;
            $legEndY = $legY;
            foreach ($lots as $lot) {
                $legEndY += !empty($lot['test_name']) ? 32 : 20;
            }
        @endphp
        <rect x="{{ $legX }}" y="{{ $chartY + 4 }}" width="190" height="{{ max($legEndY - ($chartY + 4) + 6, 30) }}" fill="#fff" stroke="#000" stroke-width="1" rx="2" />
        @foreach($lots as $lot)
            @php
                $legendItem = $lot['lot_name'] . ' / ' . $lot['lot_no'];
            @endphp
            <circle cx="{{ $legX + 10 }}" cy="{{ $legY + 5 }}" r="4" fill="#28a745" />
            <text x="{{ $legX + 20 }}" y="{{ $legY + 9 }}" font-size="9" fill="#333" font-family="Arial, sans-serif">{{ $legendItem }}</text>
            @if(!empty($lot['test_name']))
                <text x="{{ $legX + 20 }}" y="{{ $legY + 21 }}" font-size="8" fill="#666" font-family="Arial, sans-serif">{{ $lot['test_name'] }}</text>
                @php $legY += 32; @endphp
            @else
                @php $legY += 20; @endphp
            @endif
        @endforeach
    @endif

    @if(!$hasPoints)
        <text x="{{ $chartX + $chartWidth / 2 }}" y="{{ $centerY }}" text-anchor="middle" font-size="14" fill="#999" font-family="Arial, sans-serif">No data points in selected range</text>
    @endif

    <rect x="{{ $chartX }}" y="{{ $chartY }}" width="{{ $chartWidth }}" height="{{ $chartHeight }}" fill="none" stroke="#000" stroke-width="1.5" />
</svg>