@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    Demand Edit List
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <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/vendors/jasny-bootstrap/css/jasny-bootstrap.css') }}" rel="stylesheet"
          type="text/css"/>
    <link href="{{ asset('assets/css/pages/tables.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/app.css') }}" rel="stylesheet" type="text/css"/>
@stop

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

        </div>
    </div>
    <section class="content-header">
    </section>

    <!-- 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>
                        Demand Edit List
                    </h4>
                    <span class="pull-right">
                            <a href="{{ route('admin.demand.new_demand') . "?action=prospect" }}" type="button"
                               class="btn btn-primary btn-sm"
                               id="addButton" style="border: 1px solid #fff;">
                                Add New Demand (Prospect)</a>
                                </span>
                </div>
                <br/>

                <div class="" style="padding-left: 15px">
                    <label for="owner" style="font-weight: 300">Owner</label>
                    <select id="owner" class="input-sm" name="owner">
                        <option value=""></option>
                        @foreach ($owners as $sales_representative)
                            <option value="{{ $sales_representative->ID }}">
                                {{ $sales_representative->Employee_Name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered width100" id="demand">
                            <thead>
                            <tr class="filters">
                                <th>Actions</th>
                                <th>Quantitative Targets</th>
                                <th>Competitive Landscape</th>
                                <th>Entry Date</th>
                                <th>Owner</th>
                                <th>Entity</th>
                                <th>Customer (SoldTo)</th>
                                <th>Customer ID</th>
                                <th>Country</th>
                                <th>Global Region</th>
                                <th>Region</th>
                                <th>Group Account</th>
                                <th>Gross Sales (PY)</th>
                                <th>Total Demand (CY)</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>    <!-- row-->
    </section>

@stop

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

    <script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.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 language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/demand_entry.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>
    <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>
    <script>
        $(function () {
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });
        });
    </script>
    <script>

        var show_export= "{{\App\Models\Role_Permission::hasExportPermission()}}";

        $(function () {
            var ownerSelect = $("#owner").val();

            var table = $('#demand').DataTable({
                processing: true,
                serverSide: false,
                ajax: {
                    url: '{!! route('admin.demand_data') !!}',
                    data: function (d) {
                        d.owner = ownerSelect;
                    }
                },
                columns: [
                    {data: 'action', orderable: false, className: "hide_sorting", name: 'Actions', searchable: false},
                    {
                        data: 'quantitative_targets_color_coding',
                        className: "color_check_financial",
                        name: 'quantitative_targets_color_coding',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'competitive_landscape_color_coding',
                        className: "color_check_financial",
                        name: 'competitive_landscape_color_coding',
                        orderable: false,
                        searchable: false
                    },
                    {data: 'Entry_Date', name: 'Entry_Date'},
                    {data: 'Owner', name: 'Owner'},
                    {data: 'Entity', name: 'Entity'},
                    {data: 'Customer_Name', name: 'Customer_Name'},
                    {data: 'Customer_ID', name: 'Customer_ID'},
                    {data: 'Country', name: 'Country'},
                    {data: 'Global_Region', name: 'Global_Region'},
                    {data: 'Region', name: 'Region'},
                    {data: 'Customer_Group', name: 'Customer_Group'},
                    {data: 'Gross_Sales_PY', name: 'Gross_Sales_PY'},
                    {data: 'Total_Demand_CY', name: 'Total_Demand_CY'}
                ],
                dom: 'lBfrtip',
                buttons: [{
                    className: "export_opportunity",
                    extend: 'excelHtml5',
                    text: 'Export',
                    title: '',
                    filename: function () {
                        var d = new Date();
                        return 'demand_edit_list' + 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],
                        format: {
                            body: function (data, row, column, node) {
                                return column === 0 || column === 1 ?
                                    returnColor(data) : data.replace(/(<([^>]+)>)/ig, "");
                            }
                        }
                    }
                }],
                "iDisplayLength": 100
            });

            //disable export functionality for users that do not have the permission to see it
            if (show_export!="1")
                table.buttons( '.export_opportunity' ).remove();
            table.on('draw', function () {
                $('.livicon').each(function () {
                    $(this).updateLivicon();
                });
            });

            $('#owner').change(function () {
                ownerSelect = $(this).val();
                table.ajax.reload();
            });


            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