@include('cabMeAdmin.datatable.datatable_script')

<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                Search Trips Detail...
                <br><br>
                <div class="filterOption">
                    <h4>
                        <a class="filterColumn" id="today">Today</a> &nbsp;|
                        <a class="filterColumn" id="yesterday">Yesterday</a> &nbsp;|
                        <a class="filterColumn" id="c_week">Current Week</a> &nbsp;|
                        <a class="filterColumn" id="p_week">Previous Week</a> &nbsp;|
                        <a class="filterColumn" id="c_month">Current Month</a> &nbsp;|
                        <a class="filterColumn" id="p_month">Previous Month</a> &nbsp;|
                        <a class="filterColumn" id="c_year">Current Year</a> &nbsp;|
                        <a class="filterColumn" id="p_year">Previous Year</a> &nbsp;|
                    </h4>
                    <br>
                    <div class="form-group">
                        <div class="col-sm-3">
                            <input style="" type="text" id="from" name="fromDate" value="" class="form-control year" placeholder="From Date" required="1">
                        </div>
                        <div class="col-sm-3">
                            <input style="" type="text" id="to" name="fromDate" value="" class="form-control year" placeholder="From Date" required="1">
                        </div>
                        {{--                        <div class="col-sm-3">--}}
                        {{--                            <select id="status" name="status" class="form-control" required="1">--}}
                        {{--                                <option value="all">All Status</option>--}}
                        {{--                                <option value="ongoing">On Going Ride</option>--}}
                        {{--                                <option value="complete">Completed</option>--}}
                        {{--                                <option value="cancel">Cancelled</option>--}}
                        {{--                            </select>--}}
                        {{--                        </div>--}}

                    </div>

                </div>
            </div>
            <br>
            <div class="form-group text-center">
                <div class="btn-group pull-center">
                    <button type="button" class="btn btn-primary" onclick="loadDataTable()">Search</button>
                </div>&nbsp;&nbsp;
                <div class="btn-group pull-center">
                    <button type="button" class="btn btn-warning" onclick="resetData()">Reset</button>
                </div>
            </div>
            <br>

            <!-- /.box-header -->
            <div class="box-body">

                <div class="fields-group">

                    <div class="form-group  ">
                        <div class="col-lg-12">
                            <table class="table table-bordered table-striped dataTable" id="table" style="overflow-scrolling: auto">
                                <thead>
                                <tr>
                                    {{--                                    <th class="text-center">Id</th>--}}
                                    <th class="text-center">Booked Number</th>
                                    <th class="text-center">Trip Date</th>
                                    <th class="text-center">Driver</th>
                                    <th class="text-center">Rider</th>
                                    <th class="text-center">Fare</th>
                                    <th class="text-center">Plateform Fees</th>
                                    <th class="text-center">Total Tax Fees</th>
                                    <th class="text-center">Tip</th>
                                    <th class="text-center">Booking<br>Fees</th>
                                    <th class="text-center">Discount</th>
                                    <th class="text-center">Driver Pay Amount</th>
                                    <th class="text-center">Payment Mode</th>
                                    <th class="text-center">Ride Status</th>
                                    <th class="text-center">Driver Payment Status</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>
            <div class="box-footer">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
            </div>
        </div>
    </div>
</div>
<script>

    $(document).ready(function() {

        $('#from').datepicker({
            format: "yyyy-mm-dd",
            autoclose: true
        }).on("changeDate", function (e) {
            $('#to').datepicker('setStartDate', e.date).datepicker("setDate",e.date);
        }).datepicker("setDate",new Date());

        $('#to').datepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            // minDate: $('#from').datepicker("getDate")
        }).on("changeDate", function (e) {
            if($('#to').val() < $('#from').val()){
                toastr.error("From date should be lesser than To date.");
                return false;
            }
        }).datepicker("setDate",new Date());

        $('#driver_id').select2();
        $('#rider_id').select2();
        loadDataTable();


    } );

    function resetData()
    {
        $('#from').datepicker("setDate",new Date());
        $('#to').datepicker("setDate",new Date());
        var status = $('#status').val('all');
        var booking_code = $('#ride_number').val('');

        loadDataTable();
    }

    function loadDataTable()
    {
        var base_url = '