{% extends 'admin.html.twig' %}
{% form_theme form 'default/form/theme.html.twig' %}

{% block body %}
    <section class="clearfix">
        <div class="content-copy">
            <h1>Neue Reservierung anlegen für {{ lodging.name }}</h1>

            <h3>Reservierung</h3>

            <form class="st-booking-form" method="post">

                {{ form_errors(form) }}

                <div id="message"></div>

                <div class="form-box">
                    {{ form_row(form.lodging, {label: 'Objekt'}) }}

                    <div class="form-group">
                        <label class="st-required control-label required">Datum</label>
                        <div class="input-daterange input-group" id="date-range">
                            {{ form_widget(form.fromDate) }}
                            <span class="input-group-addon bg-info b-0 text-white">bis</span>
                            {{ form_widget(form.toDate) }}
                        </div>
                    </div>

                    {{ form_row(form.status, {label: 'Status'}) }}
                    {#{{ form_row(form.type, {label: 'Typ'}) }}#}

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <button type="submit" value="SEND" id="submit"
                                class="btn btn-primary btn-lg border-radius"
                        >
                            Speichern
                        </button>
                    </div>
                </div><!-- end form-box -->
                {{ form_rest(form) }}
            </form>
            <a href="/admin/fewo/lodgings/{{ lodging.id }}"
               class="btn btn-primary"
               rel="nofollow"
            >
                Zurück
            </a>
            <hr>
            <h3>Mögliche Saisons</h3>

            <table class="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Von</th>
                    <th>Bis</th>
                    <th>Preis pro Nacht</th>
                    <th>Service-Gebühr</th>
                    <th>Mindestbelegung</th>
                </tr>
                </thead>
                <tbody>
                {% for lodgingPrice in lodging.prices %}
                    {% if lodgingPrice.season is not empty %}
                    <tr>
                        <td>{{ lodgingPrice.season.name }}</td>
                        <td>{{ lodgingPrice.season.fromDate|date('d-m-y') }}</td>
                        <td>{{ lodgingPrice.season.toDate|date('d-m-y') }}</td>
                        <td>{{ lodgingPrice.perNight }}</td>
                        <td>{{ lodgingPrice.flatPrice }}</td>
                        <td>{{ lodgingPrice.season.minimumStay }}</td>
                    </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>


        </div>
    </section><!-- end section -->

    <script type="text/javascript">

         checkDates = function(date) {
             formatted = date.format('DD.MM.YYYY');
             reservationDays = {{ reservationDays|json_encode|raw }}
            return reservationDays.indexOf(formatted) > -1;
        };
         checkCustom = function(date) {
             customDays = {{ classByDays|json_encode|raw }};
             formatted = date.format('DD.MM.YYYY');
            if(customDays[formatted] != undefined){
                 return customDays[formatted];
            }
        };

        $(document).ready(function() {

            var currentDate = moment().format("DD.MM.YYYY");

            var startDate = $('#appbundle_feworeservation_fromDate').val();
            var endDate = $('#appbundle_feworeservation_toDate').val();

            var maxDate = "{{ lastSeason.toDate|date('d-m-y') }}";

            $('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').daterangepicker({
                isInvalidDate: checkDates,
                isCustomDate: checkCustom,
                "minDate": moment(),
                "maxDate": maxDate,
                "timePickerSeconds": true,


                "locale": {
                    "format": "DD.MM.YYYY",
                    "separator": " - ",
                    "applyLabel": "OK",
                    "cancelLabel": "X",
                    "fromLabel": "Von",
                    "toLabel": "Bis",
                    "customRangeLabel": "Custom",
                    "weekLabel": "W",
                    "daysOfWeek": [
                        "So",
                        "Mo",
                        "Di",
                        "Mi",
                        "Do",
                        "Fr",
                        "Sa"
                    ],
                    "monthNames": [
                        "Januar",
                        "Februar",
                        "März",
                        "April",
                        "Mai",
                        "Juni",
                        "Juli",
                        "August",
                        "September",
                        "Oktober",
                        "November",
                        "Dezember"
                    ],
                    "firstDay": 1
                },
                autoApply: true,
                autoUpdateInput: false,
                "startDate": startDate,
                "endDate": endDate,
            }, function(start, end, label) {
                console.log(start);
                // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
                // Lets update the fields manually this event fires on selection of range
                var selectedStartDate = start.format('DD.MM.YYYY'); // selected start
                var selectedEndDate = end.format('DD.MM.YYYY'); // selected end

                $checkinInput = $('#appbundle_feworeservation_fromDate');
                $checkoutInput = $('#appbundle_feworeservation_toDate');

                // Updating Fields with selected dates
                $checkinInput.val(selectedStartDate);
                $checkoutInput.val(selectedEndDate);

                // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
                var checkOutPicker = $checkoutInput.data('daterangepicker');
                checkOutPicker.setStartDate(selectedStartDate);
                checkOutPicker.setEndDate(selectedEndDate);

                // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
                var checkInPicker = $checkinInput.data('daterangepicker');
                checkInPicker.setStartDate(selectedStartDate);
                checkInPicker.setEndDate(selectedEndDate);

            });

            $('#appbundle_feworeservation_fromDate, #appbundle_feworeservation_toDate').on('show.daterangepicker', function(ev, picker) {
                console.log(picker.startDate.format('YYYY-MM-DD'));
                console.log(picker.endDate.format('YYYY-MM-DD'));
            });
        });
    </script>
{% endblock body %}