{{-- Sans cette declaration, dompdf lit le document en Windows-1252 et les
     caracteres accentues ressortent en deux signes sans glyphe. --}}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

@php
    /**
     * Affiches de destockage, une page A4 par produit. Tout est pose en
     * absolu, en millimetres : dompdf n'a ni flex ni grille, et l'etoile du
     * prix deborde de la page par la droite, ce qu'un flux ne sait pas faire.
     */

    // L'etoile : douze pointes sur une ellipse, la meme en rouge decalee
    // dessous pour l'ombre. Un trait de la couleur du fond, a jointures
    // rondes, emousse les pointes. En SVG et pas en image : elle s'imprime en
    // A4 comme en A3 sans baver.
    $pointes = [];
    for ($i = 0; $i < 24; $i++) {
        $angle = M_PI * $i / 12 - M_PI / 2;
        [$rx, $ry] = $i % 2 ? [262, 150] : [300, 186];
        $pointes[] = round(310 + $rx * cos($angle), 1) . ',' . round(196 + $ry * sin($angle), 1);
    }
    $pointes = implode(' ', $pointes);
    $forme = fn ($couleur, $dy) => '<polygon points="' . $pointes . '" transform="translate(0,' . $dy . ')" fill="' . $couleur
        . '" stroke="' . $couleur . '" stroke-width="14" stroke-linejoin="round"/>';
    $etoile = 'data:image/svg+xml;base64,' . base64_encode(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 420" width="620" height="420">'
        . $forme('#ff1e00', 22) . $forme('#fdc844', 0) . '</svg>'
    );

    // La barre du prix d'origine, en SVG elle aussi : dompdf ne sait pas
    // incliner un text-decoration.
    $barre = 'data:image/svg+xml;base64,' . base64_encode(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" width="200" height="40" preserveAspectRatio="none">'
        . '<line x1="6" y1="34" x2="194" y2="6" stroke="#ff1e00" stroke-width="7" stroke-linecap="round"/></svg>'
    );

    // Largeur d'un texte en Helvetica gras, en mm. Les chiffres y ont tous
    // la meme chasse (556 pour 1000), l'espace la moitie : de quoi poser la
    // barre sur les chiffres seuls sans mesurer quoi que ce soit.
    $chasse = fn (string $chiffres, float $corps) =>
        (preg_match_all('/\d/', $chiffres) * 0.556 + preg_match_all('/[ ,]/', $chiffres) * 0.278) * $corps * 0.3528;

    // Centre du texte dans l'etoile, corps du prix barre, largeur de « € HT ».
    $axe = 151;
    $corpsBarre = 34;
    $suffixe = (0.278 + 0.556 + 0.278 + 0.722 + 0.611) * $corpsBarre * 0.3528;
@endphp
<style>
    @page {
        margin: 0;
    }

    body {
        margin: 0;
        /* Helvetica est integree au format PDF : dompdf ne l'embarque pas. */
        font-family: "Helvetica", sans-serif;
        color: #000;
    }

    .affiche {
        position: relative;
        width: 210mm;
        height: 296mm;
        overflow: hidden;
        page-break-after: always;
    }

    .affiche.derniere {
        page-break-after: auto;
    }

    .code {
        position: absolute;
        top: 4mm;
        left: 4mm;
        padding: 1mm 7mm 2mm 7mm;
        background: #1a1a1a;
        color: #fff;
        font-size: 44pt;
        font-weight: bold;
        white-space: nowrap;
    }

    /* Code long (« PORT-EURODELFIN-DUP ») : meme bandeau, corps reduit. */
    .code.long {
        font-size: 24pt;
        padding: 3mm 6mm;
    }

    .image {
        position: absolute;
        top: 30mm;
        left: 6mm;
        width: 94mm;
    }

    .etoile {
        position: absolute;
        top: 12mm;
        left: 86mm;
        width: 130mm;
        height: 88mm;
    }

    .prix-barre,
    .prix {
        position: absolute;
        left: {{ $axe - 55 }}mm;
        width: 110mm;
        text-align: center;
        font-weight: bold;
        white-space: nowrap;
    }

    .prix-barre {
        top: 31mm;
        font-size: {{ $corpsBarre }}pt;
        font-style: italic;
    }

    .prix {
        top: 46mm;
        font-size: 64pt;
    }

    /* Sans prix d'origine, le prix seul se recentre dans l'etoile. */
    .prix.seul {
        top: 38mm;
    }

    .prix .ht {
        font-size: 26pt;
    }

    .barre {
        position: absolute;
        top: 32mm;
        height: 13mm;
    }

    /* Deux tableaux cote a cote plutot qu'un seul a cinq colonnes : dompdf
       repartit mal les largeurs d'un tableau fixe et elargissait la
       gouttiere aux depens des valeurs. */
    table.fiche {
        position: absolute;
        top: 103mm;
        width: 93mm;
        border-collapse: collapse;
    }

    table.fiche.gauche {
        left: 8mm;
    }

    table.fiche.droite {
        left: 109mm;
    }

    table.fiche td {
        padding: 0 0 6.5mm 0;
        vertical-align: top;
        font-size: 12pt;
        line-height: 1.25;
        font-weight: bold;
    }

    table.fiche td.libelle {
        width: 33mm;
        white-space: nowrap;
    }

    table.fiche td.valeur {
        width: 60mm;
        text-align: right;
    }

    table.fiche .annexe {
        font-weight: normal;
        white-space: nowrap;
    }
</style>

@foreach ($affiches as $a)
    @php
        // Le prix d'origine ne se barre que s'il y a un prix a mettre en face.
        $barre_ = $a['prix'] && $a['prix_barre'] ? $a['prix_barre'] : null;
        $chiffres = $barre_ ? $chasse($barre_, $corpsBarre) : 0;
        $debut = $axe - ($chiffres + $suffixe) / 2;

        $colonnes = [
            'gauche' => [
                ['Produit',       $a['produit']],
                ['Hauteur',       [$a['hauteur'], null]],
                ['Entre poteaux', [$a['largeur'], null]],
            ],
            'droite' => [
                ['Couleur',      $a['couleur']],
                ['État général', [$a['etat'], null]],
                ['Observations', [implode("\n", $a['observations']), null]],
            ],
        ];
    @endphp
    <div class="affiche {{ $loop->last ? 'derniere' : '' }}">
        <div class="code {{ mb_strlen($a['code']) > 8 ? 'long' : '' }}">{{ $a['code'] }}</div>

        @if ($a['image'])
            <img class="image" src="{{ $a['image'] }}">
        @endif

        @if ($a['prix'])
            <img class="etoile" src="{{ $etoile }}">

            @if ($barre_)
                <div class="prix-barre">{{ $barre_ }} € HT</div>
                <img class="barre" src="{{ $barre }}"
                     style="left: {{ round($debut - 3, 1) }}mm; width: {{ round($chiffres + 6, 1) }}mm">
                <div class="prix">{{ $a['prix'] }} €</div>
            @else
                <div class="prix seul">{{ $a['prix'] }} € <span class="ht">HT</span></div>
            @endif
        @endif

        @foreach ($colonnes as $cote => $lignes)
            <table class="fiche {{ $cote }}">
                @foreach ($lignes as [$libelle, $valeur])
                    <tr>
                        <td class="libelle">{{ $libelle }} :</td>
                        <td class="valeur">{!! nl2br(e($valeur[0] ?? '')) ?: '—' !!} <span class="annexe">{{ $valeur[1] ?? '' }}</span></td>
                    </tr>
                @endforeach
            </table>
        @endforeach
    </div>
@endforeach