@extends('layouts.layout')

@section('content')
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"> <i class="fa fa-user"></i> Files</h3>
            <form action="/files/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="file" class="form-control pull-right" placeholder="Search by file" 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="/files/upload-file" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add Files</a>

            <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> Files score report
            </button>

            <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">Files report</h4>
                        </div>
                        <div class="modal-body">

                            <form action="/files/files-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="seal">File</option>
                                        <option value="date">Date</option>
                                        <option value="truck">Truck</option>
                                        <option value="driver">Driver</option>
                                        <option value="dispatcher_name">Dispatcher Name</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="/files/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="/files/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="files">
                <thead>
                    <th>File Name</th>
					<th>Path</th>
                </thead>
                    <tbody>
                    @foreach($files as $file)
                    <tr>
                        <td><a href="{{$file->file_path}}" target="_blank">{{$file->name}}</a></td>
						<td><a href="{{$file->file_path}}" target="_blank" download>Download File</a></td>
                    </tr>
                    @endforeach
                    </tbody>
            </table>
                <p class="pull-left"> Showing {{$files->firstItem()}} to {{$files->lastItem()}} of {{$files->total()}} entries</p>
                <span class="pull-right">{{$files->links()}}</span>

        </div>
    </div>

@endsection

@section('footer')

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


            $.get('/get-files', 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,file) {
                    body+='<input type="checkbox" name="driver_ids[]" value="'+file.id+'" checked> '+file.name+'<br/>';
                })
                $('#body_modal_individual_bulk_report').append(body);
            });


        });
    </script>
@endsection