@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 class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Total This Month</h3>
                    </div>
                    <div id="earnedThisMonth" class="panel-body">
                        {{ money($currentMonthEarnings) }}
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Total This Year</h3>
                    </div>
                    <div id="earnedThisYear" class="panel-body">
                        {{ money($yearToDate) }}
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Total Earned</h3>
                    </div>
                    <div class="panel-body" id="totalEarned">
                        {{ money($lifetimeSum) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <table id="editorsMonthlyEarnings" class="table table-striped tableStyle dataTables dt-responsive"
                    >
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th>Total Earned</th>
                            <th>Start Date</th>
                        </tr>
                    </thead>

                </table>
            </div>
            <div class="col-md-4" align="left">
                <form class="" role="form" action="{{ route('admin.provider.earnings') }}" name="filterEarnings"
                    id="filterEarnings[]" method="POST">
                    {{ csrf_field() }}

                    <label>
                        From Date:
                    </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>
                        To Date:
                    </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">Filter</button>
                    </p>

                </form>

            </div>

        </div>

    </div>
@endsection

@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 type="text/javascript">

        $(function() {
            $('#datepicker_from').datepicker({
                format: "yyyy-mm-dd"
            });
        });

        $(function() {
            $('#datepicker_to').datepicker({
                format: "yyyy-mm-dd"
            });
        });
        
    </script>
    <script>
        $(function() {
            var oTable = $('.dataTables').DataTable({
                processing: true,
                serverSide: true,
                "aaSorting": [
                    [2, "desc"]
                ],
                ajax: {
                    url: '{!! route('ajax.editorMonthlyEarnings') !!}',
                    type: 'POST',
                    data: function(d) {

                        d.lifetime =                     }
                },
                columns: [
                    //Set the sort to use the hidden column that houses the start_date info
                    {
                        data: 'date',
                        name: 'date',
                        "orderData": 2,
                        "targets": 0
                    },
                    //{ data: 'year', name: 'year', "orderData": [ 1, 0 ],    "targets": 1 },
                    {
                        data: 'sum',
                        name: 'sum'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date',
                        visible: false
                    }

                ]
            });




            $('form[name="search"]').on('submit', function(e) {
                oTable.draw();
                e.preventDefault();
            });


        });
    </script>
@endpush