@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="col-md-12">
            <div class="row margin-top-10">
                <div class="col-md-10">
                    {!! $dataTable->table([
                        'id' => 'earningTable',
                        'class' => 'table table-striped tableStyle no-bottom dt-responsive',
                    ]) !!}
                </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>
                        <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>
                    </form>
                </div>
            </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 src="/js/reports.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#datepicker_from').datepicker();
        });

        $(function() {
            $('#datepicker_to').datepicker();
        });
    </script>
    <script>
        $('#filterEarnings').submit(function(e) {
            e.preventDefault();

            var from_year = Number($('#from_date').val().substring('6', '10'));
            var to_year = Number($('#to_date').val().substring('6', '10'));


            if (from_year === to_year) {
                window.LaravelDataTables["earningTable"].draw();
            } else {
                $('<div class="text-danger push-bottom">Date range must be within same year</div>').insertBefore(
                    '#filterEarnings');
            }


        });

        $('#earningTable')
            .on('preXhr.dt', function(e, settings, data) {
                console.log('data', data);


                data.from_date = $('#from_date').val();
                data.to_date = $('#to_date').val();


            });
    </script>


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