{% extends 'AppBundle:Documents:v2\\standard_layout.html.twig' %}

{% block style %}
    {{ parent() }}
    <style>
        div {
            font-family: 'Lato', sans-serif;
            font-size: 20px;
        }

        .text {
            position: absolute;
            z-index: 2;
            font-size: 13px;
        }

        .last-name-supplier {
            width: 150px;
            top: 170px;
            left: 80px;
        }

        .first-name-supplier {
            width: 180px;
            top: 170px;
            left: 305px;
        }

        .address-supplier {
            width: 300px;
            top: 220px;
            left: 80px;
        }

        .postal-code-supplier {
            width: 110px;
            top: 270px;
            left: 80px;
        }

        .city-supplier {
            width: 250px;
            top: 270px;
            left: 230px;
        }

        .birth-date-supplier {
            width: 110px;
            top: 320px;
            left: 80px;
        }

        .phone-number-supplier {
            width: 250px;
            top: 320px;
            left: 230px;
        }

        .identity-card-number-supplier {
            width: 250px;
            top: 370px;
            left: 80px;
        }

        .last-name-group {
            width: 180px;
            top: 170px;
            left: 530px;
        }

        .address-group {
            width: 300px;
            top: 220px;
            left: 530px;
        }

        .postal-code-group {
            width: 110px;
            top: 270px;
            left: 530px;
        }

        .city-group {
            width: 250px;
            top: 270px;
            left: 680px;
        }

        .phone-number-group {
            width: 250px;
            top: 320px;
            left: 680px;
        }

        .brand {
            width: 195px;
            top: 445px;
            left: 85px;
        }

        .model {
            width: 180px;
            top: 445px;
            left: 315px;
        }

        .vin {
            width: 200px;
            top: 445px;
            left: 535px;
        }

        .price-ttc {
            width: 200px;
            top: 545px;
            left: 85px;
        }

        .city-group-2 {
            width: 250px;
            top: 1025px;
            left: 85px;
        }

        .purchase-date {
            width: 100px;
            top: 1025px;
            left: 380px;
        }

        .city-group-3 {
            width: 250px;
            top: 1025px;
            left: 530px;
        }

        .purchase-date-2 {
            width: 100px;
            top: 1025px;
            left: 830px;
        }

        .price-ttc-3 {
            width: 110px;
            top: 1240px;
            left: 530px;
        }

        .order-form-sell-date {
            width: 150px;
            top: 1290px;
            left: 380px;
        }

        .order-form-sell-hour {
            width: 150px;
            top: 1290px;
            left: 680px;
        }
    </style>
{% endblock style %}

{% block body %}
    {% set purchaseSupplier = vehicleData.purchaseSupplier %}
    {% set vehiclePurchase = vehicleData.vehiclePurchase %}
    {% set addressSellingPoint = group.addressSellingPoint %}

    <div>
        <img class="w-100" src="{{ asset('/bundles/app/images/via/contrat_de_vente.png') }}">
    </div>

    <div class="text last-name-supplier">
        {% if purchaseSupplier.civility is defined %}
            {{ purchaseSupplier.lastName }}
        {% else %}
            {{ purchaseSupplier.corporateNameContact }}
        {% endif %}
    </div>

    <div class="text first-name-supplier">
        {% if purchaseSupplier.civility is defined %}
            {{ purchaseSupplier.firstName }}
        {% endif %}
    </div>

    <div class="text address-supplier">
        {{ purchaseSupplier.address }}
    </div>

    <div class="text postal-code-supplier">
        {{ purchaseSupplier.postalCode }}
    </div>

    <div class="text city-supplier">
        {{ purchaseSupplier.city }}
    </div>

    <div class="text phone-number-supplier">
        {{ purchaseSupplier.phoneNumber }}
    </div>

    <div class="text birth-date-supplier">
        {{ purchaseSupplier.birthDate }}
    </div>

    <div class="text identity-card-number-supplier">
        {{ purchaseSupplier.identityCardNumber }}
    </div>

    <div class="text last-name-group">
        {{ group.corporateName }}
    </div>

    <div class="text address-group">
        {{ addressSellingPoint.address }}
    </div>

    <div class="text postal-code-group">
        {{ addressSellingPoint.postalCode }}
    </div>

    <div class="text city-group">
        {{ addressSellingPoint.city }}
    </div>

    <div class="text phone-number-group">
        {{ group.phoneNumber }}
    </div>

    <div class="text brand">
        {{ vehicleData.brand }}
    </div>

    <div class="text model">
        {{ vehicleData.model }}
    </div>

    <div class="text vin">
        {{ vehicleData.vin }}
    </div>

    <div class="text price-ttc">
        {{ vehiclePurchase.priceTtc }} {{ currencySymbol }}
    </div>

    <div class="text city-group-2">
        {{ addressSellingPoint.city }}
    </div>

    <div class="text purchase-date">
        {{ vehiclePurchase.purchaseDate }}
    </div>

    <div class="text city-group-3">
        {{ addressSellingPoint.city }}
    </div>

    <div class="text purchase-date-2">
        {{ vehiclePurchase.purchaseDate }}
    </div>

    <div class="text price-ttc-3">
        {{ vehiclePurchase.priceTtc }} {{ currencySymbol }}
    </div>

    <div class="text order-form-sell-date">
        {{ orderForm.orderFormSellDate }}
    </div>

    <div class="text order-form-sell-hour">
        {{ orderForm.orderFormSellHour }}
    </div>
{% endblock body %}