@extends('layouts.layout')

@section('content')
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"> <i class="fa fa-user"></i> Drivers</h3>
            <form action="/drivers/search" method="get" class="pull-right">
                <div class="input-group input-group-sm" style="width: 150px;padding-bottom:5px;margin-left:10px">
                    <input type="text" name="name" class="form-control pull-right" placeholder="Search by name" value="{{$search}}">

                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </form>

            <a href="/drivers/create" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Create</a>
            <!-- <a href="/drivers/messages-report" class="btn btn-info pull-right" target="_blank" style="margin-right: 10px">Messages report</a> -->
            {{--<a href="/drivers/drivers-report" class="btn btn-info pull-right" style="margin-right:10px"><i class="fa fa-flag"></i> Drivers report</a>--}}



            <button type="button" class="btn btn-info pull-right" id="individual_bulk_btn" style="margin-right: 10px" data-toggle="modal" data-target="#individual_bulk">
                <i class="fa fa-flag"></i> Individual bulk report
            </button>
            <button type="button" class="btn btn-info pull-right" style="margin-right: 10px" data-toggle="modal" data-target="#modal-default">
                <i class="fa fa-flag"></i> Drivers score report
            </button>

            <button type="button" class="btn btn-info pull-right" style="margin-right: 10px" data-toggle="modal" data-target="#modal-messages">
                <i class="fa fa-flag"></i> Messages report
            </button>
            <a href="/drivers/import" class="btn btn-success pull-right" style="margin-right:10px"><i class="fa fa-upload"></i> Import</a>


            <div class="modal fade" id="modal-default">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">Drivers report</h4>
                        </div>
                        <div class="modal-body">

                            <form action="/drivers/drivers-report" target="_blank" method="get">
                                <div class="form-group form-inline">
                                <label for="start">Start date</label>
                                <input type="date" name="date_from" id="start" class="form-control">
                                
                                <label for="end">End date</label>
                                <input type="date" name="date_end" id="end" class="form-control"><br/>

                                <br/>

                                    <label for="order">Order By</label>
                                    <select name="orderBy" id="order" class="form-control">
                                        <option value="name">Name</option>
                                        <option value="month_score">Monthly score</option>
                                        <option value="3month_score">3 months score</option>
                                        <option value="yearly_score">Yearly score</option>
                                        {{--<option value="top_score">Top score</option>--}}
                                        <option value="late_time">Late time</option>
                                        <option value="loads_refused">Loads refused</option>
                                    </select>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Generate</button>
                                </div>
                            </form>

                        </div>

                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

            <div class="modal fade" id="modal-messages">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">Messages report</h4>
                        </div>
                        <div class="modal-body">

                            <form action="/drivers/messages-report" target="_blank" method="get">
                                <div class="form-group form-inline">
                                <label for="start">Start date</label>
                                <input type="date" name="date_from" id="start" class="form-control">
                                
                                <label for="end">End date</label>
                                <input type="date" name="date_end" id="end" class="form-control"><br/>

                                   
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Generate</button>
                                </div>
                            </form>

                        </div>

                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>



            <div class="modal fade" id="individual_bulk">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">Individual report bulk</h4>
                        </div>
                        <div class="modal-body">

                            <form action="/drivers/bulk-individual-report" target="_blank" method="post">
                               @csrf
                                <div id="body_modal_individual_bulk_report">

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Generate</button>
                                </div>
                            </form>

                        </div>

                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            @if(session()->get('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div><br />
            @endif
            <table class="table table-bordered table-hover table-striped" id="drivers">
                <thead>
                    <th>Name</th>
                    <th style="width:150px;">Driver ID</th>
                    <th style="width:50px">Score</th>
                    <th style="">Add incident</th>
                    <th style="width:50px">Loads refused</th>
                    <th style="width:50px">Loads canceled</th>
                    {{--<th>Late times#</th>--}}
                    <th>Hours late#</th>
                    <th style="width: 200px">Individual report</th>
                    <th style="width:40px">Edit</th>
                    <th style="width:50px">Delete</th>
                </thead>
                    <tbody>
                    @foreach($drivers as $driver)


                    <tr>
                        <td><a href="/drivers/{{$driver->id}}">{{$driver->name}} @if($driver->xrs_no_track=='Y') <i class="fa fa-close" style="color:red" title="XRS Tracking not available"></i>@endif</a></td>
                        <td>{{$driver->driver_id}}</td>
                        <td>{{$driver->score()}}</td>
                        <td><a href="/drivers/{{$driver->id}}/add-incident" class="btn btn-success"><i class="fa fa-plus"></i> Add incident</a></td>
                        <td>{{$driver->refusedLoads->count()}}</td>
                        <td>{{$driver->canceledLoads->count()}}</td>
                        {{--<td>{{$driver->lateTime()['times']}}</td>--}}
                        <td>{{$driver->lateTime()['hours']}}</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info"><i class="fa fa-flag"></i> Generate</a></button>
                                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="/drivers/{{$driver->id}}/individual-report" target="_blank">With late time</a></a></li>
                                    <li><a href="/drivers/{{$driver->id}}/individual-report?without_late_time" target="_blank">Without late time</a></li>
                                </ul>
                            </div>

                        <td><a href="/drivers/{{$driver->id}}/edit" class="btn btn-warning"><i class="fa fa-edit"></i></a></td>
                        <td>
                            <form method="POST" action="/drivers/{{$driver->id}}">
                                @method('DELETE')
                                {{ csrf_field() }}

                            <div class="form-group">
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure ?')"><i class="fa fa-trash"></i></button>
                            </div>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
            </table>
                <p class="pull-left"> Showing {{$drivers->firstItem()}} to {{$drivers->lastItem()}} of {{$drivers->total()}} entries</p>
                <span class="pull-right">{{$drivers->links()}}</span>

        </div>
    </div>

@endsection

@section('footer')

    <script>
        $('#individual_bulk_btn').click(function(event) {


            $.get('/get-drivers', function(html) {
                var body='<button id="select_all" type="button" onclick="$(\':checkbox\').prop(\'checked\', true);">Select all</button> <button id="select_none" onclick="$(\':checkbox\').prop(\'checked\', false);" type="button">Select none</button><br/>';
                $.each(html,function (index,driver) {
                    body+='<input type="checkbox" name="driver_ids[]" value="'+driver.id+'" checked> '+driver.name+'<br/>';
                })
                $('#body_modal_individual_bulk_report').append(body);
            });


        });
    </script>
@endsection