{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-text font-size-lg">{{$page_title}}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">
            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                    <!--begin::Row-->
                    <div class="row">
                        @include("backend.errors")
                        <!--begin::Group-->
                        <div class="col-12 text-center">
                            <h3>Employee Performance Appraisal</h3>
                            <hr>
                        </div>
                        <!--end::Group-->
                        <div class="col-12 my-2">
                            <!--begin::Group-->
                            <div class="row my-4">
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Date <span class="text-danger">*</span></label>
                                    <div class="input-group input-group-lg input-group-solid">
                                        <span class="input-group-text"><i class="la la-calendar"></i></span>
                                        <input class="form-control form-control-lg form-control-solid age-datepicker required" type="text" name="date" id="date" value="{{ $data['date'] ?? old('date') }}" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Employee Name <span class="text-danger">*</span></label>
                                    <select id="employeeName" name="employee_id" class="form-control form-control-lg form-control-solid required form-select">
                                        <option value="">Select</option>
                                        @foreach ($employees_list as $val)
                                            <option value="{{ $val['id'] }}" {{ isset($data['employee_id']) && $data['employee_id'] == $val['id'] ? 'selected' : '' }} data-designation="{{ $val['designation'] }}">{{ $val['employee_name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <input id="employee_designation" type="hidden" name="employee_designation">
                                    <label class="col-form-label">Designation</label>
                                    <select id="employeeDesignation" class="form-control form-control-lg form-control-solid form-select" disabled>
                                        <option value="">Select</option>
                                        @foreach ($designation_list as $id => $name)
                                            <option value="{{ $id }}"> {{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--end::Group-->

                            <!--begin::Group-->
                            <div class="row my-4">
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Review Period <span class="text-danger">*</span></label>
                                    <select name="review_period" class="form-control form-control-lg form-control-solid required form-select">
                                        <option value="">Select</option>
                                        @foreach (config('constant.employee_performance_appraisal.review_period') as $val)
                                            <option value="{{ $val }}" {{ isset($data['review_period']) && $data['review_period'] == $val ? 'selected' : '' }}>{{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Reviewer Name <span class="text-danger">*</span></label>
                                    <select id="reviewerName" name="reviewer_id" class="form-control form-control-lg form-control-solid required form-select">
                                        <option value="">Select</option>
                                        @foreach ($reviewers_list as $val)
                                            <option value="{{ $val['id'] }}" {{ isset($data['reviewer_id']) && $data['reviewer_id'] == $val['id'] ? 'selected' : '' }} data-designation="{{ $val['designation'] }}">{{ $val['reviewer_name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-12 col-xs-12">
                                    <input id="reviewer_designation" type="hidden" name="reviewer_designation">
                                    <label class="col-form-label">Designation</label>
                                    <select id="reviewerDesignation" class="form-control form-control-lg form-control-solid form-select" disabled>
                                        <option value="">Select</option>
                                        @foreach ($designation_list as $id => $name)
                                            <option value="{{ $id }}"> {{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Row-->
                    <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th width="30%" style="font-size: 1.2rem;">Performance evaluation</th>
                                @foreach (config('constant.employee_performance_appraisal.performance_evaluation_radio_value') as $rLabel)
                                <th width="10%" style="font-size: 1.2rem;">{{ $rLabel }}</th>
                                @endforeach
                                <th width="30%" style="font-size: 1.2rem;">Comments</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (config('constant.employee_performance_appraisal.performance_evaluation') as $key => $label) 
                            <tr>
                                <th>{{ $label }}</th>
                                @foreach (config('constant.employee_performance_appraisal.performance_evaluation_radio_value') as $rValue => $rLabel)
                                <td>
                                    <div class="form-check">
                                    <input class="rating-radio form-check-input" type="radio"
                                    value="{{ $rValue }}" name="other_data[{{ $key }}][answer_1]" {{ isset($otherData[ $key ]) && $otherData[ $key ]['answer_1'] == $rValue ? 'checked' : ''}} />
                                    </div>
                                </td> 
                                @endforeach
                                <td>
                                    <div class="me-3">
                                    <textarea class="form-control form-control-lg form-control-solid" name="other_data[{{ $key }}][answer_2]" >{{ $otherData[$key]['answer_2']??"" }}</textarea>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                    <table class="table table-bordered mt-5" style="width: 30%;">
                        <tbody>
                            <tr>
                                <th>Overall Rating</th>
                                <td id="overall-rating" class="text-center"></td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="row my-2">
                        <!--end::Group-->
                        <div class="col-12 my-2">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label">The performance of skills that needs to be improved</label>
                                    <textarea class="form-control form-control-lg form-control-solid" name="performance_of_skills" >{{ $data['performance_of_skills']??old('performance_of_skills') }}</textarea>
                                </div>
                                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Explicit requirements that are to be performed consistently</label>
                                    <textarea class="form-control form-control-lg form-control-solid" name="explicit_requirements" >{{ $data['explicit_requirements']??old('explicit_requirements') }}</textarea>
                                </div>
                                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label">What actions will be taken to ensure expectations are met?</label>
                                    <textarea class="form-control form-control-lg form-control-solid" name="what_actions" >{{ $data['what_actions']??old('what_actions') }}</textarea>
                                </div>
                                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Reviewer’s comments</label>
                                    <textarea rows="3" class="form-control form-control-lg form-control-solid" name="reviewers_comments" >{{ $data['reviewers_comments']??old('reviewers_comments') }}</textarea>
                                </div>
                                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label">Specify a date for improvements to be made</label>
                                    <div class="input-group input-group-lg input-group-solid">
                                        <span class="input-group-text"><i class="la la-calendar"></i></span>
                                        <input class="form-control form-control-lg form-control-solid age-datepicker" type="text" name="date_for_improvements" value="{{ $data['date_for_improvements'] ?? old('date_for_improvements') }}" autocomplete="off" />
                                    </div>
                                </div>
                            </div>
                            <!--end::Group-->

                            <!--begin::Group-->
                            <div class="form-group row mt-4">
                                <div class="col-12">
                                    <label class="col-form-label">By signing this form, the employee and reviewer confirm all items above have been discussed in detail. Signing this form does not necessarily indicate that the employee agrees with this performance appraisal.</label>
                                </div>
                            </div>
                            <!--end::Group-->

                        </div>
                        <!--begin::Group-->
                        <div class="form-group row">
                            <div class="col-lg-3 col-xl-3 col-md-3 col-sm-12 col-xs-12">
                                <hr style="border-bottom: 1px solid black; margin-top: 4rem">
                                <label class="col-form-label">Employee Signature </label>
                            </div>
                            <div class="col-lg-3 col-xl-3 col-md-3 col-sm-12 col-xs-12">
                                <hr style="border-bottom: 1px solid black; margin-top: 4rem;">
                                <label class="col-form-label">Date </label>
                            </div>
                            <div class="col-lg-3 col-xl-3 col-md-3 col-sm-12 col-xs-12">
                                <hr style="border-bottom: 1px solid black; margin-top: 4rem;">
                                <label class="col-form-label">Reviewer Signature </label>
                            </div>
                            <div class="col-lg-3 col-xl-3 col-md-3 col-sm-12 col-xs-12">
                                <hr style="border-bottom: 1px solid black; margin-top: 4rem;">
                                <label class="col-form-label">Date </label>
                            </div>
                        </div>
                        <!--end::Group-->
                    </div>
                </div>
                <!--end::Tab-->
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button id="submit-btn" type="submit" class="btn btn-primary me-2 btn-hover-rise" onclick="$('#manage_form').submit();">Submit</button>
            <a href="{{route('employee_performance_appraisal.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        initDatePicker();

        $('#manage_form').validate({
            ignore: [],
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors && errors == 1) {
                    console.log(validator.errorList)
                }
                $(".tab-content").find(
                        '.tab-pane:not(.active) .text-danger:not([style*="display: none"]):first')
                    .each(function(index, tab) {
                        var id = $(tab).parents('.tab-pane:first').attr("id");
                        console.log(id)
                        $('a[href="#' + id + '"]').tab('show');
                    });
            }
        });
    });

    function initDatePicker() {
        $(".datepicker").datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            format: 'dd-mm-yyyy',
            // endDate: '+0d',
            autoclose: true
        });
    }

    $(document).ready(function(){
        $('#employeeName').change(function(){
            var employeeDesignationId = $(this).find(':selected').data('designation');
            $('#employeeDesignation').val(employeeDesignationId);
            $('#employee_designation').val(employeeDesignationId);
        }).trigger('change');

        $('#reviewerName').change(function(){
            var reviewerDesignationId = $(this).find(':selected').data('designation');
            $('#reviewerDesignation').val(reviewerDesignationId);
            $('#reviewer_designation').val(reviewerDesignationId);
        }).trigger('change');
    });



    // On page load
    updateTotalRating();

    function updateTotalRating() {
        var total = 0;
        $(".rating-radio").each(function(){
            if($(this).prop('checked')){
                total = total + parseFloat($(this).attr('value'));
            }
        })
        var totalRating = total;
        $("#overall-rating").text(totalRating + "/100");
    }

    // On change
    $('.rating-radio').change(updateTotalRating);

    // Disable button on submit
    $("#manage_form").on('submit', function(){
        if($('#manage_form').valid()) {
            $('#submit-btn').prop('disabled', true);
            $('#submit-btn').html('submitting ...');
        }
    });
</script>
@endsection