<div id="{{$attribute->getKey()}}" class="entity-attribute entity-attribute-date-picker {!! $attribute->getStyleClass() !!}   @if($errors->has((string)$attribute->getKey())) error @endif {!!$attribute->getStyleClass()!!}"
     {{--{{ dd($errors->get((string)$attribute->getKey())) }}--}}
     data-uk-tooltip="{pos:'bottom-right'}"
     data-dateFormat="{{$attribute->getDateFormat()}}"
     data-timeOnly="{{$attribute->getTimeOnly()}}"
     data-timeEnabled="{{$attribute->getTimeEnabled()}}"
     data-animation="{{$attribute->getAnimation()}}"
     title="{{ $errors->get((string)$attribute->getKey()) != [] ? $errors->get((string)$attribute->getKey())[0] : ''}}"
>
    <label for="{{$attribute->getKey()}}">{{$attribute->getLabelText()}}</label>
    @if($attribute->getReadOnly())
        <div class="content">{!! $attribute->getValue() !!}</div>
    @else
        <div class="date-field @if($attribute->getTimeOnly()) hidden @endif">
            <div class="icon">
                <img src="/img/kms/icons/date.svg" alt="date"/>
            </div>
            <input type="text"
                   id="{{$attribute->getKey()}}_date"
                   name="{{$attribute->getKey()}}_date"
            >
        </div>

        <div class="time-field @if(!$attribute->getTimeEnabled()) hidden @endif">
            <input
                    id="{{$attribute->getKey()}}_time_hours"
                    name="{{$attribute->getKey()}}_time_hours"
                    type="number"
                    min="0"
                    max="23"
            >
            <span>:</span>
            <input
                    id="{{$attribute->getKey()}}_time_minutes"
                    name="{{$attribute->getKey()}}_time_minutes"
                    type="number"
                    min="0"
                    max="59"
            >
        </div>

        @if($attribute->getExplanation())<span class="explanation">{{ $attribute->getExplanation() }}</span> @endif
    @endif
    <input type="hidden" name="{{$attribute->getKey()}}" id="{{$attribute->getKey()}}-data"
           value="{{$attribute->getValueAsJson()}}">
</div>

<script>
    $(function () {
        //DATE PICKER language initialisation
        @if($attribute->getLanguage())
            $.datepicker.regional['{{$attribute->getLanguage()}}'] = {
            closeText: '@lang('calendar.closeText')',
            prevText: '@lang('calendar.prevText')',
            nextText: '@lang('calendar.nextText')',
            currentText: '@lang('calendar.currentText')',
            {{--Note: monthNames does not seem to be used by the jquery ui datepicker. Thats why we use the monthNamesShort property--}}
                    {{--monthNames: [--}}
                    {{--@foreach(__('calendar.monthNames') as $value)--}}
                    {{--'{{ $value }}',--}}
                    {{--@endforeach--}}
                    {{--],--}}
            monthNamesShort: [
                @if($attribute->getShowLongMonthNames() == false)
                        @foreach(__('calendar.monthNamesShort') as $value)
                    '{{ $value }}',
                @endforeach
                        @else
                        @foreach(__('calendar.monthNames') as $value)
                    '{{ $value }}',
                @endforeach
                @endif
            ],
            dayNames: [
                @foreach(__('calendar.dayNames') as $value)
                    '{{ $value }}',
                @endforeach
            ],
            dayNamesShort: [
                @foreach(__('calendar.dayNamesShort') as $value)
                    '{{ $value }}',
                @endforeach
            ],
            dayNamesMin: [
                @foreach(__('calendar.dayNamesMin') as $value)
                    '{{ $value }}',
                @endforeach
            ],
            weekHeader: '@lang('calendar.weekHeader')',
            dateFormat: '{{$attribute->getDateFormat()}}',
            firstDay: {{ config('calendar.'.$attribute->getLanguage().'.firstDay', 1) }},
            isRTL: {{ config('calendar.'.$attribute->getLanguage().'.isRtl') ? 'true' : 'false' }},
            showMonthAfterYear: {{ config('calendar.'.$attribute->getLanguage().'.showMonthAfterYear') ? 'true' : 'false' }},
            yearSuffix: '@lang('calendar.yearSuffix')'
        };
        $.datepicker.setDefaults($.datepicker.regional['{{$attribute->getLanguage()}}']);
        @endif
    });

    document.addEventListener("DOMContentLoaded", function(event) {
        let henk = new DatePickerAttribute("{{$attribute->getKey()}}");
    });

</script>