@php
    $versionCode = getVersionCode();
@endphp
<script src="{{ asset('assets/js/moment.min.js')}}"></script>
<script src="{{ asset('assets/js/jquery.min.js')}}"></script>
<script src="{{ asset('assets/js/popper.min.js')}}"></script>
<script src="{{ asset('assets/js/bootstrap.min.js')}}"></script>

<script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{ asset('assets/calendar/chance.min.js')}}"></script>
<script src="{{ asset('assets/js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('assets/js/chart.min.js')}}"></script>

<script src="{{ asset('assets/js/daterangepicker.min.js')}}"></script>
<script src="{{ asset('site/components/font-awesome/js/all.min.js') }}"></script>

<script src="{{ asset('assets/js/jquery-jvectormap-2.0.5.min.js')}}"></script>
<script src="{{ asset('assets/js/jquery-jvectormap-world-mill-en.js')}}"></script>

<script src="{{ asset('assets/js/jquery.minicolors.js')}}"></script>
<script src="{{ asset('assets/js/audio.min.js')}}"></script>
<script src="{{ asset('site/components/d3/d3.min.js') }}"></script>
<script src="{{ asset('site/components/d3/d3-funnel.js') }}"></script>
<script src="{{ asset('assets/js/sweetalert2.min.js')}}"></script>
<script src="{{ asset('assets/js/bootstrap-select.min.js')}}"></script>
<script src="{{ asset('assets/js/main.js?v='.$versionCode)}}"></script>
<script src="{{ asset('assets/js/jquery-ui.js')}}"></script>

<script src="{{ asset('assets/js/select2.min.js')}}"></script>
<script src="{{ asset('assets/js/custom.js?v='.$versionCode)}}"></script>
<script src="{{ asset('assets/js/template.js?v='.$versionCode)}}"></script>
<script src="{{ asset('site/components/ckeditor/ckeditor.js') }}"></script>
<!--Plugin JavaScript file-->
<script src="{{ asset('site/components/range-slider/rangeslider.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.easepick-calendor.js')}}"></script>
<script src="{{ asset('assets/js/week-selector.js')}}"></script>
<script src="{{ asset('assets/js/jquery.slimscroll.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

<script>
    $('#datePick').datepicker({
        multidate: true,
        format: 'dd-mm-yyyy'
    });
    $('.select2_search').select2({
        allowClear: true,
        multiple: true,
        maximumSelectionSize: 2,
        minimumInputLength: 2,
        placeholder: 'Search...',
        ajax: {
            delay: 250,
            url: "{!! route('admin.search') !!}",
            processResults: function (response) {
                response = JSON.parse(response);
                return {
                    results: response.message
                };
            }
        },
        templateResult: searchTemplateResult,
        templateSelection: searchTemplateSelection,
        language: {
            inputTooShort: function(args) {
                return '';
            }
        }
    });

    $(document).on('click', '.select2-search__field', function(){
        $('.select2_search').select2('open').select2('close');
    });

    function searchTemplateResult(response) {
        if (response.loading) {
            return response.text;
        }

        let $container = $(`<div class="select2-search">
            <div class="select2-search-title">${response.text}</div>
            <div class="select2-search-type">${response.type}</div>
        </div>`);
        return $container;
    }

    function searchTemplateSelection(response) {
        if(response.url != undefined) {
            window.location.href = response.url;
        }
        return response.text;
    }

    if($('.dt_picker_range').length > 0) {
        /* Date range picker code start */
        // Easepick Reference from https://www.cssscript.com/data-time-picker-easepick/
        @if(isset($inputs['from_date']))
            let start = moment("{{ $inputs['from_date'] }}", 'DD-MM-YYYY');
            let end = moment("{{ $inputs['to_date'] }}", 'DD-MM-YYYY');
        @else
            let start = moment();
            let end = moment();
        @endif

        showPicker(start,end,'.dt_picker_range');
    }

    if($('#start_end_time').length > 0) {
        /* Time range picker code start */
        @if(isset($inputs['from_time']))
            let startTime = moment().startOf('day').add({hours: parseInt("{{ $inputs['from_time'] }}"), minutes: 0});
            let endTime = moment().startOf('day').add({day:  1 ,hours: parseInt("{{ $inputs['to_time'] }}"), minutes: 0});
        @else
            var startTime = moment().format('DD-MM-YYYY HH:00');
            var endTime = moment().add(1,'day').format('DD-MM-YYYY HH:00');
        @endif

        function setTime(startTime, endTime) {
            $('#start_end_time').val(startTime.format('HH:00') + ' - ' + endTime.format('HH:00'));
            $('#from_time').val(startTime.format('HH:00'));
            $('#to_time').val(endTime.format('HH:00'));

            //let startEndTimePicker = $('#start_end_time').data('daterangepicker');
            //startEndTimePicker.setStartDate(moment().format('DD-MM-YYYY HH:00'));
            //startEndTimePicker.setEndDate(moment().add(1,'day').format('DD-MM-YYYY HH:00'));
        }

        $('#start_end_time').daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 60,
            timePickerSeconds: false,
            autoApply: true,
            startDate: startTime.format('DD-MM-YYYY HH:mm'),
            endDate: endTime.format('DD-MM-YYYY HH:mm'),
            locale: {
                format: 'DD-MM-YYYY HH:00',
            }
        }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
            $('.drp-buttons .drp-selected').hide();
        }).on('apply.daterangepicker', function(ev, picker) {
            $('#start_end_time').val(picker.startDate.format('HH:00') + ' - ' + picker.endDate.format('HH:00'));
            $('#from_time').val(picker.startDate.format('HH:00'));
            $('#to_time').val(picker.endDate.format('HH:00'));
        }).on('hide.daterangepicker', function(ev, picker) {
            $('#start_end_time').val(picker.startDate.format('HH:00') + ' - ' + picker.endDate.format('HH:00'));
            $('#from_time').val(picker.startDate.format('HH:00'));
            $('#to_time').val(picker.endDate.format('HH:00'));
        }).on('cancel.daterangepicker', function (ev, picker) {
            $('#start_end_time').val($('#from_time').val() + ' - ' + $('#to_time').val());
        });

        setTime(startTime, endTime);
        /* Time range picker code end */
    }

    $(document).ready(function(){
        if($('.order_dt_picker_range').length > 0) {

            var timeTrue = $('.order_dt_picker_range')[0].hasAttribute('data-time') ? 1 : 0;
            var applyFinancialYear = $('.order_dt_picker_range')[0].hasAttribute('data-financial') ? 1 : 0;
            const statisticsPage = $('.__marketing_analytics_page').length > 0 ? true : false;

            var start = moment().subtract(1, 'day').format('DD-MM-YYYY');
            var end = moment().format('DD-MM-YYYY');
            var minY =''; var maxY ='';
            if(applyFinancialYear == 1)
            {
                start = "{!! getStartEnd(true) !!}" ;
                end ="{!! getStartEnd(true) !!}" ;

                minY = "{!! dateFormat(getMinMaxDates()['start'],'d-m-Y') !!}";
                maxY = "{!! dateFormat(getMinMaxDates()['end'],'d-m-Y') !!}";
                if(timeTrue == 1){
                    start = "{!!  dateFormat(getStartEnd(),'d-m-Y H:i') !!}" ;
                    end ="{!! dateFormat(getStartEnd(),'d-m-Y H:i') !!}" ;

                    minY = "{!! dateFormat(getMinMaxDates()['start'],'d-m-Y H:i') !!}";
                    maxY = "{!! dateFormat(getMinMaxDates()['end'],'d-m-Y H:i') !!}";
                }
            }
            @if(isset($inputs['from_date']))
                start = moment("{{ dateFormat($inputs['from_date'], 'Y-m-d') }}").format('DD-MM-YYYY');
                end = moment("{{ dateFormat($inputs['to_date'], 'Y-m-d') }}").format('DD-MM-YYYY');
            @endif

            if(timeTrue == 1){
                @if(isset($inputs['from_date']))
                start = moment("{{ dateFormat($inputs['from_date'], 'Y-m-d H:i') ?? ''  }}").format('DD-MM-YYYY HH:mm');
                end = moment("{{ dateFormat($inputs['to_date'], 'Y-m-d H:i') ?? '' }}").format('DD-MM-YYYY HH:mm');
                @endif

                if(statisticsPage){
                    start = moment().startOf('month').format('DD-MM-YYYY HH:mm');
                    end = moment().format('DD-MM-YYYY HH:mm');
                }
            }

            showPicker(start,end,'.order_dt_picker_range',timeTrue,minY,maxY);

        }
    });

    function showPicker(start, end, pickerClass, timeTrue = 0, min = '', max = '') {
        // if time change format
        const format = timeTrue === 1 ? "DD-MM-YYYY HH:mm" : "DD-MM-YYYY";

        const statisticsPage = $('.__marketing_analytics_page').length > 0 ? true : false;


        // default options for ease calender
        const options = {
            element: pickerClass,
            format: format,
            css: [
                "{{ asset('assets/css/jquery.easepick.calendor.min.css')}}",
            ],
            zIndex: 10,
            plugins: ["AmpPlugin", "RangePlugin", "PresetPlugin"],
        };

        // if time true add TimePlugin
        if (timeTrue === 1) {
            options.plugins.push("TimePlugin");
            options.TimePlugin = {
                format: 'HH:mm',
            };
        }

        if(min != '' && max != ''){
            options.plugins.push("LockPlugin");
            options.LockPlugin = {
                minDate:  min,
                maxDate :max
            };
        }
        // create an instance of easepick
        const picker2 = new easepick.create(options);

        // on date select change the date and time value
        picker2.on('select', function (e) {
            const startDate = e.detail.start;
            const endDate = e.detail.end;
            const fromInput = $('#from_date').length > 0 ? '#from_date' : '#from';
            const toInput = $('#to_date').length > 0 ? '#to_date' : '#to';

            $(fromInput).val(startDate.format(format));
            $(toInput).val(endDate.format(format));

            if (timeTrue === 1) {
                picker2.setStartTime(startDate.format('HH:mm'));
                picker2.setEndTime(endDate.format('HH:mm'));
            }

            if(statisticsPage){
                getStatistics();
            }
        });

        // on change of time update the date and time
        picker2.on('input', function () {
            setTimeout(() => {
                const dt = $('.order_dt_picker_range').text().split(' - ');
                if (timeTrue === 1 && dt.length > 1) {
                    const targetFrom = $('#from_date').length > 0 ? '#from_date' : '#from';
                    const targetTo = $('#to_date').length > 0 ? '#to_date' : '#to';
                    $(targetFrom).val(dt[0]);
                    $(targetTo).val(dt[1]);
                }
            }, 500);
        });

        // default date
        picker2.setStartDate(start);
        picker2.setEndDate(end);

        // default time
        if (timeTrue === 1) {
            const startTime = moment(start, 'DD-MM-YYYY HH:mm');
            const endTime = moment(end, 'DD-MM-YYYY HH:mm');
            picker2.setStartTime(startTime.format('HH:mm'));
            picker2.setEndTime(endTime.format('HH:mm'));
        }
    }
</script>
@yield('script')

<!-- Color picker -->
<!-- https://www.jqueryscript.net/other/Color-Picker-Plugin-jQuery-MiniColors.html -->

<!-- Small event calendar -->
<!-- https://www.jqueryscript.net/time-clock/animated-event-calendar.html -->