<!DOCTYPE html>
<html>
<body>
<table class="mainTable">
<tr>
<td>
<span id="label">1. Remitente / Expediteur / Sender</span>
<hr>
<b>{{data.senderName}}</b><br>
{{data.senderStreet}}<br>
{{data.senderPostCode}} {{data.senderCity}} {{(data.senderCountry) ? `(${data.senderCountry})` : null}}
</td>
<td id="cellHeader">
<span id="title">CMR</span><br>
{{data.cmrFk}}
</td>
</tr>
<tr>
<td>
<span id="label">2. Consignatario / Destinataire / Consignee</span>
<hr>
<b>{{data.deliveryAddressFk}}<br>
{{data.deliveryName}}<br>
{{data.deliveryPhone || data.clientPhone}}
{{((data.deliveryPhone || data.clientPhone) && data.deliveryMobile) ? '/' : null}}
{{data.deliveryMobile}}</b>
</td>
<td>
<span id="label">16. Transportista / Transporteur / Carrier</span>
<hr>
<b>{{data.carrierName}}</b><br>
{{data.carrierStreet}} {{data.carrierPostalCode}}
{{data.carrierCity}} {{(data.carrierCountry)
? `(${data.carrierCountry})`
: null}}<br>
<b>CIF:</b> {{data.carrierCif}}
</td>
</tr>
<tr>
<td>
<span id="label">
3. Lugar y fecha de entrega /
Lieu et date de livraison /
Place and date of delivery
</span>
<hr>
<b>{{data.deliveryStreet}}<br>
{{data.deliveryPostalCode}} {{data.deliveryCity}} {{(data.deliveryCountry) ? `(${data.deliveryCountry})` : null}}<br>
{{(data.ead) ? formatDate(data.ead, '%d/%m/%Y') : null}}</b>
</td>
<td>
<span id="label">17. Porteadores sucesivos / Transporteurs succesifs / Succesive Carriers</span>
<hr>
</td>
</tr>
<tr>
<td>
<span id="label">
4. Lugar y fecha de carga /
Lieu et date del prise en charge de la merchandise /
Place and date of taking over the goods
</span>
<hr>
<b>{{data.loadStreet}}<br>
{{data.loadPostalCode}} {{data.loadCity}} {{(data.loadCountry) ? `(${data.loadCountry})` : null}}<br>
{{formatDate(data.created, '%d/%m/%Y')}}</b>
</td>
<td rowspan="2">
<span id="label">
18. Obervaciones del transportista /
Reserves et observations du transporteur /
Carrier's reservations and observations
</span>
<hr>
<table class="observationTable">
<tr>
<td>
{{data.observations}}
</td>
<td id="qrSection">
<img id="truckPlateQr" v-bind:src="truckPlateQr"/>
<br>
<b>{{data.truckPlate}}</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<span id="label">5. Documentos anexos / Documents annexes / Documents attached</span>
<hr>
</td>
</tr>
</table>
<table class="specialTable">
<tr>
<td>
<span id="label">
7 & 8. Número de bultos y clase de embalage /
Number of packages and packaging class /
Nombre de colis et classe d'emballage
</span>
<hr>
<div id="lineBreak">
<b>{{data.packagesList}}</b>
</div>
</td>
<td id="itemCategoryList">
<table class="categoryTable">
<tr id="merchandiseLabels">
<td>6. Marcas y números / Brands and numbers / Marques et numéros</td>
<td>9. Naturaleza de la merc. / Nature of goods / Nature des marchandises</td>
<td>10. nº Estadístico / Statistical no. / n° statistique</td>
<td>11. Peso bruto / Gross weight / Poids brut (kg)</td>
<td>12. Volumen / Volume (m3)</td>
</tr>
<tr v-for="merchandise in merchandises" id="merchandiseData">
<td>{{merchandise.ticketFk}}</td>
<td>{{merchandise.name}}</td>
<td>N/A</td>
<td>{{merchandise.weight}}</td>
<td>{{merchandise.volume}}</td>
</tr>
</table>
<div v-if="!merchandises" id="merchandiseDetail">
{{data.merchandiseDetail}}
</div>
</td>
</tr>
</table>
<table class="mainTable">
<tr>
<td>
<span id="label">
13. Instrucciones del remitente /
Instrunstions de l'expèditeur / Sender
instruccions
</span>
<hr>
<b>{{data.senderInstruccions}}</b>
</td>
<td>
<span id="label">
19. Estipulaciones particulares /
Conventions particulieres /
Special agreements
</span>
<hr>
<b>{{data.specialAgreements}}</b>
</td>
</tr>
<tr>
<td>
<span id="label">
14. Forma de pago /
Prescriptions d'affranchissement /
Instruction as to payment for carriage
</span>
<hr>
<b>{{data.paymentInstruccions}}</b>
</td>
<td>
<span id="label">20. A pagar por / Être payé pour / To be paid by</span>
<hr>
</td>
</tr>
<tr>
<td>
<span id="label">21. Formalizado en / Etabile a / Estabilshed in</span>
<hr>
<b>{{data.loadStreet}}</b><br>
{{data.loadPostalCode}} {{data.loadCity}} {{(data.loadCountry) ? `(${data.loadCountry})` : null}} <br>
</td>
<td>
<span id="label">15. Reembolso / Remboursement / Cash on delivery</span>
<hr>
</td>
</tr>
</table>
<table class="signTable">
<tr>
<td>
<span id="label">
22. Firma y sello del remitente /
Signature et timbre de l'expèditeur /
Signature and stamp of the sender
</span>
<hr>
<div class="imgSection">
<img :src="senderStamp"/>
</div>
</td>
<td>
<span id="label">
23. Firma y sello del transportista /
Signature et timbre du transporteur /
Signature and stamp of the carrier
</span>
<hr>
<div class="imgSection">
<img :src="deliveryStamp"/>
</div>
</td>
<td>
<span id="label">
24. Firma y sello del consignatario /
Signature et timbre du destinataire /
Signature and stamp of the consignee
</span>
<hr>
<div class="imgSection">
<img :src="signPath"/>
</div>
</td>
</tr>
</table>
</body>
</html>