{% load custom_tags_and_filters %}
{% load tz %}
<style>
.table-hover-first tr:hover td:is(:first-child)
{
  background: #ddd !important;
}
</style>
{% if staffs %}
    <div class="row" style="display: table-row;">
        <div style="display: table-cell;width: 100%">
            Staff availability is highlighted in <span style="display: inline-block; padding: 3px" class="alert-success">green</span>
            <br>
            Staff partial availability is highlighted in <span style="display: inline-block; padding: 3px" class="alert-warning">orange</span>
            <br>
            Staff absence is highlighted in <span style="display: inline-block; padding: 3px" class="alert-danger">red</span>
            <br>
            <br>
            Extra information (if available) can be found by hovering over a time block
            <br>
            Clicking on a staff member will display their contact information
        </div>
        {% if user_view != 'day' %}
            <div style="display: table-cell; vertical-align: bottom; width: 100%">
                <div style="display: inline-flex">
                    <div class="btn-group" role="group" style="display: inline-flex">
                        <button type="button"
                                class="btn btn-default {% if page_view == 'day' %}active{% endif %}"
                                onclick="refresh_staff_status_dashboard('timestamp={{ page_timestamp }}&view=day');"
                                {% if page_view == 'day' %}aria-pressed="true"{% endif %}>Day</button>
                        <button type="button"
                                class="btn btn-default {% if not page_view or page_view == 'week' %}active{% endif %}"
                                onclick="refresh_staff_status_dashboard('timestamp={{ page_timestamp }}&view=week');"
                                {% if not page_view or page_view == 'week' %}aria-pressed="true"{% endif %}>
                            Week
                        </button>
                        {% if not user_view %}
                            <button type="button"
                                    class="btn btn-default {% if page_view == 'month' %}active{% endif %}"
                                    onclick="refresh_staff_status_dashboard('timestamp={{ page_timestamp }}&view=month');"
                                    {% if page_view == 'month' %}aria-pressed="true"{% endif %}>Month</button>
                        {% endif %}
                    </div>
                    {% if user.is_facility_manager %}
                        {% url 'status_dashboard_tab' 'staff' as staff_status_url %}
                        {% button style="margin-left: 10px" value="Export" type="export" url=staff_status_url|concat:"?timestamp="|concat:page_timestamp|concat:"&view="|concat:page_view|concat:"&csv=true" role="button" target="_blank" %}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    <div id="contact-info-tooltip-container"
         class="info-tooltip-container"
         style="overflow-x: auto;
                margin-top: 25px;
                margin-bottom: 20px;
                border: 1px solid #ddd">
        <table class="table table-responsive table-hover-first" style="margin: 0;border-collapse: collapse">
            <thead>
                <tr class="no-border">
                    <th class="sticky"
                        style="background-color: white;
                               {% if days_length == 1 %}width:33%{% endif %}"
                        aria-label="Blank corner cell"></th>
                    {% if prev %}
                        <th class="button-column-minimum" style="vertical-align: middle;" aria-label="Previous page cell">
                            <a style="cursor: pointer"
                               onclick="refresh_staff_status_dashboard('timestamp={{ prev }}&view={{ page_view }}');"
                               aria-label="Previous page button">
                                <i class="glyphicon glyphicon-chevron-left chevron" style="padding: 0"></i>
                            </a>
                        </th>
                    {% endif %}
                    {% for day in days %}
                        {% now 'Y-m-d' as today %}
                        <th class="text-center {% if day|date:'Y-m-d' == today %}alert-info{% endif %}">
                            <span {% if day|date:'Y-m-d' == today %}data-toggle='tooltip' data-title="Today's date"{% endif %}>{{ day|date:staff_date_format }}</span>
                        </th>
                    {% endfor %}
                    {% if next %}
                        <th class="button-column-minimum" style="vertical-align: middle;" aria-label="Next page cell">
                            <a style="cursor: pointer"
                               onclick="refresh_staff_status_dashboard('timestamp={{ next }}&view={{ page_view }}')"
                               aria-label="Next page button">
                                <i class="glyphicon glyphicon-chevron-right chevron" style="padding: 0"></i>
                            </a>
                        </th>
                    {% endif %}
                </tr>
            </thead>
            <tbody>
                {% regroup staffs by category as category_staff %}
                {% for category in category_staff %}
                    <tr>
                        <th colspan="{% if prev %}3{% else %}2{% endif %}" class="sticky">{{ category.grouper|default_if_none:'Other' }}</th>
                        {% if next or days_length != 1 %}
                            <th aria-label="Staff category empty cells"
                                colspan="{% if next %}{{ days_length|add:'1' }}{% else %}{{ days_length }}{% endif %}">
                            </th>
                        {% endif %}
                    </tr>
                    {% for staff in category.list %}
                        <tr class="default">
                            <td style="vertical-align: middle;" class="sticky">
                                <div class="text-nowrap staff-status-contact">{{ staff.staff_member.get_contact_info_html|safe }}</div>
                                <div class="staff-status-add">
                                    {% if user.is_facility_manager %}
                                        <span class="glyphicon glyphicon-plus-sign success-highlight"
                                              onclick="ajax_get('{% url "create_staff_absence" %}?staff_id={{ staff.id }}&timestamp={{ page_timestamp }}&view={{ page_view }}', undefined, ajax_success_callback)"
                                              title="Add staff absence"></span>
                                    {% endif %}
                                </div>
                            </td>
                            {% for day in days %}
                                {% with staff_available=staff.weekly_availability|get_item:day.weekday staff_absent=staff_absences|get_item:staff.id|get_item:day.day closure_time=closure_times|get_item:day.day %}
                                    {% with start_closure_time=closure_time.start_time|localtime end_closure_time=closure_time.end_time|localtime %}
                                        <td {% if prev and next and days_length == 1 %}colspan="3" {% elif forloop.first and prev or forloop.last and next %}colspan="2"{% endif %}
                                            class="staff-status-availability text-center {% if staff_absent or closure_time %}{% if staff_absent and not staff_absent.full_day %}alert-warning{% elif closure_time %}{% if start_closure_time.date == day.date and start_closure_time.hour > 0 or start_closure_time.date == day.date and start_closure_time.minute > 0 %}alert-warning{% elif end_closure_time.date == day.date and end_closure_time.hour < 23 or end_closure_time.date == day.date and end_closure_time.minute < 59 %}alert-warning{% else %}alert-danger{% endif %}{% else %}alert-danger{% endif %}{% elif staff_available %}alert-success{% elif not user.is_facility_manager %}alert-danger{% endif %}">
                                            {% if closure_time %}
                                                {% with custom_data_template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='text-align:left; max-width: 300px'></div></div>" %}
                                                <div data-toggle="tooltip"
                                                     data-template="{{ custom_data_template }}"
                                                     title="{% if closure_time.closure.alert_template %}{{ closure_time.alert_contents|linebreaksbr }}{% else %}{{ closure_time.closure.name }} {{ closure_time }}{% endif %}">
                                                    <div>Closed</div>
                                                </div>
                                            {% endwith %}
                                        {% elif staff_absent %}
                                            {% if not user.is_facility_manager %}
                                                {% if "dashboard"|customization:"dashboard_staff_status_absence_view_staff" and user.is_staff or "dashboard"|customization:"dashboard_staff_status_absence_view_user_office" and user.is_user_office or "dashboard"|customization:"dashboard_staff_status_absence_view_accounting_officer" and user.is_accounting_officer %}
                                                    <div data-toggle="tooltip" title="{{ staff_absent.details_for_manager }}">
                                                        <span>{{ staff_absent.absence_type.name }}</span>
                                                    </div>
                                                {% else %}
                                                    <div data-toggle="tooltip" title="{{ staff_absent.description|linebreaksbr }}">&nbsp;</div>
                                                {% endif %}
                                            {% else %}
                                                <div data-toggle="tooltip" title="{{ staff_absent.details_for_manager }}">
                                                    <span style="cursor: pointer"
                                                          onclick="ajax_get('{% url "edit_staff_absence" staff_absent.id %}?timestamp={{ page_timestamp }}&view={{ page_view }}', undefined, ajax_success_callback)">{{ staff_absent.absence_type.name }}</span>
                                                </div>
                                            {% endif %}
                                        {% elif staff_available %}
                                            <div data-toggle="tooltip" title="{{ staff.daily_hours }}">&nbsp;</div>
                                        {% endif %}
                                    </td>
                                {% endwith %}
                            {% endwith %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
<script>
    $(".contact-info-tooltip").on('click', function () {
        {# Remove associated data to prevent toggling issues #}
        $(this).removeData('bs.tooltip');
        $(".tooltip").remove();
      	$(this).tooltip({trigger: 'manual', html: 'true', container: '#contact-info-tooltip-container'}).tooltip('toggle');
    });
    $("[data-toggle='tooltip']").tooltip({html: 'true'});
</script>
