@extends('layouts.main')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('sidebar.suburbs.index') }} <span class="float-sm-right"> <a href="{{route('suburb_create_view')}}" class="btn btn-primary">{{__('strings.suburb_create_submit')}}</a></span></h4>                
            </div>
            <div class="card-body collapse in">
                <div class="table-responsive">
                    <table id="suburbs-table" class="table hover mb">
                        <thead class="thead-inverse">
                            <tr>
                            	<th>Id</th>
                            	<th>Lat</th>
                            	<th>Lng</th>
                            	<th>{{__('strings.suburb')}}</th>
                            	<th>CP</th>
                            	<th>{{__('strings.suburb_type')}}</th>
                            	<th>{{__('strings.city')}}</th>
                            	<th>{{__('strings.state')}}</th>
                                <th>{{__('strings.country')}}</th>
                                <th>{{__('strings.full_address')}}</th>
                                <th>{{__('strings.date')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        //setting language for moment.js
	moment.locale('es');
        
        $('#suburbs-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            ajax: '{!! route('suburb_datatable_get') !!}',
            columns: [
            { data: 'id'},
            { data: 'lat'},
            { data: 'lng'},
            { data: 'suburb'},
            { data: 'cp'},
            { data: 'type'},
            { data: 'city'},
            { data: 'state'},
            { data: 'country'},
            { data: 'full_address'},
            { data: 'created_at', render: function(data, type, row, meta)
                {
                        return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
                }
            }
            ],
            dom: 'Bfrtip',
            buttons: [
                'pageLength','copy', 'excel', 'pdf'
            ],
            "lengthMenu": [[10, 100, 1000], [10, 100, 1000]],
            "language": {
                "url": "{!! asset('Datatables/languages/spanish.json') !!}"
            },
            "order": [[ 0, "desc" ]]
        });
    });
</script>
@endpush