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

{% block title %}
    {{ parent() }} -  {{ 'reservationorigin.title'|trans }}
{% endblock %}

{% block description %}
    {{ parent() }} -  {{ 'reservationorigin.description'|trans }}
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-secondary" onclick="showCreateOriginForm()" data-bs-toggle="modal"
                    data-bs-target="#modalCenter">
                <i class="fas fa-plus"></i> {{ 'reservationorigin.add'|trans }}</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>{{ 'reservationorigin.name'|trans }}</th>
                    <th>{{ 'base.action'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for origin in origins %}
                    <tr>
                        <td>{{ origin.name }}</td>
                        <td>
                            <a href="#" title="{{ 'button.details'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                <i onclick="getEntity({{ origin.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({{ origin.id }})" class="fas fa-edit"></i></a>
                            <a href="#" title="{{ 'button.delete'|trans }}">
                                <i onclick="deleteEntry({{ origin.id }})" class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>
                    <tr id="entry-{{ origin.id }}" class="d-none">
                        <td colspan="2" id="entry-cell-{{ origin.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>
    <script>

    $.ajaxSetup({
        cache: false
    });
    </script>
{% endblock %}
{% block bodyjs %}
    {{ parent() }}
    <script>
    $(function() {
        // the default modal width is used here
        $("#modalCenter .modal-dialog").removeClass('modal-lg');
    });

    function getEntity(id) {
        let url = replacePlaceholder("{{ path('reservationorigin.get.origin', {'id': 'placeholder'}) }}", id);
        getContentForModal(url);        
    }
    
    function editEntry(id) {
        let url = replacePlaceholder("{{ path('reservationorigin.get.origin', {'id': 'placeholder'}) }}", id);
        getContentForModal(url, "", function() {
            enableEditForm(id);
        });        
    }

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

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

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

    function showCreateOriginForm() {
        getContentForModal("{{ path('reservationorigin.new.origin') }}");
    }

    function createNewOrigin() {
        let url = "{{ path('reservationorigin.create.origin')}}";
        _doPost('#entry-form-new', url, '{{ path('reservationorigin.overview') }}');
        return false;
    }
    </script>
{% endblock %}