@php
    $versionCode = getVersionCode();
@endphp
<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/calendar/jquery-3.2.1.slim.min.js')}}"></script>-->
{{-- <script src="{{ asset('assets/calendar/tui-code-snippet.min.js')}}"></script>
<script src="{{ asset('assets/calendar/tui-time-picker.min.js')}}"></script>
<script src="{{ asset('assets/calendar/tui-date-picker.min.js')}}"></script> --}}
<script src="{{ asset('assets/calendar/moment.min.js')}}"></script>
<script src="{{ asset('assets/calendar/chance.min.js')}}"></script>
<script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>
{{-- <script src="{{ asset('assets/calendar/tui-calendar.js')}}"></script> --}}
{{-- <script src="{{ asset('assets/calendar/app.js')}}"></script> --}}
{{-- <script src="{{ asset('assets/js/justselect.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/moment.min.js')}}"></script>
<script src="{{ asset('assets/js/daterangepicker.min.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> --}}
<script src="{{ asset('site/components/font-awesome/js/all.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.vmap.min.js')}}"></script>
<script src="{{ asset('assets/js/jquery.vmap.world.js')}}"></script>
<script src="{{ asset('assets/js/jquery.vmap.sampledata.js')}}"></script>
<script src="{{ asset('assets/js/jquery.minicolors.js')}}"></script>
{{-- <script src="{{ asset('assets/js/jquery.simple-calendar.min.js')}}"></script> --}}
{{-- <script src="https://unpkg.com/gauge-chart@latest/dist/bundle.js"></script> --}}
<script src="{{ asset('assets/js/audio.min.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> --}}
<script src="{{ asset('site/components/d3/d3.min.js') }}"></script>
{{-- <script src="https://www.cssscript.com/demo/creating-funnel-charts-using-svg-and-d3-js-d3-funnel/src/d3-funnel/d3-funnel.js?1"></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/template.js?v='.$versionCode)}}"></script>
<script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{ asset('assets/js/custom.js?v='.$versionCode)}}"></script>
<script src="{{ asset('assets/js/jquery.easepick-calendor.js')}}"></script>
<script>
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
        let startTime = moment().format('DD-MM-YYYY HH:00');
        let 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 start = moment().subtract(1, 'day').format('DD-MM-YYYY');
        var end = moment().format('DD-MM-YYYY');

        @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
        }
        showPicker(start,end,'.order_dt_picker_range',timeTrue);
    }
});

function showPicker(start, end, pickerClass, timeTrue = 0) {

    // if time change format
    const format = timeTrue === 1 ? "DD-MM-YYYY HH:mm" : "DD-MM-YYYY";

    // 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',
        };
    }

    // 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'));
        }
    });

    // 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'));
    }
}

$('.select2_search').select2({
    allowClear: true,
    multiple: true,
    maximumSelectionSize: 2,
    minimumInputLength: 2,
    placeholder: 'Search...',
    ajax: {
        delay: 250,
        url: "{!! route('seller.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;
}

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