@extends('client.layouts.app')

@section('page_title', 'Clients')

@section('body_class', 'clients')

@section('content_header_title')

@endsection

@section('content')
    <div class="clients">
        <div class="container-fluid">
            <h1 class="page-title">{{ __('client.navigation.clients') }}</h1>
            <div class="filters filters--clients">
                <form action="" class="form form-inline form--filters align-items-start align-items-lg-end flex-column flex-lg-row">
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="client-id" class="col-form-label">{{__('client.global.client_code')}}</label>
                        <input id="client-id" type="text" class="form-control" name="process_id">
                    </div>
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="keyword" class="col-form-label">{{__('client.global.keyword')}}</label>
                        <input id="keyword" type="text" class="form-control" name="keyword">
                    </div>
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="status" class="col-form-label">{{__('client.global.status')}}</label>
                        <select class="form-control selectpicker" id="status" name="filter_status">
                            @foreach(getStatuses(true) as $status => $label)
                                @if ($status != \App\User::STATUS_PENDING) <option {{ old('filter_status', '') == $status ? 'selected' : '' }} value="{{$status}}">{{$label}}</option> @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group d-flex align-items-start pb-2 pb-lg-5">
                        <button class="btn btn--with-content w-auto" type="submit">
                            <img src="{{ asset('img/filters_submit_btn_background.svg')}}" alt="" />
                        </button>

                        <button class="btn btn--with-content btn--form-clear w-auto" type="button">
                            <img src="{{ asset('img/filters_clear_btn_background.svg')}}" alt="" />
                        </button>
                    </div>
                </form>
            </div>
            <div class="table-responsive">
                <table id="clients" class="table table--administrators">
                    <thead>
                        <tr class="enable-sorting table__header">
                            <th data-name="code">ID</th>
                            <th data-name="name">{{__('client.global.company_name')}}</th>
                            <th data-name="admin_name">{{__('client.global.administrator_name')}}</th>
                            <th data-name="admin_email">{{__('client.global.email')}}</th>
                            <th data-name="active_processes">{{__('client.global.active_processes')}}</th>
                            <th data-name="admin_status">{{__('client.global.status')}}</th>
                            <th data-name="admin_language">{{__('client.global.language')}}</th>
                            <th class="text-right">
                                <a href="{{ route('client.clients.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: 'code',
                    name: 'code',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'name',
                    name: 'name',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'admin_name',
                    name: 'admin_name',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'admin_email',
                    name: 'admin_email',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'active_processes',
                    name: 'active_processes',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'admin_status',
                    name: 'admin_status',
                    searchable: false
                },
                {
                    targets: i++,
                    data: 'admin_language',
                    name: 'admin_language',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-right datatables-actions-cell'
                },
            ];
            var options = {
                searching: true,
                info: false,
                lengthChange: false,
                paging: true,
                language: {
                    'paginate': {
                    'previous': '<i class="fas fa-chevron-left"></i>',
                    'next': '<i class="fas fa-chevron-right"></i>'
                    }
                },
                processing: true,
                serverSide: true,
                sDom: 'lrtip',
                ajax: "{{ route('client.clients.datatable') }}",
                columnDefs: columnDefs,
                drawCallback: function(settings) {
                    var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
                    pagination.toggle(this.api().page.info().pages > 1);
                }
            };
            table = $('#clients').DataTable(options);
            /*$(".filtering").not(":eq(2),:eq(3),:eq(4)").each( function ( i ) {
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(this).empty() )
                    .on( 'change', function () {
                        var term = $(this).val();
                        clientsTable.column( i ).search(term, false, false ).draw();
                    } );
                clientsTable.column( i ).data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );*/
            $('form.form--filters').submit(function(e) {
                e.preventDefault();
                var keyword = $('#keyword').val();
                var processId = $('#client-id').val();
                var status = $('#status').val();
                table.search(keyword);
                table.columns(0).search(processId);
                table.columns(5).search(status);
                table.draw();
            });
        });
    </script>
@endsection