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

@section('content')

    <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: 18px; margin-bottom: 0px; color: #0038ba; }
        .net-sale .ns-head span{display: block; font-size: 38px; line-height: 1; color: #282828; padding-bottom: 5px; padding-top: 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: 110px;
            margin: 0 auto; margin-top: -15px;
        }
        #widget-meter .needle,
        #widget-meter .needle-center {
            fill: #a6a6a6;
        }
        .label-percent{font-size:18px; 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; display: table; position: relative}
        .title-ach:after, .title-ach:before {
            top: -28px;
            left: -10px;
            content: "0";
            height: 18px;
            width: 20px;
            position: absolute;
            pointer-events: none;
            font-size: 13px; line-height: 1;
            font-weight: bold; opacity: 0.7; font-family: 'Rationale', sans-serif!important;
        }
        .title-ach:before{
            right: -10px; left: auto;
            content: "100";
        }
        .bg-sale-val{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}

        .sm-progress{margin-bottom: 0; margin-top:5px; width: 50px; margin-left: 0;}
        .sm-progress .progress {
            width: 38px;
            height: 38px; margin-top: -3px!important;
        }
        .sm-progress .progress .progress-value .digitVal{font-size: 14px;}
        .sm-progress .progress .progress-bar{border-width: 3px;}
        .sm-progress .progress::after {border-width: 3px;}
        .top-units-list .progressValue{margin-top:5px}
        .top-units-list .progress{margin-bottom: 5px;}


        .Product-row{padding: 5px 8px; margin-bottom: -1px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        }
        .Product-row-title{padding: 8px;}
        .Product-IMG{margin-bottom: -5px}
        .Product-IMG img {width: 35px; height: 35px; border-radius:50%; border: solid 1px #333;}
        .Product-Name{color: #808080; line-height:1;}
        .Product-Name strong{color: #282828; padding-bottom: 3px; display: block}
        ._ITEMNAME{height: auto;}
        .font-no{font-size: 20px; line-height:1}
        .ser-text{font-family:'Poppins', sans-serif; line-height: 1; font-size: 30px; font-weight: 800; color: #ececec; margin-bottom: -5px;}
        .font-no{font-size: 20px; line-height:1; font-family: 'Rationale', sans-serif!important;}

        .ser-text{font-size: 38px}

    </style>

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

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Employee</span></a></li>
                <li><span>Target</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>Employee <span>Target</span></h2></div>
                        <div class="col text-center font14"><strong>Employee: </strong> {{$employee_name}}</div>
                        <div class="col text-right font14"><strong>Month: </strong> {{$month_name}}, {{$dateyear}}</div>
                    </div>
                </div>
                <div class="row m-0">
                    <div class="col-md-4 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">Monthly Sales Target <span id="net_sales_qty"></span></h2>
                                        <div class="ns-head-sm">Remaining: <span id="target_sales_qty"> </span></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="widget-meter"></div>
                        <span class="title-ach"><strong>Achievement</strong></span>
                    </div>

                    <div class="col-4">
                        <div class="row m-0 pt-10">
                            <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>
                    </div>
                </div>


                <div class="row m-0">
                    <div class="col-12"> <hr class="mt-10 mb-10"></div>
                    <div class="col-12">

                        <div class="col-12 p-0 PB-15">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:170px">Unit</div>
                                    <div class="col colStyle h-auto" style="max-width:230px">Target</div>
                                    <div class="col colStyle h-auto" style="max-width:230px">Target in CTNS</div>
                                    <div class="col colStyle h-auto" style="max-width:230px">Achievement</div>
                                </div>
                            </div>

                            @foreach($data as $d)
                            <div class="Product-row set-h-progressRow">
                                <div class="row">

                                    <div class="col colStyle h-auto" style="max-width:170px"><div class="pt-10">
                                        {{($d->unit_name)? $d->unit_name:'Productivity'}}</div></div>

                                    <div class="col colStyle font-no" style="max-width:230px"><div class="pt-10">{{number_format($d->target,2)}} {{($d->unit_id==0)? '%':''}}</div></div>

                                    <div class="col colStyle font-no" style="max-width:230px"><div class="pt-10">{{isset($d->in_carton)? number_format($d->in_carton,2):0}} <small>CTNS</small></div></div>

                                    <div class="col colStyle font-no" style="max-width:230px"><div class="pt-10">{{($d->unit_id!=0)? number_format($d->ach,2):(($d->ach)? number_format($d->ach,2):0.00)}}</div></div>

                                    <div class="col colStyle font-no" style="max-width:100px"><div>
                                            <div class="total-progress sm-progress">
                                                <div class="progress mx-auto" data-value="{{($d->ach<=100)? number_format($d->ach):100}}"><span class="progress-left"> <span class="progress-bar progress-barColor"> </span> </span> <span class="progress-right"> <span class="progress-bar progress-barColor"></span> </span>
                                                    <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                        <div class="digitVal">{{number_format($d->ach)}}<small>%</small></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>





                </div>

            </div>
        </div>
    </div>



@endsection

@section('scripts')
    <script>


        $('#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 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 = '/getTargetSecondaryNetSalesData/{{$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>Units</small>');
            calculateTarget();
        });

        function calculateTarget() {
            var url = '/getTargetSecondarySalesData/{{$id}}/{{$month}}';
            http('GET', url).then((e) => {
                target_sales = parseFloat(e.target_sales);
                var remaining = e.target_sales-net_sales;
                remaining = (remaining>=0)? remaining:0;
                $('#target_sales_qty').html(parseFloat(remaining).toLocaleString(undefined, {maximumFractionDigits: 2}) + ' <small>Units</small>');
                // $('#target_sales_value').html(' <small>Rs.</small> ' + parseFloat(e.target_value).toLocaleString(undefined, {maximumFractionDigits: 2}));

                var ach = 0;
                if(target_sales==0 || net_sales==0)
                    ach =0;
                else
                    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;
                required_run_rate = (required_run_rate>=0)? required_run_rate: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}));
            });
        }



        $(function() {

            $(".progress").each(function() {

                var value = $(this).attr('data-value');
                var left = $(this).find('.progress-left .progress-bar');
                var right = $(this).find('.progress-right .progress-bar');

                if (value > 0) {
                    if (value <= 50) {
                        right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
                    } else {
                        right.css('transform', 'rotate(180deg)')
                        left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
                    }
                }

            })

            function percentageToDegrees(percentage) {
                return percentage / 100 * 360
            }
        });

        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