<script>
    var DateTimePickers = function() {

        const _componentDaterange = function() {
            if (!$().daterangepicker) {
                console.warn('Warning - daterangepicker.js is not loaded.');
                return;
            }

            $('.date-range-single').daterangepicker({
                parentEl: '.content-inner',
                showDropdowns: true, // если нужно будет выводить селект года и мес.
                singleDatePicker: true,
                timePicker: true,
                timePicker24Hour: {if $config.use_24_hours} true {else} false {/if},
                autoApply: true,
                autoUpdateInput: true,
                minYear: 2010,
                applyClass: 'btn-sm btn-primary',
                cancelClass: 'btn-sm btn-light',
                locale: {
                    format: "{if $config.use_24_hours}YYYY-MM-DD H:mm{else}YYYY-MM-DD hh:mm a{/if}",
                    daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
                    monthNames: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
                    firstDay: 1,
                    applyLabel : "Применить",
                    cancelLabel: "Отменить",
                },
                // opens: "center",
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD hh:mm') + ' to ' + end.format('YYYY-MM-DD hh:mm') + ' (predefined range: ' + label + ')');
            });


            {if isset($dateStart) || isset($dateEnd)}

			//console.log(moment.unix({strtotime($dateStart)}))
			//console.log(moment("{$dateStart}", moment.ISO_8601))

            moment().locale('ru')
            let minDate = '{$dateDefault}',
                maxDate = moment().local().endOf('day');
            let startDate = createMoment('{$dateStart|strtotime}');
            let endDate = createMoment('{$dateEnd|strtotime}');

            $('.daterange-predefined').daterangepicker({
                parentEl: '.content-inner',
                startDate: startDate,
                endDate: endDate,
                minDate: minDate,
                maxDate: maxDate,
                applyClass: 'btn-sm btn-primary',
                cancelClass: 'btn-sm btn-light',
                opens: 'left',
                linkedCalendars: false,
                autoApply: true,
                locale: {
                    format: "YYYY-MM-DD",
                    daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
                    monthNames: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
                    firstDay: 1,
                    applyLabel: 'Применить',
                    cancelLabel: 'Отменить',
                    clearLabel: 'Очистить',
                    customRangeLabel: 'Пользовательский',
                    fromLabel: 'От',
                    toLabel: 'До',
                },
                ranges: {
                    'Весь период': ['2020-01-01', moment()],
                    'Сегодня': [moment(), moment()],
                    'Вчера': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Последние 7 дней': [moment().subtract(6, 'days'), moment()],
                    'Последние 30 дней': [moment().subtract(29, 'days'), moment()],
                    'Этот месяц': [moment().startOf('month'), moment().endOf('month')],
                    'Прошедший месяц': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Текущий год': [moment().startOf('year').startOf('day'), moment().endOf('year').endOf('day')],
                    'Предыдущий год': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],

                }
            }, function drp(start, end) {
                $('.daterange-predefined span.drp-selected').html(start.format('YYYY-MM-DD') + ' &nbsp; - &nbsp; ' + end.format('YYYY-MM-DD'));
                $('.daterange-predefined').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
                $('input[name="newDateStart"]').val(start.format('YYYY-MM-DD'));
                $('input[name="newDateEnd"]').val(end.format('YYYY-MM-DD'));
            });

            $('.daterange-predefined').on('apply.daterangepicker', function(ev, picker) {

                $('.daterange-btn').click();
            });

            {/if}

            $('.daterange-stats').daterangepicker({
                // showDropdowns: true, // если нужно будет выводить селект года и мес.
                singleDatePicker: true,
                autoApply: true,
                autoUpdateInput: true,
                minYear: 2010,
                applyClass: 'btn-sm bg-slate-600',
                cancelClass: 'btn-sm btn-light',
                locale: {
                    format: "YYYY-MM-DD",
                    daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
                    monthNames: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
                    firstDay: 1,
                    applyLabel : "Применить",
                    cancelLabel: "Отменить",
                },
                opens: "right",
                drops: "up"
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD hh:mm') + ' to ' + end.format('YYYY-MM-DD hh:mm') + ' (predefined range: ' + label + ')');
            });


            $('.daterange-datemenu').daterangepicker({
                parentEl: '.content-inner',
	            showDropdowns: true,
	            opens: 'left',
	            applyClass: 'bg-slate-600',
	            cancelClass: 'btn-light'
            });

            $('.daterange-increments').daterangepicker({
                parentEl: '.content-inner',
	            timePicker: true,
	            opens: 'left',
	            applyClass: 'bg-slate-600',
	            cancelClass: 'btn-light',
	            timePickerIncrement: 10,
	            locale: {
	                format: 'MM/DD/YYYY h:mm a'
	            }
            });

            $('.daterange-locale').daterangepicker({
                parentEl: '.content-inner',
	            applyClass: 'bg-slate-600',
	            cancelClass: 'btn-light',
	            opens: 'left',
                ranges: {
                    'Весь период': ['2020-01-01', moment()],
                    'Сегодня': [moment(), moment()],
                    'Вчера': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Последние 7 дней': [moment().subtract(6, 'days'), moment()],
                    'Последние 30 дней': [moment().subtract(29, 'days'), moment()],
                    'Этот месяц': [moment().startOf('month'), moment().endOf('month')],
                    'Прошедший месяц': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                locale: {
                    applyLabel: 'Вперед',
                    cancelLabel: 'Отмена',
                    startLabel: 'Начальная дата',
                    endLabel: 'Конечная дата',
                    customRangeLabel: 'Выбрать дату',
                    daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт','Сб'],
                    monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
                    firstDay: 1
                }
            });

            $('.daterange-predefined span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + moment().format('MMMM D, YYYY'));

            $('.daterange-ranges').daterangepicker({
                parentEl: '.content-inner',
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment(),
                    minDate: '01/01/2012',
                    maxDate: '12/31/2019',
                    dateLimit: { days: 60 },
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    opens: 'left',
                    applyClass: 'btn-sm bg-slate-600',
                    cancelClass: 'btn-sm btn-light'
                }, function(start, end) {
                    $('.daterange-ranges span').html(start.format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + end.format('MMMM D, YYYY'));
                }
            );

            $('.daterange-ranges span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + moment().format('MMMM D, YYYY'));

            $('.date-project-payment').daterangepicker({
                parentEl: '.content-inner',
                showDropdowns: true, // если нужно будет выводить селект года и мес.
                singleDatePicker: true,
                autoApply: true,
                autoUpdateInput: true,
                minYear: 2010,
                applyClass: 'btn-sm btn-primary',
                cancelClass: 'btn-sm btn-light',
                locale: {
                    format: "YYYY-MM-DD",
                    daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
                    monthNames: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
                    firstDay: 1,
                    applyLabel : "Применить",
                    cancelLabel: "Отменить",
                },
                // opens: "center",
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
            });

        };

        // Date picker
        // const _componentPickadate = function() {
        //     if (!$().pickadate) {
        //         console.warn('Warning - picker.js and/or picker.date.js is not loaded.');
        //         return;
        //     }
		//
        //     $('.pickadate').pickadate();
        //     $('.pickadate-strings').pickadate({
	    //         weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
	    //         showMonthsShort: true
        //     });
        //     $('.pickadate-buttons').pickadate({
	    //         today: '', close: '', clear: 'Clear selection'
        //     });
		//
        //     $('.pickadate-accessibility').pickadate({
        //         labelMonthNext: 'Go to the next month',
        //         labelMonthPrev: 'Go to the previous month',
        //         labelMonthSelect: 'Pick a month from the dropdown',
        //         labelYearSelect: 'Pick a year from the dropdown',
        //         selectMonths: true,
        //         selectYears: true
        //     });
		//
        //     $('.pickadate-translated').pickadate({
        //         monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        //         weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        //         today: 'aujourd\'hui',
        //         clear: 'effacer',
        //         formatSubmit: 'yyyy/mm/dd'
        //     });
		//
        //     $('.pickadate-format').pickadate({
	    //         format: 'You selecte!d: dddd, dd mmm, yyyy',
	    //         formatSubmit: 'yyyy/mm/dd',
	    //         hiddenPrefix: 'prefix__',
	    //         hiddenSuffix: '__suffix'
        //     });
		//
        //     var $input_date = $('.pickadate-editable').pickadate({
        //         editable: true,
        //         onClose: function() {
        //             $('.datepicker').focus();
        //         }
        //     });
		//
        //     var picker_date = $input_date.pickadate('picker');
        //     $input_date.on('click', function(event) {
        //         if (picker_date.get('open')) {
        //             picker_date.close();
        //         } else {
        //             picker_date.open();
        //         }
        //         event.stopPropagation();
        //     });
		//
        //     $('.pickadate-selectors').pickadate({
	    //         selectYears: true,
	    //         selectMonths: true
        //     });
        //     $('.pickadate-year').pickadate({
	    //         selectYears: 4
        //     });
        //     $('.pickadate-weekday').pickadate({
	    //         firstDay: 1
        //     });
        // };

        // const _componentPickatime = function() {
        //     if (!$().pickatime) {
        //         console.warn('Warning - picker.js and/or picker.time.js is not loaded.');
        //         return;
        //     }
		//
        //     $('.pickatime').pickatime();
        //     $('.pickatime-clear').pickatime({
	    //         clear: ''
        //     });
        //     $('.pickatime-format').pickatime({
	    //         format: 'T!ime selected: h:i a', formatLabel: '<b>h</b>:i <!i>a</!i>', formatSubmit: 'HH:i', hiddenPrefix: 'prefix__', hiddenSuffix: '__suffix'
        //     });
        //     $('.pickatime-hidden').pickatime({
	    //         formatSubmit: 'HH:i', hiddenName: true
        //     });
        //     $('.pickatime-intervals').pickatime({
	    //         interval: 150
        //     });
        // };


        const createMoment = function createMoment(input) {
            // Unix timestamp
            if (isFinite(input)) {
                return moment.unix(input);
            } // ISO 8601
            else {
                return moment(input, moment.ISO_8601);
            }
        };

        return {
            init: function() {
                _componentDaterange();
                // _componentPickadate();
                // _componentPickatime();
            }
        }
    }();

    document.addEventListener('DOMContentLoaded', function() {
        DateTimePickers.init();
    });

</script>