{% extends '@commons/default.html.twig' %}

{% block toasts %}
    <div class="toast" style="position: fixed; top: 90px; right: 25px;" data-delay="3000" id="alert_message">
        <div class="toast-header">
            <strong class="mr-auto">Warnung</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Der Projektzeitraum ist ungültig.
        </div>
    </div>
{% endblock %}

{% block content %}
    <div>
        {% include '@commons/basics/drop_down.html.twig' %}
        <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--8-col-desktop mdl-grid">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">Kerndaten</h2>
            </div>
            <form name="edit_timespan__form" action="{{ metadata.link }}" method="post"
                  onsubmit="return validateDates()">
                <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                    <div>
                        <table>
                            <thead style="vertical-align: bottom;">
                            <tr>
                                <th colspan="2">
                                    Projektzeitraum
                                    <div id="measures_table_info" class="icon material-icons"
                                         style="font-size: 16px; margin-top: 20px;">
                                        info
                                    </div>
                                    <div class="mdl-tooltip" for="measures_table_info">
                                        Das Startdatum ist der Zeitpunkt der Übergabe an die Projektleitung
                                    </div>
                                </th>
                                <th style="padding-left: 10px;">
                                    Projektstatus
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <label for="project_start_month"
                                           class="col-sm-2 col-form-label">Start-Monat:</label>
                                    <select class="form-control" id="project_start_month" name="project_start_month">
                                        <option></option>
                                        {% for month in period.start.month %}
                                            {% if month.is_selected %}
                                                <option value="{{ month.id }}" selected>{{ month.label }}</option>
                                            {% else %}
                                                <option value="{{ month.id }}">{{ month.label }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </td>
                                <td>
                                    <label for="project_start_year" class="col-sm-2 col-form-label">Start-Jahr:</label>
                                    {% if period.start.year is null %}
                                        <input type="number" class="form-control" id="project_start_year"
                                               name="project_start_year"
                                               min="2000" max="2050">
                                    {% else %}
                                        <input type="number" class="form-control" id="project_start_year"
                                               name="project_start_year"
                                               min="2000" max="2050" value="{{ period.start.year }}">
                                    {% endif %}
                                </td>
                                <td style="vertical-align: bottom; padding-left: 10px;">
                                    <select class="form-control" id="status_id" name="status_id" style="width: 155px;">
                                        <option></option>
                                        {% for status in project_status %}
                                            {% if status.is_selected and status.can_edit %}
                                                <option value="{{ status.id }}" selected>{{ status.label }}</option>
                                            {% elseif status.is_selected %}
                                                <option value="{{ status.id }}" selected>{{ status.label }}</option>
                                            {% elseif status.can_edit %}
                                                <option value="{{ status.id }}">{{ status.label }}</option>
                                            {% else %}
                                                <option value="{{ status.id }}">{{ status.label }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="project_end_month" class="col-sm-2 col-form-label">End-Monat:</label>
                                    <select class="form-control" id="project_end_month" name="project_end_month">
                                        <option></option>
                                        {% for month in period.end.month %}
                                            {% if month.is_selected %}
                                                <option value="{{ month.id }}" selected>{{ month.label }}</option>
                                            {% else %}
                                                <option value="{{ month.id }}">{{ month.label }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </td>
                                <td>
                                    <label for="project_end_year" class="col-sm-2 col-form-label">End-Jahr:</label>
                                    {% if period.start.year is null %}
                                        <input type="number" class="form-control" id="project_end_year"
                                               name="project_end_year"
                                               min="2000" max="2050">
                                    {% else %}
                                        <input type="number" class="form-control" id="project_end_year"
                                               name="project_end_year"
                                               min="2000" max="2050" value="{{ period.end.year }}">
                                    {% endif %}
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="project_handoverTalks" class="col-sm-2 col-form-label">Übergabegespräche:</label>
                                    <input type="checkbox" class="form-control" id="project_handoverTalks" name="project_handoverTalks" {{ metadata.handoverTalks }}>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="project_workPreparation" class="col-sm-2 col-form-label">Arbeitsvorbereitung:</label>
                                    <input type="checkbox" class="form-control" id="project_workPreparation" name="project_workPreparation" {{ metadata.workPreparation }}>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="project_constructionSchedule" class="col-sm-2 col-form-label">Bauzeitenplan:</label>
                                    <input type="checkbox" class="form-control" id="project_constructionSchedule" name="project_constructionSchedule" {{ metadata.constructionSchedule }}>

                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    {% if not is_admin %}
                        {% if metadata.project_selected %}
                            <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                                    type="submit">Speichern
                            </button>
                        {% else %}
                            <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                                    type="submit" disabled>Speichern
                            </button>
                        {% endif %}
                    {% endif %}
                </div>
                <input name="project_id" type="hidden" value="{{ metadata.project_id }}">
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/js/drop_down_projects.js') }}"></script>
    {# Überprüft, dass das Startdatum  vor dem Enddatum liegt #}
    <script>
        function validateDates() {

            let isValid = true;
            let startYear = parseInt($('#project_start_year'));
            let endYear = parseInt($('#project_end_year'));
            let startMonth = parseInt($('#project_start_month'));
            let endMonth = parseInt($('#project_end_month'));

            if ($(startYear).val() > $(endYear).val()) {
                isValid = false;
            }

            if (($(startYear).val() === $(endYear).val()) && ($(startMonth).val() > $(endMonth).val())) {
                isValid = false;
            }

            if (!isValid) {
                $(document).ready(function(){
                    $('.toast').toast('show');
                });
            }

            return isValid;
        }

    </script>
{% endblock %}