@include('components/uheader')
@include('components/usidebar')
<!--  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="{{ route('employee_appriasal_list') }}" 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 layout-top-spacing">
        <div class="modal-footer"></div>
        <div class="col-xl-12 col-lg-12 col-sm-12 px-0 layout-spacing">
            <form action="{{ route('submit_fill_appraisal') }}" class="section" method="post" id="employee_appraisal">
                {{csrf_field()}}
                @if(count($appraisal_section) > 0)
                    <div class="card" id="appraisal_details">
                        <div class="card-body">
                            <div class="row">
                                <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>
                    </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">
                            <div class="d-flex justify-content-center heading_section">
                                <b><h6>PART - 1</h6></b>
                            </div>
                            <div id="add_section">
                                <div class="table-responsive">
                                    <input type="hidden" name="form_id" value="{{ $appraisal_allocation->id }}">
                                    @php $i = 0; @endphp
                                    @foreach($appraisal_section as $main_key => $section)
                                        <div class="section_div common-form-{{ $main_key }} {{ $main_key != '0' ? 'd-none' : ''}}">
                                            <div class="table_heading"> 
                                                <h6>
                                                    {{ $section->section_name }}
                                                </h6>
                                            </div>
                                            <table class="table qustion_table table-striped appraisal_table" id="dynamicAddRemove">
                                                <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" name="question[{{ $i }}]">
                                                                    <span class="text-danger d-block w-100 text-left"></span>
                                                                </td>
                                                                <td>
                                                                    <textarea placeholder="Add Comment" class="form-control" name="comment[{{ $i }}]"></textarea>
                                                                    <span class="text-danger d-block w-100 text-left"></span>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <div class="button_group">
                                                @if($main_key > 0)

                                                    <button class="btn btn-primary prev_button" type="button" data-count="{{ count($appraisal_section) }}" data-id="{{ $main_key }}">
                                                        <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> Previous </button>
                                                @endif
                                                <button class="btn btn-success next_button" type="button" data-count="{{ count($appraisal_section) }}" data-id="{{ $main_key }}"> Next
                                                    <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-right">
                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                                    <polyline points="12 5 19 12 12 19"></polyline>
                                                </svg>

                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive extra_section d-none card-body">
                            <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 == Auth::user()->emp_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 }}]"></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 }}]"></textarea>
                                                </td>
                                            </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="recommendations">
                                <div class="mt-5">
                                    <p>Comments and Suggestions by the Appraiser : [For Supervisor/ Management]</p>
                                    <textarea rows="4" class="form-control" placeholder="Add Comment" name="suggestion"></textarea>
                                </div>
                                <div class="mt-5">
                                    <p>Recommendations </p>
                                    <textarea rows="4" class="form-control" placeholder="Add Comment" name="recommendation"></textarea>
                                </div>
                            </div>
                            <div class="mt-4 button_group">
                                <button class="btn btn-primary" type="button" id="extra_prev">
                                    <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> Previous 
                                </button>
                                <button class="btn btn-success" type="submit" id="save_data">Submit</button>
                                <button class="btn btn-danger" name="reset" id="reset" type="reset">Reset</button>
                            </div>
                            <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>
                @endif
            </form>
        </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/ufooter')
    <script>
        $(document).ready(function(){
            $("#reset").click(function() {
                location.reload();
            })

            $('.next_button').on('click',function() {
                var flag = 0;
                var id = $(this).data('id');
                var form_data = $(this).parents('.section_div');

                $(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) {
                    var next_id = id + 1;
                    if($(this).data('count') <= next_id) {
                        $('.heading_section').html("<h6>PART - 2</h6>");
                        $('.extra_section').removeClass('d-none');
                        $('.common-form-'+id).addClass('d-none');
                    } else {
                        $('.common-form-'+next_id).removeClass('d-none');
                        $('.common-form-'+id).addClass('d-none');
                    }
                }
            })

            $('.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');
            })

            $("#extra_prev").click(function() {
                var prev_id = "{{ count($appraisal_section) }}" - 1;
                console.log(prev_id);
                $('.heading_section').html("<h6>PART - 1</h6>");
                $('.extra_section').addClass('d-none');
                $('.common-form-'+prev_id).removeClass('d-none');
            })
        });

    </script>