<x-owner-layout>
    @section('page_css')
        <link rel="stylesheet" type="text/css"
            href="{{ asset('app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
        <link rel="stylesheet" type="text/css"
            href="{{ asset('app-assets/vendors/css/tables/datatable/extensions/dataTables.checkboxes.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/pages/data-list-view.css') }}">
        <link href="{{ asset('app-assets/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
        <style>
            .datepicker {
                z-index: 1000 !important;
            }
        </style>

        <div class="app-content content">
            <div class="content-overlay"></div>
            <div class="header-navbar-shadow"></div>
            <div class="content-wrapper">
                <div class="content-header row">
                    <div class="content-header-left col-md-8 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h2 class="content-header-title float-left mb-0">Pre Booking Services</h2>
                                <div class="breadcrumb-wrapper">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="{{ $home_url }}">Home</a></li>
                                        <li class="breadcrumb-item active">Pre Booking Services</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-4 col-12">
                        <div class="form-group breadcrum-right">
                            <div class="buttons-section">
                                @include('owner.prebooking.partials._action_buttons')
                            </div>

                        </div>
                    </div>

                </div>
                <div class="content-body">
                    <section id="data-list-view" class="data-list-view-header">
                        @if (Session::has('msg'))
                        <div class="alert {{ Session::get('msg_class') }}" role="alert">
                            <p class="mb-0">
                                {{ Session::get('msg') }}
                            </p>
                        </div>
                        @endif
                        <!-- filters start -->
                        <div class="card">
                        <div class="card-header">
                            <!-- <h4 class="card-title">Car Registration No.</h4> -->
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="feather icon-chevron-down"></i></a></li>
                                    <!-- <li><a data-action=""><i class="feather icon-rotate-cw users-data-filter"></i></a> -->
                                    </li>
                                    <li><a data-action="close"><i class="feather icon-x"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="users-list-filter">
                                    <form method="GET" action="{{ route('owner.prebook.list') }}">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group row">
                                                <!-- <div class="col-md-5">
                                                    <span>Car Registration No.</span>
                                                </div> -->
                                                <div class="col-md-12">
                                                    <input type="text" class="form-control" id="car_registration_no" name="car_registration_no" placeholder="Car Registration No." value="@if(request()->get('car_registration_no')) {{request()->get('car_registration_no')}} @endif">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group row">
                                                <!-- <div class="col-md-5">
                                                    <span>Car Registration No.</span>
                                                </div> -->
                                                <div class="col-md-12">
                                                    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
                                                        <input type="text" id="start_date" class="form-control rounded" name="start_date" placeholder="Start Date" value="@if(request()->get('start_date')) {{ date('Y/m/d', strtotime(request()->get('start_date'))) }} @endif"  autocomplete="off">
                                                        <div class="input-group-addon">
                                                            <span class="glyphicon glyphicon-th"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group row">
                                                <!-- <div class="col-md-5">
                                                    <span>Car Registration No.</span>
                                                </div> -->
                                                <div class="col-md-12">
                                                    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
                                                        <input type="text" id="end_date" class="form-control rounded" name="end_date" placeholder="End Date" value="@if(request()->get('end_date')) {{ date('Y/m/d', strtotime(request()->get('end_date'))) }} @endif"  autocomplete="off">
                                                        <div class="input-group-addon">
                                                            <span class="glyphicon glyphicon-th"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-2 col-6 text-center">
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">Search</button>
                                        </div>
                                        <div class="col-md-2 col-6 text-center">
                                            <a class="btn btn-outline-warning waves-effect waves-light" href="{{ route('owner.prebook.list') }}">Clear</a>
                                        </div>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                        <!-- filters end -->

                        <!-- DataTable starts -->
                        <div class="table-responsive">
                            <a id="delete_wash" class="btn btn-danger ag-grid-export-btn waves-effect waves-light delete_wash" style="color: #FFFFFF">Delete</a>
                            <?php $i = 1; ?>
                            @if (isset($records) && !empty($records) && count($records))
                                <table class="table" style="white-space: nowrap;">
                                    <thead>
                                        <tr>
                                            <th>Action</th>
                                            <th>Sl No.</th>
                                            <th>Logged in User</th>
                                            <th>Client Name</th>
                                            <th>Client Phone</th>
                                            <th>Address</th>
                                            <th>Car Reg. No.</th>
                                            <th>Car Make</th>
                                            <th>Car Model</th>
                                            <th>Vehicle Color</th>
                                            <th>Body Type</th>
                                            <th>Car Wash Type</th>
                                            <th>Amount</th>
                                            <th>Discount</th>
                                            <th>Free Wash</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($records as $index => $singleData)
                                            <tr style="background-color:#ffffff;">
                                                <td>
                                                    @if($singleData['status'] == 6)
                                                        @if(Auth::user()->is_admin == 1)
                                                            <a title="Edit Prebooking" href="{{ route('owner.prebook.edit', array('id' => $singleData['id'])) }}"><i class="feather icon-edit"></i></a>
                                                        @endif
                                                    @endif
                                                    <a href="{{ route('owner.prebook.print', array('id' => $singleData['id'])) }}" target="_blank"><i class="feather icon-printer"></i></a>
                                                </td>
                                                <td>
                                                    <!-- {{$index + $records->firstItem()}} -->
                                                    <div class="vs-checkbox-con vs-checkbox-primary">
                                                        <input type="checkbox" class="delete_ids" value="{{$singleData['id']}}" name="delete_ids[]">
                                                        <span class="vs-checkbox">
                                                            <span class="vs-checkbox--check">
                                                                <i class="vs-icon feather icon-check"></i>
                                                            </span>
                                                        </span>
                                                        <span class="">{{$index + $records->firstItem()}}</span>
                                                    </div>
                                                </td>
                                                <td>{{Auth::user()->name}}<br> 
                                                    {{Auth::user()->email}}</td>
                                                <td>
                                                    {{$singleData['name']}}
                                                </td>
                                                <td>
                                                    +{{$singleData['isd_code']}}{{$singleData['phone_no']}}
                                                </td>
                                                <td>{{$singleData['address']}}</td>
                                                <td>{{$singleData['car_registration_no']}}</td>
                                                <td>{{$singleData['make']}}</td>
                                                <td>{{$singleData['car_model']}}</td>
                                                <td>{{$singleData['vehicle_color']}}</td>
                                                <td>{{$singleData['body_type']}}</td>
                                                <td>
                                                    {{getWashTypesOfPreBooking($singleData['id'])}}<br>
                                                    {{ getExtraOfPreBooking($singleData['id']) }}
                                                </td>
                                                <td>
                                                    {{$singleData['symbol']}}{{$singleData['total_amount']}}
                                                </td>
                                                <td>
                                                    {{$singleData['discount']}}%
                                                </td>
                                                <td>
                                                    @if($singleData['is_free_wash'] == 1 ) 
                                                        Yes
                                                    @else
                                                        No     
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($singleData['date'] != '')
                                                    {{date("Y/m/d", strtotime($singleData['date']))}}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($singleData['time'] != '')
                                                    {{date("H:i", strtotime($singleData['time']))}}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($singleData['status'] == 0)
                                                        In-Queue
                                                    @endif 
                                                    @if($singleData['status'] == 1)
                                                        In Wash Bay
                                                    @endif 
                                                    @if($singleData['status'] == 2)
                                                        Finishing Bay
                                                    @endif
                                                    @if($singleData['status'] == 3)
                                                        Car Wash Completed
                                                    @endif   
                                                    @if($singleData['status'] == 4)
                                                        Wash Cancelled
                                                    @endif
                                                    @if($singleData['status'] == 5)
                                                        Keys Collected
                                                    @endif 
                                                    @if($singleData['status'] == 6)
                                                        Pending
                                                    @endif 
                                                    @if($singleData['status'] == 7)
                                                        Confirmed
                                                    @endif 
                                                    @if($singleData['status'] == 8)
                                                        Declined
                                                    @endif 
                                                </td>
                                                <td>
                                                    @if(Auth::user()->is_admin == 1)
                                                        <a title="Delete Prebooking" onclick="return confirm('Are you sure, you want to delete this record? Once deleted this record will not be recovered.');" href="{{ route('owner.prebook.delete', array('id' => $singleData['id'])) }}" style="color: red;"><i class="feather icon-trash"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <!-- <tfoot>
                                            <tr>
                                                <th>Sl No.</th>
                                                <th>CWO Name</th>
                                                <th>Client Name</th>
                                                <th>Client Email</th>
                                                <th>Client Phone</th>
                                                <th>Car Registration No.</th>
                                                <th>Body Type</th>
                                                <th>Car Wash Type</th>
                                                <th>Amount</th>
                                                <th>Date Washed</th>
                                                <th>Time Washed</th>
                                                <th>Car Wash Status</th>
                                                <th>Payment Status</th>
                                                <th>Payment Type</th>
                                            </tr>
                                        </tfoot> -->

                                </table>
                            @endif
                        </div>
                        <!-- DataTable ends -->

                        <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="float-right">
                                    <!-- @if (isset($records) && count($records))
    {{ $records->links('pagination::bootstrap-4') }}
    @endif -->
                                    @if (isset($records) && count($records))
                                        {{ $records->appends($_GET)->links('pagination::bootstrap-4') }}
                                    @endif
                                </div>
                            </div>
                        </div>


                    </section>

                </div>
            </div>
        </div>
    @section('page_scripts')
        <script src="{{ asset('app-assets/vendors/js/extensions/dropzone.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
        {{-- <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js')}}"></script> --}}
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
        <script src="{{ asset('app-assets/js/scripts/ui/data-list-view.js') }}"></script>
        <script src="{{ asset('app-assets/js/bootstrap-datepicker.min.js') }}"></script>
        <script type="text/javascript">
        document.getElementById('start_date').addEventListener('keypress', (e) => {
          e.preventDefault();
        });
        document.getElementById('end_date').addEventListener('keypress', (e) => {
          e.preventDefault();
        });

        $(document).on('click', '#delete_wash', function(){ 
            var checkedVals = $('.delete_ids:checkbox:checked').map(function() {
                return this.value;
            }).get();
            var delete_ids = checkedVals.join(",");
            // alert(delete_ids);
            if(delete_ids == '') {
                alert('Please select at least one record');
            } else {
                // alert(delete_ids);
                let _url = "{{ route('owner.prebook.multidelete') }}";
                let data = {
                    'delete_ids': delete_ids
                };
                $.ajax({
                    url: _url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: data,
                    success: function(response) {
                        if (response.status == 1) {
                            // toastr.success(response.message, 'Deleted!');
                            alert(response.message, 'Deleted!');
                            window.location.reload();
                        } else {
                            toastr.error('Something went wrong.', 'Failed!');

                        }
                    }

                });
            }
        });
    </script>

    @endsection

</x-owner-layout>
