@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-3 mb-1">
        {{ __('Kunden') }} (FeWo)
    </h4>

    <div class="card">
        <div class="card-datatable table-responsive py-2">
            <div class="mr-4 mb-2 text-right">
                <a href="{{ route('travel_user_detail', ['new']) }}" class="btn btn-sm btn-primary">Neue Kunden anlegen</a>
            </div>
            <table id="datatables-default" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th style="max-width: 10px;">&nbsp;</th>
                    <th>{{__('ID')}}</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th style="max-width: 60px;">{{__('delete')}}</th>
                </tr>
                </thead>
            </table>
            <div class="mr-4 mt-2 text-right">
                <a href="{{ route('travel_user_detail', ['new']) }}" class="btn btn-sm btn-primary">Neue Kunden anlegen</a>
            </div>
        </div>
    </div>

    <script>
        $( document ).ready(function() {

            $('#datatables-default').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{!! route('data_table_travel_users') !!}',
                "columns": [
                    { data: 'action_edit', orderable: false, searchable: false},
                    { data: 'id', name: 'id' },
                    { data: 'first_name', name: 'first_name' },
                    { data: 'last_name', name: 'last_name' },
                    { data: 'email', name: 'email' },
                    { data: 'action_delete', orderable: false, searchable: false},
                ],
                "order": [[ 1, "desc" ]],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "language": {
                    "url": "/js/German.json"
                }
            });
        });
    </script>



@endsection