{{--
    SIBO gas curve. Rendered to a string and embedded as a data: URI <img>, because
    wkhtmltopdf's WebKit ignores inline <svg> but does render SVG images.
    Kept to shapes Qt's SVG renderer supports: line, polyline, rect, circle, text.
--}}
@php
    $W = 700; $H = 250;
    $L = 58;  $R = 655; $T = 34; $B = 196;

    $all = [];
    foreach ([$h2, $ch4] as $gas) {
        foreach (($gas['points'] ?? []) as $p) if ($p['value'] !== null) $all[] = $p['value'];
    }
    $all[] = $h2['cutoff'] ?? $h2['threshold'];
    $all[] = $ch4['threshold'];

    // Round the axis to a step that yields whole-number labels (0, 5, 10 ... ) rather
    // than whatever max/6 happens to be.
    $needed = max(30, max($all) * 1.15);
    $step   = 5;
    foreach ([1, 2, 5, 10, 20, 25, 50, 100, 200] as $candidate) {
        $step = $candidate;
        if ($needed / $candidate <= 7) break;
    }
    $ticks = (int) ceil($needed / $step);
    $yMax  = $ticks * $step;

    $xAt = fn ($i) => round($L + ($R - $L) * $i / 4, 1);
    $yAt = fn ($v) => round($B - ($B - $T) * ($v / $yMax), 1);

    $series = function (array $gas) use ($xAt, $yAt) {
        $pts = [];
        foreach (($gas['points'] ?? []) as $i => $p) {
            if ($p['value'] === null) continue;
            $pts[] = ['v' => $p['value'], 'x' => $xAt($i), 'y' => $yAt($p['value'])];
        }
        return $pts;
    };
    $h2Pts  = $series($h2);
    $ch4Pts = $series($ch4);
    $poly   = fn ($pts) => implode(' ', array_map(fn ($p) => $p['x'] . ',' . $p['y'], $pts));

    $num = fn ($v) => $v === null ? '--' : rtrim(rtrim(number_format((float) $v, 2, '.', ''), '0'), '.');

    $mins   = [0, 30, 60, 75, 90];
    $danger = '#E9473A';
    $green  = '#1FA345';
    $orange = '#F5A623';
@endphp
<svg xmlns="http://www.w3.org/2000/svg" width="{{ $W }}" height="{{ $H }}" viewBox="0 0 {{ $W }} {{ $H }}">
    <rect x="0" y="0" width="{{ $W }}" height="{{ $H }}" fill="#ffffff"/>

    @for($g = 0; $g <= $ticks; $g++)
        @php $gv = $step * $g; $gy = $yAt($gv); @endphp
        <line x1="{{ $L }}" y1="{{ $gy }}" x2="{{ $R }}" y2="{{ $gy }}" stroke="#ECECEC" stroke-width="1"/>
        <text x="{{ $L - 8 }}" y="{{ $gy + 4 }}" font-family="Arial" font-size="10" fill="#7A8194" text-anchor="end">{{ $gv }}</text>
    @endfor

    @if($h2['cutoff'] !== null)
        <line x1="{{ $L }}" y1="{{ $yAt($h2['cutoff']) }}" x2="{{ $R }}" y2="{{ $yAt($h2['cutoff']) }}"
              stroke="{{ $danger }}" stroke-width="1.2" stroke-dasharray="6,4"/>
    @endif
    <line x1="{{ $L }}" y1="{{ $yAt($ch4['threshold']) }}" x2="{{ $R }}" y2="{{ $yAt($ch4['threshold']) }}"
          stroke="{{ $orange }}" stroke-width="1.2" stroke-dasharray="6,4"/>

    <line x1="{{ $L }}" y1="{{ $B }}" x2="{{ $R }}" y2="{{ $B }}" stroke="#B9BEC9" stroke-width="1"/>
    <line x1="{{ $L }}" y1="{{ $T }}" x2="{{ $L }}" y2="{{ $B }}" stroke="#B9BEC9" stroke-width="1"/>

    @foreach($mins as $i => $m)
        <text x="{{ $xAt($i) }}" y="{{ $B + 15 }}" font-family="Arial" font-size="10" fill="#5D6481" text-anchor="middle">{{ $m }}{{ $i ? ' min' : '' }}</text>
        @if($i === 0)
            <text x="{{ $xAt($i) }}" y="{{ $B + 27 }}" font-family="Arial" font-size="9" fill="#7A8194" text-anchor="middle">(Baseline)</text>
        @endif
    @endforeach
    <text x="{{ round(($L + $R) / 2) }}" y="{{ $H - 6 }}" font-family="Arial" font-size="10.5" fill="#5D6481" text-anchor="middle">Time (minutes)</text>
    <text x="16" y="{{ round(($T + $B) / 2) }}" font-family="Arial" font-size="10.5" fill="#5D6481" text-anchor="middle"
          transform="rotate(-90 16 {{ round(($T + $B) / 2) }})">Gas Level (ppm)</text>

    @if(count($ch4Pts) > 1)
        <polyline points="{{ $poly($ch4Pts) }}" fill="none" stroke="{{ $green }}" stroke-width="2"/>
    @endif
    @if(count($h2Pts) > 1)
        <polyline points="{{ $poly($h2Pts) }}" fill="none" stroke="{{ $orange }}" stroke-width="2"/>
    @endif
    @foreach($ch4Pts as $p)
        <rect x="{{ $p['x'] - 3.5 }}" y="{{ $p['y'] - 3.5 }}" width="7" height="7" fill="#ffffff" stroke="{{ $green }}" stroke-width="2"/>
    @endforeach
    @foreach($h2Pts as $p)
        <circle cx="{{ $p['x'] }}" cy="{{ $p['y'] }}" r="4" fill="#ffffff" stroke="{{ $orange }}" stroke-width="2"/>
        <text x="{{ $p['x'] }}" y="{{ $p['y'] - 9 }}" font-family="Arial" font-size="10" font-weight="bold" fill="{{ $orange }}" text-anchor="middle">{{ $num($p['v']) }}</text>
    @endforeach

    <line x1="{{ $R - 250 }}" y1="14" x2="{{ $R - 232 }}" y2="14" stroke="{{ $danger }}" stroke-width="1.2" stroke-dasharray="5,3"/>
    <text x="{{ $R - 227 }}" y="17" font-family="Arial" font-size="9.5" fill="#5D6481">H2 threshold ({{ $num($h2['cutoff'] ?? $h2['threshold']) }} ppm)</text>
    <line x1="{{ $R - 100 }}" y1="14" x2="{{ $R - 82 }}" y2="14" stroke="{{ $orange }}" stroke-width="2"/>
    <circle cx="{{ $R - 91 }}" cy="14" r="3.5" fill="#ffffff" stroke="{{ $orange }}" stroke-width="2"/>
    <text x="{{ $R - 77 }}" y="17" font-family="Arial" font-size="9.5" fill="#5D6481">H2 (ppm)</text>

    <line x1="{{ $R - 250 }}" y1="27" x2="{{ $R - 232 }}" y2="27" stroke="{{ $orange }}" stroke-width="1.2" stroke-dasharray="5,3"/>
    <text x="{{ $R - 227 }}" y="30" font-family="Arial" font-size="9.5" fill="#5D6481">CH4 threshold ({{ $num($ch4['threshold']) }} ppm)</text>
    <line x1="{{ $R - 100 }}" y1="27" x2="{{ $R - 82 }}" y2="27" stroke="{{ $green }}" stroke-width="2"/>
    <rect x="{{ $R - 94.5 }}" y="23.5" width="7" height="7" fill="#ffffff" stroke="{{ $green }}" stroke-width="2"/>
    <text x="{{ $R - 77 }}" y="30" font-family="Arial" font-size="9.5" fill="#5D6481">CH4 (ppm)</text>
</svg>