{% extends 'base.html.twig' %}

{% block title %}
    {{ parent() }} -  Appartmentverwaltung
{% endblock %}

{% block description %}
    {{ parent() }} -  Appartmentverwaltung
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col">
                <button type="button" class="btn btn-secondary" onclick="showCreateAppartmentForm()"
                        data-bs-toggle="modal" data-bs-target="#modalCenter">
                    <i class="fas fa-plus"></i> {{ 'nav.appartment.add'|trans }}</button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">    
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>{{ 'appartment.number'|trans }}</th>
                        <th>{{ 'appartment.description'|trans }}</th>
                        <th>{{ 'appartment.bedsmax'|trans }}</th>
                        <th>{{ 'appartment.action'|trans }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for apartment in apartments %}
                        <tr>
                            <td>{{ apartment.number }}</td>
                            <td>{{ apartment.description }}{% if apartment.multipleOccupancy %} <i class="fa-solid fa-users" title="{{ 'apartment.multiple.occupancy.text'|trans }}"></i>{% endif %}</td>
                            <td>{{ apartment.bedsmax }}</td>
                            <td>
                                <a href="#" title="{{ 'button.details'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                    <i onclick="getEntry({{ apartment.id }})" class="fas fa-info-circle"></i></a>
                                <a href="#" title="{{ 'button.edit'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                    <i onclick="editEntry({{ apartment.id }})" class="fas fa-edit"></i></a>
                                <a href="#" title="{{ 'calendar.sync.title'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                    <i onclick="getContentForModal('{{ path('apartments.sync.edit', {'id': apartment.calendarSync.id }) }}', '{{ 'calendar.sync.title'|trans }}')" class="fas fa-calendar-check"></i></a>
                                <a href="#" title="{{ 'button.delete'|trans }}">
                                    <i onclick="deleteEntry({{ apartment.id }})" class="fas fa-trash-alt"></i></a>
                            </td>
                        </tr>
                        <tr id="entry-{{ apartment.id }}" class="d-none">
                            <td colspan="6" id="entry-cell-{{ apartment.id }}">
                                <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif"/>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/settings.js"></script>
{% endblock %}
{% block bodyjs %}
    {{ parent() }}
    <script>
    $(function() {
        $.ajaxSetup({
            cache: false
        });
        
        // the default modal width is used here
        $("#modalCenter .modal-dialog").removeClass('modal-lg');
    });        

    function showCreateAppartmentForm() {
        getContentForModal("{{ path('apartments.new.apartment') }}");
    }
    
    function getEntry(id) {
        let url = replacePlaceholder("{{ path('apartments.edit.apartment', {'id': 'placeholder'}) }}", id);
        getContentForModal(url);        
    }
    
    function editEntry(id) {
        let url = replacePlaceholder("{{ path('apartments.edit.apartment', {'id': 'placeholder'}) }}", id);
        getContentForModal(url, "", function() {
            enableEditForm(id);
        });        
    }

    function saveAppartment(id) {
        let url = replacePlaceholder("{{ path('apartments.edit.apartment', {'id': 'placeholder'}) }}", id);
        return _doPost('#entry-form-'+id, url);
    }

    function deleteEntry(id) {
        let url = replacePlaceholder("{{ path('appartments.delete.appartment', {'id': 'placeholder'}) }}", id);
        _deleteEntry(id, url);        
    }

    function doDeleteEntry(id) {
        let url = replacePlaceholder("{{ path('appartments.delete.appartment', {'id': 'placeholder'}) }}", id);
        return _doDelete('#entry-form-'+id, url);
    }

    function createNewApartment() {
        let url = "{{ path('apartments.new.apartment')}}";
        _doPost('#entry-form-new', url, '{{ path('apartments.overview') }}');
        return false;
    }
    
    function saveSync(id, url) {
        return _doPost('#entry-form-'+id, url);
    }
    </script>
{% endblock %}