Untitled

{{ tenant.load(['default_currency']) }}
{% set firstProperty = properties.first() %}
{% set owner = acount ? acount : firstProperty.homeowners.first() %}
<div class="max-w-3xl mx-auto my-8 bg-white print:bg-white p-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b pb-6 mb-8 gap-6">
        <!-- Company Info -->
        <div class="flex items-start gap-4 w-full md:w-1/2">
            {% if tenant.logo_dark %}
                <img src="{{ tenant.logo_dark.mthumbnail }}" alt="{{ tenant.name }}" class="w-20 h-20 object-contain rounded-lg border">
            {% endif %}
            <div>
                <h1 class="text-2xl font-bold text-gray-800 print:text-black mb-1">{{ firstProperty.legal_entity.business_name }}</h1>
                <div class="text-sm text-gray-600 print:text-black">
                    {{ firstProperty.legal_entity.address }}<br>
                    {{ firstProperty.legal_entity.city }}<br>
                    {% if firstProperty.legal_entity.phone %}
                        Phone: {{ firstProperty.legal_entity.phone }}<br>
                    {% endif %}
                    {% if firstProperty.legal_entity.email %}
                        Email: {{ firstProperty.legal_entity.email }}<br>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Homeowner Info -->
        <div class="w-full md:w-1/2 flex flex-col items-start md:items-end">
            <div class="text-sm text-gray-500 print:text-black uppercase tracking-wide font-semibold mb-1">Statement For</div>
            <div class="text-lg font-medium text-gray-800 print:text-black">{{ owner.full_name }}</div>
            <div class="text-gray-600 print:text-black text-sm text-right">
                {% if owner.address %}
                    {{ owner.address }}<br>
                {% endif %}
                {% if owner.city %}
                    {{ owner.city }}<br>
                {% endif %}
                {% if owner.phone %}
                    Phone: {{ owner.phone }}<br>
                {% endif %}
                {% if owner.email %}
                    Email: {{ owner.email }}<br>
                {% endif %}
            </div>
            <div class="mt-3 text-xs text-gray-400 print:text-black">Statement Date: <span class="font-medium text-gray-700 print:text-black">{{ "now" | date('Y-m-d') }}</span></div>
        </div>
    </div>

    <!-- Property Sections -->
    <div class="space-y-12">

        {% set accommodationTotal = 0 %}

        {% if not properties.count() %}
            <div class="flex justify-end mt-2">
                <div class="w-full bg-gray-100 print:bg-white rounded-lg p-4 border border-gray-300 print:border-black shadow-sm print:shadow-none">
                    <div class="flex justify-between items-center">
                        <span class="text-base font-semibold text-gray-900 print:text-black">No available properties for this homeowner.</span>
                    </div>
                </div>
            </div>
        {% else %}
            {% for property in properties %}

                {% set propertyAccommodationTotal = 0 %}

                <section class="break-inside-avoid print:break-inside-avoid">
                    <div class="flex items-center gap-4 mb-4">
                        <img src="{{ property.main_image.thumbnail }}" alt="{{ property.name.en }}" class="w-16 h-16 object-cover rounded border">
                        <div>
                            <div class="text-lg font-bold text-gray-800 print:text-black">{{ property.name.en }}</div>
                            <div class="text-sm text-gray-600 print:text-black">{{ property.address }}</div>
                        </div>
                    </div>
                    {% if not property.bookings.count() %}
                        <div class="flex justify-end mt-2">
                            <div class="w-full bg-gray-100 print:bg-white rounded-lg p-4 border border-gray-300 print:border-black shadow-sm print:shadow-none">
                                <div class="flex justify-between items-center">
                                    <span class="text-base font-semibold text-gray-900 print:text-black">No bookings during this period ({{ from }} - {{ to }}) </span>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="overflow-x-auto">
                            <table class="min-w-full border border-gray-200 print:border-black rounded-lg overflow-hidden mb-2">
                                <thead class="bg-gray-100 print:bg-white">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 print:text-black uppercase tracking-wider border-b print:border-black">Description</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 print:text-black uppercase tracking-wider border-b print:border-black">Check-in</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 print:text-black uppercase tracking-wider border-b print:border-black">Check-out</th>
                                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-700 print:text-black uppercase tracking-wider border-b print:border-black">Accommodation</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for booking in property.bookings %}

                                    {% set bookingAccommodation = convert_currency(booking.total_accommodation, booking.currency.iso_code, property.currency.iso_code) %}

                                    <tr class="even:bg-gray-50 print:bg-white break-inside-avoid print:break-inside-avoid">
                                        <td class="px-4 py-3 border-b print:border-black font-medium text-gray-900 print:text-black align-top">
                                            Booking #{{ booking.id }}
                                        </td>
                                        <td class="px-4 py-3 border-b print:border-black align-top">{{ booking.checkin }}</td>
                                        <td class="px-4 py-3 border-b print:border-black align-top">{{ booking.checkout }}</td>
                                        <td class="px-4 py-3 border-b print:border-black text-right font-mono font-semibold align-top">
                                            {{ bookingAccommodation | format_currency(property.currency.iso_code, {grouping_used:true}, 'en') }}
                                        </td>
                                    </tr>

                                    {% set propertyAccommodationTotal = propertyAccommodationTotal + bookingAccommodation %}

                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- Property Total (Accommodation Only) -->
                        <div class="flex justify-end mt-2">
                            <div class="w-full bg-gray-100 print:bg-white rounded-lg p-4 border border-gray-300 print:border-black shadow-sm print:shadow-none">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-800 print:text-black font-semibold">Total for {{ property.name.en }}</span>
                                    <span class="font-mono text-base font-bold text-gray-900 print:text-black">
                                        {{ propertyAccommodationTotal | format_currency(property.currency.iso_code, {grouping_used:true}, 'en') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </section>

                {% set accommodationTotal = accommodationTotal + convert_currency(propertyAccommodationTotal, property.currency.iso_code, tenant.default_currency.iso_code) %}

            {% endfor %}
        {% endif %}
    </div>

    <!-- Grand Total Summary Section (Accommodation Only) -->
    <div class="mt-12 flex justify-end">
        <div class="w-full md:w-1/2 bg-gray-200 print:bg-white rounded-lg p-6 border-2 border-gray-700 print:border-black shadow-md print:shadow-none">
            <div class="flex justify-between items-center mb-2">
                <span class="text-gray-900 print:text-black font-bold text-lg">Grand Total</span>
                <span class="font-mono text-xl font-extrabold text-gray-900 print:text-black">
                    {{ accommodationTotal | format_currency(tenant.default_currency.iso_code, {grouping_used:true}, 'en') }}
                </span>
            </div>
            <div class="text-xs text-gray-700 print:text-black mt-1">Thank you for your partnership!</div>
        </div>
    </div>
</div>