@include('cabMeAdmin.datatable.datatable_script')

<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                Search 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-4">
                            <input style="" type="text" id="from" name="fromDate" value="" class="form-control year" placeholder="From Date" required="1">
                        </div>
                        <div class="col-sm-4">
                            <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="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 class="col-sm-4">
                            <input type="text" id="ride_number" name="ride_number" value="" class="form-control" placeholder="Trip Number" required="1">
                        </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>
            <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 no-footer" id="table">
                                <thead>
                                <tr>
                                    <th class="text-center">Id</th>
                                    <th class="text-center">User</th>
                                    <th class="text-center">Booked Number</th>
{{--                                    <th class="text-center">Address</th>--}}
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Source<br> Location</th>
                                    <th class="text-center">Destination<br> Location</th>
                                    <th class="text-center">Driver</th>
                                    <th class="text-center">Total Fare</th>
                                    <th class="text-center" width="10%">Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{--                                @foreach($rideDetail as $rideDetail)--}}
                                {{--                                    <tr>--}}
                                {{--                                        <td>{{ $rideDetail->id }}</td>--}}
                                {{--                                        <td>{{ $rideDetail->booking_code }}</td>--}}
                                {{--                                        <td>{{ $rideDetail->origin_place }}</td>--}}
                                {{--                                    </tr>--}}
                                {{--                                @endforeach--}}
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <div class="modal fade" id="editTime"
                     tabindex="-1" role="dialog"
                     aria-labelledby="refundModelLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Edit Time</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <label>Select Date</label>
                                <input type="text" style="display: block;" id="date_hidden" placeholder="select time" class="form-control" name="date" value="">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" id="saveTime">Save changes</button>
                            </div>
                        </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")
        }).datepicker("setDate",new Date());


        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 = '