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

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

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

{% block flashMessage %}
    <div class="container-fluid mt-3">
        <div class="row" id="flash-message-container">
            {% for type, flashMessages in app.flashes %}
                {% for flashMessage in flashMessages %}
                    <div class="col">
                        <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                            {{ flashMessage|trans }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>                            
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
{% endblock %}
{% block content %}
<div class="container-fluid">
    <form id="table-filter" role="form" onsubmit="return getNewTable()">
        <div class="row">
            {% if show == 'table' %}
                {% include 'Reservations/_index_table_form.html.twig' %}
            {% else %}
                {% include 'Reservations/_index_yearly_form.html.twig' %}
            {% endif %}
            {% if is_granted('ROLE_USER') %}
            <div class="col-md-auto">
                <a href="#" class="me-3" onclick="getNewTable();" title="{{ 'reservation.table.reload'|trans }}"><i class="fas fa-sync-alt"></i></a>
                <button type="button" class="btn btn-secondary mb-2 me-sm-2" onclick="return selectAppartment(true)"
                        data-bs-toggle="modal" data-bs-target="#modalCenter">
                    <i class="fas fa-plus"></i> {{ 'nav.reservation.add'|trans }}
                </button>
            </div>
            {% endif %}
            <div class="col col-md-2 text-end ms-auto">
                <a href="{{ path('start.toggle.view', {show: 'table'}) }}" class="fs-5 {% if show == 'table' %}text-primary{% else %}text-secondary{% endif %}" title="{{ 'reservation.table.view.table'|trans }}">
                    <i class="fas fa-list"></i></a>
                <a href="{{ path('start.toggle.view', {show: 'yearly'}) }}" class="fs-5 me-4 {% if show == 'yearly' %}text-primary{% else %}text-secondary{% endif %}" title="{{ 'reservation.table.view.yearly'|trans }}">
                    <i class="far fa-calendar-alt"></i></a>
                
                {% include 'Reservations/reservation_table_settings.html.twig' %}                    
            </div>
        </div>
    </form>
    <div class="row mt-2" >
        <div class="col" id="table-ajax">
            <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif"/>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    var lastClickedReservationId = 0;
    var tableSettingsUrl = "{{ path('reservations.table.settings') }}";
    
    $(document).ready(function () {                    
        
        // add dynamic onchage listener for table settings fields
        delegate(document.getElementById("table-filter"), 'change', '#table-filter #start, #table-filter #year, #table-filter select[name="intervall"], #table-filter select[name="apartment"], #objects, #holidayCountry, #holidaySubdivision', (event) => {
            getNewTable();            
        });
        
        // add dynamic onchange listener for holiday country field to load subdivisions of the country
        delegate(document.getElementById("modal-content-settings"), 'change', '#holidayCountry', (event) => {
            loadTableSettings(tableSettingsUrl);         
        });
        
        // initially load table settings based on local storage values
        getLocalTableSetting('intervall', 'reservations-intervall', 'int');
        getLocalTableSetting('holidayCountry', 'reservations-table-holidaycountry');
        getLocalTableSetting('apartment', 'reservations-apartment', 'int');
        loadTableSettings(tableSettingsUrl, true);  
    });
    
    function selectReservatioForInvoice(id) {
        var url = "{{ path('invoices.select.reservation') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: { reservationid: id, createNewInvoice: "true"},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    
    function selectReservationForTemplate(id) {
        var url = "{{ path('settings.templates.select.reservation') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        lastClickedReservationId = id;
        $(".modal-header .modal-title").html("{{ 'templates.select.reservations'|trans }}");
        $.ajax({
            url: url,
            type: "post",
            data: { reservationid: id, createNew: "true"},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    
    
    function getNewTable() {
        var url = "{{ path('reservations.get.table') }}";
        var form = "#table-filter";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        
        // save selected settings for reuse
        setLocalTableSetting('intervall', 'reservations-intervall', 'int');
        setLocalTableSetting('holidayCountry', 'reservations-table-holidaycountry');
        setLocalTableSetting('holidaySubdivision', 'reservations-table-holidaysubdivision');
        setLocalTableSetting('apartment', 'reservations-apartment', 'int');
        
        $("#table-ajax").html(content);
        
        $.ajax({
            url: url,
            type: "get",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#table-ajax").html(data);
            }
        });

        return false;
    }

    function selectAppartment(createNewReservation) {
        var url = "{{ path('reservations.select.appartment') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        $('#modalCenter .modal-title').text("{{ 'nav.reservation.add'|trans }}");
        $("#modal-content-ajax").html(content);

        $.ajax({
            url: url,
            type: "get",
            data: ($("#objects").serialize() + "&createNewReservation=" + createNewReservation),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);

                if (from != null && end != null) {
                    //$("#from").val(from);
                    //$("#end").val(end);

                    //getAvailableAppartmentsForPeriod();
                }
            }
        });

        return false;
    }
    ;

    function getAvailableAppartmentsForPeriod(mode) {
        $("#available-appartments").html("");
        iniStartOrEndDate('from', 'end', 1);
        if (($("#from").val() !== '') && ($("#end").val() !== '')) {
            if (mode === 'edit')
                var url = "{{ path('reservations.get.edit.available.appartments') }}";
            else
                var url = "{{ path('reservations.get.available.appartments') }}";
            var content = '<div class="modal-body">' +
                    '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                    '</div>';
            
            $.ajax({
                url: url,
                type: "post",
                data: $("#reservation-period").serialize(),
                beforeSend: function () {
                    $("#available-appartments").html(content);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                },
                success: function (data) {
                    $("#available-appartments").html(data);
                }
            });
        }

        return false;
    }
    ;

    function addAppartmentToSelection(id) {
        var url = "{{ path('reservations.add.appartment.to.reservation') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        var data;
        if (id) {
            data = "appartmentid=" + id + "&" + $("#reservation-period").serialize()+ "&" + $("#appartment-options-" + id).serialize();
        } else {
            data = $("#reservation-period").serialize();
        }
        data = data + "&createNewReservation=false";

        $.ajax({
            url: url,
            type: "post",
            data: data,
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }

    function selectableAddAppartmentToSelection(id, start, end) {
        var url = "{{ path('reservations.add.appartment.to.reservation.selectable') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        var data;
        data = "appartmentid=" + id ;
        data += "&from=" + start + "&end=" + end + "&createNewReservation=true";

        $.ajax({
            url: url,
            type: "post",
            data: data,
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }

    function deleteAppartmentFromSelection(id) {
        var url = "{{ path('reservations.remove.appartment.from.reservation') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: $("#from").serialize() + "&" + $("#end").serialize() + "&appartmentid=" + id + "&createNewReservation=false",
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function saveAppartmentOptions(id) {
        var url = "{{ path('reservations.modify.appartment.options') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: ($("#from").serialize() + "&" + $("#end").serialize() + "&" + $('#appartment-options-' + id).serialize() + "&appartmentid=" + id + "&createNewReservation=false"),
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function selectCustomer() {
        var url = "{{ path('reservations.select.customer') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        var message = '<div class="col-md-10 col-md-offset-1">' +
                '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '{{ 'reservation.no.selected.appartments'|trans }}' +
                '</div>' +
                '</div>';

        if ($("#selectedAppartments tr").length == 1) {
            $("#flash-message-overlay").empty();
            $("#flash-message-overlay").append(message);
        } else {
            $.ajax({
                url: url,
                type: "post",
                data: $("#reservation-period").serialize(),
                beforeSend: function () {
                    $("#modal-content-ajax").html(content);
                    $("#breadcrumb-appartments").wrap('<a href="#" />');
                    $("#breadcrumb-customer").removeClass("d-none");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                },
                success: function (data) {
                    $("#modal-content-ajax").html(data);
                }
            });
        }

        return false;
    }
    ;

    function getCustomers(page, mode, tab, appartmentId) {
        if (mode === 'edit')
            var url = "{{ path('reservations.edit.customers.get') }}";
        else
            var url = "{{ path('reservations.get.customers') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        if (tab === null) tab = '';
        $.ajax({
            url: url,
            type: "post",
            data: $("#lastname").serialize() + "&tab=" + tab + "&page=" + page + "&appartmentId=" + appartmentId,
            beforeSend: function () {
                $("#customers").html(content);
                $("#customer-selection .btn-primary").addClass("d-none");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#customers").html(data);
            }
        });

        return false;
    }
    ;

    function getFormForNewCustomer() {
        var url = "{{ path('reservations.get.customer.new.form') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            beforeSend: function () {
                $("#customers").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#customers").html(data);
                $("#customer-selection .btn-primary").removeClass("d-none");
            }
        });

        return false;
    }
    ;

    function createNewCustomer() {
        var url = "{{ path('reservations.get.customer.create') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: $("#customer-selection").serialize(),
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function getReservationPreview(id, tab, displayWait) {        
        displayWait = (displayWait === false ? displayWait : true);
        var url = "{{ path('reservations.create.preview') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        if(displayWait) {
            $("#modal-content-ajax").html(content);
        }

        $.ajax({
            url: url,
            type: "post",
            data: { customerid: id, tab: tab },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
                enablePriceOptionsMisc();
            }
        });

        return false;
    }
    ;

    function toggleAppartmentOptions(id) {
        if ($("#appartment-" + id).hasClass("d-none")) {
            // close all other opened
            $(".appartment-options").addClass("d-none");
            $("#appartment-" + id).removeClass("d-none");
        } else {
            $("#appartment-" + id).addClass("d-none");
        }

        return false;
    }
    ;

    function createNewReservations() {
        var url = "{{ path('reservations.create.reservations') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: $("#_csrf_token").serialize() + "&" + $("#reservation-remark").serialize() + "&" + $("#reservation-origin").serialize(),
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                if (data.length > 0) {
                    $("#flash-message-overlay").empty();
                    $("#flash-message-overlay").append(data);
                } else {
                    window.location.href = "{{ path('start') }}";
                }
            }
        });

        return false;
    }
    ;

    function getReservation(id, tab, displayWait) {
        displayWait = (displayWait === false ? displayWait : true);
        if (id != "new") {
            var url = "{{ path('reservations.get.reservation', {'id': 'placeholder'}) }}";
            url = url.replace("placeholder", id);
            if (tab != null) {
                url += '?tab=' + tab;
            }

            var content = '<div class="modal-body">' +
                    '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                    '</div>';
            if(displayWait) {                
                $("#modal-content-ajax").html(content);
            }
            $('#modalCenter .modal-title').text("{{ 'reservation.details'|trans }}");
            $('#modalCenter').modal('show')

            $.ajax({
                url: url,
                type: "get",
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                },
                success: function (data) {
                    if (data.length > 0) {
                        $("#modal-content-ajax").html(data);
                    } else {
                        window.location.href = "{{ path('start') }}";
                    }
                }
            });
        } else {
            getReservationPreview(null, tab, displayWait);
        }
        
        return false;
    }
    ;

    function editReservation(id) {
        var url = "{{ path('reservations.edit.reservation', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        $('#modalCenter .modal-title').text("{{ 'nav.reservation.edit'|trans }}");
        $("#modal-content-ajax").html(content);

        $.ajax({
            url: url,
            type: "get",
            data: ($("#objects").serialize()),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    // tab = which tab is selected in show modal
    function changeReservationCustomer(id, tab, appartmentId) {
        var url = "{{ path('reservations.edit.reservation.customer', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        $("#modal-content-ajax").html(content);

        $.ajax({
            url: url,
            type: "get",
            data: {tab: tab, appartmentId: appartmentId },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function editReservationNewCustomer(id, tab) {
        var url = "{{ path('reservations.edit.reservation.customer.create', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);

        $.ajax({
            url: url,
            type: "post",
            data: $("#customer-selection").serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                if (data.length > 0) {
                    $("#flash-message-overlay").empty();
                    $("#flash-message-overlay").append(data);
                } else {
                    getReservation(id, tab)
                    if(id !== 'new' && tab == 'booker') {
                        getNewTable();
                    }
                }
            }
        });

        return false;
    }
    ;

    function editReservationCustomerChange(id, tab, appartmentId) {
        var url = "{{ path('reservations.edit.customer.change', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", $("#reservation-id").val());

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: {customerId: id, tab: tab, appartmentId: appartmentId},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                //$('#modalCenter .modal-title').text("{{ 'reservation.details'|trans }}");
                $("#modal-content-ajax").html(data);
                if(tab == 'booker') {
                    getNewTable();
                }

            }
        });

        return false;
    }
    ;

    function toggleMoreInfo(fieldId) {
        if ($("#" + fieldId).is(":hidden")) {
            $("#" + fieldId).fadeIn().removeClass('hide');
        }
        else {
            $("#" + fieldId).hide();
        }
        return false;
    }

    function doDeleteReservation(id) {
        var form = "#reservationShowForm";
        var url = "{{ path('reservations.dodelete.reservation') }}";

        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                location.reload();
            }
        });

        return false;
    }
    ;

    function showInvoice(id) {
        var url = "{{ path('invoices.get.invoice', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        $("#modal-content-ajax").html(content);
        $("#modal-content-ajax").load(url, function (response, status, xhr) {
        });

        return false;
    }
    ;

    function deleteReservationCustomer(elm, customerId) {
        var form = $(elm).parent().find("#actions-customer-" + customerId);
        var url = "{{ path('reservations.edit.delete.customer') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function editReservationCustomerEdit(customerId, form) {
        var url = "{{ path('reservations.edit.customer.edit') }}";
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    ;

    function saveEditCustomer(id, form) {
        var url = "{{ path('reservations.edit.customer.edit.save') }}";

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        $("#modal-content-ajax").html(content);
        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    
    function selectTemplateForReservations(templateId, inProcess) {
        if (inProcess === undefined) {
            inProcess = false;
        }
        var url = "{{ path('reservations.select.template') }}";

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        if(inProcess) {
            var formData = $("#template-form").serialize();
        } else {
            var formData = null;
        }        

        $.ajax({
            url: url,
            type: "post",
            data: {templateId: templateId, inProcess: inProcess, formData: formData},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $('#modalCenter .modal-title').text("{{ 'templates.select.template'|trans }}");
                $("#modal-content-ajax").html(data);

            }
        });

        return false;
    }
    
    function previewTemplateForReservation(id, inProcess) {
        if (inProcess === undefined) {
            inProcess = false;
        }
        var url = "{{ path('reservations.select.template.preview', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: {inProcess: inProcess},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $('#modalCenter .modal-title').text("{{ 'templates.edit'|trans }}");
                $("#modal-content-ajax").html(data);

            }
        });

        return false;
    }
    
    function sendEmail(form) {
        var url = "{{ path('settings.templates.email.send') }}";

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        // set current content of editor as value, otherwise changes in editor are not taken
        $(form).find("#editor1").val(tinymce.get("editor1").getContent());
        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                if (data.length > 0) {
                    $("#flash-message-overlay").empty();
                    $("#flash-message-overlay").append(data);
                } else {
                    // success
                    //window.location.href = "{{ path('start') }}";
                    getReservation(lastClickedReservationId, "correspondence");
                }
            }
        });

        return false;
    }
    
    function saveTemplateFile(form) {
        var url = "{{ path('settings.templates.file.save') }}";

        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';
        // set current content of editor as value, otherwise changes in editor are not taken
        $(form).find("#editor1").val(tinymce.get("editor1").getContent());
        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                if (data.length > 0) {
                    $("#flash-message-overlay").empty();
                    $("#flash-message-overlay").append(data);
                    if(isTemplateAttachment) {
                        previewTemplateForReservation(0, 'false');
                    }
                } else {
                    // success
                    //window.location.href = "{{ path('start') }}";
                    getReservation(lastClickedReservationId, "correspondence");
                }
            }
        });

        return false;
    }
    
    function exportPDFCorrespondence(id) {
        var url = "{{ path('settings.templates.correspondence.export.pdf', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);
        // download file
        window.location.href = url;

        return false;
    }
    
    function showMailCorrespondence(id, reservationId) {
        var url = "{{ path('settings.templates.correspondence.show', {'id': 'placeholder'}) }}";
        url = url.replace("placeholder", id);
        // download file
        var content = '<div class="modal-body">' +
                '     <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />' +
                '</div>';

        $.ajax({
            url: url,
            type: "post",
            data: {reservationId: reservationId},
            beforeSend: function () {
                $("#modal-content-ajax").html(content);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                $('#modalCenter .modal-title').text("{{ 'templates.preview'|trans }}");
                $("#modal-content-ajax").html(data);
            }
        });

        return false;
    }
    {% if is_granted('ROLE_ADMIN') %}
    function doDeleteInvoice() {
        var form = "#invoiceDeleteForm";
        var url = "{{ path('invoices.dodelete.invoice') }}";

        $.ajax({
            url: url,
            type: "post",
            data: $(form).serialize(),
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
            },
            success: function (data) {
                location.reload();
            }
        });
        return false;
    }
    {% endif %}
    </script>
{% endblock %}
{% block bodyjs %}
    {{ parent() }}
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/selectable-0.22.0.min.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/customers_1.0.0.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/reservations_1.2.0.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/invoice_1.1.0.js"></script>
{% endblock %}