@php
    /**
     * Fiche de fabrication poteau 150, en portugais.
     *
     * Les intitulés de colonnes reproduisent volontairement, au mot près, le
     * document que l'atelier portugais lit déjà (« CAPA » et pas
     * « ACABAMENTO », « DEVIS N° » et pas « N.º ORÇAMENTO »). Ils ne passent
     * donc pas par __() : ce document n'a qu'une langue et qu'un lecteur, et
     * il doit rester reconnaissable par rapport aux plans existants. Les
     * valeurs, elles, sont bien traduites — la locale est forcée à `pt` par le
     * contrôleur avant le rendu.
     *
     * Les largeurs sont relevées sur le document d'origine.
     */
    $colonnes = [
        ['titre' => 'CLIENT',         'valeur' => $client,   'largeur' => '17%'],
        ['titre' => 'QUANTIDADE',     'valeur' => $quantite, 'largeur' => '9%'],
        ['titre' => 'COR',            'valeur' => $couleur,  'largeur' => '15%'],
        ['titre' => 'CAPA',           'valeur' => $finition, 'largeur' => '10%'],
        ['titre' => 'CLIENT N°',      'valeur' => $clientNo, 'largeur' => '7%'],
        ['titre' => 'DEVIS N°',       'valeur' => $devisNo,  'largeur' => '7%'],
        ['titre' => 'DATA ENCOMENDA', 'valeur' => $date,     'largeur' => '13%'],
    ];
@endphp
{{-- Sans cette declaration, dompdf lit le document en Windows-1252 : les
     deux octets UTF-8 du « ° » ressortent en deux caracteres sans glyphe, et
     le cartouche affiche « CLIENT N?? ». --}}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
    @page {
        margin: 8mm;
    }

    body {
        margin: 0;
        /* Helvetica est integree au format PDF : dompdf ne l'embarque pas,
           la fiche pese 6 ko au lieu de 430 avec DejaVu. Elle ne couvre que
           Windows-1252, ce qui suffit au portugais et au francais — si un jour
           un nom de client sort de ce jeu, il faudra repasser a DejaVu et
           accepter le poids. */
        font-family: "Helvetica", sans-serif;
        color: #000;
    }

    table.cartouche {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    table.cartouche td {
        border: 1px solid #000;
        text-align: center;
        vertical-align: middle;
        padding: 4px 3px;
        /* Les libelles de couleur sont longs (« RAL 6005 Vert Basque ») et la
           colonne est etroite : sans ca, dompdf deborde au lieu de couper. */
        word-wrap: break-word;
    }

    table.cartouche td.titre {
        font-size: 7.5pt;
        font-weight: bold;
        letter-spacing: 0.2px;
    }

    table.cartouche td.valeur {
        font-size: 9pt;
        font-weight: bold;
        height: 22px;
    }

    /* Le logo occupe une cellule unique a droite, sur toute la hauteur du
       cartouche, comme sur les plans existants. */
    table.cartouche td.logo {
        padding: 3px 8px;
        text-align: right;
    }

    table.cartouche td.logo img {
        width: 100%;
        max-width: 190px;
    }

    /* Planche : le dessin du poteau, choisi selon la platine. Le conteneur
       porte une taille explicite en mm — dompdf resout mal les pourcentages
       de position sans elle, et le repere de la cote en depend. */
    .planche {
        position: relative;
        margin: 5mm auto 0;
    }

    .planche img {
        width: 100%;
        height: 100%;
        /* Sans ca, dompdf pose l'image sur la ligne de base du bloc et la
           remonte de 20 % de sa hauteur : a 160 mm, elle sortait de la page par
           le haut et son fond blanc recouvrait le cartouche. `display: block`
           ne suffit pas, dompdf garde l'image en inline. */
        vertical-align: top;
    }

    /* La hauteur s'inscrit dans l'interruption de la ligne de cote. Le bloc est
       centre sur le point d'ancrage par des marges negatives : dompdf ne rend
       pas `transform: translate`. */
    .planche .cote {
        position: absolute;
        width: 30mm;
        margin-left: -15mm;
        margin-top: -2.2mm;
        text-align: center;
        font-size: 9pt;
        font-weight: bold;
        /* Pas de fond : la boite fait 30 mm de large pour centrer le texte sur
           l'ancre, elle deborde donc largement de part et d'autre. En blanc,
           elle masquait le poteau juste a cote. */
    }
</style>

<table class="cartouche">
    <tr>
        @foreach ($colonnes as $colonne)
            <td class="titre" style="width: {{ $colonne['largeur'] }}">{{ $colonne['titre'] }}</td>
        @endforeach
        <td class="logo" rowspan="2" style="width: 22%">
            <img src="{{ $logo }}" alt="ACPORTAIL">
        </td>
    </tr>
    <tr>
        @foreach ($colonnes as $colonne)
            <td class="valeur">{{ $colonne['valeur'] }}</td>
        @endforeach
    </tr>
</table>

@if ($planche)
    <div class="planche" style="width: {{ $planche['largeur'] }}mm; height: {{ $planche['hauteur'] }}mm">
        <img src="{{ $planche['image'] }}" alt="">

        @if ($planche['cote'])
            <span class="cote" style="left: {{ $planche['x'] }}%; top: {{ $planche['y'] }}%">{{ $planche['cote'] }}</span>
        @endif
    </div>
@endif