@extends('admin.layouts.default')

@section('title')
    CSS Development
    @parent
@stop

@section('header_styles')
    <link rel="stylesheet" type="text/css"
          href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css"
          rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" rel="stylesheet"/>

    <script>
        $(document).ready(function () {
            $('.corner-cut:nth-child(13)').addClass("active");
            $('.corner-cut-withoutMenu:nth-child(13)').addClass("active");
            $('#analytics').removeClass("hidden_analytics");
            $('#portfolio').removeClass("hide");
            $('#market-share-development').removeClass("hide");
            $('#differentiation').removeClass("hide");
            $('#css_development').removeClass("hide");

        });
        window.onload = function () {
            setTimeout(function () {
                $('#overlay').fadeOut()
            }, 500);
        }
    </script>

@stop

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

        </div>
    </div>
    <div id="overlay">
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <section class="">
        @include('admin.layouts.CDP.cdp_menu')
    </section>

    <section class="cdp-overflow-height">

        <section class="content">
            <div class="row">
                <h3>{{$menu_info[0]['Sold_To_ID'] }} | {{$menu_info[0]['Sold_To_Name'] }} </h3>
                <div class="panel panel-primary">
                    <div class="panel-primary panel-heading">
                        <h4 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="18" data-c="#fff" data-hc="#fff"
                               data-loop="true"></i>
                            Customer Satisfaction Survey Development
                        </h4>
                        {{--                        <span class="pull-right">--}}
                        {{--                                    <i class="fa fa-fw fa-chevron-up clickable"></i>--}}
                        {{--                                    <i class="fa fa-fw fa-times removepanel clickable"></i>--}}
                        {{--                                </span>--}}
                    </div>

                    <table class="table table-striped table-bordered" id="css_customer_satisfaction_table">
                        <thead>
                        <tr>
                            <th>
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box">
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                    </div>
                                </div>
                            </th>
                            <th style="text-align: center;line-height: 6;">
                                Overall Rating
                                Current
                                Survey
                            </th>
                            <th style="text-align: center;line-height: 6;">
                                Overall Rating
                                Previous
                                Survey
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td >
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box" style="background-color: green;">
                                        9-10
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                        Active Advocate<br>Strong Relationship
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_advocate_cs']}}</td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_advocate_ps']}}</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box" style="background-color: green;">
                                        8
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                        Active <br>Healthy Relationship
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_cs']}}</td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_ps']}}</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box" style="background-color: orange;">
                                        7
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                        Passive Supporter<br>Secure
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;line-height: 8;">{{$data['passive_supporter_cs']}}</td>
                            <td style="text-align: center;line-height: 8;">{{$data['passive_supporter_ps']}}</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box" style="background-color: red;">
                                        5-6
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                        Passive Detractor<br>Disengaged
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;line-height: 8;">{{$data['passive_detractor_cs']}}</td>
                            <td style="text-align: center;line-height: 8;">{{$data['passive_detractor_ps']}}</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="cdp_css_dev_box_container">
                                    <div class="cdp_css_dev_box" style="background-color: red;">
                                        1-4
                                    </div>
                                    <div class="cdp_css_dev_category_title">
                                        Active Detractor<br>Business at risk
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_detractor_cs']}}</td>
                            <td style="text-align: center;line-height: 8;">{{$data['active_detractor_ps']}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </section>

@stop


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

        var token = '{{ csrf_token() }}';
        var route_current_date = "{{ route('admin.current_date') }}";
        var cdp_id = "{{$cdp_obj->ID}}";
        var userid = "{{\Cartalyst\Sentinel\Laravel\Facades\Sentinel::getUser()->id}}"
    </script>

    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_overview.js') }}"></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="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    {{--    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_opportunities.js') }}"></script>--}}
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/pareto.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
    <script language="javascript" type="text/javascript"
            src="{{ asset('assets/vendors/select2/js/select2.js') }}"></script>
    {{--    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/crm/actions_edit.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_broadcaster.js') }}"></script>
    {{--    <script type="text/javascript" src="{{ asset('assets/js/pages/cdp_cs_actions.js') }}"></script>--}}

@stop