{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

   <!--begin::Card-->           @if(session('success'))
                                    <div class="alert alert-success" role="alert">                                
                                           {{ session('success') }}  
                                       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                           <span aria-hidden="true">&times;</span>
                                       </button>
                                   </div>
                               @endif
                                <div class="card card-custom gutter-b">
                                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                                        <div class="card-title">
                                            <h3 class="card-label">Transit Report
                                            <!-- <span class="d-block text-muted pt-2 font-size-sm">row selection and group actions</span> --></h3>
                                        </div>
                                        <div class="card-toolbar">
                                        
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <!--begin: Search Form-->
                                        <!--begin::Search Form-->
                                        <div class="mb-7">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-xl-11">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-3 my-2 my-md-0">
                                                            <div class="input-icon">
                                                                <input type="text" class="form-control" placeholder="Search..." id="generalSearch" />
                                                                <span>
                                                                    <i class="flaticon2-search-1 text-muted"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 my-2 my-md-0">
                                                            <div class="d-flex align-items-center">
                                                                <label class="mr-3 mb-0 d-none d-md-block">Status:</label>
                                                                <select class="form-control" id="report_search_status">
                                                                    <option value="">All</option>
                                                                    <option value="new">New</option>
                                                                    <option value="accept">Accept</option>
                                                                    <option value="pickup">Pickup</option>
                                                                    <option value="pickup_issue">Pickup_issue</option>
                                                                    <option value="cancel">Cancel</option>
                                                                    <option value="completed">Completed</option>
                                                                    <option value="noshow">Noshow</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 my-2 my-md-0">
                                                            <div class="input-icon">
                                                                <div class="d-flex align-items-center">
                                                                <div class="input-group date">
                                                                    <input type="text" class="form-control" value="" name="from_date" id="from_date" placeholder="From Date">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text">
                                                                        <i class="la la-calendar"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 my-2 my-md-0">
                                                            <div class="input-icon">
                                                                <div class="d-flex align-items-center">
                                                                <div class="input-group date">
                                                                    <input type="text" class="form-control" value="" name="to_date" id="to_date" placeholder="To Date">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text">
                                                                        <i class="la la-calendar"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Search Form-->
                                        <!--end: Search Form-->
                                        <!--begin: Selected Rows Group Action Form-->
                                        <div class="mt-10 mb-5 collapse" id="report_group_action_form">
                                            <div class="d-flex align-items-center">
                                                <!-- <div class="font-weight-bold text-danger mr-3">Selected
                                                <span id="kt_datatable_selected_records">0</span>records:</div> -->
                                                <div class="dropdown mr-2">
                                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">Update status</button>
                                                    <div class="dropdown-menu dropdown-menu-sm">
                                                        <ul class="nav nav-hover flex-column">
                                                            <li class="nav-item">
                                                                <a href="javaScript:void(0);" class="nav-link">
                                                                    <span class="nav-text">Active</span>
                                                                </a>
                                                            </li>
                                                            <li class="nav-item">
                                                                <a href="javaScript:void(0);" class="nav-link">
                                                                    <span class="nav-text">InActive</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <button class="btn btn-sm btn-danger mr-2" type="button" id="report_delete_all">Delete All</button>
                                            </div>
                                             @csrf
                                        </div>
                                        <!--end: Selected Rows Group Action Form-->
                                        <!--begin: Datatable-->
                                        <div class="datatable datatable-bordered datatable-head-custom" id="report_datatable"></div>
                                        <!--end: Datatable-->
                                    </div>
                                </div>
                                <!--end::Card-->
                                <!--begin::Modal-->
                                <div class="modal fade" id="report_fetch_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel1">Selected Records</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <i aria-hidden="true" class="ki ki-close"></i>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="scroll" data-scroll="true" data-height="200">
                                                    <ul id="kt_datatable_fetch_display"></ul>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Modal-->
                                @include('report.mdlreport_details')

@endsection

{{-- Styles Section --}}
@section('styles')

@endsection

{{-- Scripts Section --}}
@section('scripts')

<script src="{{ asset('/js/report/report.js') }}" type="text/javascript"></script>
@endsection