@extends('admin.layouts.default')

@section('title')
    @lang('CDP/cdp_opportunities.page_title')
    @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(6)').addClass("active");
            $('.corner-cut-withoutMenu:nth-child(6)').addClass("active");

        });
        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>
        @include('admin.layouts.CDP.cdp_menu')
    </section>

    <section class="cdp-overflow-height">
        <div><h3>{{$menu_info[0]['Sold_To_ID'] }} | {{$menu_info[0]['Sold_To_Name'] }} </h3></div>
        <div class="content-header radius-border">
            <h3>Opportunities</h3>
        </div>
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel-body">

                        <div id="approve_opportunity_success" class="alert alert-success hide">

                        </div>

                        <div id="approve_opportunity_error" class="alert alert-danger hide">

                        </div>
                        <div class="" style="display: inline-block;width: 221px;float: left;">
                            <label for="archiv" style="font-weight: 300">Show archive</label>
                            <select id="archiv" class=" input-sm" name="archiv">
                                <option value="no">No</option>
                                <option value="yes">Yes</option>
                            </select>
                        </div>

                        <table class="table table-striped table-bordered" id="cdp_opportunity_list"
                               style="width: auto;table-layout: auto; overflow: scroll;">
                            <thead>
                            <tr>
                                <th>Actions</th>
                                <th>CDP Target</th>
                                <th>Opportunity No</th>
                                <th>Entry Date</th>
                                <th>Owner</th>
                                <th>Opportunity Name</th>
                                <th>Customer (SoldTo)</th>
                                <th>Country</th>
                                <th>Market Segment L1</th>
                                <th>Market Segment Flex</th>
                                <th>Plant</th>
                                <th>ProdHL1</th>
                                <th>ProdHL2</th>
                                <th>ProdHL3</th>
                                <th>ProdHL4</th>
                                <th>ProdHL5</th>
                                <th>ProdHL6</th>
                                <th>Status</th>
                                <th>Opportunity Type</th>
                                <th>Expected Implementation</th>
                                <th>Actual Implementation</th>
                                <th>Sales Revenues</th>
                                <th>CM</th>
                                <th>GM</th>
                                <th>EBITDA</th>
                                <th>Last update</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <a @if(!$disable)  data-toggle="modal" data-target="#opportunity_popup"
           href="{{ route('admin.opportunity_new')."?popup=1"."&customer=". urlencode($customer_ID) . "&country=" . urlencode($country) }}" @endif
           type="button" class="btn btn-primary btn-sm  @if($disable) cursor_default @endif"
           id="addButton" style="margin-left: 35px">Add New Opportunity
        </a>

        <a href="{{route('admin.cdp.opportunities', $cdp_id)}}">
            <button @if($disable) disabled @endif id="dummy_submit_btn" style="border: none;width: 170px;height: 31px;line-height: 30px;border-radius: 3px;color: white;display: inline-block;background-color: #70ad47;
margin: 0 0 0  10px;padding: 0;top: 2px;position: relative;" type="submit">@lang('button.save')
            </button>
        </a>
    </section>
    <div class="modal fade" id="opportunity_popup" role="dialog" aria-labelledby="user_delete_confirm_title"
         aria-hidden="true">
        <div style="width: 80%" class="modal-dialog">
            <div class="modal-content"></div>
        </div>
    </div>
    <div class="modal fade" id="delete_confirm" 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_select_country = "{{ route('admin.select_country') }}";
        var route_assign_target = '{{route("admin.cdp.assign_target_toOpportunity", $cdp_id)}}';
        var route_color_opportunities = '{{route("admin.cdp.ajax.get_color_opportunities", $cdp_id)}}';
        var token = '{{ csrf_token() }}';
        var route_select_comp = "{{ route('admin.select_comp') }}";
        {{--var route_prod4 = "{{ route('admin.opportunity.get_prod4') }}";--}}
        {{--var route_prod5 = "{{ route('admin.opportunity.get_prod5') }}";--}}
        var route_stages = "{{ route('admin.opportunity.get_stages') }}";
        var route_current_date = "{{ route('admin.current_date') }}";
        var cdp_id="{{$cdp_obj->ID}}";
        var userid="{{\Cartalyst\Sentinel\Laravel\Facades\Sentinel::getUser()->id}}"
        var prospect = "{{json_encode([])}}"; // bc of js error
        var new_opportunity = @if(isset($new_opportunity))"{{json_encode($new_opportunity)}}" @else "{{json_encode([])}}" @endif;
        var route_prod_hierarchy = "{{ route('admin.opportunity.get_prod_hierarchy') }}";
        var ID_LEAKAGE = "{{\App\Models\Opportunity_Type::LEAKAGE}}";
        var ID_PRICING = "{{\App\Models\Opportunity_Type::PRICING}}";
        var route_calculate_procent = "{{ route('admin.opportunity.get_percentage') }}";

    </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="{{ 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 type="text/javascript" src="{{ asset('assets/js/pages/opportunity.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/new_opportunity.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>
        $(document).ready(function () {
            var dataTableLang = "{{json_encode(__('dataTable'))}}";
            var dataTableArray = dataTableLang;
            dataTableArray = dataTableArray.replace(/&quot;/g, '"');
            dataTableArray = JSON.parse(dataTableArray);

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

             table = $('#cdp_opportunity_list').DataTable({
                processing: true,
                serverSide: true,
                cache: false,
                "scrollX": true,
                ajax: {
                    url: '{{route('admin.cdp.opportunities_list_data', $cdp_id)}}',
                    data: function (d) {
                        d.archiv = $("#archiv").val();
                    }
                },
                columns: [
                    {data: 'actions', name: 'actions', orderable: false, searchable: false},
                    {data: 'targets', name: 'target', orderable: false, searchable: false},
                    {data: 'ID', name: 'ID'},
                    {data: 'Entry_Date', name: 'Entry_Date'},
                    {data: 'Owner', name: 'Owner'},
                    {data: 'Opportunity_Name', name: 'Opportunity_Name'},
                    {data: 'Sold_To_Name', name: 'Sold_To_Name'},
                    {data: 'Country', name: 'Country'},
                    {data: 'Market_Segment_L1', name: 'Market_Segment_L1'},
                    {data: 'Market_Segment_Flex', name: 'Market_Segment_Flex'},
                    {data: 'manufacturing_plant', name: 'manufacturing_plant'},
                    {data: 'Prodh_L1', name: 'Prodh_L1'},
                    {data: 'Prodh_L2', name: 'Prodh_L2'},
                    {data: 'Prodh_L3', name: 'Prodh_L3'},
                    {data: 'Prodh_L4', name: 'Prodh_L4'},
                    {data: 'Prodh_L5', name: 'Prodh_L5'},
                    {data: 'Prodh_L6', name: 'Prodh_L6'},
                    {data: 'Status', name: 'Status'},
                    {data: 'Type', name: 'Type'},
                    {data: 'Expected_Implementation', name: 'Expected_Implementation'},
                    {data: 'Actual_Implementation', name: 'Actual_Implementation'},
                    {data: 'Sales_Revenues', name: 'Sales_Revenues'},
                    {data: 'CM_EUR', name: 'CM_EUR'},
                    {data: 'GM_EUR', name: 'GM_EUR'},
                    {data: 'EBITDA_EUR', name: 'EBITDA_EUR'},
                    {data: 'updated_at', name: 'updated_at'},
                ]
            });


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

             dataTable_for_approval = '#cdp_opportunity_list';

        });

    </script>
{{--    <script language="javascript" type="text/javascript" src="{{asset('assets/js/pages/opportunity_approval.js')}}"></script>--}}

@stop