@if($name === 'ajax-init')
    <script type="text/javascript">
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
    </script>
@elseif($name === 'select2-css')
    <!-- Select 2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@elseif($name === 'select2-js')
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
    <script type="text/javascript">
        const select2ConfigDefault = {
            theme: 'bootstrap4',
            width: 'inherit !important',
            disabled: ''
        };

        const select2ConfigReadOnly = {
            theme: 'bootstrap4',
            width: 'inherit !important',
            disabled: 'readonly'
        };

        $(function () {
            $('.select2bs4').select2(select2ConfigDefault);

            $(document).on('click', '.select2bs4-all', function (e) {
                let selector = $(this).data('select');
                if ($(this).is(':checked')) {
                    $(".select2bs4." + selector).find('option').prop("selected", true);
                    $(".select2bs4." + selector).trigger("change");
                } else {
                    $(".select2bs4." + selector).find('option').prop("selected", false);
                    $(".select2bs4." + selector).trigger("change");
                }
            });
        });
    </script>
@elseif($name === 'moment-js')
    <!-- Moment Js -->
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
@elseif($name === 'bootstrap-switch-css')
    <!-- Bootstrap Switch -->
    <link rel="stylesheet"
          href="{{ asset('assets/plugins/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css') }}">
@elseif($name === 'bootstrap-switch-js')
    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        $(function () {
            $(".availability-bootstrap-switch").bootstrapSwitch(
                {
                    onText: "Yes",
                    offText: "No",
                    onColor: "success",
                    offColor: "danger",
                    labelText: "",
                    //handleWidth: "100",
                }
            );
        });
    </script>
@elseif($name === 'datetimepicker-css')
    <!-- Date Time Picker -->
    <link rel="stylesheet"
          href="{{ asset('assets/plugins/Date-Time-Picker-Bootstrap-4/css/bootstrap-datetimepicker.min.css') }}">
@elseif($name === 'datetimepicker-js')
    <!-- Date Time Picker -->
    <script
        src="{{ asset('assets/plugins/Date-Time-Picker-Bootstrap-4/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript">
        $(function () {
            $('.datepicker').datetimepicker(
                {
                    format: 'YYYY-MM-DD',
                    icons: {
                        time: 'fas fa-clock',
                        date: 'fas fa-calendar',
                        up: 'fas fa-chevron-up',
                        down: 'fas fa-chevron-down',
                        previous: 'fas fa-chevron-left',
                        next: 'fas fa-chevron-right',
                        today: 'fas fa-crosshairs',
                        clear: 'fas fa-trash-o',
                        close: 'fas fa-times'
                    }
                }
            );
        });
    </script>
@elseif($name === 'daterangepicker-css')
    <!-- Date Range Picker -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
@elseif($name === 'daterangepicker-js')
    <!-- Date Range Picker -->
    <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
@elseif($name === 'quilleditor-css')
    <link href="{{ asset('assets/plugins/quill/quill.snow.css') }}" rel="stylesheet">
@elseif($name === 'quilleditor-js')
    @if($library)
    <script src="{{ asset('assets/plugins/quill/quill.js') }}"></script>
    <script src="{{ asset('assets/plugins/quill/kensnyder/image-drop.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/quill/kensnyder/image-resize.min.js') }}"></script>
    @endif
    <script>
        $(function () {
            var quill = new Quill('#quill-editor-{{$field_name}}', {
                theme: 'snow',
                modules: {
                    imageDrop: true,
                    imageResize: {
                        displaySize: true
                    },
                    toolbar: {
                        container: [
                            [{header: [1, 2, 3, 4, 5, 6, false]}],
                            [{font: []}],
                            [{size: ["small", false, "large", "huge"]}],
                            [{color: []}, {background: []}],
                            [
                                {align: ""},
                                {align: "center"},
                                {align: "right"},
                                {align: "justify"}
                            ],
                            //[{ header: 1 }, { header: 2 }],
                            ["bold", "italic", "underline", "strike"],

                            [{list: "ordered"}, {list: "bullet"}],

                            [{indent: "-1"}, {indent: "+1"}],
                            [{direction: "rtl"}],

                            //[{ script: "sub" }, { script: "super" }],

                            ["link", "image", "clean", "blockquote", "code-block"]
                        ],
                        handlers: {
                            // image: imageHandler
                        }
                    }
                },
                placeholder: '{{__('message.editor_default')}}',
                readOnly: false
            });

            quill.on('text-change', function (delta, oldDelta, source) {
                $(".quill-textarea-{{$field_name}}").html(quill.root.innerHTML);
            });
        });
    </script>

@elseif($name === 'datatables-css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    {{--    <link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css">--}}
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@elseif($name === 'datatables-js')
    <!-- DataTables -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <!-- Export -->
    <script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
    {{--    <script src="https://cdn.datatables.net/searchbuilder/1.0.1/js/dataTables.searchBuilder.min.js"></script>--}}
    <script type="text/javascript">
        const exportOptions = [];
        @foreach($datatable as $key => $elem)
        @if ($elem['exportable'] === true)
        exportOptions.push('{{$key}}');
        @endif
        @endforeach
        console.log(exportOptions);
        const defaultDTConfig = {
            processing: true,
            serverSide: true,
            autoWidth: false,
            responsive: true,
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                // {
                //     extend: 'searchBuilder',
                //     config: {
                //         depthLimit: 2
                //     }
                // },
                {
                    "extend": 'csv',
                    "text": '{{__('Csv')}}',
                    "className": 'btn {{ config('ws_theme.default.export_btn_class') }} mr-2',
                    exportOptions: {columns: exportOptions}
                },
                {
                    "extend": 'pdf',
                    "text": '{{__('Pdf')}}',
                    "className": 'btn {{ config('ws_theme.default.export_btn_class') }} mr-2',
                    exportOptions: {columns: exportOptions}
                },
                {
                    "extend": 'print',
                    "text": '{{__('Print')}}',
                    "className": 'btn {{ config('ws_theme.default.export_btn_class') }} mr-2',
                    exportOptions: {columns: exportOptions}
                },
            ],
            "lengthMenu": [25, 50, 100, 500, 1000, 2000, 5000, 10000, 50000, 100000],
            "aaSorting" : []
        };
    </script>
@elseif($name === 'google-map-address')
    @if(!is_null(\App\Helpers\Helper::getConfig('GOOGLE_MAP_API_KEY')) && \App\Helpers\Helper::getConfig('GOOGLE_MAP_API_KEY') !== "")
        <script type="text/javascript">
            $(function () {
                function initMap() {
                    const myLatLng = {
                        lat: {{ $latitude ?? \App\Helpers\Helper::getConfig('GOOGLE_MAP_DEFAULT_LAT') }},
                        lng: {{ $longitude ??  \App\Helpers\Helper::getConfig('GOOGLE_MAP_DEFAULT_LNG') }}
                    };

                    map = new google.maps.Map(document.getElementById("address_map"), {
                        center: myLatLng,
                        zoom: 16,
                    });

                    const input = document.getElementById("search_location");
                    const searchBox = new google.maps.places.SearchBox(input);
                    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                    // Bias the SearchBox results towards current map's viewport.
                    map.addListener("bounds_changed", () => {
                        searchBox.setBounds(map.getBounds());
                    });

                    searchBox.addListener("places_changed", () => {
                        const places = searchBox.getPlaces();
                        if (places.length == 0) {
                            return;
                        } else {
                            places.forEach((place) => {
                                console.log("place--", place);
                                map.setCenter(place.geometry.location);
                                fillAddress(place.address_components, place.geometry.location.lat(), place.geometry.location.lng());
                            });
                        }
                    });


                    map.addListener("click", getLatLng);

                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(
                            (position) => {
                                myLatLng.lat = position.coords.latitude;
                                myLatLng.lng = position.coords.longitude;
                                infoWindow.setPosition(myLatLng);
                                infoWindow.setContent("Location found.");
                                infoWindow.open(map);
                                map.setCenter(pos);
                            },
                            () => {
                                //handleLocationError(true, infoWindow, map.getCenter());
                            }
                        );
                    } else {
                        // Browser doesn't support Geolocation
                        //handleLocationError(false, infoWindow, map.getCenter());
                    }
                }

                function fillAddress(address, lat, lng) {
                    $('#address_1').val('');
                    $('#address_2').val('');
                    $('#city').val('');
                    $('#state').val('');
                    $('#postcode').val('');
                    $('#latitude').val('');
                    $('#longitude').val('');


                    let address_1 = [];
                    address.find(p => {
                        let address1Types = ['premise', 'street_number', 'route', 'landmark', 'neighborhood', 'political'];
                        if (address1Types.includes(p.types[0])) {
                            address_1.push(p.long_name)
                        } else if (p.types[0] == "administrative_area_level_1") {
                            $('#state').val(p.long_name);
                        } else if (p.types[0] == "administrative_area_level_1") {
                            $('#state').val(p.long_name);
                        } else if (p.types[0] == "administrative_area_level_2") {
                            $('#city').val(p.long_name);
                        }
                        // else if (p.types[0] == "country") {
                        //     //country2 = p.short_name;
                        //     $('#country_code').val(p.short_name);
                        //     $("#country_code").trigger("change");
                        // } else if (p.types[0] == "country") {
                        //     country = p.long_name;
                        // }
                        else if (p.types[0] === "postal_code") {
                            $('#pincode').val(p.long_name);
                        }
                    });
                    $('#address_1').val(address_1.join(', '));
                    $('#address_2').val('');
                    $('#latitude').val(lat);
                    $('#longitude').val(lng);
                    console.log(window.myLocationMarker);
                    if (typeof window.myLocationMarker !== "undefined") {
                        const myLatLng = {
                            lat: lat,
                            lng: lng
                        };
                        window.myLocationMarker.setPosition(myLatLng);
                    } else {
                        var myLocation = {
                            title: "My Location",
                            label: "O",
                            position: {
                                lat: lat,
                                lng: lng
                            },
                            info: "My Location",
                            //icon: icons.origin
                        };

                        window.myLocationMarker = addMarker(myLocation);
                    }
                }


                function getLatLng(event) {
                    gmgeocoder = new google.maps.Geocoder();
                    gmgeocoder.geocode({
                        'latLng': event.latLng
                    }, function (results, status) {
                        if (typeof results[0] !== "undefined") {
                            let address = results[0]['address_components'];
                            fillAddress(address, event.latLng.lat(), event.latLng.lng());
                        }
                    });
                }

                function addMarker(location) {
                    marker = new google.maps.Marker({
                        position: location.position,
                        title: location.title,
                        //icon: location.icon,
                        map: window.map,
                        animation: google.maps.Animation.DROP,
                        fillColor: 'yellow'
                    });
                    return marker;
                }

                initMap();
                @if($latitude ?? '' && $longitude)
                var myLocation = {
                    title: "My Location",
                    label: "O",
                    position: {
                        lat: {{$latitude ?? ''}},
                        lng: {{$longitude}},
                    },
                    info: "My Location",
                    //icon: icons.origin
                };

                window.myLocationMarker = addMarker(myLocation);
                @endif
            });
        </script>
        <script defer
                src="https://maps.googleapis.com/maps/api/js?libraries=places&language={{str_replace('_', '-', app()->getLocale())}}&key={{\App\Helpers\Helper::getConfig('GOOGLE_MAP_API_KEY')}}"
                type="text/javascript"></script>
    @endif
@elseif($name === 'image-upload')
    <script type="text/javascript">
        $(function () {
            $("#{{$field_name}}").change(function () {
                if (this.files && this.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let objPreview = $('.{{$field_name}}-preview-container');
                        let objLink = $('.{{$field_name}}-preview-link');
                        objLink.attr("href", e.target.result);
                        objPreview.attr("src", e.target.result);
                        objPreview.hide();
                        objPreview.fadeIn(650);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
    </script>
@elseif($name === 'bstreeview-css')
    <!-- Ekko Lightbox -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bstreeview/bstreeview.css') }}">
@elseif($name === 'bstreeview-js')
    <!-- Ekko Lightbox -->
    <script src="{{ asset('assets/plugins/bstreeview/bstreeview.js') }}"></script>
@endif