@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;
        }

    </style>

    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Monthly <span> Zonal 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>

                                   {{-- <div class="_cust_filter">
                                        <div class="form-s2">
                                            <select class="form-control formselect regionListDropDown" name="region"  id="genera_region" required onchange="LoadDistributorsByRegion($(this).val(), 'distributor')" placeholder="Select Region">
                                                <option value="" selected>Select Region</option>
                                            </select>
                                        </div>
                                    </div>--}}
                                    {{--<div class="_cust_filter">
                                        <div class="form-s2">
                                            <select class="form-control formselect " name="area"  id="area" required placeholder="Select Area">
                                                <option value="0" selected>Select Area</option>
                                                @foreach($areas AS $area)
                                                    <option value="{{$area->id}}" >{{$area->area_name}}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>--}}

                                    <button class="btn btn-primary" onclick="fetchReport()" id="employeeButton"><i class="fa fa-bullseye"></i> Set Target</button>
                            <br>
                            <br>
                                </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">
                    <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">
                    <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="input-group-prepend"> <span class="input-group-text" style="border-radius:0; font-size:14px;background-color:#f6f6f6" id="inputGroupFileAddon01">Upload Excel</span> </div>--}}
                                        <div class="col-12 p-0">
                                            <form method="POST" enctype="multipart/form-data" id="uploadBulkKpi">
                                                {!! Form::hidden('tokenForAjaxReq', csrf_token()) !!}
                                                @csrf
                                                <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>

                                                <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" 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"><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>
        function downloadSample(){
            var regionID = $('#genera_region').val();
            var distributorID = $('#distributor').val();
            window.location.assign('/ExportBulkAreaTargetSheet');
        }

        $('#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);
        });

        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();

        function GetEmployeeLinePermissions() {
            http('GET', `/GetEmployeeLinePermissions`).then((e) => {
                reportData.data = JSON.parse(e);
                SetRegionsDropDown();
            });
        }

        function SetRegionsDropDown(){
            reportData.data.forEach(element => {
                $(`.regionListDropDown`).append(`<option value="${element.id}">${element.region_name}</option>`);
            });
        }

        function LoadDistributorsByRegion(regionId, el){
            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 value="${element.id}">${element.distributor_name}</option>`);
                    });
                }
            }
        }

        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.');
                        }
                    }
                });
            });
        }


        $('.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 fetchReport(){

            $('#employeeButton').text('Processing.....');
            $('#employeeButton').attr('disabled','disabled');

            var month = $('#month').val();
            // var regionID = $('#genera_region').val();
            // var distributorID = $('#distributor').val();
            var areaID = $('#area').val();

            document.getElementById('form-extra-fields').innerHTML = '<input type="hidden" name="date" value="'+month+'">' +
                '<input type="hidden" name="areaID" value="'+areaID+'">';

            if(month!=''){
                var url = `/getTargetAreaList?month=${month}`;

                http('GET', url).then((e) => {
                    var response = JSON.parse(e);
                    var html = "";
                    var htmlStats = "";
                    var totalTarget = 0;
                    var totalTargetValue = 0;

                    response.dataStat.forEach(element => {
                        totalTarget += parseInt(element['target']);
                        totalTargetValue += parseInt(element['target_value']);

                        htmlStats += ' <div class="col border-right">' +
                            '                      <div class="row">' +
                            '                      <div class="col-6 pr-0"><strong class="unit-title">'+element['unit_name']+':</strong> <span class="tar-val">'+parseInt(element['target']).toLocaleString(undefined, { maximumFractionDigits: 2 })+' <small>CTNS</small></span></div>' +
                            '              <div class="col-6 pl-0 text-right PT-5">GR. Value:<span class="gr-val" style="padding-top:10px;">Rs. '+parseInt(element['target_value']).toLocaleString(undefined, { maximumFractionDigits: 2 })+'</span></div>' +
                            '              </div>' +
                            '             </div>';
                    });

                    htmlStats += ' <div class="col border-right">' +
                        '                      <div class="row">' +
                        '                      <div class="col-6 pr-0"><strong class="unit-title">Total:</strong> <span class="tar-val">'+totalTarget.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. '+totalTargetValue.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>Area Name</th>
                        <th>Action</th></tr></thead><tbody></tbody></table>`);

                    $('#employeeTable tbody').empty();
                    ;

                    JSON.parse(e).data.forEach(element => {

                        var btnText= 'Add';
                        if(element['area_added_target']>0)
                            btnText = 'Update';

                       html += '<tr>' +
'                            <td>' + element['area_name'] + '</td>' +
'                            <td>' +
'                               <a href="target-area-product/'+month+'/'+element['id']+'" class="btn btn-default">'+ btnText +'</a> ';

                       if(element['area_added_target']>0 && element['area_added_target']!=null)
                            html += '<a href="target-area-achievement/'+element['id']+'/'+month+'" class="btn btn-default btn-line">View</a>';

                           html += '</td>' +
'                        </tr>';


                    });
                    $('#employeeTable tbody').append(html);
                    $('#employeeTable').show();
                    $('#postInnerTable').DataTable();



                    $('#employeeButton').text('Set Target');
                    $('#employeeButton').removeAttr('disabled');

                });

            }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;
            }
            $('.saveKpiBulkUpload').text('Processing..').attr('disabled', 'disabled')
            $('#uploadBulkKpi').ajaxSubmit({
                type: 'POST',
                url: `/ImportBulkAreaTargets/${moment($('#month').val(), 'MM-YYYY').format('MM-YYYY')}`,
                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 {
                        $('#notifDiv').css('background', 'green').text('All data saved successfully').fadeIn();
                        setTimeout(() => {
                            location.reload();
                        }, 3000);
                    }
                }
            })
        });



        $('#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);
        })
    </script>
@endsection