@extends('layouts.app2')



@section('badcome')
<!--  <div class="badecome_div mb10">
<div class="pb10 pt10">
     <a href="{{ url('home') }}" class="badge badge-theam p7">Home </a> <span class="badcome_line"> | </span> <a href="{{ route('usermanagement')}}" class="badge badge-theam p7"> Dashboard </a>
  </div>
</div>-->
@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%;
    }
</style>
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        
        <div class="col-md-12 col-md-push-0 p20 bg-white mt10">
	
		 @if(count($employee_task)>0)
            <table class="table table-bordered table-condensed table table-striped table-responsive">
                <thead>
                    <tr>
                        <th>#</th><th>Title</th><th>Task Description</th><th>Remarks</th><th>Target</th><th>Assigned By</th><th>Assigned On</th><th>Status</th><th>View</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $i = 1;
                        $task_status = [
                            'Incomplete',
                            'Complete'
                        ]
                    @endphp
                    @foreach($employee_task AS $value)
                    
                    <tr>
                        
                        <td>{{$i++}}</td>
                         <td>{{$value['task_title']}}</td>
                        <td>{{$value['employee_target_description']}}</td>
                        <td>{{$value['remarks']}}</td>
                        <td>{{$value['employee_target']}}</td>
                        <td>{{$value['assigned_by']}}</td>
                        <td>{{$value['created_at']}}</td>
                        <td>{{$task_status[$value['employee_target_status']]}}</td>
                        <td><button type="button" class="btn btn-sm btn-info view-employee-task-btn" data-toggle="modal" data-target="#viewEmployeeTask" id="employee_task_{{$value['id']}}">VIEW</button></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
		  @else
			 <div class="text-center" style="height: 40rem;height: 40rem;vertical-align: middle;display: table-cell;width: 100rem;"><h1>No Task Assigned.</h1></div>
		  @endif
        </div>
    </div>
</div>

<!-- =================================================== ADD MODAL =============================================== -->


<div class="modal fade" id="viewEmployeeTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">View Employee Task Details</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>

            <!--Body-->

            <div class="modal-body">
                <h3 class="text text-info text-center" id="waiting_message">Please wait for a moment....</h3>
                <table class="table table-bordered table-responsive" hidden="" id="employee_task_table">
                    <tr>
                        <th>Task Title</th><td id="title_data"></td>
                    </tr>
                    <tr>
                        <th>Task Status</th><td id="task_status_data"></td>
                    </tr>
                    <tr>
                        <th>Task Assigned On</th><td id="task_creation_data"></td>
                    </tr>
                    <tr>
                        <th>Employee's Targets</th><td id="district_target_data"></td>
                    </tr>
                    <tr>
                        <th>Task Month</th><td id="task_month_data"></td>
                    </tr>
                    <tr>
                        <th>Task Allotted By</th><td id="task_allotation_by"></td>
                    </tr>
                </table>

            </div>

            <!--Footer-->
            <div class="modal-footer">
                <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">CANCEL</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>

<script>
    $(document).on('click','.view-employee-task-btn',function(){
        var id = $(this).attr('id').split("_");
        $.get("{{url('/employee_task')}}",{
            employee_task:id[2]
        },function(j){
            $('#waiting_message').hide();
            $('#employee_task_table').removeAttr("hidden");
            for(var i = 0; i < j.length; i++){
                $('#title_data').text(j[i].task_title);
                $('#task_status_data').text(j[i].active_status);
                $('#task_creation_data').text(j[i].task_creation);
                $('#task_allotation_by').text(j[i].task_assign_by);
                $('#task_month_data').text(j[i].month+", "+j[i].year);
                $('#district_target_data').text(j[i].employee_target);
            }
        }).fail(function(){
            swal("Something went wrong. Please try again!");
        });
    });
</script>
@endsection