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



@endsection

@section('content')
    <style>

        .targetQty {
            font-size: 13px;
            height:26px;
            box-shadow: none;
            width: 90px;
            padding-left: 10px;
            padding-right: 10px; border-color: #e9e9e9;
        }
        .dataTable td, .modal-body table td{padding: 3px 5px; vertical-align: middle;}

        .dataTable td .btn-default {margin-bottom: 0}

        .wbtn{background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%); color: #282828; letter-spacing: 1px; margin-left: 10px}
        .total-tv{padding-top: 15px!important; padding-bottom: 15px!important; line-height: 1}


        .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;
        }
        .close-btn-pl {
            top: 13px; height: 24px
        }
        .close-btn-pl:after, .close-btn-pl:before {
            height: 22px;
            background-color: #717171
        }
        .report-filters {right: 55px}
        .report-state ._head01{font-size: 15px}
        .report-state ._head01 .fa{color:#36b4e5; margin-right:5px }

        .pro-header-text {
            line-height: normal;
            padding: 0;
            margin: 0;
            background: none;
        }
        .profile-center .nav-pills .nav-link, ._report-Head .nav-pills .nav-link {
            padding: 10px 25px; font-size: 15px}
        .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: 7px;
            padding-top: 7px
        }
        .ProListDiv {
            padding: 0;
            display: table;
        }
        .ProListDiv .PR_Name {
            display: table-cell;
            vertical-align: middle;
            font-size: 12px;
            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: 50px;
            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: 8px; padding-bottom: 8px;}
        .set-unit-value .unit-name{	background-color: #fafafa; padding-top: 16px; padding-bottom: 8px; line-height: normal}
        .set-unit-value .heaing-sec{font-size: 14px;border-bottom: solid 1px #eaeaea; padding-top: 7px; padding-bottom: 3px;}
        .set-unit-value .unit-row{font-size: 14px; border-bottom: solid 1px #eaeaea;}
        .set-unit-value .unit-row .btn-primary{font-size: 11px; padding: 6px 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;}
        .custom-control-label{line-height: 2}
        .kpi-checkbox{padding-top: 10px; padding-bottom: 10px; border: solid 1px #f0f0f0;}
        .kpi-checkbox .btn-primary{
            font-size: 13px;
            padding: 6px 25px;
            line-height: 1;
        }
        .kpi-p-edit{ margin: 15px 0 0 0; font-size: 14px}
        .custom-select-sm{ border-radius: 0; width: 200px; font-size: 13px; height: 32px; border-color: #eae9e9;}

        .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-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; }
        .date-input-set{box-shadow: none; height: 28px; font-size: 13px;}
        .PT-5{padding-top: 5px!important}
    </style>


    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Employee <span>Target - {{$employee->employee_first_name.' '.$employee->employee_last_name}}</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="float-right font14"><strong>Month:</strong> {{date('M, Y', strtotime('01-'.$date))}}</div>
        </div>
    </div>

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

            <div class="card PB-20">

                <div class="header" style="padding-top:13px;padding-bottom:13px;">
                    <div class="row">
                        <div class="col-12">
                            <h2>Set <span>Target</span></h2>
                        </div>

                    </div>
                </div>
                <div>
                    <div class="col-12 PT-10 PB-10">
                        <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>SKU</th>
                                <th>Product Name</th>
                                <th>Brand</th>
                                <th>Divsion</th>
                                <th>Trade Price</th>
                                <th>Set Target</th>
                                <th>Target in GR. Value</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($products as $key => $value)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$value->item_sku}}</td>
                                    <td>{{$value->item_name}}</td>
                                    <td>{{$value->brand_name}}</td>
                                    <td>{{$value->division_nane}}</td>
                                    <td>{{$value->item_trade_price}}</td>
                                    <td><input type="text" name="target-value-{{$key}}" id="target-value-{{$key}}"  oninput="calculateGR('{{$value->item_trade_price}}', this.value, 'target-gr-{{$key}}')" class="form-control targetQty" @if($value->target>=0) value="{{$value->target}}" @endif></td>
                                    <td id="target-gr-{{$key}}"> @if($value->target>=0) {{number_format($value->target_value,2)}} @endif</td>
                                    <td>
                                                <button class="btn btn-default btn-line" id="target-add-btn-{{$key}}" onclick="saveValue({{$key}}, {{$value->item_id}}, {{$value->pref_id}}, {{$value->unit_id}}, {{$value->item_trade_price}}, 'target-value-{{$key}}', {{$empId}}, '{{$date}}', {{$value->parent_unit_id}})"  style="display: none">Add</button>
                                        <span id="target-action-btns-{{$key}}">
                                            @if($value->target==-1)
                                                    <button class="btn btn-default btn-line" id="target-add-btn-{{$key}}" onclick="saveValue({{$key}}, {{$value->item_id}}, {{$value->pref_id}}, {{$value->unit_id}}, {{$value->item_trade_price}}, 'target-value-{{$key}}', {{$empId}}, '{{$date}}', {{$value->parent_unit_id}})">Add</button>
                                            @else
                                                    <button class="btn btn-default" id="target-update-btn-{{$key}}" onclick="updateValue({{$value->obts_id}}, {{$key}}, {{$value->item_id}}, {{$value->pref_id}}, {{$value->unit_id}}, {{$value->item_trade_price}}, 'target-value-{{$key}}', {{$empId}}, '{{$date}}', {{$value->parent_unit_id}})">Update</button>
                                                    <button class="btn btn-default red-bg" onclick="clearValue('target-value-{{$key}}', 'target-gr-{{$key}}'), deleteItem({{$value->obts_id}}, {{$key}})">Delete</button>
                                            @endif
                                        </span>

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



                </div>

                <div class="col-md-12 PT-20 text-right">
{{--                    <button type="submit" class="btn btn-primary mr-2">Save</button>--}}
                    <button type="submit" class="btn btn-cancel" onclick="clearValue('target-value-', 'target-gr-', {{count($products)}}), deleteAllItem({{$empId}}, '{{$date}}')">All Delete</button>
                </div>


            </div>



        </div>


    </div>

@endsection

@section('scripts')
    <script>

        function saveValue(key, item_id, pref_id, unit_id, trade_price, target_value_id, emp_id, date, parent_unit_id){

            var target_value = $('#'+target_value_id).val();
            var url = `/saveEmployeeTarget?item_id=${item_id}&key=${key}&pref_id=${pref_id}&unit_id=${unit_id}&trade_price=${trade_price}&target_value=${target_value}&emp_id=${emp_id}&trade_price=${trade_price}&date=${date}&parent_unit_id=${parent_unit_id}`;

            http('GET', url).then((e) => {
                if(e!=0) {
                    self.notification('success', 'Add Successfully!')
                    document.getElementById('target-add-btn-'+key).style.display = 'none';
                    document.getElementById('target-action-btns-'+key).style.display = 'block';
                    document.getElementById('target-action-btns-'+key).innerHTML = e;
                }else
                    self.notification('error', 'Something Went Wrong!!')
            });
            // self.notification('error', 'All Inputs Must Fill!');

        }

        function updateValue(id, key, item_id, pref_id, unit_id, trade_price, target_value_id, emp_id, date){

            var target_value = $('#'+target_value_id).val();
            var url = `/updateEmployeeTarget?id=${id}&item_id=${item_id}&pref_id=${pref_id}&unit_id=${unit_id}&trade_price=${trade_price}&target_value=${target_value}&emp_id=${emp_id}&trade_price=${trade_price}&date=${date}`;

            http('GET', url).then((e) => {
                if(e!=0) {
                    self.notification('success', 'Update Successfully!')
                    document.getElementById('target-add-btn-'+key).style.display = 'none';
                    // document.getElementById('target-update-btn-'+key).style.display = 'block';
                    // document.getElementById('target-action-btns-'+key).innerHTML = e;
                }else
                    self.notification('error', 'Something Went Wrong!!')
            });
        }

        function deleteItem(id, key){
            var url = `/deleteEmployeeTarget?id=${id}`;
            http('GET', url).then((e) => {
                if(e==1) {
                    self.notification('success', 'Delete Successfully!')
                    document.getElementById('target-add-btn-'+key).style.display = 'block';
                    document.getElementById('target-action-btns-'+key).style.display = 'none';
                    // document.getElementById('target-delete-btn-'+key).style.display = 'none';
                }else
                    self.notification('error', 'Something Went Wrong!!')
            });
        }

        function deleteAllItem(empId, date){
            var url = `/deleteAllEmployeeTarget?empId=${empId}&date=${date}`;
            http('GET', url).then((e) => {
                if(e==1) {
                    location.reload();
                    // self.notification('success', 'Delete Successfully!')
                    // document.getElementById('target-add-btn-'+key).style.display = 'block';
                    // document.getElementById('target-update-btn-'+key).style.display = 'none';
                }else
                    self.notification('error', 'Something Went Wrong!!')
            });
        }

        function calculateGR(trade_price, value, id){
            document.getElementById(id).innerHTML = (trade_price*value).toLocaleString(undefined, { maximumFractionDigits: 2 });
        }

        function clearValue(valueId, GRId, range=null){
            if(range==null) {
                document.getElementById(valueId).value = '';
                document.getElementById(GRId).innerHTML = '';
            }else{
                var table = $('#example').DataTable();
                table.destroy();

                for(var i=0; range>i ; i++) {

                    var value_id = valueId+''+i;
                    var gr_id = GRId+''+i;
                    document.getElementById(value_id).value = '';
                    document.getElementById(gr_id).innerHTML = '';

                }
                table = $('#example').DataTable();
            }
        }

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



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

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


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

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

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

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

            });

        });

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

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


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


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

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


    </script>



@endsection