@extends('layouts.master')
@section('style')
@endsection

@section('content')

{{--{{dd($data)}}--}}
    <style>
        .net-sale .ns-head span, .ns-head-sm span, .overall-tar .overall-val span, .unit-val span, .emp-ach-v span{font-family: 'Rationale', sans-serif!important;}
        .net-sale{width:600px; padding-top:15px; position: relative}
        .net-sale .net-sale-img{position: absolute; top:0; right:25px; height: 68px; width: auto}
        .net-sale .ns-head{font-size: 20px; margin-bottom: 0px;}
        .net-sale .ns-head span{display: block; font-size: 38px; line-height: 1; color: #0038ba; padding-bottom: 5px;}

        .overall-tar{margin:0; line-height: 1}
        .overall-tar h3{font-size: 18px; margin-bottom: 5px}
        .overall-tar .overall-val{font-size:18px}
        .overall-tar .overall-val span{font-size: 30px}
        .unit-val{font-size: 13px; line-height:1; padding: 5px; text-align: center}
        .unit-val span{font-size: 24px; display: block; padding-top: 5px; padding-bottom: 0px;}
        .total-progress {
            padding: 0px; margin-top: -8px;
        }
        .total-progress .progress {
            width: 146px;
            height: 146px;
            background: 0 0;
            position: relative; margin-top: 25px
        }
        .total-progress .progress::after {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 10px solid #eee;
            position: absolute;
            top: 0;
            left: 0
        }
        .total-progress .progress>span {
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            z-index: 1
        }
        .total-progress .progress .progress-left {
            left: 0
        }
        .total-progress .progress .progress-bar {
            width: 100%;
            height: 100%;
            background: 0 0;
            border-width: 10px;
            border-style: solid;
            position: absolute;
            top: 0
        }
        .total-progress .progress .progress-left .progress-bar {
            left: 100%;
            border-top-right-radius: 80px;
            border-bottom-right-radius: 80px;
            border-left: 0;
            -webkit-transform-origin: center left;
            transform-origin: center left
        }
        .total-progress .progress .progress-right {
            right: 0
        }
        .total-progress .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right
        }
        .total-progress .progress .progress-value {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5
        }
        .total-progress .progress .progress-value .digitVal {
            font-family: Rationale, sans-serif!important;
            font-size: 40px;
            font-weight: normal;
            letter-spacing: normal;
            color: #0038ba; line-height:1; text-align: center
        }
        .total-progress .progress .progress-value .digitVal span {
            font-family: 'proximanova-semibold;', sans-serif !important;
            font-size: 15px; letter-spacing: 1px;
            color: #282828; display: block;
        }
        .total-progress .progress-bar {
            background: linear-gradient(90deg, #fff 0, #fff 100%)!important
        }
        .total-progress .progress-barColor {
            border-color: #0038ba
        }
        .emp-ach-v{font-size: 15px; letter-spacing: 1px; line-height: 1; border: solid 1px #e5e5e5; padding: 9px 6px 7px 6px; margin-top: 4px; margin-bottom: 6px;}
        .emp-ach-v span{font-size: 22px; float: right;}
        .emp-ach-v img{width: 22px; height: 22px; margin-left: 5px; margin-right:5px;}

        ._report-Head .nav-pills .nav-link {
            padding: 10px 25px; font-size: 15px}
        .nav-pills .nav-link.active ._cus-val, .nav-tabs .nav-link.active ._cus-val {
            color: #fff;
            background-color: #0038ba;
        }

        .nav-pills .nav-link ._cus-val, .nav-tabs .nav-link ._cus-val {
            background-color: #e2e9fb;
            color: #7f8998;
            font-size: 10px;
            padding: 3px 4px 2px 4px;
            height: 16px;
            margin-top: 3px;
            margin-left: 5px;
            font-family: proximanova-light, sans-serif;
            border-radius: 5px;
            display: inline-block;
            line-height: 1;
        }
        .target-tab{
            height: 50px; margin-top: 20px; padding-top: 5px; background-color: #f9f9f9; position:relative;
        }
        .Product-row{padding: 8px; margin-bottom: 10px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        }
        .Product-row-title{padding: 8px;}
        .Product-IMG img {width: 32px; height: 32px;}
        ._ITEMNAME{height: auto;}
        @media (max-width:1280px) {.net-sale {width: 545px}
            .emp-ach-v{font-size: 14px;}
        }

        #widget-meter {
            width: 130px;
            margin: 0 auto;
        }
        #widget-meter .needle,
        #widget-meter .needle-center {
            fill: #a6a6a6;
        }
        .label-percent{font-size:22px; fill:#0038ba; padding-top: 25px;font-family: 'Rationale', sans-serif!important;}
        .title-ach{font-size: 13px; letter-spacing: 1px; display: block; margin: auto; text-align: center; margin-top: 5px;}
        .bg-sale-val{border-bottom: solid 1px #e5e5e5; padding-bottom:5px; margin-bottom: 5px;}

        .ns-head-sm{font-size: 14px; display: block}
        .ns-head-sm span{font-size:22px; line-height: 1;}
        .ns-head-sm2{font-size: 13px; display: block}
        .ns-head-sm2 span{font-size:18px; line-height: 1; padding-top: 8px}
        .un-color{color: #0038ba}
    </style>


    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">KPI <span> Management</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>KPI</span></a></li>
                <li><span>Target Achivement</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="card PB-20">

                <div class="header PT-15 PB-15">
                    <div class="row">
                        <div class="col"><h2>Overall <span>Target</span></h2></div>
{{--                        <div class="col text-center font14"><strong>Type: </strong> Product Wise</div>--}}
                        <div class="col text-right font14"><strong>Month: </strong> {{Date('M, Y', strtotime('01-'.$month))}}</div>
                    </div>
                </div>
                <div class="row m-0">
                    <div class="col-auto pr-0">
                        <div class="net-sale">

                            <div class="col-12 bg-sale-val">
                                <div class="row">
                                    <div class="col-5 pl-0">
                                        <h2 class="ns-head">NET SALES <span id="net_sales_qty"> </span></h2>
                                        <div class="ns-head-sm"><span id="net_sales_value"></span></div>
                                    </div>
{{--                                    <div class="col unit-val">Carton<span class="un-color" id="net_sales_ctn_qty"></span>--}}
{{--                                        <div class="ns-head-sm2"><span id="net_sales_ctn_value"></span></div>--}}
{{--                                    </div>--}}
{{--                                    <div style="display: none" class="col unit-val">Dozen<span class="un-color" id="net_sales_dz_qty"></span>--}}
{{--                                        <div class="ns-head-sm2"><span id="net_sales_dz_value"></span></div>--}}
{{--                                    </div>--}}
{{--                                    <div style="display: none" class="col unit-val">Half Dozen<span class="un-color" id="net_sales_hdz_qty"></span>--}}
{{--                                        <div class="ns-head-sm2"><span id="net_sales_hdz_value"></span></div>--}}
{{--                                    </div>--}}
                                </div>
                            </div>

                            <div class="row overall-tar">
                                <div class="col-5 pl-0">
                                    <h3>Overall Target</h3>
                                    <span class="overall-val"> <span id="target_sales_qty"></span></span>
                                    <div class="ns-head-sm"><span style="padding-top:5px; display:block" id="target_sales_value"></span></div>
                                </div>
{{--                                <div class="col unit-val">Carton<span class="un-color" id="target_sales_ctn_qty"></span>--}}
{{--                                    <div class="ns-head-sm2"><span id="target_sales_ctn_value"></span></div>--}}
{{--                                </div>--}}
{{--                                <div style="display: none" class="col unit-val">Dozen<span class="un-color" id="target_sales_dz_qty"></span>--}}
{{--                                    <div class="ns-head-sm2"><span id="target_sales_dz_value"></span></div>--}}
{{--                                </div>--}}
{{--                                <div style="display: none" class="col unit-val">Half Dozen<span class="un-color" id="target_sales_hdz_qty"></span>--}}
{{--                                    <div class="ns-head-sm2"><span id="target_sales_hdz_value"></span></div>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div id="widget-meter"></div>
                        <span class="title-ach"><strong>Target ACH</strong></span>
                    </div>
                    <div class="col">
                        <div class="row m-0 pt-10">
                            <div class="col-12 emp-ach-v"><img src="images/gross-chart-icon.svg" alt=""> Gross Value: <span id="gross_sale"></span></div>
                            <div class="col-12 emp-ach-v"><img src="images/quarter-icon.svg" alt=""> Daily Run Rate: <span id="daily_run_rate"></span></div>
                            <div class="col-12 emp-ach-v"><img src="images/bar-chart-icon.svg" alt=""> Required Run Rate: <span  id="required_run_rate"></span></div>
                            <div class="col-12 emp-ach-v"><img src="images/line-chart-icon.svg" alt=""> Projected Sales: <span id="projected_run_rate"></span></div>
                        </div>
                    </div>
                </div>


                <div class="row m-0">
                    <div class="col-12"> <hr class="mt-10 mb-10"></div>
                    <div class="col-12">
                        <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                            <thead>
                            <tr>
                                <th>SKU</th>
                                <th>Product Name</th>
                                <th>Primary Unit</th>
                                <th>Brand</th>
                                <th>Division </th>
                                <th>Target</th>
                                <th>Target Value</th>
                                <th>Net Sale</th>
                                <th>Sale Value</th>
                                <th>Achivement</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($data as $key => $value)
                                <tr>
                                    <td>{{$value->sku}}</td>
                                    <td>{{$value->item_name}}</td>
                                    <td>{{$value->primary_unit}}</td>
                                    <td>{{$value->brand_name}}</td>
                                    <td>{{$value->division_name}}</td>
                                    <td>{{number_format($value->target,2)}}</td>
                                    <td>{{number_format($value->target_value,2)}}</td>
                                    <td>{{number_format($value->net_sale,2)}}</td>
                                    <td>{{number_format($value->net_value,2)}}</td>
                                    <td>{{number_format($value->ach,2).'%'}}</td>

                                </tr>
                           @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>


@endsection

@section('scripts')
    <script>
        var net_sales = 0 ;
        var target_sales = 0 ;

        function dashWidgetMeter(value) {
            var el = d3.select('#widget-meter');

            var needle, barWidth, chart, chartInset, degToRad, repaintGauge,
                height, numSections, padRad, percToDeg, percToRad,
                percent, radius, svg, totalPercent, width;

            percent = value;
            numSections = 2;
            sectionPerc = 1 / numSections / 2;
            padRad = 0;
            chartInset = 0;

            // Orientation of gauge:
            totalPercent = .75;


            //width = el[0][0].offsetWidth - margin.left - margin.right;
            width = 100;
            height = width;
            radius = Math.min(width, height) / 2;
            barWidth = 80 * width / 360;

            var color = d3.scale.linear()
                .domain([0, 1, 1])
                .range(['#656565', '#24b314', '#656565']);

            /*
                   Utility methods
                   */
            percToDeg = function (perc) {
                return perc * 360;
            };

            percToRad = function (perc) {
                return degToRad(percToDeg(perc));
            };

            degToRad = function (deg) {
                return deg * Math.PI / 180;
            };

            // Create SVG element
            svg = el.append('svg').attr('viewBox', '0 0 ' + width + ' ' + height);

            // Add layer for the panel
            chart = svg.append('g').attr('transform', "translate(" + (width / 2) + ", " + (75) + ")");
            var arcFilled = chart.append('path').attr('class', "arc chart-filled"),
                arcEmpty = chart.append('path').attr('class', "arc chart-empty"),
                labelGroup = svg.append('g'),
                percLabel = svg.append('text')
                    .attr('class', 'label-percent')
                    .text(Math.round(percent * 100) + '%'),
                percLabelBBox = percLabel.node().getBBox();

            percLabel
                .attr('x', (width / 2) - (percLabelBBox.width / 2))
                .attr('y', 100);

            arc2 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth);
            arc1 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth);


            repaintGauge = function (perc) {
                var next_start = totalPercent,
                    arcStartRad1 = percToRad(next_start),
                    arcEndRad1 = arcStartRad1 + percToRad(perc / 2);

                arc1.startAngle(arcStartRad1).endAngle(arcEndRad1);

                next_start += perc / 2;

                arcStartRad2 = percToRad(next_start);
                arcEndRad2 = arcStartRad2 + percToRad((1 - perc) / 2);

                arc2.startAngle(arcStartRad2 + padRad).endAngle(arcEndRad2);

                arcFilled.attr('d', arc1)
                    .attr("fill", function () {
                        //console.log('color = ' + color(Math.round(perc * 100)));
                        return color(perc);
                    });
                arcEmpty.attr('d', arc2);

            };


            var Needle = (function () {

                /**
                 * Helper function that returns the `d` value
                 * for moving the needle
                 **/
                var recalcPointerPos = function (perc) {
                    var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
                    thetaRad = percToRad(perc / 2);
                    centerX = 0;
                    centerY = 0;
                    topX = centerX - this.len * Math.cos(thetaRad);
                    topY = centerY - this.len * Math.sin(thetaRad);
                    leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
                    leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
                    rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
                    rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
                    return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;
                };

                function Needle(el) {
                    this.el = el;
                    this.len = width / 2;
                    this.radius = this.len / 8;
                }

                Needle.prototype.render = function () {
                    this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
                    return this.el.append('path').attr('class', 'needle').attr('d', recalcPointerPos.call(this, 0));
                };

                Needle.prototype.moveTo = function (perc) {
                    var self = this;
                    //oldValue = this.perc || 0;

                    this.perc = perc;
                    // Reset pointer position
                    //this.el.transition().ease('quad').duration(200).select('.needle').tween('reset-progress', function () {
                    //    return function (percentOfPercent) {
                    //        var progress = (1 - percentOfPercent) * oldValue;
                    //
                    //        //repaintGauge(progress);
                    //        return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
                    //    };
                    //});

                    this.el.transition().duration(1500).select('.needle').tween('progress', function () {
                        return function (percentOfPercent) {
                            var progress = percentOfPercent * perc;

                            repaintGauge(progress);
                            return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
                        };
                    });

                };

                return Needle;

            })();

            needle = new Needle(chart);
            needle.render();
            needle.moveTo(percent);
        }

        var url = '/getTargetAreaNetSalesData/{{$area_id}}/{{$month}}';
        http('GET', url).then((e) => {
            net_sales = parseFloat(e.net_sales);
            $('#net_sales_qty').html(parseFloat(e.net_sales).toLocaleString(undefined, { maximumFractionDigits: 2 })+' <small>CTNs</small>');
            $('#net_sales_value').html(' <small>Rs.</small> '+parseFloat(e.net_value).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            $('#gross_sale').html(parseFloat(e.gross_sale).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            //$('#net_sales_ctn_qty').html(parseFloat(e.ctn_qty).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            //$('#net_sales_ctn_value').html(' <small>Rs.</small> '+parseFloat(e.ctn_value).toLocaleString(undefined, { maximumFractionDigits: 2 }));
           // $('#net_sales_dz_qty').html(parseFloat(e.dz_qty).toLocaleString(undefined, { maximumFractionDigits: 2 }));
           // $('#net_sales_dz_value').html(' <small>Rs.</small> '+parseFloat(e.dz_value).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            //$('#net_sales_hdz_qty').html(parseFloat(e.hdz_qty).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            //$('#net_sales_hdz_value').html(' <small>Rs.</small> '+parseFloat(e.hdz_value).toLocaleString(undefined, { maximumFractionDigits: 2 }));
            calculateTarget();
        });

        function calculateTarget() {
            var url = '/getTargetAreaSalesData/{{$area_id}}/{{$month}}';
            http('GET', url).then((e) => {
                target_sales = parseFloat(e.target_sales);
                $('#target_sales_qty').html(parseFloat(e.target_sales).toLocaleString(undefined, {maximumFractionDigits: 2}) + ' <small>CTNs</small>');
                $('#target_sales_value').html(' <small>Rs.</small> ' + parseFloat(e.target_value).toLocaleString(undefined, {maximumFractionDigits: 2}));

                // $('#target_sales_ctn_qty').html(parseFloat(e.ctn_qty).toLocaleString(undefined, {maximumFractionDigits: 2}));
                // $('#target_sales_ctn_value').html(' <small>Rs.</small> ' + parseFloat(e.ctn_value).toLocaleString(undefined, {maximumFractionDigits: 2}));
                // $('#target_sales_dz_qty').html(parseFloat(e.dz_qty).toLocaleString(undefined, {maximumFractionDigits: 2}));
                // $('#target_sales_dz_value').html(' <small>Rs.</small> ' + parseFloat(e.dz_value).toLocaleString(undefined, {maximumFractionDigits: 2}));
                // $('#target_sales_hdz_qty').html(parseFloat(e.hdz_qty).toLocaleString(undefined, {maximumFractionDigits: 2}));
                // $('#target_sales_hdz_value').html(' <small>Rs.</small> ' + parseFloat(e.hdz_value).toLocaleString(undefined, {maximumFractionDigits: 2}));

                var ach = 0;
                ach = net_sales / target_sales;
                if (ach > 1)
                    ach = 1;
                dashWidgetMeter(ach);
                //calculate Run rates Section
                var daily_run_rate = ({{$month_passed_days}}> 0
            )
                    ? net_sales /{{$month_passed_days}}: 0;
                var required_run_rate = ({{$month_remaining_days}}> 0
            )
                    ? (target_sales - net_sales) /{{$month_remaining_days}}: 0;
                var projected_run_rate ={{$month_working_days}}*
                daily_run_rate;

                $('#daily_run_rate').html(daily_run_rate.toLocaleString(undefined, {maximumFractionDigits: 2}));
                $('#required_run_rate').html(required_run_rate.toLocaleString(undefined, {maximumFractionDigits: 2}));
                $('#projected_run_rate').html(projected_run_rate.toLocaleString(undefined, {maximumFractionDigits: 2}));
            });
        }

        $('#datepicker2').datepicker({
            autoclose: true,
            minViewMode: 1,
            format: 'mm/yyyy'
        }).on('changeDate', function(selected){
            startDate = new Date(selected.date.valueOf());
            startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
            $('.to').datepicker('setStartDate', startDate);
        });

        $('.form-control').on('focus blur', function (e) {
            $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
        })
            .trigger('blur');

        $(document).ready(function () {
            $('#SN-close, .overlay-blure').on('click', function () {
                $('#_subNav-id').removeClass('active');
                $('#blureEffct').removeClass('blur-div');
                $('body').removeClass('no-scroll')
            });
            $('#sidebar-menu').on('click', function () {
                $('#_subNav-id').addClass('active');
                $('#blureEffct').addClass('blur-div');
                $('body').addClass('no-scroll')
            });


            $('#modalClose').on('click', function () {
                $('#modalWindow').removeClass('modalShow');
            });
            $('#modalShow').on('click', function () {
                $('#modalWindow').addClass('modalShow');
            });

            $('#modalExpand-btn').click(function(){
                $("#modalWindow").toggleClass("modalExpand");
                $('i').toggleClass('fa-expand fa-compress');
            });

            $('#pl-close, .overlay-blure').on('click', function () {
                $('#product-cl-sec').removeClass('active');
                $('#blureEffct').removeClass('blur-div');
                $('body').toggleClass('no-scroll');
                $('i').toggleClass('fa-arrow-left  fa-arrow-right')
            });

            $('#productlist01').on('click', function () {
                $('#product-cl-sec').addClass('active');
                $('#blureEffct').addClass('blur-div');
                $('body').toggleClass('no-scroll');
                $('i').toggleClass('fa-arrow-left  fa-arrow-right')

            });

        });

        $(".formselect").select2();

        $(document).ready(function() {
            $('#example, #example2, #example3, #example4').DataTable();
        });

        $('#example2').dataTable( {
            "paging": false
        } );

        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }

        function notification(type, message) {
            var bgColor = (type == 'error') ? 'red' : 'green';
            var el = $('#notifDiv');
            el.fadeIn();
            el.css('background', bgColor);
            el.text(message);
            setTimeout(() => {
                el.fadeOut();
            }, 3000);
        }




    </script>
@endsection