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

@section('content')

    <style>
        .dataTable td, .modal-body table td{padding: 3px 5px; vertical-align: middle;}
        .dataTable td .btn-default {margin-bottom: 0}
        .criteria-radio{font-size: 14px; line-height: 1.9; margin-top: 5px;}
        .heading{font-size: 16px; padding-top: 8px;}
        .heading span{ font-family: 'proximanova-light', sans-serif !important;	font-weight: normal;}
        .se_cus-type{padding: 0 15px 10px 15px;}

        .se_cus-type .form-control, .se_cus-type .form-s2 .select2-container .select2-selection--single {
            border: 1px solid #eeeeee;
            background-color: #fff;
        }

        .report-filters {right: 55px}
        .report-state ._head01{font-size: 15px}
        .report-state ._head01 .fa{color:#36b4e5; margin-right:5px}

        .profile-center .nav-pills .nav-link, ._report-Head .nav-pills .nav-link {
            padding: 15px 25px; font-size: 16px}


        .itemQTY {
            font-size: 12px;
            width: 70px;
            padding: 0px 5px;
            border: solid 1px #e6e6e6
        }
        .itemIMG {
            width: 32px;
            height: 32px;
            border: solid 1px #e5e5e5;
            margin-top: -5px;
            margin-bottom: -5px;
            margin-right: 5px;
            float: left
        }
        .productSearch {
            position: relative; margin-top: 10px;
        }
        .productSearch input {
            height: 32px;
            border: solid 1px #eae9e9;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            padding-left: 30px;
            font-size: 13px;
            letter-spacing: 1px;
        }
        .productSearch .fa {
            position: absolute;
            top: 8px;
            left: 8px;
            color: #b5b5b5;
        }
        .AddProductTable {
            padding: 0;
            margin: 0; font-size: 13px;
        }
        .AddProductTable tr {
            border-bottom: solid 1px #eeeeee
        }
        .AddProductTable td {
            padding-bottom: 5px;
            padding-top: 5px
        }
        .AddProductTable th { background-color: #efefef}
        .ProListDiv {
            padding: 0;
            display: table;
        }
        .ProListDiv .PR_Name {
            display: table-cell;
            vertical-align: middle;
            font-size: 13px;
            letter-spacing: 1px;
            line-height: 16px
        }
        .ProListDiv .PrList_img {
            width: 35px;
            height: 35px;
            margin-right: 8px;
            border: solid 1px #e0e0e0
        }
        .AddProductTable .btn-default {
            padding: 5px 8px;
            font-size: 13px;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            -khtml-border-radius: 0;
            background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
            color: #fff;
            text-align: center;
            margin: 0;
            line-height: 1;
            min-width: 74px;
            letter-spacing: 1px;
            float: right;
            border: none!important
        }
        .AddDetailPR {
            padding: 25px;
            font-size: 14px
        }
        .AddDetailPR .form-control {
            height: 32px;
            border: solid 1px #dedede;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            padding: 0px 10px;
            font-size: 13px;
            letter-spacing: 1px;
        }
        .AddDetailPR select {
            border-radius: 0;
            padding: 0px 10px;
            height: 32px;
            border: solid 1px #dedede;
            font-size: 14px
        }
        .pc-cartlist{padding-bottom: 38px}
        .target-tab{height: 56px; background-color: #ffffff; margin-top: 15px; position:relative;}
        .addnew-btn{position: absolute; top:10px; right:0; padding-left: 10px; padding-right: 10px; font-size: 12px; }
        .set-unit-value{padding: 0 30px;}
        .set-unit-value .tar-qtn{background-color: #f1f1f1; border-bottom: solid 1px #fff; padding-top: 5px; padding-bottom: 5px;}
        .set-unit-value .unit-name{	background-color: #fafafa; padding-top: 16px; padding-bottom: 8px; line-height: normal}
        .set-unit-value .heaing-sec{font-size: 13px;border-bottom: solid 2px #0038ba; padding-top: 13px; padding-bottom: 8px;}
        .set-unit-value .unit-row{font-size: 13px; border-bottom: solid 1px #eaeaea;}
        .set-unit-value .unit-row .btn-primary{font-size: 11px; letter-spacing: 1px; padding: 5px 12px; margin-top: 7px; margin-right: 5px; width: 65px;}
        .set-unit-value .unit-row .red-bg{border-color: #f12300!important; width: auto}
        .set-unit-value .form-control{font-size: 13px; border: solid 1px #fff; border-bottom: solid 2px #fff; height: 28px; box-shadow: none; line-height: 30px!important;}
        .set-unit-value .form-control:focus{border: solid 1px #fff!important; border-bottom: solid 2px #0038ba!important;}

        .target-Head .nav-tabs{border-bottom:solid 2px #dcdcdc}
        .target-Head .nav-tabs .nav-link, .target-Head .nav-tabs .nav-item.show .nav-link, .target-Head .nav-tabs .nav-link.active{
            padding: 15px 30px;
            height: 54px;

            box-shadow:none;
            font-size: 15px;
            font-weight: 600; color: #777; margin-bottom: -2px;
        }
        .target-Head .nav-tabs .nav-link:focus, .target-Head .nav-tabs .nav-link:hover{color: #282828;}
        .target-Head .nav-tabs .nav-item.show .nav-link, .target-Head .nav-tabs .nav-link.active{color: #0038ba;}
        .emp-img-div {
            padding: 5px 0 5px 0;
            display: table;
        }
        .emp-img-div .emp_img {
            width: 30px;
            height: 30px;
            margin-right: 10px; margin-left: 5px;
            border-radius: 50%;
            border: solid 1px #0038ba;
        }
        .emp-img-div .PR_Name {
            display: table-cell;
            vertical-align: middle;
            letter-spacing: 1px;
            line-height: 16px;
        }
        .targetQty{font-size: 13px; height: 26px; box-shadow: none; width: 90px; padding-left: 10px; padding-right: 10px;}

        .topstats{margin-top: 5px; font-size: 14px;}
        .topstats .gary-box{line-height: 1;background-color: #f9f9f9;border-bottom: solid 1px #d1d1d1;padding: 10px;letter-spacing: 1px;}
        .topstats .gary-box span{font-family: 'Rationale', sans-serif; color:#0038ba; font-size: 22px; float: right; margin-top: -4px;}
        .target-val{font-size: 13px; padding-top:10px; padding-bottom: 10px;}
        .target-val span{display: block}
        .target-val .tar-val{font-family: 'Rationale', sans-serif; color:#0038ba; font-size: 24px; border-bottom: solid 1px #b3b3b3;
            display: inline-block; line-height: 1; padding-top: 5px; padding-bottom: 3px;}
        .target-val .tar-val small{color: #282828}
        .border-right{border-right: solid 1px #f3f3f3}
        .target-val .unit-title{display:block;font-size:15px}
        .gr-val{font-family: 'Rationale', sans-serif;  font-size: 18px;
            display: inline-block; line-height: 1; }


        ._cust_filter{width:210px; padding-right:10px;}
        ._cust_filter .select2-container .select2-selection--single {height: 32px!important;}
        ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 30px;}
        ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 32px;}
        .CL-Product{padding-right: 10px; width: 170px}
        .Product-Filter .btn-primary {margin:0px; letter-spacing: 1px; float: left; box-shadow: none}
        .table td, .table th{padding: 8px!important}
        .addpr {
            padding: 4px 12px;
            font-size: 12px;
            cursor: pointer;
        }
        .input-group-text, .custom-file-label:after {
            border-radius: 0 !important;
        }

        .input-group>.custom-file:not(:first-child) .custom-file-label {
            font-size: 14px;
            letter-spacing: normal;
            height: 37px;
            overflow: hidden;
            line-height: 27px;
        }
        .fs-label-wrap {
            background-color: #fff;
            height: 32px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid #dedede;
        }
        .fs-dropdown {
            width: 230px;
        }

    </style>

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

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

    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header-tabs">
                        <div class="Product-Filter">
                            <div class="row">
                                <div class="col-12">
                                    <div class="CL-Product"><i class="fa fa-calendar-alt"></i>
                                        <input type="text" autocomplete="off" id="month" class="form-control"  placeholder="Chose Month">
                                    </div>
                                    <input type="hidden" id="designation_flag" value="{{Auth::user()->employee_designation_flag}}">
                                    @if(Auth::user()->employee_designation_flag == '3') {{-- TSM --}}
                                    <input type="hidden" name="territory_id" id="territory_id" value="{{Auth::user()->territory_id}}">
                                    @endif
                                    @if(Auth::user()->employee_designation_flag == '2') {{-- ASM --}}
                                    <input type="hidden" name="area_id" id="area_id" value="{{Auth::user()->area_id}}">
                                    @endif
                                    @if(Auth::user()->employee_designation_flag == '1') {{-- RSM --}}
                                    <input type="hidden" name="region_id" id="region_id" value="{{Auth::user()->region_id}}">
                                    @endif
                                    @if(Auth::user()->employee_designation_flag == 4)
                                        <div class="_cust_filter load-all-regions">
                                            <div class="form-s2">
                                                <select class="reports-select multi regionListDropDown" multiple="multiple" name="region[]" id="genera_region" required placeholder="Select Region">

                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="_cust_filter load-all-distributors">
                                        <div class="form-s2">
                                            <select class="reports-select multi" multiple="multiple" id="distributor" name="distributor[]" placeholder="Select Distributor">
                                            </select>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" id="employeeButton"><i class="fa fa-bullseye"></i> Set Target</button>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card PB-20">

                <div class="header PT-15 PB-15">
                    <h2>Overall <span>Target</span></h2>
                    {{--<div class="float-right font14"><strong>Month:</strong> July, 2020</div>--}}
                </div>

                <div class="target-val">
                    <div class="row">
                        <div class="col-12">
                            <div class="row m-0" id="data-stats">

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

                <div class="header PT-15 PB-15" id="bulk-upload" style="display:none">
                    <h2>Assign <span>Target</span></h2>
                    <a data-toggle="modal" data-target="#bulkUpload" class="btn add_button addpr"><i class="fa fa-upload"></i> <span>Bulk Upload</span></a>
                </div>

                <div class="col-12 PT-15" id="employeeTable">
                    {{-- <table class="table table-hover dt-responsive nowrap" id="employeeTable" style="width:100%">
                        <thead>
                        <tr>
                            <th>Employee Name</th>
                            <th>Segment</th>
                            <th>Distribution</th>
                            <th>Reporting to</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table> --}}
                </div>
            </div>
        </div>
    </div>


{{--    modal--}}
<div class="modal fade" id="bulkUpload" tabindex="-1" role="dialog" aria-labelledby="bulkUploadLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content  top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkUploadLabel">Bulk <span>Upload</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <div class="body">
                    <span style="color:red; padding-bottom:10px; display: block; font-size:14px;"><b>Warning: <span style="font-size:14px;">All Existing Targets Will Be Removed!</span></b></span>
                    <div class="row col-md-12">
                        <div class="col-md-6" style="padding:0px">
                            <div class="_cust_filter">
                                <input type="hidden" id="sample_download_by_hidden">
                                <select class="form-control formselect" id="sample_download_by" placeholder="Select Target">
                                    <option value="0" selected>Sample Download By</option>
                                    <option value="1">Employee Name</option>
                                    <option value="2">Employee ID</option>
                                    <option value="3">Employee Code</option>
                                    <option value="4">App User Name</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <div class="row pb-10">
                                <div class="col-12">
                                    <div class="input-group">
                                        <div class="col-12 p-0">
                                            <form method="POST" enctype="multipart/form-data" id="uploadBulkKpi">
                                                {!! Form::hidden('tokenForAjaxReq', csrf_token()) !!}
                                                @csrf
                                                <span id="form-extra-fields"></span>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="file">Upload Excel</span>
                                                    </div>
                                                    <div class="custom-file">
                                                        <input type="file" name="file"
                                                               class="custom-file-input" id="inputGroupFile02"
                                                               aria-describedby="inputGroupFileAddon02">
                                                        <label class="custom-file-label file_name_items" id="custom-file-label" for="inputGroupFile02">Choose
                                                            file</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0" style="background-color: #f6f6f6">
                <div class="col-12">
                    <div class="row">
                        <div class="col-auto p-0"> <a href="#" onClick="downloadSample()" class="btn btn-primary download-sample" style="display: none"><i class="fa fa-download"></i> <span>Sample Download</span></a></div>
                        <div class="col p-0 text-right">
                            <button type="button" style="padding: 8px 20px;" class="btn btn-primary saveKpiBulkUpload font13">Upload</button>
                            <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>

        $(document).on('click','.add_button',function () {
            $('#sample_download_by').val(0);
            $('.download-sample').hide();
            $('.saveKpiBulkUpload').attr('disabled', 'disabled');
            $('#sample_download_by').select2();
        });

        (function($) {
            $(function() {
                window.fs_test = $('.multi').fSelect();
            });
        })(jQuery);
        function downloadSample(){
            var datemonth           = $('#month').val();
            var regionID            = $('#genera_region').val();
            var distributorID       = $('#distributor').val();
            var sample_download_by  = $('#sample_download_by').val();
            window.location.assign('ExportBulkEmployeeTargetSheet/'+datemonth+'/'+regionID+'/'+distributorID+'/'+sample_download_by);
        }
        // $('#month').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);
        // });
        $('#month').datepicker({
            format: 'M-yyyy',
            viewMode: "months",
            minViewMode: "months"
        }).on('changeMonth', function(e) {
            $(this).datepicker('hide');
            $('#genera_regionM').html(`<option selected value="">Select Region</option>`);
            $('#distributorM').html(`<option selected value="">All Distributors</option>`);
            $('#order_bookerM').html(`<option selected value="">All Order Bookers</option>`);
            onMonthChange('month');
        });
        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();
        function SetRegionsDropDown(){

            @if(Auth::user()->employee_designation_flag == '2' || Auth::user()->employee_designation_flag == '3')
                $('#distributor').empty();
                let r_id = {{Auth::user()->region_id}};
                var selected_regions =   reportData.data.filter(sr => sr.id == r_id);
                if(selected_regions){
                    selected_regions.forEach(ra => {
                        if(ra.distributors){
                            $('#distributor').append(`<optgroup class="region-optgroup" id="${ra.id}" label="${ra.region_name}"></optgroup>`);
                            var depended_distributors = ra.distributors.filter(x => x.region_id == r_id);
                            if(depended_distributors){
                                depended_distributors.forEach(e => {
                                    if(ra.id == e.region_id){
                                        $('#distributor').append(`<option value="${e.id}" class="target-distributors">${e.distributor_name}</option>`);
                                    }
                                });
                            }
                        }

                    })
                }
                window.fs_test = $('.multi').fSelect('reload');
            @else
                $(`.regionListDropDown`).append(`<option value="0" class="all-regions-checked">All Regions</option>`);
                reportData.data.forEach(element => {
                    $(`.regionListDropDown`).append(`<option class="target-regions" value="${element.id}">${element.region_name}</option>`);
                });
                $(`.regionListDropDown`).trigger('change');
            @endif
        }
        function LoadDistributorsByRegion(regionId, el='distributor'){
            var region = reportData.data.find(x=>x.id==regionId);
            $(`#${el}`).html(`<option selected value="">Select Distributor</option>`);
            if(region.distributors){
                if(region.distributors.length>0){
                    region.distributors.forEach(element => {
                        $(`#${el}`).append(`<option  class="target-distributors" value="${element.id}">${element.distributor_name}</option>`);
                    });
                }
            }
        }

        $('.regionListDropDown').on('change',function(){
            var region_id = $(this).val();
            if(region_id == ''){
                $('#distributor').empty();
            }
            if(jQuery.inArray('0',region_id) !== -1){
                $('#distributor').html(`<option value="0" class="all-distributors">All Distributors</option>`);
                setTimeout(() => {
                    $('.load-all-regions').find('.target-regions').each(function() {
                        $(this).removeClass('selected');
                        $(this).attr('selected',false);
                    });
                    $('.load-all-regions .fs-label').text('All Regions');
                    $('.regionListDropDown').val('0');
                }, 500);
                console.log(reportData.data);
                reportData.data.forEach(r => {
                    if(r.distributors){

                        $('#distributor').append(`<optgroup class="region-optgroup" id="${r.id}" label="${r.region_name}"></optgroup>`);
                        r.distributors.forEach(d => {
                            if(r.id == d.region_id){
                                $('#distributor').append(`
                                <option value="${d.id}" class="target-distributors">${d.distributor_name}</option>
                            `);
                            }
                        });
                    }
                });
            }else{
                $('#distributor').empty();
                $.each(region_id,function(index,r_id){
                    var selected_regions =   reportData.data.filter(sr => sr.id == r_id);
                    if(selected_regions){
                        selected_regions.forEach(ra => {
                            if(ra.distributors){
                                $('#distributor').append(`<optgroup class="region-optgroup" id="${ra.id}" label="${ra.region_name}"></optgroup`);
                                var depended_distributors = ra.distributors.filter(x => x.region_id == r_id);
                                if(depended_distributors){
                                    depended_distributors.forEach(e => {
                                        if(ra.id == e.region_id){
                                            $('#distributor').append(`<option value="${e.id}" class="target-distributors">${e.distributor_name}</option>`);
                                        }
                                    });
                                }
                            }

                        })
                    }
                })
            }
            window.fs_test = $('.multi').fSelect('reload');
        });
        $('#distributor').on('change',function(){
            var dist_id = $(this).val();
            if(jQuery.inArray('0',dist_id) !== -1){
                setTimeout(() => {
                    $('.load-all-distributors .fs-label').text('All Distributors');
                    $('.load-all-distributors').find('.target-distributors').each(function() {
                        $(this).removeClass('selected');
                        $(this).attr('selected',false);
                    });
                    $('#distributor').val('0');
                }, 500);
            }
            window.fs_test = $('.multi').fSelect('reload');
        });





        $('.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
        } );
        $('#employeeButton').click(function(){
            var current_action  =   $(this);
            $(this).text('Processing.....');
            $(this).attr('disabled','disabled');
            var month = $('#month').val();
            var regionID = $('#genera_region').val();
            var distributorID = $('#distributor').val();
            var region_id = $('#region_id').val();
            console.log(region_id);
            var territory_id = $('#territory_id').val();
            var area_id = $('#area_id').val();
            document.getElementById('form-extra-fields').innerHTML = '<input type="hidden" name="regionID" value="'+regionID+'">' +
                '<input type="hidden" name="date" value="'+month+'">' +
                '<input type="hidden" name="distributorID" value="'+distributorID+'">';
            if(regionID!='' && month!='' && distributorID!=''){
                $.ajax({
                    type:   'POST',
                    url :   '/getTargetEmployeesList',
                    data: {
                        _token      : $('input[name="_token"]').val(),
                        month       : month,
                        regionID    : regionID,
                        distributorID: distributorID,
                        region_id   : region_id,
                        territory_id: territory_id,
                        area_id     : area_id
                    },
                    success : function(response){
                        if(response.status == 'success'){
                            var html            = "";
                            var htmlStats       = "";
                            var bookers_target  = "";
                            var net_sales       = "";
                            var order_bookers   = "";
                            bookers_target      = response.bookers_target;
                            net_sales           = response.net_sales;
                            order_bookers       = response.order_booker;
                            var totalTarget     = 0;
                            var totalTargetValue= 0;
                            // Bookers Target value
                            htmlStats   += '<div class="col border-right">' +
                                                '<div class="row">' +
                                                    '<div class="col-6 pr-0"><strong class="unit-title">Total Targets: </strong> <span class="tar-val">'+parseFloat(bookers_target.target).toLocaleString(undefined, { maximumFractionDigits: 2 })+' <small>Units</small></span></div>' +
                                                    '<div class="col-6 pl-0 text-right PT-5">GR. Value:<span class="gr-val" style="padding-top:10px;">Rs. '+parseFloat(bookers_target.target_value).toLocaleString(undefined, { maximumFractionDigits: 2 })+'</span></div>' +
                                                '</div>' +
                                            '</div>';
                            // Net Sales Value
                            htmlStats   += '<div class="col border-right">' +
                                                '<div class="row">' +
                                                    '<div class="col-6 pr-0"><strong class="unit-title">Net Sales:</strong> <span class="tar-val">'+net_sales.net_sale.toLocaleString(undefined, { maximumFractionDigits: 2 })+' <small></small></span></div>' +
                                                    '<div class="col-6 pl-0 text-right PT-5">Total GR. Value:<span class="gr-val" style="padding-top:10px;">Rs. '+net_sales.gross_value.toLocaleString(undefined, { maximumFractionDigits: 2 })+'</span></div>' +
                                                '</div>' +
                                            '</div>';
                            document.getElementById('data-stats').innerHTML = htmlStats;
                            document.getElementById('bulk-upload').style.display = 'block';
                            $('#employeeTable').empty();
                            $('#employeeTable').append(`<table class="table table-hover dt-responsive nowrap" id="postInnerTable" style="width:100%">
                            <thead><tr>
                                <th>Employee Name</th>
                                <th>Segment</th>
                                <th>Distributor</th>
                                <th>Reporting To</th>
                                <th>Action</th></tr></thead><tbody></tbody></table>`);
                            $('#postInnerTable tbody').empty();
                            ;
                            order_bookers.forEach(dist => {
                                dist.forEach(element => {
                                    var btnText= 'Add';
                                    if(element['employee_added_target']>0 && element['employee_added_target']!=null)
                                        btnText = 'Update';
                                    html += '<tr>' +
                                                '<td>' + element['employee_name'] + '</td>' +
                                                '<td>' + element['segment'] + '</td>' +
                                                '<td>' + element['distributor_name'] + '</td>' +
                                                '<td>' + element['reporting_to'] + '</td>' +
                                                '<td>' +
                                                '<a href="target-employee-product/'+month+'/'+regionID+'/'+element['distributor_id']+'/'+element['employee_id']+'" class="btn btn-default">'+ btnText +'</a> ';
                                                    if(element['employee_added_target']>0 && element['employee_added_target']!=null)
                                                            html += '<a href="target-employee-achievement/'+element['employee_id']+'/'+month+'" class="btn btn-default btn-line">View</a>';
                                                        html += '</td>' +
                                            '</tr>';
                                })
                            });
                            $('#employeeTable tbody').append(html);
                            $('#employeeTable').show();
                            $('#postInnerTable').DataTable({
                                order: [[2, 'asc']],
                            });
                            $(current_action).text('Set Target');
                            $(current_action).removeAttr('disabled');
                        }
                    }
                });
            }else{
                self.notification('error', 'All Inputs Required!');
                $(this).text('Set Target');
                $(this).removeAttr('disabled');
            }
        })
        function fetchReport(){
            $('#employeeButton').text('Processing.....');
            $('#employeeButton').attr('disabled','disabled');
            var month = $('#month').val();
            var regionID = $('#genera_region').val();
            var distributorID = $('#distributor').val();
            document.getElementById('form-extra-fields').innerHTML = '<input type="hidden" name="regionID" value="'+regionID+'">' +
                '<input type="hidden" name="date" value="'+month+'">' +
                '<input type="hidden" name="distributorID" value="'+distributorID+'">';
            if(regionID!='' && month!='' && distributorID!=''){
                $.ajax({
                    type:   'POST',
                    url :   '/getTargetEmployeesList',
                    data: {
                        _token      : $('input[name="_token"]').val(),
                        month       : month,
                        regionID    : regionID,
                        distributorID: distributorID
                    },
                    success : function(e){
                        alert('in');
                    }
                });

            }else{
                self.notification('error', 'All Inputs Required!');
                $('#employeeButton').text('Set Target');
                $('#employeeButton').removeAttr('disabled');
            }
        }
        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);
        }
        $('.saveKpiBulkUpload').click(function () {
            if (!$('#month').val() || !$('[name="file"]').val()) {
                $('#notifDiv').css('background', 'red').text('Please select month and appropriate sheet').fadeIn();
                setTimeout(() => {
                    $('#notifDiv').fadeOut();
                }, 3000);
                return;
            }
            var upload_by    =   parseInt($('#sample_download_by_hidden').val());
            var regions      =   $('#genera_region').val();
            var distributors =   $('#distributor').val();
            if (upload_by < 1) {
                $('#notifDiv').css('background', 'red').text('Please select sample download by from dropdown.').fadeIn();
                setTimeout(() => {
                    $('#notifDiv').fadeOut();
                }, 3000);
                return;
            }
            $('.saveKpiBulkUpload').text('Processing..').attr('disabled', 'disabled')
            var datemonth           = $('#month').val();
            var regionID            = $('#genera_region').val();
            var distributorID       = $('#distributor').val();
            $('#uploadBulkKpi').ajaxSubmit({
                type: 'POST',
                async: true,
                url: `/ImportBulkEmployeeTargets/${datemonth}`,
                data : {
                    regions         : regions,
                    distributors    : distributors,
                    upload_by       : upload_by
                },
                success: function (res) {
                    $('.additionalTgtBulkKpiSheet').text('Bulk Upload').removeAttr('disabled');
                    $('.saveKpiBulkUpload, .downloadBulkKpiSheet').removeAttr('disabled');
                    $('.saveKpiBulkUpload').text('Bulk Upload').removeAttr('disabled')
                    if (res.code == 100) {
                        self.notification('error', res.exc);
                        document.getElementById('inputGroupFile02').value = '';
                        document.getElementById('custom-file-label').innerHTML = 'Choose file';
                    }else if (res.code == 101) {
                        self.notification('error', res.exc);
                        // document.getElementById('inputGroupFile02').value = '';
                        // document.getElementById('custom-file-label').innerHTML = 'Choose file';
                    }else if (res.code == 200) {
                        $('#notifDiv').css('background', 'green').text('All data saved successfully').fadeIn();
                        setTimeout(() => {
                            location.reload();
                        }, 3000);   
                    }else{

                    }
                }
            })
        });
        $('#inputGroupFile02').on('change',function(){
            //get the file name
            var fileName = $(this).val();
            var name = fileName.replace('C:\\fakepath\\', "");
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(name);
        })
        $('#sample_download_by').change(function(){
            var current_val = $(this).val();
            if(current_val != '0'){
                $('.download-sample').show();
                $('#sample_download_by_hidden').val(current_val);
                $('.saveKpiBulkUpload').removeAttr('disabled')
            }else{
                $('.download-sample').hide();
                $('#sample_download_by_hidden').val('0');
                $('.saveKpiBulkUpload').attr('disabled', 'disabled')
            }
        })
    </script>
@endsection