<html>
<head>
    <title>Expected vs Consumed Report</title>
    <style>
        body { font-family: Arial, sans-serif; font-size: 11px; color: #1f2937; }
        h3 { margin: 0 0 4px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #333; padding: 5px 8px; text-align: left; }
        th { background: #f0f0f0; }
        .text-center { text-align: center; }

        .header { margin-bottom: 14px; text-align: center; }
        .report-header-table, .report-header-table th, .report-header-table td {
            border: none;
            padding: 0;
        }

        /* Logo + name/address block: a shrink-to-fit table centered as a single unit,
           with the logo cell and text cell vertically centered against each other. */
        .header-table {
            width: auto;
            margin: 0 auto;
            border-collapse: collapse;
        }
        .header-table td {
            border: none;
            padding: 0;
        }
        .header-logo-cell {
            width: 100px;
            vertical-align: middle;
            text-align: center;
            padding-right: 14px;
        }
        .header-text-cell {
            vertical-align: middle;
            text-align: left;
        }
    </style>
</head>
<body>
    <!-- College Header -->
    <div>
        {{collegeHeader|raw}}
    </div>
    <table style="border: hidden; border-collapse: collapse;">
        <thead>
            <tr>
                <th colspan="100%" style="
                    border: hidden;
                    text-align: center;
                    font-size: 24px;
                    padding: 10px;
                ">
                    <b>
                        Expected vs Consumed Report
                        {% if hostelName %} - {{ hostelName }}{% endif %}
                    </b>
                </th>
            </tr>
        </thead>
        <thead>
            <tr>
                {% if hostelName %}
                <td style="border: hidden;"><b>Hostel:</b> {{ hostelName }}</td>
                {% endif %}
                {% if messName %}
                <td style="border: hidden;"><b>Mess:</b> {{ messName }}</td>
                {% endif %}
                {% if fromDate and toDate %}
                <td style="border: hidden;"><b>Date Range:</b> {{ fromDate | date("d-m-Y") }} to {{ toDate | date("d-m-Y") }}</td>
                {% endif %}
                {% if approvedSource %}
                <td style="border: hidden;"><b>Source:</b> {{ approvedSource }}</td>
                {% endif %}
            </tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr>
                <th rowspan="2" class="text-center">Date</th>
                <th rowspan="2" class="text-center">Preference</th>
                {% for session in sessions %}
                <th colspan="2" class="text-center">{{ session.name }}</th>
                {% endfor %}
            </tr>
            <tr>
                {% for session in sessions %}
                <th class="text-center">Expected</th>
                <th class="text-center">Actual</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {# Print repeats the date on every row instead of merging with rowspan (unlike the
               on-screen table / Excel export) so each row reads standalone on the page. #}
            {% for row in rows %}
            <tr>
                <td>{{ row.date | date("d-m-Y") }}</td>
                <td>{{ row.preferenceName }}</td>
                {% for session in sessions %}
                {% set cell = row.sessions[session.id] %}
                <td class="text-center">{{ cell ? cell.expectedCount : '-' }}</td>
                <td class="text-center">{{ cell ? cell.actualCount : '-' }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>
