@extends('layouts.appuser')



@section('badcome')

@endsection
@section('dynamic_css')
    <style>
        .f-600 {
            font-weight: 600;
        }

        .f-13 {
            font-size: 13px !important;
        }

        .v-errors {
            background-color: #eee;
            list-style: disc;
            border: 2px solid red;
            padding: 5px 20px;
            color: darkred;
        }

        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 31px;
            margin-top: 6px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 23px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .custom_card_header{
             border-bottom: 0px solid rgba(0,0,0,.125) !important;
             padding: .3rem 1.25rem !important;
        }
        
        .custom_card_header{
                padding: .3rem 1.25rem;
        }
           
        .color-code-font{
            font-size: 13px;
        }
        
        select {
          text-align: center;
          text-align-last: center;
          /* webkit*/
        }
        option {
          text-align-last: center;
          /* reset to left*/
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="row justify-content-center container_layout">
           <div class="col-md-12">
              <div class="col-md-12">
                <ul class="nav  nav-justified nav-custom row" id="sub_menue_hold">
                    <li class="col-md-6 nav-item"><a data-toggle="tab" href="#t5" class="nav-link text-upper active">Current
                           Assigned Task</a></li>
                    <li class="col-md-6 nav-item "><a data-toggle="tab" href="#t6" class="nav-link text-upper">Task
                            History</a></li>
                </ul>
                <div class="tab-content">
                    <div id="t5" class="bg-white nav-custom-div  row tab-pane fade active show pt0">
                        <div class="col-md-12">

                            <div class="col-md-12 text-right pr0 pl0" id="programs_div">
                                @foreach($programs AS $li)
                                    @php
                                        if($li->program_code==1){
                                            $progam_style="orange";
                                        }elseif ($li->program_code==2){
                                            $progam_style="blue";
                                        }elseif($li->program_code==3){
                                            $progam_style="red";
                                        }elseif ($li->program_code==4){
                                            $progam_style="green";
                                        }elseif ($li->program_code==5){
                                            $progam_style="brown";
                                        }
                                    @endphp
                                    <span class="color-code-font"><i class="fa fa-circle" style="color: {{$progam_style}};"></i> {{$li->program_name}}</span>
                                @endforeach
                            </div>

                            <div class="row " style="<!--height: 37rem;-->overflow: auto;" id="tasks_div">
                              @if($tasks)
                                <div class="col-md-12">
                                    @foreach($tasks AS $key=>$task)
                                        <button type="button" class="btn btn-sm btn-outline-info waves-effect ml0">{{$key}} (Total: {{$task['T']}} tasks)</button>
                                      <!--  <h6>{{$key}} (Total: {{$task['T']}} tasks)</h6>-->
                                        <div class="row mb20">
                                            @foreach($task['list'] AS $li)
                                                @php
                                                    if($li['program_code']==1){
                                                        $progam_style="orange";
                                                    }elseif ($li['program_code']==2){
                                                        $progam_style="blue";
                                                    }elseif($li['program_code']==3){
                                                        $progam_style="red";
                                                    }elseif ($li['program_code']==4){
                                                        $progam_style="green";
                                                    }elseif ($li['program_code']==5){
                                                        $progam_style="brown";
                                                    }
                                                @endphp

                                                <div class="col-md-6">
                                                    <div class="card" style="border-top:5px solid {{$progam_style}};margin-top: 5px">
                                                        <div class="card-header">
                                                            <h6 class="f-13 f-600">TASK ID : {{$li['task_code']}}</h6>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">
                                                                    <div class="card-header custom_card_header">
                                                                        <h5 class="mb-0">
                                                                                <span class="f-13"><b>Task Details :</b></span>
                                                                        </h5>
                                                                    </div>
                                                                    <div class="card-body" style="padding: .7rem 1.25rem .7rem 1.25rem;">
                                                                       <div class="col-md-12">
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Title :</b> {{$li['task_title']}}</span>
                                                                           </h5>
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Description :</b> {{$li['task_description']}}</span>
                                                                           </h5>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">
                                                                    <div class="card-header custom_card_header">
                                                                        <h5 class="mb-0">
                                                                                <span class="f-13"><b>Target Details :</b></span>
                                                                            </h5>
                                                                    </div>
                                                                    <div class="card-body" style="padding: .7rem 1.25rem .7rem 1.25rem;">
                                                                        <div class="col-md-12">
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Target :</b> {{$li['employee_target']}}</span>
                                                                           </h5>
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Description :</b>  {{$li['employee_target_description']}}</span>
                                                                           </h5>
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Remarks :</b>  {{$li['employee_remarks']}}</span>
                                                                           </h5>
                                                                        </div>
                                                                    </div>
                                                                </div>
<!--                                                                 <div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">
                                                                    <div class="card-header custom_card_header">
                                                                        <h5 class="mb-0">
                                                                                <span class="f-13 text-upper"><b>Allocation Details :</b></span>
                                                                            </h5>
                                                                    </div>
                                                                    <div class="card-body" style="padding: .7rem 1.25rem .7rem 1.25rem;">
                                                                       <h5 class="mb-0">
                                                                            <span class="f-13 "><b>Date :</b> {{$li['task_assigned_date']}}</span>
                                                                       </h5>
                                                                       <h5 class="mb-0">
                                                                            <span class="f-13 "><b>Allotted By :</b>  {{$li['task_assigned_by']}}</span>
                                                                       </h5>
                                                                    </div>
                                                                </div> --> 
                                                                 <div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">
                                                                    <div class="card-header custom_card_header">
                                                                        <h5 class="mb-0">
                                                                                <span class="f-13"><b>Target Achievement Details :</b></span>
                                                                            </h5>
                                                                    </div>
                                                                    <div class="card-body" style="padding: .7rem 1.25rem .7rem 1.25rem;">
                                                                       <div class="col-md-12">
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Target Achieved :</b> {{ ($li['employee_achieve_target']?$li['employee_achieve_target']:'0')}}</span>
                                                                           </h5>
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Target Remain :</b> {{($li['employee_target']-$li['employee_achieve_target'])}}</span>
                                                                           </h5>
                                                                           <h5 class="mb-0">
                                                                                <span class="f-13 "><b>Status :</b></span><span style="color:red;"> In Progress</span>
                                                                           </h5>
                                                                        </div>
                                                                         <div class="col-md-12 text-right pl0 pr0 mt10">
                                                                           
                                                                                <a href="#" class="col-md-5 btn btn-info btn-sm add_achievement" data-etarget="{{$li['employee_target']}}" data-atarget="{{ $li['employee_achieve_target'] }}" data-tempid="{{ $li['emp_task_target_id'] }}" data-program="{{$li['program_code']}}" ><i class="fa fa-plus"></i> Add Achievement</a>
                                                                     
                                                                        </div>
                                                                    </div>
                                                                </div>   
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                              
                                            @endforeach
                                        </div>

                                        <hr>

                                    @endforeach
                                </div>
                              @else
                               <div class="col-md-12"> 
                                     <div id="currently_hold_label" style="padding-top: 10em;">
                                          <h2 class="text-center label-text" style="">No Task Found</h2>
                                     </div>
                                </div>
                              @endif
                            </div>

                        </div>
                    </div>
                    <div id="t6" class="bg-white nav-custom-div  row tab-pane fade pt0">
                        <div class="col-md-12">
                            <div class="col-md-12 text-right pr0 pl0" id="programs_div">
                                @foreach($programs AS $li)
                                    @php
                                        if($li->program_code==1){
                                            $progam_style="orange";
                                        }elseif ($li->program_code==2){
                                            $progam_style="blue";
                                        }elseif($li->program_code==3){
                                            $progam_style="red";
                                        }elseif ($li->program_code==4){
                                            $progam_style="green";
                                        }elseif ($li->program_code==5){
                                            $progam_style="brown";
                                        }
                                    @endphp
                                    <span class="color-code-font"><i class="fa fa-circle" style="color: {{$progam_style}};"></i> {{$li->program_name}}</span>
                                @endforeach
                            </div>
                            @if(!empty($month_year_data))
                                <div class="row justify-content-center mb20">
                                    <div class="col-md-4 mt15">
                                        <select class="form-control" id="year_month">
                                            <option value="" selected disabled>====Select Month ====
                                            </option>
                                            @foreach($month_year_data as $my)
                                                <option value="{{$my['month']}},{{$my['year']}}">{{$my['month_name']}}
                                                    ,{{$my['year']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif

                            <div class="row " style="<!--height: 33rem;-->overflow: auto;" id="tasks_div">
                                <div class="col-md-12 ">
                                    @if(empty($month_year_data))
                                        
                                      <div class="row" id="currently_hold_label" style="padding-top: 10em;">
                                          <div class="col-md-12 text-center">
                                               <h2 class="text-center label-text" style="">No History Found</h2>
                                          </div>
                                     </div>
                                    @else
                                        <div class="row" id="task_data">


                                        </div>
                                    @endif

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

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







<!--Modal: Login with Avatar Form-->
<div class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Header-->
      <div class="modal-header justify-content-center">
          <div  class="rounded-circle img-responsive" id="img_div" style="background: white;"> 
              <div class="text-white" style="display: table-cell;vertical-align: middle;width: 130px;height: 130px;"><h5>Target <br><span id="employee_target">200</span></h5></div>
          </div>
      </div>
      <!--Body-->
      <div class="modal-body text-center mb-1">

        <!--<h5 class="mt-1 mb-2">Maria Doe</h5>-->
         <form method="POST" id="achievement_update" action="">
             @csrf
            <input type="hidden" id="temp_id" name="temp_id" class="form-control form-control-sm validate ml-0" value="">
            <div class="md-form ml-0 mr-0">
              <label data-error="wrong" data-success="right" for="achevement" class="ml-0">Enter Achievement</label>
              <input type="number" id="achevement" class="form-control form-control-sm validate ml-0 text-center" style="font-size: 20px;" value="0" min="0" max="">

            </div>

            <div class="text-center mt-4">
              <button type="submit" class="btn btn-cyan mt-1">Save</button>
              <button type="button" class="btn btn-warning mt-1" data-dismiss="modal">Close</button>
            </div>
         </form>
      </div>

    </div>
    <!--/.Content-->
  </div>
</div>






@endsection



@section('dynamic_js')
    <script>

        
      $(document).on('click','.add_achievement',function(e){
          e.preventDefault();
          var etarget=$(this).data('etarget');
          var atarget=($(this).data('atarget')?$(this).data('atarget'):0);
          var temp_id=$(this).data('tempid');
          var program_code=$(this).data('program');
          var progam_style='';
            document.getElementById("achevement").max =etarget;
            document.getElementById("achevement").min =atarget;
            if(program_code=="PROGRAM-1"){
                progam_style="orange";
            }else if (program_code=="PROGRAM-2"){
                progam_style="blue";
            }else if(program_code=="PROGRAM-3"){
                progam_style="red";
            }else if (program_code=="PROGRAM-4"){
                progam_style="green";
            }else if (program_code=="PROGRAM-5"){
                progam_style="brown";
            }
            $('#img_div').css("background-color",progam_style);
            $('#employee_target').empty();
            $('#employee_target').append(etarget)
            $('#temp_id').val(temp_id)
            $('#achevement').val(atarget)
          
            $('#modalLoginAvatar').modal({backdrop: 'static', keyboard: false});
      })  
        
        
        
        
    $(document).on('submit','#achievement_update',function(e){
        e.preventDefault();
        
        var id=$('#temp_id').val();
        var achievement=$('#achevement').val();
        $('.page-loader-wrapper').fadeIn();
        $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "{{ route('update_achievement') }}",
                dataType: "json",
                data: {id: id, achievement: achievement},
                cache: false,
                success: function (data) {
                    if (data.msgType == true) {  
                        swal({
                          title: "Success",
                          text: data.msg,
                          icon: "success",
                          buttons: true,
                          dangerMode: true,
                        })
                        .then((willDelete) => {
                          if (willDelete) {
                            location.reload();
                          }
                        });
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

    })
            
        
        
        
        
        $('#year_month').on('change', function (e) {
            e.preventDefault();
            var month_year = $(this).val();
            var result = month_year.split(',');

            var employee_code = '{{ $employee_code }}';


            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('performance.get_employee_task') }}",
                data: {month: result[0], year: result[1], employee_code: employee_code},
                dataType: "json",
                success: function (data) {
                    if (data.msgType == true) {


                        /*********** ADDING TASKS ************/
                        var progam_style = '';
                        $('#task_data').empty();
                        var sub = 1;
                        $.each(data.data.tasks, function (key, item) {

                            $('#task_data').append('<div class="col-md-12"><h6 style="margin-top:4px">' + key + ' (Total:' + item.T + 'tasks)' + '</h6></div>' +
                                '<div class="col-md-12"><div class="row mb20" id="tasks_sub' + sub + '"></div></div>');

                            $.each(item.list, function (index1, value1) {

                                if (value1.program_code == "PROGRAM-1") {
                                    progam_style = "orange";
                                } else if (value1.program_code == "PROGRAM-2") {
                                    progam_style = "blue";
                                } else if (value1.program_code == "PROGRAM-3") {
                                    progam_style = "red";
                                } else if (value1.program_code == "PROGRAM-4") {
                                    progam_style = "green";
                                } else if (value1.program_code == "PROGRAM-5") {
                                    progam_style = "brown";
                                }

                                $('#tasks_sub' + sub).append('<div class="col-md-6 ">'+
                                                    '<div class="card" style="border-top:5px solid '+progam_style+';margin-top: 5px">'+
                                                    '<div class="card-header">'+
                                                    '<h6 class="f-13 f-600">TASK ID : '+value1.task_code+'</h6>'+
                                                    '</div>'+
                                                    '<div class="card-body">'+
                                                    '<div class="row">'+
                                                    '<div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">'+
                                                    '<div class="card-header custom_card_header">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 text-upper"><b>Task Details :</b></span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '<div class="card-body" style="padding: .6rem 1.25rem .6rem 1.25rem;">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Title :</b> '+value1.task_title+'</span>'+
                                                    '</h5>'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Description :</b> '+value1.task_description+'</span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '</div>'+
                                                    '<div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">'+
                                                    '<div class="card-header custom_card_header">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 text-upper"><b>Target Details :</b></span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '<div class="card-body" style="padding: .6rem 1.25rem .6rem 1.25rem;">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Target :</b> '+value1.employee_target+'</span>'+
                                                    '</h5>'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Target achieved:</b> '+value1.employee_achieve_target+'</span>'+
                                                    '</h5>'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Description :</b>  '+value1.employee_target_description+'</span>'+
                                                    '</h5>'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Remarks :</b>  '+value1.employee_remarks+'</span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '</div>'+
                                                    '<div class="col-md-12" style="padding-right: 0px; padding-left: 0px;">'+
                                                    '<div class="card-header custom_card_header">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 text-upper"><b>Allocation Details :</b></span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '<div class="card-body" style="padding: .6rem 1.25rem .6rem 1.25rem;">'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Date :</b> '+value1.task_assigned_date+' </span>'+
                                                    '</h5>'+
                                                    '<h5 class="mb-0">'+
                                                    '<span class="f-13 "><b>Allotted By :</b> '+value1.task_assigned_by+' </span>'+
                                                    '</h5>'+
                                                    '</div>'+
                                                    '</div>'+                                                                    
                                                    '</div>'+
                                                    '</div>'+
                                                    '</div>'+
                                                '</div>');
                            });

                            sub++;

                        });
                        /*********** ADDING TASKS ENDED *********/


                    } else {
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        });



        $('.update-Btn').on('click', function (e){
            e.preventDefault();

            var emp_target_id= $(this).data('emp_id');
            var employee_code= $(this).data('emp_code');
            var id=emp_target_id; 
            var employee_target_description= $('#employee_target_description'+emp_target_id).val();
            var employee_remarks= $('#employee_remarks'+emp_target_id).val();
            var emp_assign= $('#emp_assign'+emp_target_id).val();


            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'updateEmployeeTarget',
                dataType: "json",
                data: {emp_target_id: emp_target_id, employee_target_description: employee_target_description, employee_remarks: employee_remarks, emp_assign: emp_assign, employee_code},
                cache: false,
                success: function (data) {
                    if (data.msgType == true) {
                        /*$('#assignEmpForm'+id)[0].reset();*/
                        
                        swal({
                          title: "Success",
                          text: data.msg,
                          icon: "success",
                          buttons: true,
                          dangerMode: true,
                        })
                        .then((willDelete) => {
                          if (willDelete) {
                            location.reload();
                          }
                        });
                        
                        
                        
                      /*  toastr.success(data.msg);*/
                    } else {
                        if (data.msg == "VE") {
                            $.each(data.data, function (index, value) {
                                var custom_index=index+id;
                                $('#'+custom_index).after('<p class="text-danger ve_errors">' + value + '</p>');
                            });
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });

        });

    </script>

@endsection