/* ------------------------------------------------------------------------------
 *
 *  # Date and time pickers
 *
 *  Demo JS code for picker_date.html page
 *
 * ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var DateTimePickers = function () {


    //
    // Setup module components
    //

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

        // Basic initialization
        $('.daterange-basic').daterangepicker({
            parentEl: '.content-inner',
            locale: {
                format: 'YYYY-MM-DD',
                separator: ' / '  // Change the separator here
            },
            autohide: true
        });

        // Display week numbers
        $('.daterange-weeknumbers').daterangepicker({
            parentEl: '.content-inner',
            showWeekNumbers: true
        });

        // Button class options
        $('.daterange-buttons').daterangepicker({
            parentEl: '.content-inner',
            applyClass: 'btn-success',
            cancelClass: 'btn-danger',
            locale: {
                format: 'YYYY-MM-DD',
                separator: ' / '  // Change the separator here
            },
            autohide: true
        });

        // Display time picker
        $('.daterange-time').daterangepicker({
            parentEl: '.content-inner',
            timePicker: true,
            locale: {
                format: 'MM/DD/YYYY h:mm a'
            },
            autohide: true,
            // timePicker24Hour: true,   // 👈 enable 24h mode
            // locale: {
            //     format: 'MM/DD/YYYY HH:mm'  // 👈 24-hour format
            // }
        });

        // Show picker on right
        $('.daterange-left').daterangepicker({
            parentEl: '.content-inner',
            opens: 'left',
            locale: {
                format: 'YYYY-MM-DD',
                separator: ' / '  // Change the separator here
            },
            autohide: true
        });

        // Single picker
        $('.daterange-single').daterangepicker({
            parentEl: '.content-inner',
            autoUpdateInput: false, // <-- prevents auto-update
            autohide: true,
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
                format: 'YYYY-MM-DD',
            },
        });

        // Manually update input on apply
        $('.daterange-single').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD'));
        });

        // Display date dropdowns
        $('.daterange-datemenu').daterangepicker({
            parentEl: '.content-inner',
            showDropdowns: true
        });

        // 10 minute increments
        $('.daterange-increments').daterangepicker({
            parentEl: '.content-inner',
            timePicker: true,
            timePickerIncrement: 10,
            locale: {
                format: 'YYYY-MM-DD h:mm a'
            }
        });

        // Localization
        $('.daterange-locale').daterangepicker({
            parentEl: '.content-inner',
            ranges: {
                'Сегодня': [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
            }
        });


        //
        // Pre-defined ranges and callback
        //

        // Initialize with options
        $('.daterange-predefined').daterangepicker(
            {
                startDate: moment().subtract(6, 'days'),
                endDate: moment(),
                opens: 'left',
                parentEl: '.content-inner',
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' / '  // Change the separator here
                },
                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')]
                }
            },
            function (start, end) {
                // $('.daterange-predefined input').val(start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
            }
        );


        //
        // Pre-defined ranges and callback
        //

        // Initialize with options
        $('.daterange-predefined-bkp').daterangepicker(
            {
                startDate: moment().subtract(0, 'days'),
                endDate: moment(),
                opens: 'left',
                parentEl: '.content-inner',
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' / '  // Change the separator here
                },
                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')]
                }
            },
            function (start, end) {
                // $('.daterange-predefined input').val(start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
            }
        );


        //
        // Pre-defined ranges and callback
        //

        // Initialize with options
        $('.daterange-predefined-this-month').daterangepicker(
            {
                startDate: moment().startOf('month'),
                endDate: moment().endOf('month'),
                opens: 'left',
                parentEl: '.content-inner',
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' / '  // Change the separator here
                },
                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')]
                }
            },
            function (start, end) {
                // $('.daterange-predefined input').val(start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
            }
        );



        //
        // Inside button
        //

        // Initialize with options
        $('.daterange-ranges').daterangepicker(
            {
                startDate: moment().subtract(6, 'days'),
                endDate: moment(),
                minDate: '01-01-2017',
                // maxDate: '12-31-2100',
                dateLimit: { days: 60 },
                opens: document.dir == 'rtl' ? 'right' : 'left', // double check this !!!!!!!!!!!!!!!!!!!!!!
                parentEl: '.content-inner',
                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')]
                }
            },
            function (start, end) {
                $('.daterange-ranges').html(start.format('YYYY-MM-DD') + ' &nbsp; - &nbsp; ' + end.format('YYYY-MM-DD'));
            }
        );

        // Display date format
        $('.daterange-ranges span').html(moment().subtract(29, 'days').format('YYYY-MM-DD') + ' &nbsp; - &nbsp; ' + moment().format('YYYY-MM-DD'));
    };

    // Date picker
    const _componentDatepicker = function () {
        if (typeof Datepicker == 'undefined') {
            console.warn('Warning - datepicker.min.js is not loaded.');
            return;
        }

        // Basic example
        const dpBasicElement = document.querySelector('.datepicker-basic');
        if (dpBasicElement) {
            const dpBasic = new Datepicker(dpBasicElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                autohide: true,
                todayHighlight: true,
                format: 'yyyy-mm-dd',
            });
        }

        // Hide on selection
        const dpAutoHideElement = document.querySelector('.datepicker-autohide');
        if (dpAutoHideElement) {
            const dpAutoHide = new Datepicker(dpAutoHideElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                autohide: true,
            });
        }

        // Week numbers
        const dpWeeksElement = document.querySelector('.datepicker-week-numbers');
        if (dpWeeksElement) {
            const dpWeeks = new Datepicker(dpWeeksElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                calendarWeeks: true
            });
        }

        // Clear date selection
        const dpClearElement = document.querySelector('.datepicker-clear-date');
        if (dpClearElement) {
            const dpClear = new Datepicker(dpClearElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                clearBtn: true
            });
        }

        // Disabled weekdays
        const dpWeekdaysDisabledElement = document.querySelector('.datepicker-weekdays-disabled');
        if (dpWeekdaysDisabledElement) {
            const dpWeekdaysDisabled = new Datepicker(dpWeekdaysDisabledElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                daysOfWeekDisabled: [6]
            });
        }

        // Disabled dates
        const dpDatesDisabledElement = document.querySelector('.datepicker-dates-disabled');
        if (dpDatesDisabledElement) {
            const dpDatesDisabled = new Datepicker(dpDatesDisabledElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                datesDisabled: ['01/03/2022', '01/05/2022', '01/10/2022', '01/20/2022', '01/25/2022']
            });
        }

        // Highlighted weekdays
        const dpDaysHighlightedElement = document.querySelector('.datepicker-days-highlighted');
        if (dpDaysHighlightedElement) {
            const dpDaysHighlighted = new Datepicker(dpDaysHighlightedElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                daysOfWeekHighlighted: [3]
            });
        }

        // Date format
        const dpDatePicker = document.querySelector('.dpDatePicker');
        if (dpDatePicker) {
            const dpNewDatePicker = new Datepicker(dpDatePicker, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                format: 'yyyy-mm-dd',
                autohide: true,
            });
        }

        // Date format
        const dpDateFormatElement = document.querySelector('.datepicker-date-format');
        if (dpDateFormatElement) {
            const dpDateFormat = new Datepicker(dpDateFormatElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                format: 'yyyy-mm-dd',
                autohide: true,
            });
        }

        // Datetime format
        // const dpDateTime = document.querySelector('.datetimepicker-format');
        // if (dpDateTime) {
        //     const dpDateTimeFormat = new Datepicker(dpDateTime, {
        //         container: '.content-inner',
        //         buttonClass: 'btn',
        //         prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
        //         nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
        //         timepicker: true, // Enable timepicker
        //         timepicker24Hour: true, // Use 24-hour format (adjust as needed)
        //         format: 'yyyy-mm-dd', // Corrected time format
        //         autohide: true,
        //     });
        //     // Set the value to the current date and time
        //     dpDateTimeFormat.setDate(new Date().toISOString());
        // }

        // Multiple dates
        const dpDatesMultipleElement = document.querySelector('.datepicker-multiple-dates');
        if (dpDatesMultipleElement) {
            const dpDatesMultiple = new Datepicker(dpDatesMultipleElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                maxNumberOfDates: 3
            });
        }

        // Minimum date
        const dpDateMinElement = document.querySelector('.datepicker-date');
        if (dpDateMinElement) {
            const dpDateMin = new Datepicker(dpDateMinElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                format: 'yyyy-mm-dd',
                autohide: true,
            });
        }

        // Maximum date
        const dpDateMaxElement = document.querySelector('.datepicker-date-max');
        if (dpDateMaxElement) {
            const dpDateMax = new Datepicker(dpDateMaxElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                maxDate: '01/01/2022'
            });
        }

        // Change pick level
        const dpPickLevelElement = document.querySelector('.datepicker-pick-level');
        if (dpPickLevelElement) {
            const dpPickLevel = new Datepicker(dpPickLevelElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                pickLevel: 1
            });
        }

        // Change default view
        const dpDefaultViewElement = document.querySelector('.datepicker-default-view');
        if (dpDefaultViewElement) {
            const dpDefaultView = new Datepicker(dpDefaultViewElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                startView: 2,
                autohide: true,
                format: 'yyyy-mm-dd'
            });
        }

        // Change default view
        const dpDefaultViewYear = document.querySelector('.datepicker-from-year');
        if (dpDefaultViewYear) {
            const dpDefaultView = new Datepicker(dpDefaultViewYear, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                startView: 2,
                autohide: true,
                format: 'yyyy-mm-dd'
            });
        }

        // Change default view
        const dpDefaultViewMonth = document.querySelector('.datepicker-from-month');
        if (dpDefaultViewMonth) {
            const dpDefaultView = new Datepicker(dpDefaultViewMonth, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                startView: 1,
                autohide: true,
                format: 'yyyy-mm-dd'
            });
        }

        // Display picker title
        const dpTitleElement = document.querySelector('.datepicker-with-title');
        if (dpTitleElement) {
            const dpTitle = new Datepicker(dpTitleElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                title: 'Pick a date'
            });
        }

        // Today button
        const dpTodayButtonElement = document.querySelector('.datepicker-date-today');
        if (dpTodayButtonElement) {
            const dpTodayButton = new Datepicker(dpTodayButtonElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                todayBtn: true,
                autohide: true,
                format: 'yyyy-mm-dd'
            });
        }

        // Start day of the week
        const dpStartDayElement = document.querySelector('.datepicker-start-day');
        if (dpStartDayElement) {
            const dpStartDay = new Datepicker(dpStartDayElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                weekStart: 1
            });
        }

        // Date range
        const dpRangeElement = document.querySelector('.datepicker-range');
        if (dpRangeElement) {
            const dpRange = new DateRangePicker(dpRangeElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;'
            });
        }

        // Allow one sided range
        const dpOneSideElement = document.querySelector('.datepicker-range-one-side');
        if (dpOneSideElement) {
            const dpOneSide = new DateRangePicker(dpOneSideElement, {
                container: '.content-inner',
                buttonClass: 'btn',
                prevArrow: document.dir == 'rtl' ? '&rarr;' : '&larr;',
                nextArrow: document.dir == 'rtl' ? '&larr;' : '&rarr;',
                allowOneSidedRange: false
            });
        }
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function () {
            _componentDaterange();
            _componentDatepicker();
        }
    }
}();


// Initialize module
// ------------------------------

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