@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"
                         id="monthlyEarnings">
                        <thead>
                            <tr>
                                <th>
                                    Sender Name
                                </th>
                                <th>
                                    File Name
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Submitted Date
                                </th>
                                <th>
                                    Due Date
                                </th>
                                <th>
                                    Finished Date
                                    <!-- Comes from the actual end date column - documents table -->
                                </th>
                                <th>
                                    Earnings
                                    <!-- Will be earnings/2 for both admin and editors -->
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                                                    </tbody>
                    </table>
                </div>
                <div class="col-md-2 push-top">
                                        <form class="noytdate-range-filter" name="monthlyEarningsReportForm" id="monthlyEarningsReportForm"
                        action="{{ URL::route('admin.monthlyEarningsReport.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://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/reports.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#datepicker_from').datepicker({
                format: "yyyy-mm-dd"
            });
        });

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