{{-- resources/views/admin/partials/date-filter.blade.php --}}

@section('css')
@parent
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
      integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
/>
@endsection

<div class="form-group col-md-3">
    <span>{!! Form::label('start_at', __('reports.filters.start_date')) !!}</span>
    <input
        type="text"
        name="start_at"
        class="form-control datetimepicker-input"
        id="start_at"
        data-toggle="datetimepicker"
        data-target="#start_at"
        value="{{ request('start_at') }}"
    />
</div>
<div class="form-group col-md-3">
    <span>{!! Form::label('end_at', __('reports.filters.end_date')) !!}</span>
    <input
        type="text"
        name="end_at"
        class="form-control datetimepicker-input"
        id="end_at"
        data-toggle="datetimepicker"
        data-target="#end_at"
        value="{{ request('end_at') }}"
    />
</div>

@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
  integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script>
$(function () {
    $("#start_at").datetimepicker({
        viewMode: 'days',
        format: 'YYYY-MM-DD',
        useCurrent: false,
        widgetPositioning: { vertical: 'bottom' },
        icons: {
            time: 'fa fa-clock', date: 'fa fa-calendar',
            up: 'fa fa-chevron-up', down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right',
        },
        @if(request('start_at'))
        defaultDate: "{{ request('start_at') }}",
        @endif
        maxDate: moment().add(1, 'seconds'),
    });

    $("#end_at").datetimepicker({
        viewMode: 'days',
        format: 'YYYY-MM-DD',
        useCurrent: false,
        widgetPositioning: { vertical: 'bottom' },
        icons: {
            time: 'fa fa-clock', date: 'fa fa-calendar',
            up: 'fa fa-chevron-up', down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right',
        },
        @if(request('end_at'))
        defaultDate: "{{ request('end_at') }}",
        @else
        maxDate: moment().add(1, 'days'),
        @endif
    });

    $("#start_at").on("change.datetimepicker", function (e) {
        $('#end_at').datetimepicker('minDate', e.date);
    });
    $("#end_at").on("change.datetimepicker", function (e) {
        $('#start_at').datetimepicker('maxDate', e.date);
    });
});
</script>
@endsection