@include('cabMeAdmin.datatable.datatable_script')

<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                Search Cancelled Trips...
                <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 class="col-sm-3">
                            <input type="text" id="ride_number" name="ride_number" value="" class="form-control" placeholder="Trip Number" required="1">
                        </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>
            <br>

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

                <div class="fields-group dataTables_wrapper dt-bootstrap4">

                    <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">Trip Type</th>
                                        <th class="text-center">Booked Number</th>
                                        <th class="text-center">Trip Date</th>
                                        <th class="text-center">Cancel By</th>
                                        <th class="text-center">Driver Name</th>
                                        <th class="text-center">Origin Place</th>
                                        <th class="text-center">Destination Place</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();

        loadDataTable();

    } );

    function resetData()
    {
        $('#from').datepicker("setDate",new Date());
        $('#to').datepicker("setDate",new Date());

        loadDataTable();
    }

    function loadDataTable()
    {
        var base_url = '