@extends('client.layouts.app')

@section('page_title', 'Process Owners')

@section('body_class', 'owners')

@section('content_header_title')

@endsection

@section('content')
    <div class="clients">
        <div class="container-fluid">
            <h1 class="page-title">{{ __('client.navigation.process_owners') }}</h1>
            <div class="table-responsive">
                <table id="owners" class="table table--owners">
                    <thead>
                    <tr class="table__header">
                        <th class="filtering"></th>
                        <th class="filtering"></th>
                        <th class="filtering"></th>
                        <th class="filtering"></th>
                        <th class="filtering"></th>
                    </tr>
                    <tr class="enable-sorting table__header">
                        <th data-name="name">{{__('client.global.name')}}</th>
                        <th data-name="email">{{__('client.global.email')}}</th>
                        <th data-name="status">{{__('client.global.status')}}</th>
                        <th data-name="processes">{{trans_choice('client.global.processes',2)}}</th>
                        <th class="text-right">
                            <a href="{{ route('client.owners.create') }}" class="table__add-cta d-inline-block">
                                <img src="{{ asset('img/create_table_entry_icon.svg')}}" alt="" />
                            </a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('custom_scripts')
    <script type="text/javascript" charset="utf8" src="{{ asset('vendor/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script>
        var table;
        $(function() {
            var i = 0;
            var columnDefs = [
                {
                    targets: i++,
                    data: 'name',
                    name: 'name',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'email',
                    name: 'email',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'status',
                    name: 'status',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'processes',
                    name: 'processes',
                    searchable: false,
                    className: 'datatables-actions-cell text-nowrap'
                },
                {
                    targets: i++,
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'datatables-actions-cell text-right',
                },
            ];
            var options = {
                searching: true,
                info: false,
                lengthChange: false,
                paging: false,
                processing: true,
                serverSide: true,
                sDom: 'lrtip',
                ajax: "{{ route('client.owners.datatable') }}",
                columnDefs: columnDefs,
            };
            table = $('#owners').DataTable(options);
        });
    </script>
@endsection