@extends('layouts.main')


@section('content')
<div class="row">   
    @php $companies = $user->companies; @endphp
    <div class="col-md-2">
        <div class="list-group">
            <a href="{{route('quiq_accounts_manager_edit_view',['user' => $user])}}" class="list-group-item">{{__('strings.user_profile')}}</a>
            <a href="{{route('quiq_manager_accounts_index',['user' => $user])}}" class="list-group-item active">Empresas</a>
        </div>
    </div>

    <div class="col-md-10">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Empresas QuiQ</h4>
            </div>
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table id="users-table" class="table cell-borders">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Id</th>
                                <th>{{ __('strings.email') }}</th> 
                                <th>{{ __('strings.name') }}</th>
                                <th>Empresa</th>
                                <th>Agregar?</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{asset('js/notify.min.js')}}"></script>

<script type="text/javascript">
    var table;
    var companies = @json($user->companies);
    $(function() {
	//setting language for moment.js
	moment.locale('es');        
    
	//initialize datetable
        table = $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            ajax: '{!! route('users_datatable') !!}',
            columns:[
                { data: 'ID_USER'},
                { data: 'EDIT'},
                { data: 'NAME'},
                { data: 'COMPANY_NAME', defaultContent: '<code>Sin definir</code>'},
                { data: 'SECURE_TOKEN', name: 'SECURE_TOKEN', orderable: false, render: function (token, type, full, meta) {
                    
                    if (companies.some(item => item.SECURE_TOKEN == token)) {
                        return '<input type="checkbox" value="' + token + '" onclick="hideQuiQRequest(this)" checked/>';
                    } else {
                        return '<input type="checkbox" value="' + token + '" onclick="hideQuiQRequest(this)"/>';
                    }
                }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
            },  
            ],
            dom: 'Bfltip',
            buttons: [
            'copy', 'excel', 'pdf'
            ],
            order: [[ 0, "desc" ]],
            lengthMenu: [[10], [10]],
            });
    });


    function hideQuiQRequest(checkbox) {
        console.log($(checkbox).prop('checked'), $(checkbox).val());
        $.post("{{route('quiq_account_manager_attach')}}", {
            token: "{{$user->token}}" ,
            quiq_user_token: $(checkbox).val(),
            attach: $(checkbox).prop('checked')
        }, function(response){
            console.log(response);
            $.notify(response.message, { className: 'success', globalPosition:"bottom right" });
        })
        .fail(function(err){
            console.log(err);
            $(checkbox).prop('checked', !$(checkbox).prop('checked'));
            $.notify("{{__('strings.error_message')}}", { className: 'error',globalPosition:"bottom right" });
        });
    }
</script>
@endpush