<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Autoreply</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <form method="post" action="/account/autoreply">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" id="start" name="start" value="{{#if values.start}}{{values.start}}{{/if}}" />
            <input type="hidden" id="end" name="end" value="{{#if values.end}}{{values.end}}{{/if}}" />

            <fieldset>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Autoreply settings</h3>
                    </div>
                    <div class="panel-body">

                    <p>
                        If enabled then an autoreply message is sent to all incoming messages. If a contact sends multiple messages then the autoreply is sent at most once in every four hours.
                    </p>

                    <div class="radio">
                        <label>
                            <input type="radio" name="status" value="false" {{#unless values.status}}checked{{/unless}}>
                            Autoreply is {{#unless values.status}}<span class="label label-default">disabled</span>{{else}}disabled{{/unless}}
                        </label>
                    </div>

                    <div class="radio">
                        <label>
                            <input type="radio" name="status" value="true" {{#if values.status}}checked{{/if}}>
                            Autoreply is {{#if values.status}}<span class="label label-info">enabled</span>{{else}}enabled{{/if}}
                        </label>
                    </div>

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{values.name}}" placeholder="Sender name in the autoreply From: header">
                    </div>

                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" class="form-control" id="subject" name="subject" value="{{values.subject}}" placeholder="Leave blank to use the default subject">
                    </div>

                    <div class="form-group">
                        <label for="daterange">Time</label>
                        <div class="form-group-sm daterangeElm" style="position: relative">
                            <input type="text" id="daterange" class="form-control" value="">
                            <i class="glyphicon glyphicon-calendar fa fa-calendar" style="position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea class="form-control" name="text" value="{{values.text}}" rows="3">{{values.text}}</textarea>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Update</button>
                    </div>

                </div>
            </div>

            </fieldset>
        </form>

    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        $('#daterange').daterangepicker({
            "showDropdowns": true,
            "showISOWeekNumbers": true,
            "timePicker": true,
            "timePicker24Hour": true,
            "autoApply": true,
            "autoUpdateInput": false,
            "locale": {
                "direction": "ltr",
                "format": "DD/MM/YYYY HH:mm",
                "separator": " - ",
                "applyLabel": "Select",
                "cancelLabel": "Cancel",
                "fromLabel": "From",
                "toLabel": "To",
                "customRangeLabel": "Custom",
                "daysOfWeek": [
                    "Su",
                    "Mo",
                    "Tu",
                    "We",
                    "Th",
                    "Fr",
                    "Sa"
                ],
                "monthNames": [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December"
                ],
                "firstDay": 1
            },

            {{#if values.start}}
                "startDate": moment("{{values.start}}").format('DD/MM/YYYY HH:mm'),
            {{/if}}

            {{#if values.end}}
                "endDate": moment("{{values.end}}").format('DD/MM/YYYY HH:mm'),
            {{/if}}

            "alwaysShowCalendars": true
        }, function(start, end, label) {
            document.getElementById('start').value = start.valueOf();
            document.getElementById('end').value = end.valueOf();
            document.getElementById('daterange').value = start.format('DD/MM/YYYY HH:mm') + ' – ' + end.format('DD/MM/YYYY HH:mm');
        });

        $('.daterangeElm i').click(function() {
            $(this).parent().find('input').click();
        });

        {{#if values.start}}
            document.getElementById('daterange').value = moment("{{values.start}}").format('DD/MM/YYYY HH:mm') + ' – ' + moment("{{values.end}}").format('DD/MM/YYYY HH:mm');
        {{/if}}
    });
</script>
