@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<div class="container">
    <div class="col-md-12">
        <div class="row margin-top-10">
            <div class="col-md-10">
                {!! $dataTable->table([
                'id' => 'earningTable',
                'class' => 'table table-striped dt-responsive table-hover',
                ]) !!}
            </div>

            <div class="col-md-2 push-top">
                <form class="" role="form" name="filterEarnings" id="filterEarnings" method="POST">
                    {{ csrf_field() }}
                    <label>
                        <strong>
                            From Date:
                        </strong>
                    </label>
                    <p>
                        <input type="text" class="month-date-picker" id="monthPicker" class="form-control">
                    </p>
                    <p>
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px" name="search">Search</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_js')

<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#monthPicker').datepicker({
            format: "mm-yyyy",
            startView: "months",
            minViewMode: "months"
        });
    });
</script>

<script>
    $('#filterEarnings').submit(function(e) {
        e.preventDefault();
        window.LaravelDataTables["earningTable"].draw();
    });

    $('#earningTable')
        .on('preXhr.dt', function(e, settings, data) {
            data.month = $('.month-date-picker').val();
        });
</script>


<script src="/js/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
@endpush