@include('components/header')
@include('components/sidebar')
<!--  Begin CONTENT AREA  -->
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Appraisal Form</h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                <button class="btn btn-danger">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-arrow-left">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
                </svg> Back
            </button>
            </a>
        </div>
    </div>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="modal-footer"></div>
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <form action="{{ route('submit_fill_appraisal') }}" class="section" id="appraisal_form" method="post">
                    {{ csrf_field() }}
                    @if(count($appraisal_section) > 0)
                        @php 
                            $i = 0; 
                            $data = unserialize($appraisal_allocation->data);
                            $count = $sum = $total = $average = 0;
                            if(isset($data['question'])) {
                                $count = count($data['question']);
                                $sum = array_sum($data['question']);
                                $total = $count * 5;
                                $average = round((100 * $sum) / $total,2);
                            }
                        @endphp
                        <div class="card" id="appraisal_details">
                            <div class="card-body">
                                <div class="row">
                                    <div class="row col-md-12">
                                        <div class="col-md-4 col-12 mb-3">
                                            <p class="subHeading"> <span> Employee Name </span>
                                                <input type="text" class="form-control" value="{{ $appraisal_allocation->employee_get->first_name }} {{ $appraisal_allocation->employee_get->last_name }}" readonly>
                                            </p>
                                        </div>
                                        <div class="col-md-4 col-12 mb-3">
                                            <p class="subHeading"> <span>Appraisal Date </span>  <input type="text" class="form-control" value="{{ date('d-m-Y') }}" readonly></p>
                                        </div>
                                        <div class="col-md-4 col-12 mb-3">
                                            <p class="subHeading"> <span>Appraisal Period </span> <input type="text" class="form-control" value="{{ date('Y') }}-{{ date('Y', strtotime('+1 year')) }}" readonly> </p>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <p> <span>Team </span> <input type="text" class="form-control" value="{{ $appraisal_allocation->employee_get->departments->department }}" readonly> </p>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <p> <span>Domin </span> <input type="text" class="form-control" value="{{ $appraisal_allocation->employee_get->domains->domain }}" readonly> </p>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <p> <span>Appraiser's Name </span> <input type="text" class="form-control" value="{{ $appraisal_allocation->allocation_single->first_name }} {{ $appraisal_allocation->allocation_single->last_name }}" readonly> </p>
                                        </div>
                                    </div>
                                    <div class="col justify-content-end d-flex">
                                        <div class="m-2">
                                            <p> <strong>Total </strong> <span  class="card_pop">{{ $sum }}</span></p>
                                        </div>
                                        <div class="m-2">
                                            <p> <strong>Percentage </strong> <span class="card_pop"> {{ $average }}%</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 row mx-0 gap-3" id="appraisal_rank">
                            <div class="card px-0 col">
                                <div class="card-body py-2">
                                    <div class="row">
                                        <div class="col">
                                            <p> <span>Unsatisfactory </span> </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p> 1 </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 col">
                                <div class="card-body py-2">
                                    <div class="row">
                                        <div class="col">
                                            <p> <span> Marginal </span> </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p> 2 </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 col">
                                <div class="card-body py-2">
                                    <div class="row">
                                        <div class="col">
                                            <p> <span> Satisfactory </span> </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p> 3 </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 col">
                                <div class="card-body py-2">
                                    <div class="row">
                                        <div class="col">
                                            <p> <span> Highly Satisfactory </span> </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p> 4 </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 col">
                                <div class="card-body py-2">
                                    <div class="row">
                                        <div class="col">
                                            <p> <span> Exceptional </span> </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p> 5 </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3" >
                            <div class="card-body approch_form">
                                <div id="add_section">
                                    <div class="table-responsive" id="employee_appraisal">
                                        <input type="hidden" name="form_id" value="{{ $appraisal_allocation->id }}">
                                        
                                        @foreach($appraisal_section as $main_key => $section)
                                            <div class="section_div">
                                                <div class="d-flex gap-4"> 
                                                    <h6>
                                                        {{ $section->section_name }}
                                                    </h6>
                                                </div>
                                                <table class="table table-striped appraisal_table qustion_table mt-3">
                                                    <thead>
                                                        <tr>
                                                            <th class="sr_head">Sr No.</th>
                                                            <th>Questions</th>
                                                            <th class="ranking_head">Ranking</th>
                                                            <th class="comments_head">Comments</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($main_question as $key => $main_section)
                                                            @if($main_section->section_id == $section->id)
                                                            @php $i++; @endphp
                                                                <tr class="section_tr">
                                                                    <td>
                                                                        {{ $i }}
                                                                    </td>
                                                                    <td>
                                                                        <p>{{ $main_section->question }}</p>
                                                                    </td>
                                                                    <td>
                                                                        <input type="number" step="any" min="1" max="5" placeholder="0" class="form-control" value="{{ isset($data['question'][$i]) ? $data['question'][$i] : '' }}" name="question[{{ $i }}]">
                                                                        <span class="text-danger d-block w-100 text-left"></span>
                                                                    </td>
                                                                    <td>
                                                                        <textarea class="form-control" placeholder="Add Comment" name="comment[{{ $i }}]">{{ isset($data['comment'][$i]) ? $data['comment'][$i] : '' }}</textarea>
                                                                        <span class="text-danger d-block w-100 text-left"></span>
                                                                    </td>
                                                                </tr>
                                                            @endif
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="table-responsive extra_section">
                                    <table class="table table-striped appraisal_table" id="additional_section">
                                        <thead>
                                            <tr>
                                                <th class="sr_head">Sr No.</th>
                                                <th class="que_head">To be filled by the Appraiser/Appraisee</th>
                                                <th>Filled by Appraisee</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php $i = 0; @endphp
                                            @foreach($extra_question as $e_key => $e_que)
                                                @if($e_que->employee_allow == 'Yes')
                                                    @if($appraisal_allocation->emp_id == $appraisal_allocation->allocation_id)

                                                        <tr class="extra_tr">
                                                            <td>{{ ++$i }} </td>
                                                            <td>
                                                                <span>{{ $e_que->question}}</span>
                                                                <span class="text-danger d-block w-100 text-left"></span>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" placeholder="Add Comment" name="extra_comment[{{ $e_key }}]">{{ isset($data['extra_comment'][$e_key]) ? $data['extra_comment'][$e_key] : "" }}</textarea>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @else
                                                    <tr class="extra_tr">
                                                        <td>{{ ++$i }} </td>
                                                        <td>
                                                            <span>{{ $e_que->question}}</span>
                                                            <span class="text-danger d-block w-100 text-left"></span>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" placeholder="Add Comment" name="extra_comment[{{ $e_key }}]">{{ isset($data['extra_comment'][$e_key]) ? $data['extra_comment'][$e_key] : "" }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="recommendations">
                                        <div class="mt-3">
                                            <p>Comments and Suggestions by the Appraiser: [For Supervisor/ Management]</p>
                                            <textarea rows="4" class="form-control" placeholder="Add Comment" name="suggestion">{{ isset($data['suggestion']) ? $data['suggestion'] : "" }}</textarea>
                                        </div>
                                        <div class="mt-3">
                                            <p>Recommendations </p>
                                            <textarea rows="4" class="form-control" placeholder="Add Comment" name="recommendation">{{ isset($data['recommendation']) ? $data['recommendation'] : "" }}</textarea>
                                        </div>
                                    </div>
                                    @if($appraisal_allocation->supervisor_get != null)
                                        <div class="card mt-5">
                                            <div class="card-body">
                                                <div class="">
                                                    <p>AREAS TO BE IMPROVED/PROFESSIONAL DEVELOPMENT GOALS (FOR EC) </p>
                                                    <textarea rows="4" class="form-control" id="ec_section" required placeholder="Add Comment" name="ec_section">{{ isset($data['ec_section']) ? $data['ec_section'] : "" }}</textarea>
                                                    <span class="text-danger"></span>
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-md-6 col-12 mb-3">
                                                        <p class="subHeading"> <span>EC ID </span> </p>
                                                        <input type="text" class="form-control" value="{{ $appraisal_allocation->supervisor_get->id}} " readonly>
                                                    </div>
                                                    <div class="col-md-6 col-12 mb-3">
                                                        <p class="subHeading"> <span> EC Name </span></p>
                                                        <input type="text" class="form-control" value="{{ $appraisal_allocation->supervisor_get->first_name }} {{ $appraisal_allocation->supervisor_get->last_name }}" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if($appraisal_allocation->status != '2')
                                        <div class="mt-4 button_group">
                                            <button class="btn btn-success" type="button" id="save_data">Submit</button>
                                            <a><button class="btn btn-primary" name="reset" type="reset">Reset</button>
                                        </div>
                                    @endif
                                    <div class="mt-3" id="category_section">
                                        <table class="table table-striped appraisal_table">
                                            <tbody>
                                                @foreach($category as $cat)
                                                    <tr>
                                                        <td class="cat_name">{{ $cat->cat_name }}</td>
                                                        <td class="range">{{ $cat->range }}</td>
                                                        <td class="description">{{ $cat->description }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
    @if(session('error'))
        <script type="text/javascript">
            swal.fire({
            title: '@php echo session("error")@endphp',
            type: 'warning',
            padding: '2em'
            })
        </script>
    @endif
    @include('components/footer')
    <script>
        $(document).ready(function(){
            $('#save_data').on('click',function(e) {
                e.preventDefault();
                var form_data = $('.section_div');
                var flag = 0;

                $(form_data).find('input').each(function() {
                    if($(this).val() == null || $(this).val() == "") {
                        flag++;
                        $(this).next().text("This field is required");
                    } else {
                        $(this).next().text(" ");
                        if($(this).val() > 5 || $(this).val() == 0) {
                            flag++;
                            $(this).next().text("Please enter points between 1 to 5");
                        } else {
                            $(this).next().text(" ");
                            if($(this).val() != 3) {
                                var textarea = $(this).parents('.section_tr').find('textarea');
                                if(textarea.val() == null || textarea.val() == "") {
                                    flag++;
                                    $(textarea).next().text("This field is required");
                                } else {
                                    $(textarea).next().text(" ");
                                }
                            }
                        }
                    }
                })

                if(flag == 0) {
                    $("#appraisal_form").submit();
                } else {
                    e.preventDefault();
                }
            })

            $('.prev_button').on('click',function() {
                var id = $(this).data('id');
                var prev_id = id - 1;
                $('.common-form-'+prev_id).removeClass('d-none');
                $('.common-form-'+id).addClass('d-none');
            })
        });

    </script>