@extends('layouts.app')
@section('content')
    <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 class="col-md-10 push-top table-responsive">
                    <table
                        class="table table-striped tableStyle no-bottom  dt-responsive"
                        >
                        <thead>
                            <tr>
                                <th>
                                    Month
                                </th>
                                <th>
                                    Username
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Earnings
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                                                        <tr>
                                <td colspan="9">
                                    No results to display.
                                </td>
                            </tr>
                                                    </tbody>
                    </table>
                </div>
                <div class="col-md-2 push-top">
                                        <form class="date-range-filter" name="earningsReport" id="earningsReport"
                        action="{{ URL::route('admin.earningsReport.filterEarnings') }}" method="POST">
                        {{ csrf_field() }}
                        <label>
                            <strong>
                                From Date:
                            </strong>
                        </label>
                        <div class="input-group date" id="datepicker_from">
                            <input type="text" value=07/01/2025 id="from_date" name="from_date"
                                class="form-control">
                            <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" value=07/31/2025 id="to_date" name="to_date"
                                class="form-control">
                            <span class="input-group-append">
                                {{-- <span class="input-group-text bg-light 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://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#datepicker_from').datepicker();
        });

        $(function() {
            $('#datepicker_to').datepicker();
        });
    </script>
@endpush