@extends('admin::curd.index')
@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('vehicle_booking::vehicle_booking.name') !!} <small> {!! trans('cms.manage') !!} {!! trans('vehicle_booking::vehicle_booking.names') !!}</small>
@stop

{{-- @section('title')
{!! trans('vehicle_booking::vehicle_booking.names') !!}
@stop --}}

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('vehicle_booking::vehicle_booking.names') !!}</li>
    </ol>
@stop

@section('entry')
    <div class="box box-warning" id='vehicle_booking-vehicle_booking-entry'>
    </div>
@stop

@section('tools')
@stop

@section('content')
    <div class="table-responsive">
        <table id="vehicle_booking-vehicle_booking-list" class="table table-striped data-table">
            <thead class="list_head">
                <th>
                    <div class="reset" style="display:none;"></div>
                </th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.ref') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.booking_status') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.employee_id') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.driver_id') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.department_id') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.purpose') !!}</th>
                @if (user('admin.web')->currentCompany->requirement_type == 1)				 	   
                    <th>{!! trans('vehicle_booking::vehicle_booking.label.requirement_type') !!}</th>
                @endif
                <th>{!! trans('vehicle_booking::vehicle_booking.label.assigned_pickup_date') !!}</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.assigned_return_date') !!}</th>
                <th>Created By</th>
                <th>{!! trans('vehicle_booking::vehicle_booking.label.created_at') !!}</th>
            </thead>
            <thead class="search_bar">
                <th>
                    <div class="reset" style="display:none;"><a id="resetnow" class="headpicture"
                            style="cursor:pointer;"><i class="fa fa-refresh" style="color:#000;"></i></a></div>
                </th>
                <th>{!! Form::text('search[ref]')->id('search_name')->raw() !!}</th>
                <th>{!! Form::select('search[booking_status]')->options(['' => 'All'] + trans('vehicle_booking::vehicle_booking.options.booking_status'))->id('search_status')->raw() !!}</th>
                <th>{!! Form::select('search[vehicle_bookings.employee_id]')->options(['' => 'All'] + Company::employees())->id('search_employee')->raw() !!}</th>
                <th>{!! Form::select('search[driver_id]')->options([])->id('search_driver_id')->raw() !!}</th>
                <th>{!! Form::select('search[vehicle_bookings.department_id]')->options(['' => 'All']+Department::departments())->id('search_department')->raw() !!}</th>
                <th>{!! Form::text('search[purpose]')->id('search_purpose')->raw() !!}</th>
                @if (user('admin.web')->currentCompany->requirement_type == 1)				 	   
                    <th>{!! Form::select('search[vehicle_bookings.requirement_type]')->options(['' => 'All'] + trans('vehicle_booking::vehicle_booking.options.requirement_type'))->id('search_requirement_type')->raw() !!}</th>
                @endif
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </thead>
        </table>
    </div>
@stop

@section('script')
    <script type="text/javascript">
        var oTable;
        $(document).ready(function() {
            let searchParams = new URLSearchParams(window.location.search)
            if (searchParams.get('id')) {
                app.load('#vehicle_booking-vehicle_booking-entry', '{!! trans_url('admin/vehicle_booking/vehicle_booking') !!}'+'/'+searchParams.get('id'));
            }else
            {
                app.load('#vehicle_booking-vehicle_booking-entry', '{!! trans_url('admin/vehicle_booking/vehicle_booking/0') !!}');
            }

            oTable = $('#vehicle_booking-vehicle_booking-list').dataTable({
                "bProcessing": true,
                "sDom": 'R<>rt<ilp><"clear">',
                "bServerSide": true,
                "sAjaxSource": '{!! trans_url('/admin/vehicle_booking/vehicle_booking') !!}',
                "fnServerData": function(sSource, aoData, fnCallback) {

                    $('#vehicle_booking-vehicle_booking-list .search_bar input, #vehicle_booking-vehicle_booking-list .search_bar select')
                        .each(
                            function() {
                                aoData.push({
                                    'name': $(this).attr('name'),
                                    'value': $(this).val()
                                });
                            }
                        );
                    app.dataTable(aoData);
                    $.ajax({
                        'dataType': 'json',
                        'data': aoData,
                        'type': 'GET',
                        'url': sSource,
                        'success': fnCallback
                    });
                },

                "columns": [{
                        "data": null,
                        "name": "buttonColumn",
                        "render": function(data, type, row) {
                            return '';
                        }
                    },
                    {
                        data: 'ref'
                    },
                    {
                        data: 'booking_status'
                    },
                    {
                        data: 'employee_name'
                    },
                    {
                        data: 'driver_name'
                    },
                    {
                        data: 'department_name'
                    },
                    {
                        data: 'purpose'
                    },
                    @if (user('admin.web')->currentCompany->requirement_type == 1)				 	   
                    {
                        data: 'requirement_type'
                    },
                    @endif
                    {
                        data: 'assigned_pickup_date'
                    },
                    {
                        data: 'assigned_return_date'
                    },
                    {
                        data: 'user_id'
                    },                   
                    {
                        data: 'created_at',
                        render: function(data, type, row) {
                            return row.created_datetime;
                        }
                    }, 

                ],
                "pageLength": 25
            });

            $('#vehicle_booking-vehicle_booking-list tbody').on('click', 'tr', function() {

                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                var d = $('#vehicle_booking-vehicle_booking-list').DataTable().row(this).data();

                $('#vehicle_booking-vehicle_booking-entry').load('{!! trans_url('admin/vehicle_booking/vehicle_booking') !!}' + '/' + d.id);
            });

            $("#vehicle_booking-vehicle_booking-list .search_bar input, #vehicle_booking-vehicle_booking-list .search_bar select")
                .on('keyup select', function(e) {
                    e.preventDefault();
                    if (e.keyCode == 13 || e.keyCode == 9) {
                        oTable.api().draw();
                    }
                });

            $("#vehicle_booking-vehicle_booking-list .search_bar select").on('change', function(e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $("#search_company").change(function() {
                if ($("#search_company option:selected").val() != '') {
                    var company = $("#search_company option:selected").val();

                } else {
                    $("#search_division").val('');
                    oTable.api().draw();
                    var company = 0;
                }
                $("#search_division").load('{{ URL::to('admin/company/division/employee') }}' + '/' +
                    company);

            });

            $("#search_driver_id").select2({
                width: '200px',
                ajax: {
                    url: "{{ trans_url('admin/company/drivers/select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.items.map(function(obj) {
                                return {
                                    id: obj.id,
                                    text: obj.name
                                };
                            }),
                            // results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
            });

            $("#resetnow").click(function() {
                $("#search_name").val('');
                $("#search_code").val('');
                $("#search_division").val('');
                $("#search_status").val('');
                $('#search_employee').val('');
                $('#search_department').val('');
                $('#search_purpose').val('');
                $("#search_requirement_type").val('');
                $('#search_driver_id').val(null).trigger('change');
                $("#select2-search_driver_id-container").html(" ");
                oTable.api().draw();
                $(".reset").css({
                    'display': 'none'
                });
            });

            $('.search_bar').change(function() {
                $(".reset").css({
                    'display': 'inline'
                });
                return;
            });
        });
    </script>
@stop

@section('style')
    <style>
        .box {
            margin-bottom: 0px !important;

        }

        .master-header {

            display: none !important;

        }

        .box {

            border-top: 0px solid white !important;

        }
        .btn-sm{
            margin: 0.5em !important;
        }
        .box-tools{
            position: relative !important;
        }
    </style>
@stop