Datetimepicker not working

Am trying to use datetimepicker and the reference is here: https://www.malot.fr/bootstrap-datetimepicker/

So, I downloaded the files and compiled them in my webpack which looks like this

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

mix.styles([
    'resources/assets/css/libs/style.css',
    'resources/assets/css/libs/bootstrap.min.css',
    'resources/assets/css/libs/bootstrap-datetimepicker.min.css',
    'resources/assets/css/libs/pgwslider.min.css',
    'resources/assets/css/libs/slider.css',
    'resources/assets/css/libs/fonts.css',

], 'public/css/libs.css');


mix.scripts([
    'resources/assets/js/libs/jquery-3.3.1.min.js',
    'resources/assets/js/libs/bootstrap.js',
    'resources/assets/js/libs/bootstrap-datetimepicker.min.js',
    'resources/assets/js/libs/pgwslider.min.js',
    'resources/assets/js/libs/scripts.js',
    'resources/assets/js/libs/slider.js'

], 'public/js/libs.js');

Here is my header:

<script src="{{ asset('js/libs.js') }}" defer></script>

<script type="text/javascript">
    $(function(){
        $('#datetimepicker1').datetimepicker();
    })
</script>

In my view I have the input to save the date

<input id="datetimepicker" placeholder="Date and Time" type="text" name="date_and_time1" class="form-control">

When I click on the input field, nothing happens. Anything I could have possibly done wrong?