@include('cabMeAdmin.datatable.datatable_script')
<style>
    .payDriver
    {
        cursor: pointer;
    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                Search Refund 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="To Date" required="1">
                        </div>
                        <div class="col-sm-3">
                            <select id="rider_id" name="rider_id" class="form-control select2Class" required="1" >
                                <option value="">Select Rider</option>
                                @foreach($user_list as $key => $user_list)
                                    <option value="{{ $key }}">{{ $user_list }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <input type="text" id="ride_number" name="ride_number" value="" class="form-control" placeholder="Trip Number" required="1">
                        </div>
                    </div>
                    <br>
                </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; width: 100%;" >
                                <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">Refunded Amount</th>
                                    <th class="text-center">Fare After Refund</th>
                                    <th class="text-center">Ride Status</th>
                                    <th class="text-center">Payment Status</th>
                                    <th class="text-center">Refund Action</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) {
            // e.date.setDate(e.date.getDate() + 1);
            $('#to').datepicker('setDate', e.date);
            // $('#to').datepicker('option', 'minDate', e.date);
            $('#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 = '