{% extends 'administrative/layout.html.twig' %}

{% block title %}Zeitleiste{% endblock %}

{% macro cell(item, colspan) %}
    <td class="{{ html_classes('border border-gray-700', {
        'bg-gray-100': item.type == 'assignment' and item.status in ['unstaffed'],
        'bg-blue-500 text-gray-50': item.type == 'assignment' and item.status in ['staffing', 'partly_staffed'],
        'bg-blue-500 text-gray-50': item.type == 'disposition' and item.status in ['new', 'checking_contract'],
        'bg-green-500 text-gray-50': item.type == 'disposition' and item.status in ['confirmed', 'ended', 'checking_invoice', 'completed'],
    }) }}" colspan="{{ colspan }}">
        {% if item.type  == 'disposition' %}
            <div class="flex items-center space-x-2">
                {% if is_granted('ROLE_HOUSE_MANAGER') %}
                    <span class="inline-block text-xs font-semibold">{{ item.jobProfile }}</span>
                {% else %}
                    <a href="{{ path('app_administrative_assignment_detail', { 'uuid': item.assignmentUuid, 'r': return_url() }) }}"
                       class="inline-block text-xs font-semibold">
                        {{ item.jobProfile }}
                    </a>
                {% endif %}
                <span>|</span>
                <button type="button"
                        class="flex items-center space-x-2"
                        title="Teamer:inneninfo {{ item.teamerName }}"
                        hx-get="{{ path('app_administrative_teamer_info', { 'uuid': item.teamerUuid, 'r': return_url() }) }}"
                        hx-target="body"
                        hx-swap="beforeend">
                    <span class="text-xs font-semibold">{{ item.teamerName | raw }}</span>
                </button>
            </div>
        {% else %}
            {% if is_granted('ROLE_HOUSE_MANAGER') %}
                <span class="text-xs font-semibold">{{ item.jobProfile }}</span>
            {% else %}
                <a href="{{ path('app_administrative_assignment_detail', { 'uuid': item.assignmentUuid, 'r': return_url() }) }}"
                   class="text-xs font-semibold">
                    {{ item.jobProfile }}
                </a>
            {% endif %}
        {% endif %}
    </td>
{% endmacro %}

{% block content %}
    <div class="flex items-start justify-between pb-4">
        <h1 class="text-2xl font-bold">
            Zeitleiste
        </h1>
        <div class="flex flex-col items-end space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
            <button type="button"
                    class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
                    title="Filter"
                    hx-get="{{ path('app_common_timeline_filter', { 'r': return_url() }) }}"
                    hx-target="body"
                    hx-swap="beforeend">
                {{ icon('filter', 'w-4 h-4 shrink-0') }}
                {% if filterDto.active %}
                    <span class="whitespace-nowrap">{{ filterDto.activeFiltersCount }} Filter aktiv</span>
                {% else %}
                    <span>Filter</span>
                {% endif %}
            </button>
            {% if filterDto.active %}
                <a href="{{ path('app_common_timeline_filter_reset', { 'r': return_url() }) }}" class="btn btn--small btn--secondary">
                    Reset
                </a>
            {% endif %}
        </div>
    </div>
    <div class="scroll-container border border-gray-300 mb-4" {{ stimulus_controller('timeline-scroll') }}>
        <table>
            <tr class="[&_th]:sticky [&_th]:top-0 [&_th]:z-10">
                <th></th>
                {% for day in filterDto.period %}
                    <th{% if day|date('Y-m-d') == 'now'|date('Y-m-d') %} {{ stimulus_target('timeline-scroll', 'today') }}{% endif %}>
                        {{ day | date('d.m.Y') }}
                    </th>
                {% endfor %}
            </tr>
            {% for hotelCode, rows in data %}
                <tr class="border-t-2 border-gray-700">
                    <td class="border border-gray-700 bg-gray-200 align-middle font-bold sticky left-0 z-10" rowspan="{{ rows | length }}">
                        {{ hotelCode }}
                    </td>
                    {% for day in filterDto.period %}
                        {% if colspan is defined and colspan > 1 %}
                            {% set colspan = colspan - 1 %}
                        {% elseif rows[0][day|date('Ymd')] is defined %}
                            {% set item = rows[0][day|date('Ymd')] %}
                            {% set colspan = item.numberOfDays %}
                            {{ _self.cell(item, colspan) }}
                        {% else %}
                            <td class="border border-gray-700"></td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% for row in rows[1:] %}
                    <tr>
                        {% for day in filterDto.period %}
                            {% if colspan is defined and colspan > 1 %}
                                {% set colspan = colspan - 1 %}
                            {% elseif row[day|date('Ymd')] is defined %}
                                {% set item = row[day|date('Ymd')] %}
                                {% set colspan = item.numberOfDays %}
                                {{ _self.cell(item, colspan) }}
                            {% else %}
                                <td class="border border-gray-700"></td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            {% else %}
                <td colspan="{{ filterDto.period | length }}">
                    Keine Ergebnisse
                </td>
            {% endfor %}
        </table>
    </div>
    <div class="flex space-x-2">
        <div class="flex items-center space-x-2 bg-gray-100 px-4 py-1">
            <span>Bedarf</span>
        </div>
        <div class="flex items-center space-x-2 bg-blue-500 text-gray-50 px-4 py-1">
            <span>in Bewerbung</span>
        </div>
        <div class="flex items-center space-x-2 bg-green-500 text-gray-50 px-4 py-1">
            <span>besetzt</span>
        </div>
    </div>
{% endblock %}