@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    @lang('CDP/cdpList.page_title')
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/b-1.5.4/datatables.min.css"/>
    <link href="{{ asset('assets/css/pages/tables.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/pages/form2.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/vendors/iCheck/css/all.css') }}" rel="stylesheet" type="text/css"/>

@stop

{{-- Page content --}}
@section('content')
    <div class="popup-wrapper">
        <div class="popup">

        </div>
    </div>

    <!-- Main content -->
    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-primary ">
                <div class="panel-heading" >
                    <h4 class="panel-title"><i class="livicon" data-name="user" data-size="16" data-loop="true"
                                               data-c="#fff" data-hc="white"></i>
                        @lang('CDP/cdpList.table_title')
                    </h4>
                    <span class="pull-right">
                            <a href="{{route('admin.cdp.add_masterdata') }}" type="button" class="btn btn-primary btn-sm"
                               id="addButton">

                                @lang('CDP/cdpList.add_new_cdp')</a>


                                </span>
                </div>
                <br/>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered width100" id="cdp_overview">
                            <thead>
                            <tr class="filters">
                                <th>@lang('CDP/cdpList.actions')</th>
                                <th>@lang('CDP/cdpList.cdp_no')</th>
                                <th>@lang('CDP/cdpList.entry_date')</th>
                                <th>@lang('CDP/cdpList.owner')</th>
                                <th>@lang('CDP/cdpList.customer_soldTo')</th>
                                <th>@lang('CDP/cdpList.entity_ID')</th>
                                <th>@lang('CDP/cdpList.customer_number')</th>
                                <th>@lang('CDP/cdpList.customer_group')</th>
                                <th>@lang('CDP/cdpList.country')</th>
                                <th>@lang('CDP/cdpList.globalRegion')</th>
                                <th>@lang('CDP/cdpList.region')</th>
                                <th>@lang('CDP/cdpList.quantitative_targets')</th>
                                <th>@lang('CDP/cdpList.competitive_landscape')</th>
                                <th>@lang('CDP/cdpList.kbf')</th>
                                <th>@lang('CDP/cdpList.qualitative_targets')</th>
                                <th>@lang('CDP/cdpList.opportunities')</th>
                                <th>@lang('CDP/cdpList.customer_mirror')</th>
                                <th>@lang('CDP/cdpList.css_actions')</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="user_delete_confirm_title"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"></div>
        </div>
    </div>
@stop

{{-- page level scripts --}}
@section('footer_scripts')

    <script>

        var route_modal_user_editing='{{route('admin.cdp.modal.cdp_open')}}';
        {{--var route_request_edit='{{route('admin.cdp.request_edit')}}';--}}
        {{--var route_modal_confirm_edit='{{route('admin.cdp.confirm-edit')}}';--}}
        {{--var route_ajax_channel_use= "{{route('admin.cdp.ajax.channel_in_use')}}";--}}

        $(function () {
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });
        });
    </script>

    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_overview.js') }}"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
{{--    <script src="{{ \App\Http\Classes\LaravelEchoServerClientInterface::getHost() }}:{{\App\Http\Classes\LaravelEchoServerClientInterface::getPort()}}/socket.io/socket.io.js"></script>--}}
{{--    <script src="{{ asset('assets/js/laravel_echo/laravel-echo-setup.js') }}" type="text/javascript"></script>--}}
    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_check_edit_button.js') }}"></script>


    <script>
        var dataTableLang = "{{json_encode(__('dataTable'))}}";
        var dataTableArray = dataTableLang;
        dataTableArray = dataTableArray.replace(/&quot;/g, '"');
        dataTableArray = JSON.parse(dataTableArray);

        var button = "{{json_encode(__('button'))}}";
        var buttonArray = button;
        buttonArray =  buttonArray.replace(/&quot;/g, '"');
        buttonArray = JSON.parse(buttonArray);


        $(function () {
            var table = $('#cdp_overview').DataTable({
                processing: true,
                serverSide: false,
                ajax: '{!! route('admin.cdp.data') !!}',
                columns: [
                    {data: 'action', name: 'Actions', orderable: false, searchable: false},
                    {data: 'ID', name: 'ID'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'owner', name: 'owner'},
                    {data: 'Sold_To_Name', name: 'Customer_ID'},
                    {data: 'entity_ID', name: 'Entity ID' },
                    {data: 'customer_number',name:'Customer Number'},
                    {data: 'Customer_Group_Name', name: 'customer_group'},
                    {data: 'country',name:'country'},
                    {data: 'Global_Region',name:'Global_Region'},
                    {data: 'Region',name:'Region'},
                    {data: 'quantitative_targets', name: 'quantitative_targets', orderable: false, searchable: false},
                    {data: 'company_landscape', name: 'company_landscape', orderable: false, searchable: false},
                    {data: 'kbf', name: 'kbf', orderable: false, searchable: false},
                    {data: 'qualitative_targets', name: 'qualitative_targets', orderable: false, searchable: false},
                    {data: 'opportunities', name: 'opportunities', orderable: false, searchable: false},
                    {data: 'customer_mirror', name: 'customer_mirror', orderable: false, searchable: false},
                    {data: 'css_actions', name: 'css_actions', orderable: false, searchable: false},

                ],
                "order": [[ 1, "desc" ]],
                dom: 'lBfrtip',
                buttons: [{
                    className:"export_opportunity",
                    extend: 'excelHtml5',
                    text: 'Export',
                    title: '',
                    filename: function () {
                        var d = new Date();
                        return 'cdp' + d.getFullYear() + "-" + (String(d.getMonth() + 1).padStart(2, '0')) + "-" +
                            d.getDate() + " " + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
                    },
                    exportOptions: {
                       columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15, 16, 17],
                        format: {
                            body: function ( data, row, column, node ) {
                                return column === 10 || column === 11 || column === 12  || column === 13 || column === 14 || column === 15 || column === 16 ?
                                    returnColor(data) : data.replace(/(<([^>]+)>)/ig,"");
                            }
                        }
                    }
                }],
            });

            table.on('draw', function () {
                $('.livicon').each(function () {
                    $(this).updateLivicon();
                });
            });
        });

        function returnColor(string)
        {
            switch (true) {
                case string.includes("red"):
                    return "red";

                case string.includes("green"):
                    return "green";

                case string.includes("yellow"):
                    return "yellow";

            }

        }

    </script>



@stop