@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>
        <div class="row margin-top-10">
            <div clas="col-md-12" id="error">
            </div>
            <div class="col-md-10">
                <table class="table table-striped dt-responsive table-hover" >
                    <thead>
                        <tr>
                            <th>
                                Username
                            </th>
                            <th>
                                Earnings
                            </th>
                            <th>
                                Number of Words Edited
                            </th>
                            <th>
                                Number of jobs
                            </th>
                            <th>
                                Approval Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td colspan="9">
                                    No results to display.
                                </td>
                            </tr>
                                            </tbody>
                </table>
            </div>
            <div class="col-md-2">
                                <form class="date-range-filter" name="editorsReport" id="editorsReport" action="{{ URL::route('admin.editorsReport.filterEditorsReport') }}" method="POST">
                    {{ csrf_field() }}
                    <label>
                        <strong>
                            From Date:
                        </strong>
                    </label>
                    <div class="input-group date" id="datepicker_from">
                        <input type="text" class="form-control" id="date_from" name="date_from" />
                        <span class="input-group-append">
                            {{-- <span class="input-group-text bg-light d-block">
                                    <i class="fa fa-calendar"></i>
                                </span> --}}
                        </span>
                    </div>
                    <label>
                        <strong>
                            To Date:
                        </strong>
                    </label>
                    <div class="input-group date" id="datepicker_to">
                        <input type="text" class="form-control" id="date_to" name="date_to" />
                        <span class="input-group-append">
                            {{-- <span class="input-group-text bg-white d-block">
                                    <i class="fa fa-calendar"></i>
                                </span> --}}
                        </span>
                    </div>
                    <p>
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px" name="search">Search</button>
                    </p>
                    <p>
                        <button class="btn knowmad_btn_blue knowmad_btn" style="width:95px" type="submit" name="export">Export</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>


@stop
@push('footer_js')

<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() {
        $('#datepicker_from').datepicker({
            format: "yyyy-mm-dd"
        });
    });

    $(function() {
        $('#datepicker_to').datepicker({
            format: "yyyy-mm-dd"
        });
    });
</script>
@endpush