@extends('modules.head') @section('contenido')
<div class="box-header">
<button id="pending_acc_add_customer" onclick="window.location.href='/createAccount'" class="btn add_pending_btn"><i class="fa fa-plus"></i> New Account</button>
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 10)
    <a class="auxiliar" href="{{url('/pending_accts/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div>
<!-- List banners-->
<div class="box">
    <h3 class="pendingAcc_title">Pending accounts</h3>
    <!-- /.box-header -->
    <div class="box-body table-responsive dvPendingAccts">
        @include('eko_table_preferences')
        <table id="table-list_pending_accounts" class="table table-bordered table-hover dataTable ekoTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th id="col_company" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Company</th>
                    <th id="col_first_name" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">First Name</th>
                    <th id="col_last_name" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Last Name</th>
                    <th id="col_email" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Email</th>
                    <th id="col_phone" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Phone</th>
                    <th id="col_source" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Source</th>
                    <th id="col_owner" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Owner</th>
                    <th id="col_state" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">State</th>
                    <th id="col_branch" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Branch</th>
                    <th id="col_status" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</th>
                    <th id="col_actions" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@include('products.scraper')
<style type="text/css">
    .add_pending_btn{float: right; margin: 0 0 30px; border-color: #ddd}
    @media(max-width: 768px) {
        .dvPendingAccts { }
        .dvPendingAccts table { }
        .dvPendingAccts table tr { display: flex; flex-wrap: wrap; position: relative;}
        .dvPendingAccts table tbody tr { border-bottom: solid 2px #ccc;}
        .dvPendingAccts table tr th { display: none; flex: 0 0 25%; box-sizing: border-box; flex-direction: column;}
        .dvPendingAccts table tr th:first-child, .dvPendingAccts table tr th:nth-child(6), .dvPendingAccts table tr th:nth-child(7), .dvPendingAccts table tr th:nth-child(10) { display: block; }
        .dvPendingAccts table tr td { border-width: 0; flex: 0 0 calc(100% - 80px); box-sizing: border-box; }
        .dvPendingAccts table tr td:last-child { position: absolute; top: 0; right: 0; display: flex; flex-direction: column;}
        .dvPendingAccts table { }
    }
    @media(max-width: 480px) {
    .dvPendingAccts table tr th:nth-child(6), .dvPendingAccts table tr th:nth-child(10) { display: none; }
    .dvPendingAccts table tr th { flex: 0 0 50%;}
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>

<!--Columns visibility -->
<script src="{{ asset('js/column_visibility.js') }}"></script>
<!--End Columns visibility -->

<script type="text/javascript">
    $(document).ready(function() {

        $.fn.dataTable.ext.errMode = 'throw';

        $('#table-list_pending_accounts thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#table-list_pending_accounts thead');

        $('#table-list_pending_accounts thead tr:first-child > th').css('background-color', "white");
        $('#table-list_pending_accounts thead tr:nth-child(2) > th').css('background-color', "#CCC");

        $(function() {
            $("#table-list_pending_accounts").dataTable().fnDestroy();
            _table = $('#table-list_pending_accounts').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order": [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: '/getpendingaccounts',
                },
                columns: [{
                        data: 'company_name',
                        name: 'company_name',
                        "width": "20%",
                        render(data, type, raw) {
                            let rating = '';
                            if(raw.rating) {
                                rating = `[${raw.rating.name}]`;
                            }
                            return `<a href="/pendingAccounts/edit/${raw.id}"
                           role="button" class="table-link">${data}</a> ${rating}`;
                        },
                    },
                    {
                        data: 'first_name',
                        name: 'first_name',
                        "width": "15%"
                    },
                    {
                        data: 'last_name',
                        name: 'last_name',
                        "width": "15%"
                    },
                    {
                        data: 'email',
                        name: 'email',
                        "width": "15%"
                    },
                    {
                        data: 'cell_phone',
                        name: 'cell_phone',
                        "width": "5%"
                    },
                    {
                        data: 'source',
                        name: 'source.name',
                        render: function(data) {
                            if(data != null){
                                return data.name
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        data: 'owner',
                        name: 'owner.first_name',
                        render: function(data) {
                            if(data != null){
                                return data.first_name + " " + data.last_name;
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        data: 'state',
                        name: 'state',
                    },
                    {
                        data: 'bo_account_branch_owner',
                        name: 'bo_account_branch_owner.branch_code',
                        render: function(data) {
                            if(data != null){
                                return data.branch_code
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        data: 'accountStatus',
                        name: 'accountStatus.status_name',
                        "width": "5%",
                        render(data, type, raw) {
                            return `<span class="label label-${raw.account_status.label_color}"> ${raw.account_status.status_name} </span>`;
                        }
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                    },

                ],
                orderCellsTop: true,
                fixedHeader: true,
                initComplete: addFiltersForDataTable
            });

            handleUserColumnsPreferences('table-list_pending_accounts', 'pending_accounts', _table); //First argument: table id, Second argument: corresponding name in eko_tables database table, Third argument: datatable instance

        });

    });
</script>

@endsection