<div 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'}"
     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">
            <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()}}"
           value="{{$attribute->getValueAsJson()}}">
</div>

<script>
    $(function () {

        $.widget( "ui.timespinner", $.ui.spinner, {
            _format: function( value ) {
                if(value <= 9) return ('0'+value);
                else return value;
            }
        });

        //Define associated inputs
        let realInput = document.getElementById("{{$attribute->getKey()}}");
        let $dateInput = $("#{{$attribute->getKey()}}_date");
        let $minutesInput = $("#{{$attribute->getKey()}}_time_minutes");
        let $hoursInput = $("#{{$attribute->getKey()}}_time_hours");

        //Define main variables
        let day, month, year, hour, minute;

        //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

        //DATE PICKER initialisation
        let self = this;
        $dateInput.datepicker({
            @if($attribute->getShowAndSelectOtherMonths())
            showOtherMonths: true,
            selectOtherMonths: true,
            @endif

                    @if($attribute->getAnimation())
            showAnim: '{{$attribute->getAnimation()}}',
            @endif
                    @if($attribute->getButtonBar())
            showButtonPanel: '{{$attribute->getButtonBar()}}',
            @endif
                    @if($attribute->getChangeMonth())
            changeMonth: '{{$attribute->getChangeMonth()}}',
            @endif
                    @if($attribute->getChangeYear())
            changeYear: '{{$attribute->getChangeYear()}}',
            @endif
                    @if($attribute->getChangeYear())
            dateFormat: '{{$attribute->getDateFormat()}}',
            @endif

            onSelect: function (dateText, datePicker) {
                dateChanged();
            }
        });

        //TIME PICKER - HOURS
        let twelveOrTwentyFour = {{$attribute->getTimeFormat()}};
        let itIsPm = true;

        $hoursInput.timespinner({
            min: 0,
            max: 23,
            change: function( event, ui ) {
                let showValue = $(this).timespinner("value");
                if(showValue <= 9) return $(this).timespinner("value", ('0'+showValue));
            }
        });

        //TIME PICKER - MINUTES
        $minutesInput.timespinner({
            min: 0,
            max: 59,
            change: function( event, ui ) {
                let showValue = $(this).timespinner("value");
                if(showValue <= 9) return $(this).timespinner("value", ('0'+showValue));
            }
        });

        // Update input time when losing focus of the hour or minute input field
        $($hoursInput).focusout(function(){
            timeChanged();
        });
        $($minutesInput).focusout(function(){
            timeChanged();
        });

        //Helper functions
        /**
         * Check if it am or pm and reflect that in the itIsPm boolean
         */
        function checkAmPm(ui) {
            if (twelveOrTwentyFour === 12) {
                itIsPm = !itIsPm;
            } else {
                itIsPm = (ui.value >= 12 && ui.value <= 24);
            }
        }

        /**
         * Time has changed
         */
        function timeChanged() {
            hour = $hoursInput.timespinner('value') || 0;
            minute = $minutesInput.timespinner('value') || 0;
            updateRealValue();
        }

        /**
         * date has changed
         */
        function dateChanged() {
            let date = $dateInput.datepicker('getDate');

            day = date.getDate();
            month = date.getMonth() + 1; //We need to do this because javascript months are zero based
            year = date.getFullYear();
            updateRealValue();
        }

        /**
         * Updates the hidden input that holds the value that is pushed to the database
         */
        function updateRealValue() {
            //Make sure our variables are set in any case
            if (year === undefined) year = 2018;
            if (month === undefined) month = 1;
            if (day === undefined) day = 1;
            if (hour === undefined) hour = 0;
            if (minute === undefined) minute = 0;

            // console.log('hours: '+ hour);
            // console.log('minutes: '+ minute);

            realInput.setAttribute('value', JSON.stringify({
                year: year,
                month: month,
                day: day,
                hour: hour,
                minute: minute,
                second: 0
            }));

            // console.log('Updated real input: ' + realInput.value);
        }

        /**
         * Set the date picker and time spinners on to the date in the real input field
         */
        function initialize() {
            //Retrieve real input value and validate that it has all properties we need
            let date = getDateObjectFromInput(realInput);

            //Retrieve the date format from the attribute and validate it.
            let dateFormat = '{{$attribute->getDateFormat()}}';

            // console.log(dateFormat);
            let dateToUse = makeDateStringFromDateAndFormat(dateFormat, date);

            $dateInput.datepicker("setDate", dateToUse);
            dateChanged();

            //Update the real input value with the correct data
            // console.log('Initializing hour spinner with value: '+realInputValue.hour);
            $hoursInput.timespinner('value', date.getHours());

            // console.log('Initializing minute spinner with value: '+realInputValue.minute);
            $minutesInput.timespinner('value', date.getMinutes());
        }
        
        /**
         * Looks at an input value and if it is a json object formatted like below, returns a date with those values in the json.
         * Else it wil log an error and set the date to now
         */
        function getDateObjectFromInput(inputElement)
        {
            let inputElementValue = inputElement.value;
            let date = new Date();
            if (inputElementValue) {
                // console.log('initializing with real input value: ' + inputElementValue);
                let json = JSON.parse(inputElementValue);

                if(json.hasOwnProperty('year') && json.hasOwnProperty('month') && json.hasOwnProperty('day') && json.hasOwnProperty('hour') && json.hasOwnProperty('minute') && json.hasOwnProperty('second'))
                {
                    date = new Date(json.year, json.month-1, json.day, json.hour, json.minute, json.second)
                } else {
                    console.error('The input element did not have a json value correctly specified. It should have all the properties: year, month, day, hour, minute, second. but did not have them all. Returning a date object of "now"');
                }
            } else {
                console.error('The input element did not have json value specified. Returning a date object of "now"');
            }

            return date;
        }

        /**
         * Replaces the dd mm and yy values in the dateformat respectively with the day, month and year (4 digits) value.
         * For use with the datePicker setDate method
         *
         * dateFormat example: dd/mm/yy, date is a javascript date object.
         * @param dateFormat string
         * @param date Date
         */
        function makeDateStringFromDateAndFormat(dateFormat, date)
        {
            let formatSplitted = dateFormat.split('/');
            if (formatSplitted.length !== 3) {
                console.error('datePicker.blade.php got a date format from the DatePicker attribute that was not valid. Stopping initialisation: ' + dateFormat);
                return;
            } else {
                if (formatSplitted.indexOf('dd') === -1 || formatSplitted.indexOf('mm') === -1 || formatSplitted.indexOf('yy') === -1) {
                    console.error('datePicker.blade.php got a date format from the DatePicker attribute that was not valid. It should contain the values dd, mm, yy. Stopping initialisation: ' + dateFormat);
                    return;
                }
            }

            //Format the date for the date picker and insert in in the datepicker
            let dateToUse = dateFormat.replace('dd', date.getDate()).replace('mm', date.getMonth()+1).replace('yy', date.getFullYear());
            // console.log('Initializing datepicker with date: '+dateToUse);
            return dateToUse;
        }

        initialize();
    });
</script>