@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}"/>
<!-- END DataTables-->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                {{ __('strings.supervisors') }}  
                            </h1>
                        </div>
                        <div class="col-md-4 text-right">                                                        
                                <a href="{{route('company_supervisors_new')}}" class="btn btn-primary mb-1"> {{__('strings.add_new')}}</a>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mt-4">
                        <div class="table-responsive">
                        <table id="supervisors-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th></th>
                                    <th>Id</th>
                                    <th>{{__('strings.name')}}</th>
                                    <th>{{__('strings.last_name')}}</th>
                                    <th>{{__('strings.email')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->


<script type="text/javascript">
    
    var table;
    $(document).ready(function() {

        //setting language for moment.js
        moment.locale('es');
        //initialize datetable
        table = $('#supervisors-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                data:@json($supervisors),
                                columns: [
                                        { data: 'edit', defaultContent: "---", render: function ( data, type, row, meta ) {
                                            var url = "{{route('supervisors_update_view', ':id')}}"
                                            url = url.replace(':id', row.id);
                                            return "<a href='" + url + "'> Editar <a/>";
                                        }},
                                        { data: 'id', defaultContent:"---"},
                                        { data: 'name', defaultContent:"---"},
                                        { data: 'last_name', defaultContent:"---"},
                                        { data: 'email', defaultContent:"---"}
                                ],
                                dom: 'Bfrtip',
                                buttons: [
                                'copy', 'excel'
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
                });
    });
</script>
@endpush