@include('cabMeAdmin.datatable.datatable_script')
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                Search Riders...
                <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="driver_id" name="driver_id" class="form-control select2Class" required="1">
                                <option value="">Select Driver</option>
                                @foreach($driver_list as $key => $driver_list)
                                    <option value="{{ $key }}">{{ $driver_list }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <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">
                                <thead>
                                <tr>
                                    <th class="text-center">ID</th>
                                    <th class="text-center">Driver Name</th>
                                    <th class="text-center">Total Trip Requests <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title="Total trip request (i.e 30 second timout screen) received from riders to drivers"></i></th>
                                    <th class="text-center">Requests Accepted Trip Request <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Total trip request accepted by drivers'></i></th>
                                    <th class="text-center">Requests Decline <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Total trip request declined by drivers'></i></th>
                                    <th class="text-center">Requests Timeout <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Total trip request driver has missed to attend. Neither Accepted not Declined.'></i></th>
                                    <th class="text-center">Missed Attempts <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Total trip request driver has tried to accept but due to competitive algorithm, another driver has accepted it.'></i></th>
                                    <th class="text-center">In Process Requests <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Requests sent from rider but no drivers have accepted it yet. Values in this column will remain for some seconds until any driver accept it.'></i></th>
                                    <th class="text-center">Acceptance Percentage <i class="fa fa-question-circle" data-placement="top" data-toggle="tooltip" data-original-title='Ratio of Total Requests Accepted + Total Missed Attempts out of Total Requests sent.'></i></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());

        loadDataTable();

        $('.select2Class').select2();


    } );

    function resetData()
    {
        $('#from').datepicker("setDate",new Date());
        $('#to').datepicker("setDate",new Date());
        var status = $('#driver_id').val('').trigger('change');
        loadDataTable();
    }

    function loadDataTable()
    {
        var base_url = '