@extends('modules.head') @section('contenido')
    <div class="box-header">
        @if(Auth::user()->rol_id == 1)
            <a class="btn btn-app btnReportProducts" href="{{url('/clients/report/all')}}"><i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag10')}}</a>
            <a class="btn btn-app btnReportProducts" href="{{url('/clients/report/never')}}"><i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag8')}}</a>
            <a class="btn btn-app btnReportProducts" href="{{url('/clients/report/fifteen')}}"><i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag9')}}</a>
        @endif
    </div>
    <!-- /.box-body -->
    <!-- LISTADO clientes-->
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Customers</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive hideScrollOffset dvClients">
            @include('eko_table_preferences')
            <table id="example2" class="table table-bordered table-hover dataTable ekoTable" role="grid" aria-describedby="example2_info">
                <thead>
                <tr role="row">
                    <th id="col_bp_code" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag11')}}</th>
                    <th id="col_name" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag4')}}</th>
                    <th id="col_email" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Email</th>
                    <th id="col_contact_person" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag12')}}</th>
                    <th id="col_phone" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag13')}}</th>
                    <th id="col_branch_owner" class="sorting">Branch owner</th>
                    <th id="col_group" class="sorting">Group</th>
                    <th id="col_state" class="sorting">State</th>
                    <th id="col_active" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag6')}}</th>
                    <th id="col_actions" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Actions
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.MODAL VER INFO cliente -->
    <div class="modal fade in modal-information" id="modal-info-client">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">{{ Lang::get('messages.modal_info_clients_tag1')}}</h4>
                </div>
                <div class="modal-body">
                    <div class="box-info">
                        <div class="form-group">

                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag2')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="first_name"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag10')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="bo_contact_person"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag4')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="document"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>Group (PL):</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="category"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag5')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="bo_phone_1"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag12')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="phone"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag6')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="created_at"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag7')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="email">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag13')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="bill_to_address">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag14')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="ship_to_address">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag15')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="popup_text">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag8')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="active">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag16')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="required_po">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag17')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="bo_tax_exempt">
                                    </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{ Lang::get('messages.modal_info_clients_tag18')}}</label>
                                </div>
                                <div class="col-xs-6">
                                    <p id="bo_payment_term_type">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left"
                            data-dismiss="modal">{{ Lang::get('messages.modal_info_clients_tag9')}}</button>
                    <button type="button" data-dismiss="modal" class="btn btnBox">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="modal-sync-client">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Sync client</h4>
                </div>
                <div class="modal-body">

                    <div class="box-info">
                        <div class="form-group row">
                            <div class="col-xs-3">
                                <label>BP Code</label>
                            </div>
                            <div class="col-xs-6">
                                <input type="text" class="form-control" name="bp_code" id="bp_code">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left"
                            data-dismiss="modal">{{ Lang::get('messages.modal_info_clients_tag9')}}</button>
                    <button type="button" class="btn btnBox" onclick="syncCustomerByBPID(this)">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.MODAL Direccion-->
    <style type="text/css">
        @media(max-width:768px){
            .dvClients {}
            .dvClients table {}
            .dvClients table tr { display: flex; flex-wrap: wrap; position: relative; border-bottom: solid 2px #ccc; }
            .dvClients table th { flex: 0 0 25%; box-sizing: border-box;}
            .dvClients table th:nth-child(n+5) { display: none;}
            .dvClients table td { flex: 0 0 calc(100% - 80px); box-sizing: border-box; border-width: 0 !important; padding: 5px !important;}
            .dvClients table td:before { content:''; display: inline; font-weight: bold;}
            .dvClients table td:first-child {}
            .dvClients table td:nth-child(2) {}
            .dvClients table td:nth-child(3) {}
            .dvClients table td:nth-child(4) {}
            .dvClients table td:nth-child(5) {}
            .dvClients table td:nth-child(6) {}
            .dvClients table td:nth-child(7) { text-align: left !important; }
            .dvClients table td:nth-child(6) .switch label label:before { content:'Active'; display: inline; font-weight: bold; }
            .dvClients table td:nth-child(7):before { content:'Required';}
            .dvClients table tr td:last-child { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; }
        }
        @media(max-width: 480px) {
            .dvClients table th:nth-child(n+3) { display: none;}
            .dvClients table th { flex: 0 0 50%;}
            .dvClients .checkbox label, .dvClients .radio label { padding-left: 0;}

        }
    </style>
    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAPS_API_KEY')}}&libraries=places,geometry" async defer></script>
    <script src="{{ asset('js/ux.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/masterSAPB1.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';
           $('#example2 thead tr').clone(true).addClass('filters').prependTo('#example2 thead');

         $('#example2 thead tr:first-child > th').css('background-color', "rgb(255, 255, 255)");
            _table = $('#example2').DataTable({
                'paging': true,
                'lengthChange': true,
                'searching': true,
                'ordering': false,
                'info': true,
                'autoWidth': true,
                responsive: true,
                processing: true,
                serverSide: true,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },

                ajax: '{{ route('clients.table') }}',
                columns: [
                    {data: 'document', name: 'document'},
                    {data: 'first_name', name: 'first_name', render: (data, type, row) => {
                        return `<a href="/clients/edit/${row.id}">${data}</a>`
                    }},
                    {data: 'email', name: 'email'},
                    {data: 'bo_contact_person', name: 'bo_contact_person'},
                    {data: 'phone', name: 'phone'},
                    {data: 'bo_account_branch_owner', name: 'boAccountBranchOwner.branch_code', render: (data) => {
                            return data ? data.branch_code : ''
                        }},
                    {data: 'bo_group', name: 'boGroup.group_name', render: (data) => {
                        return data ? data.group_name : ''
                    }},
                    {data: 'addresses', name: 'addresses.state.code', render: (data) => {
                        if (data && data.length && data[0].state) {
                            return data[0].state.code
                        }
                        return '';
                    }},
                    {data: 'active', name: 'active'},
                    {data: 'actions', name: 'actions'}
                ],
            initComplete: addFiltersForDataTable
            });

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

            setTimeout(function () {

                if (localStorage.getItem("setPageTable") == 'true') {

                    var index = parseInt(localStorage.getItem("productsTableIndex"));
                    _table.page(index).draw(false);

                    localStorage.setItem("productsTableIndex", 0);
                    localStorage.setItem("setPageTable", false);
                }

                $('#example2_filter > label > input').unbind();
                $('#example2_filter > label > input').bind('keyup', function (e) {

                    if (e.keyCode == 13) {
                        _table.search(this.value).draw();
                    }
                });

            }, 500);

            var info = '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Cedula, Nombre y Correo</p></div>';

            $('#example2_filter').append(info);
            $('#btn-info-busqueda').on('click', function () {
                $('#menuBusqueda').toggle();
            });


        });

    </script>

    <script type="text/javascript">

        function syncCustomerByBPID(el){
            let bp_code = $('#bp_code').val();

            if($(el).prop('disabled')){
                return false;
            }

            $(el).prop('disabled', true);
            $(el).css('cursor', 'wait');

            if(bp_code == ''){
                swal('', 'Please enter a valid BP Code', 'warning')
                return false;
            }

            let info = {
                "BPCode": bp_code.toUpperCase(),
            }
            if(bp_code != ''){
                $.ajax({
                    url: "/sapb1/query/BusinessPartnersByBPCode",
                    type: "POST",
                    contentType: "application/json",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), "Content-Type": "application/json",
                    },
                    data: JSON.stringify(info),
                    success: function(r) {
                        swal("", r.message, r.status);
                        $('#bp_code').val('');
                        $('#modal-sync-client').modal();
                    },
                    error: function(r) {
                        swal("", `An unexpected error has occurred \n ERROR CODE: ${r.status}` , 'error');
                    },
                    complete: function(r) {
                        $(el).prop('disabled', false);
                        $(el).css('cursor', '');
                    }
                });
            }
        }
    </script>
@endsection