@extends('layouts.master')
@section('content')
    <script src="/js/list.js"></script>
    <link rel="stylesheet" href="/css/list-pagination.css">
    <style>
        .dashboard-date {
            width: 200px;
            float: right;
            margin-top: 4px;
            margin-right: 10px;
            position: relative;
            height: 28px;
        }

        .dashboard-date .form-control {
            border: 0;
            box-shadow: none;
            font-size: 18px;
            text-align: right;
            z-index: 3;
            background-color: transparent !important;
            padding-right: 20px;
            font-family: 'Rationale', sans-serif !important;
            height: 26px;
        }

        .dashboard-date .fa {
            position: absolute;
            top: 5px;
            right: 0;
            font-size: 16px;
            color: #888888;
        }

        .period-select {
            width: 125px;
            float: right;
            margin-top: -3px
        }

        .custom-select {
            box-shadow: none;
            line-height: 1;
            border-radius: 0;
            font-size: 13px;
            border-color: #dedede
        }

        .top1-employee {
            position: relative;
            font-size: 16px;
            overflow: hidden;
            z-index: 5;
        }

        .employee-bg {
            position: absolute;
            right: -140px;
            bottom: 0;
            filter: grayscale(1);
        }

        .employee-bg:before {
            background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 25%, rgba(255, 255, 255, 0.2), #fff 60%);
            position: absolute;
            width: 101%;
            height: 101%;
            left: 0;
            top: 0;
            content: '';
            z-index: 2;
        }

        .employee-bg img {
            width: 100%;
            height: 100%;
            opacity: 0.1;
            z-index: -1
        }

        .emp-pic {
            width: 84px;
            height: 84px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            padding: 5px;
            margin: 15px auto 25px auto
        }

        .emp-pic .pic {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            border: solid 2px #0038ba
        }



        .emp-sno {
            font-size: 70px;
            color: #f4f4f4;
            letter-spacing: normal;
            line-height: 1;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            position: absolute;
            left: 0;
            top: 0;
        }

        .trophy-icon img {
            width: 80px;
            height: auto;
            margin: auto;
            display: block;
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.6));
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .icon-first img {
            width: 110px
        }

        .trophy-icon::before {
            background-color: #0038ba;
            position: absolute;
            width: 70px;
            height: 60px;
            left: 0;
            right: 0;
            bottom: -33px;
            margin: auto;
            content: '';
            z-index: 0;
            border-radius: 50%;
        }

        .emp-sale-val {
            font-size: 24px;
            text-align: center;
            padding: 5px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
            background-color: #0038ba;
            color: #fff
        }

        .emp-st-val {
            border: solid 1px #ededed;
            border-top: none;
            margin: 0;
            line-height: 1;
            margin-bottom: 15px;
        }

        .emp-st-val .col-6 {
            padding: 8px;
            font-size: 15px;
        }

        .emp-st-val span {
            font-family: 'Rationale', sans-serif !important;
            font-size: 18px;
            color: #0038ba
        }

        .Product-row {
            padding: 8px;
            margin-bottom: 10px;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .Product-row-title {
            padding: 8px;
            letter-spacing: normal;
        }

        .Product-IMG img {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: solid 1px #333;
            margin-right: 10px;
        }

        .Product-Name {
            line-height: 1;
        }

        ._ITEMNAME {
            height: auto;
        }

        .font-no {
            font-size: 20px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }

        .ser-text {
            font-family: 'Poppins', sans-serif;
            line-height: 1;
            font-size: 30px;
            font-weight: 800;
            color: #ececec;
            margin-bottom: -5px;
        }

        .sub-title-list {
            font-size: 13px;
            padding-left: 20px;
            position: relative;
            display: block;
        }

        .sub-title-list:before {
            display: inline-block;
            content: "";
            height: 1px;
            width: 10px;
            margin-right: 10px;
            background-color: rgba(40, 40, 40, 0.5);
            position: absolute;
            top: 6px;
            left: 0;
        }

        .main-title {
            font-size: 14px;
            letter-spacing: normal;
            margin-bottom: 0;
            line-height: 20px;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .pt-8 {
            padding-top: 8px !important;
        }

        .badge-icon {
            width: auto;
            margin: auto;
            position: absolute;
            top: 6px;
            right: 15px;
            height: 26px;
        }

        .viewallbtn {
            font-size: 11px;
            letter-spacing: 1px;
            padding: 2px 5px;
            margin: 0;
            box-shadow: none;
        }

        .Product-Filter {
            padding: 10px 12px;
            font-size: 13px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border: none;
            background-color: #fff;
            margin-bottom: 10px;
        }

        .Product-Filter .btn-primary {
            box-shadow: none !important;
        }

        ._cust_filter {
            width: 220px;
            padding-right: 0;
            margin: 0;
        }

        .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
            font-size: 13px;
        }

        .form-s2 .select2-container .select2-selection--single {
            height: 32px !important;
        }

        .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 32px;
            width: 25px;
        }

        .dashboard-date {
            width: 200px;
            float: right;
            margin-top: 4px;
            margin-right: 15px;
            position: relative;
        }

        .dashboard-date .fa {
            position: absolute;
            top: 10px;
            right: 0;
            font-size: 16px;
            color: #888888
        }

        .dashboard-date .form-control {
            border: 0;
            box-shadow: none;
            font-size: 20px;
            text-align: right;
            z-index: 3;
            background-color: transparent !important;
            padding-right: 20px;
            font-family: 'Rationale', sans-serif !important;
        }

        .inputmonth {
            width: 160px;
        }

        .inputmonth .form-control {
            letter-spacing: normal;
            padding-left: 28px;
        }
        .no-found-holder {
            text-align: center;
            border: solid 1px #E5E5E5;
            min-height: 230px;
            display: flex;
            color: #C3C3C3;
            font-size: 14px;
            margin-top: 15px;
        }

    </style>
    <div class="row mt-1 mb-1">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Incentive <span>Report</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>List</span></li>
            </ol>
        </div>
    </div>
    <div class="Product-Filter">
        <div class="row">

            <div class="col-auto mt-auto mb-auto pr-0">Select Month</div>
            <div class="col-auto pr-0">
                <div class="CL-Product inputmonth"><i class="fa fa-calendar-alt"></i>
                    <input name="start_month" id="start_month" type="text" autocomplete="off"  class="form-control required incentive-datepicker"
                           placeholder="Start Month">
                </div>
            </div>

{{--            <div class="col-auto mt-auto mb-auto p-0"> End Month</div>--}}
{{--            <div class="col-auto pr-0">--}}
{{--                <div class="CL-Product inputmonth"><i class="fa fa-calendar-alt"></i>--}}
{{--                    <input  name="end_month" id="end_month" type="text" autocomplete="off"  class="form-control required incentive-datepicker"--}}
{{--                           placeholder="End Month">--}}
{{--                </div>--}}
{{--            </div>--}}

            <div class="col-auto mt-auto mb-auto p-0">Select Designation</div>
            <div class="col-auto">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select  name="designation_flag" id="designation_flag"  class="form-control formselect required"  placeholder="Select Designation">
                            <option value="">Select Designation</option>
                            @foreach($designations as $designation)
                                <option value="{{$designation->flags}}">{{$designation->designation}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>


            <div class="col pl-0">
                <button class="btn btn-primary fetchEmployeeAchForIncentive m-0"> Search</button>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>

    <div class="row">

        <div class="col-12">


            <div class="Product-row-title">
                <div class="row">
                    <div class="col colStyle h-auto" style="max-width:290px">Employee Name</div>
                    <div class="col colStyle h-auto" style="max-width:83px;"></div>
                    <div class="col colStyle h-auto" style="max-width:120px">TTL. TGT</div>
                    <div class="col colStyle h-auto" style="max-width:120px">NET SALES</div>
                    <div class="col colStyle h-auto" style="max-width:120px">TGT G. VALUE</div>
                    <div class="col colStyle h-auto" style="max-width:120px">NET. G. Sales</div>
                    <div class="col colStyle h-auto" style="max-width:100px;">ACHV.</div>
                    <div class="col colStyle h-auto" style="max-width:109px;">Action</div>
                </div>
            </div>
            <div class="loader-sell360 tblLoaderProducts" style="display: none">
                <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                    <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                    <span class="txt"><span></span> LOADING...</span>
                </div>
            </div>
            <div class="row m-0 placeholder">
                <div class="col-12 no-found-holder">
                    <div class="m-auto"> No data found.</div>
                </div>
            </div>
            <span id="productthumb">
                <div class="row list all_products">
                </div>
                <div class="ProductPageNav text-center">
                    <div class="ProductPageNav text-center">
                        <ul class="justify-content-center pagination"></ul>
                    </div>
                </div>
            </span>

        </div>



    </div>
@endsection
@push('scripts')
<script>




    function all_employees_thumb(employees,start_month){
        $('.tblLoaderProducts').hide();
        $('.all_products').empty();
        let cnt                     =   0;
        var achievement             =   0;
        var product_details         =   "";
        var product_name            =   "";
        var thumbnail               =   "";
        // debugger
        valuesThumbProducts             =   employees;
        var optionsThumbProducts        =   {
            page: 10,
            pagination: true,
            valueNames: ['struct_id','struct_name','employee_id','designation','employee_name','image','target','target_value','net_sale','net_value','ach'],
            item: function (valueNames,idx) {
                cnt         =   cnt+1;
                let star    =   ``;
                if(cnt == 1){
                    star    =   `<img class="badge-icon" src="images/badge-icon.svg" alt="">`;
                }
                return `
                    <div class="Product-row">
                    <div class="row">
                        <div class="col _ITEMNAME" style="max-width:290px">
                            <div class="Product-IMG"><img src="${valueNames.image}" onerror="this.onerror=null;this.src='/images/avatar.svg';" alt=""></div>
                            <div class="Product-Name"><strong class="main-title">${valueNames.employee_name}</strong>
                                <span class="sub-title-list">${valueNames.designation} - ${valueNames.struct_name}</span>
                            </div>
                        </div>
                        <div class="col colStyle h-auto ser-text" style="max-width:83px; padding-top:4px;">
                            <div>${cnt}</div>
                            ${star}
                        </div>
                        <div class="col colStyle font-no" style="max-width:120px">
                            <div class="pt-8">${addCommas(valueNames.target)}</div>
                        </div>
                        <div class="col colStyle font-no" style="max-width:120px">
                            <div class="pt-8">${addCommas(valueNames.net_sale)}</div>
                        </div>
                        <div class="col colStyle font-no" style="max-width:120px">
                            <div class="pt-8">${addCommas(valueNames.target_value)}</div>
                        </div>
                        <div class="col colStyle font-no" style="max-width:120px">
                            <div class="pt-8">${addCommas(valueNames.net_value)}</div>
                        </div>
                        <div class="col colStyle font-no" style="max-width:100px; color:#0038ba">
                            <div class="pt-8">${addCommas(valueNames.ach)}%</div>
                        </div>
                        <div class="col colStyle font-no"
                             style="max-width:109px; text-align:right; color:#0038ba">
                            <div class="pt-8"><a href="/incentive-report/${valueNames.employee_id}/${start_month}" class="btn btn-primary viewallbtn">View Detail</a>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            }
        }
        var listThumb = new List('productthumb', optionsThumbProducts, valuesThumbProducts);

        if(valuesThumbProducts?.length < 1){
            $('.placeholder').show();
        }
    }
    $('.incentive-datepicker').datepicker({
        autoclose: true,
        todayHighlight: true,
        toggleActive: true,
        format: 'MM yyyy',
        "orientation": 'right',
        minViewMode: "months",
    }).on('changeDate', function (ev) {
        $(this).datepicker('hide');
    });

    $(".incentive-datepicker").datepicker().datepicker("setDate", new Date());


    $(document).on('click','.fetchEmployeeAchForIncentive',function () {
        var error = [];
        $('.required').each(function () {
            if (!$(this).val()) {
                error.push(true);
            } else if($(this).val() == null || $(this).val() == ''){
                error.push(true);
            }else{
                error.push(false);
            }
        });

        if (error.includes(true)){
            $('#notifDiv').fadeIn();
            $('#notifDiv').css('background', 'red');
            $('#notifDiv').text('Please select all the required information (*)');
            setTimeout(() => {
                $('#notifDiv').fadeOut();
            }, 3000);
            return;
        }else{
            $('.placeholder').hide();
            $('.tblLoaderProducts').show();
            $('.all_products').empty();
            let start_month         = $('#start_month').val();
            let designation_flag    = parseInt($('#designation_flag').val());
            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf_token"]').attr("content"),
                },
                url: `/incentive-employees-list`,
                type: 'POST',
                cache: false,
                dataType: "json",
                data: {
                    start_month:start_month,
                    designation_flag:designation_flag
                },
                success: function (response) {
                    console.log(response);
                    all_employees_thumb(response.data,response.start_month);
                },
                error: function (error) {
                    if (
                        error.ResponseHeader.ResponseCode == 422 ||
                        error.ResponseHeader.ResponseCode == 500
                    ) {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'red');
                        $('#notifDiv').text('Some Error Occured, please try again.');
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);

                    }
                },
            });



        }


    })

</script>
@endpush