{% extends "base.html" %}

{% block title %}Rechnungswesen - Angebote{% endblock %}

{% block header_title %}Angebot {{ offer.offer_number }}{% endblock %}

{% block header_description %}Vorschau{% endblock %}

{% block content %}

<div class="w-5xl max-w-5xl mx-auto bg-white rounded-2xl shadow p-10 text-slate-900">

    <!-- HEADER -->
    <div class="flex justify-between items-start">

        <div>
            {% if company.logo %}
                <img src="{{ company.logo.url }}" class="h-32 mb-4">
            {% else %}
                <h1 class="text-2xl font-bold" style="color: {{ company.color }}">
                    {{ company.companyname }}
                </h1>

                {% if company.slogan %}
                    <p class="text-sm text-slate-600 mt-1">
                        {{ company.slogan }}
                    </p>
                {% endif %}
            {% endif %}

            

            <div class="mt-4 text-sm">
                <p>{{ company.name }}</p>
                <p>
                    {{ company.street }}
                    ·
                    {{ company.zip }}
                    {{ company.city }}
                </p>
            </div>
        </div>


        <div class="text-right">

            <h2 class="text-3xl font-bold ">
                ANGEBOT
            </h2>


            <table class="mt-4 text-sm ml-auto">

                <tr>
                    <td class="text-slate-600 pr-8 py-1">
                        Angebotsnummer
                    </td>
                    <td class="font-medium">
                        {{ offer.offer_number }}
                    </td>
                </tr>

                <tr>
                    <td class="text-slate-600 pr-8 py-1">
                        Angebotsdatum
                    </td>
                    <td class="font-medium">
                        {{ offer.issue_date|date:"d.m.Y" }}
                    </td>
                </tr>


                {% if offer.due_date %}
                <tr>
                    <td class="text-slate-600 pr-8 py-1">
                        Gültig bis
                    </td>
                    <td class="font-medium">
                        {{ offer.due_date|date:"d.m.Y" }}
                    </td>
                </tr>
                {% endif %}

            </table>

        </div>

    </div>


    <div class="my-8 border-t"></div>


    <!-- EMPFÄNGER -->

    <div class="mb-10">

        <p class="text-xs uppercase tracking-wide text-slate-600 mb-2">
            Angebotsempfänger
        </p>

        <p class="font-semibold text-lg ">

            {% if offer.customer.type == "company" %}
                {{ offer.customer.company_name }}
            {% else %}
                {{ offer.contact_name }}
            {% endif %}

        </p>


        {% if offer.customer.type == "company" %}
            <p class="text-sm">
                z.Hd. {{ offer.contact_name }}
            </p>
        {% endif %}


        <p class="mt-2 text-sm">
            {{ offer.location_street }}<br>
            {{ offer.location_zip }}
            {{ offer.location_city }}
        </p>

    </div>



    <!-- TITEL -->

    <div class="mb-8">

        <h2 class="text-2xl font-bold" style="color: {{ company.color }}">
            Angebot
        </h2>


        {% if company.offer_header_text %}
        <div class="mt-3 text-sm text-slate-600">
            {{ company.offer_header_text|linebreaks }}
        </div>
        {% endif %}

    </div>



    <!-- POSITIONEN -->

    <div class="border rounded-xl overflow-hidden">

        <table class="w-full text-sm">

            <thead>

                <tr style="background-color: {{ company.color }}" class="text-white">

                    <th class="p-3 text-left">
                        Nr.
                    </th>

                    <th class="p-3 text-left">
                        Beschreibung
                    </th>

                    <th class="p-3 text-right">
                        Menge
                    </th>

                    <th class="p-3 text-right">
                        Einheit
                    </th>

                    <th class="p-3 text-right">
                        Preis
                    </th>


                    {% if not company.is_small_business %}
                    <th class="p-3 text-right">
                        Steuer
                    </th>
                    {% endif %}


                    <th class="p-3 text-right">
                        Gesamt
                    </th>

                </tr>

            </thead>


            <tbody>

            {% for item in items %}

                <tr class="border-t">

                    <td class="p-3 text-left">
                        {{ forloop.counter }}
                    </td>

                    <td class="p-3 text-left">
                        {{ item.description }}
                    </td>

                    <td class="p-3 text-right">
                        {{ item.quantity }}
                    </td>

                    <td class="p-3 text-right">
                        {{ item.unit }}
                    </td>

                    <td class="p-3 text-right">
                        {{ item.unit_price_net|floatformat:2 }} €
                    </td>


                    {% if not company.is_small_business %}
                    <td class="p-3 text-right">
                        {{ item.unit_tax_rate|floatformat:0 }} %
                    </td>
                    {% endif %}


                    <td class="p-3 text-right font-medium">
                        {{ item.calculated_total_net|floatformat:2 }} €
                    </td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

    </div>

    <!-- SUMMEN -->

    <div class="flex justify-end mt-8">

        <div class="w-80 text-sm">

            <div class="flex justify-between py-2">
                <span class="text-slate-600">
                    Netto
                </span>

                <span>
                    {{ total_net|floatformat:2 }} €
                </span>
            </div>


            {% if not company.is_small_business %}

                {% for tax_rate, tax_amount in tax_summary.items %}

                <div class="flex justify-between py-2">

                    <span class="text-slate-600">
                        Umsatzsteuer {{ tax_rate|floatformat:0 }} %
                    </span>

                    <span>
                        {{ tax_amount|floatformat:2 }} €
                    </span>

                </div>

                {% endfor %}

            {% endif %}



            <div class="border-t mt-3 pt-4 flex justify-between text-lg font-bold ">

                <span>
                    Gesamt
                </span>

                <span>
                    {% if company.is_small_business %}
                        {{ total_net|floatformat:2 }} €
                    {% else %}
                        {{ total_gross|floatformat:2 }} €
                    {% endif %}
                    
                </span>

            </div>

        </div>

    </div>





    <!-- NOTIZ -->

    {% if offer.note %}

    <div class="mt-10 border rounded-xl p-4">

        <p class="text-xs uppercase tracking-wide text-slate-600 mb-2">
            Angebotshinweis
        </p>


        <div class="text-sm">
            {{ offer.note|linebreaks }}
        </div>

    </div>

    {% endif %}




<!-- KLEINUNTERNEHMER -->
{% if company.is_small_business %}

<div class="mt-10 border rounded-xl p-4">

    <p class="text-xs uppercase tracking-wide text-slate-600 mb-2">
        Kleinunternehmerhinweis
    </p>
    <div class="text-sm">
    {{ company.small_business_text }}
    </div>
</div>

{% endif %}




    <!-- FOOTER -->

    <div class="mt-14 pt-6 border-t grid grid-cols-3 gap-6 text-xs text-slate-600">


        <!-- KONTAKT -->

        <div>

            <p class="font-semibold  mb-2">
                Kontakt
            </p>


            {% if company.phone %}
                <p>{{ company.phone }}</p>
            {% endif %}


            {% if company.email %}
                <p>{{ company.email }}</p>
            {% endif %}


            {% if company.website %}
                <p>{{ company.website }}</p>
            {% endif %}

        </div>




        <!-- STEUERN -->

        <div>

            <p class="font-semibold  mb-2">
                Steuern
            </p>


            {% if company.tax_number %}
                <p>
                    Steuernummer:
                    {{ company.tax_number }}
                </p>
            {% endif %}


            {% if company.vat_number %}
                <p>
                    USt-IdNr.:
                    {{ company.vat_number }}
                </p>
            {% endif %}

        </div>





        <!-- BANK -->

        <div>

            <p class="font-semibold  mb-2">
                Bankverbindung
            </p>


            {% if company.bank_name %}
                <p>
                    {{ company.bank_name }}
                </p>
            {% endif %}


            {% if company.iban %}
                <p>
                    IBAN:
                    {{ company.iban }}
                </p>
            {% endif %}


            {% if company.bic %}
                <p>
                    BIC:
                    {{ company.bic }}
                </p>
            {% endif %}

        </div>


    </div>


</div>

{% endblock %}