@include('components/header')
@include('components/sidebar')
<!--  Begin CONTENT AREA  -->
<style type="text/css">
    .sticky-section {
    position: sticky !important;
    top: 100px;
    z-index: 10;
    background: white;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Appraisal Form</h2>
        <div class="viewAll mr-4">
            <a href="{{ route('appriasal_form_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">
        <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('appriasal_form_submit') }}" class="section" id="appraisal_form" method="post">
                    {{csrf_field()}}
                    @if(isset($appraisal_section))
                        <div class="card">
                            <div class="card-body">
                                <input type="text" name="name" class="form-control form_name" placeholder="Form Name" value="{{ $appraisal_form->form_name }}" required>
                                <span class="text-danger"></span>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="d-flex justify-content-center col-11">
                                        <b><h6>PART - 1</h6></b>
                                    </div>
                                </div>
                                <div id="add_section">
                                    <div class="table-responsive p-2">
                                        @foreach($appraisal_section as $main_key => $section)
                                            @php $i = 0; @endphp
                                            <div class="common-class mt-2">
                                                <div class="d-flex gap-4"> 
                                                    <p class="p-2">{{ $main_key + 1 }}</p>
                                                    <input type="text" value="{{ $section->section_name }}" placeholder="Add Section Name" data-id="0" name="head[{{ $main_key }}]" class="form-control section_div"> 
                                                    <input type="hidden" name="form_id" value="{{ $appraisal_form->id }}">

                                                    @if($allocate_count <= 0)
                                                        @if($main_key == 0)
                                                            <button type="button" id="add-btn" class="btn btn-primary">+</button> 
                                                        @else
                                                            <button type="button" id="add-btn" class="btn btn-danger">-</button> 
                                                        @endif
                                                    @endif
                                                    
                                                    <button type="button" class="data-show btn"><i class="fa fa-chevron-down"></i></button>
                                                </div>
                                                <span class="text-danger"></span>
                                                <table class="table qustion_table table-striped appraisa_table d-none" id="dynamicAddRemove">
                                                    <tbody>
                                                        @foreach($main_question as $key => $main_section)
                                                            @if($main_section->section_id == $section->id)
                                                                <tr>
                                                                    <td class="text-dark"> {{ $main_key + 1 }}.{{ $i + 1 }} </td>
                                                                    <td>
                                                                        <textarea placeholder="Add Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="question[{{ $main_key }}][]">{{ $main_section->question }}</textarea>
                                                                        <span class="text-danger d-block w-100 text-left"></span>
                                                                    </td>
                                                                    <td>
                                                                    @if($allocate_count <= 0)
                                                                        @if($i == 0)
                                                                            <button type="button" class="btn btn-primary" onclick="add_question(this)">+</button>
                                                                        @else 
                                                                            <button type="button" class="btn btn-warning remove-question">-</button>
                                                                        @endif
                                                                    @endif
                                                                        @php $i++; @endphp
                                                                    </td>
                                                                </tr>
                                                            @endif
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-center p-2">
                                    <b><h6>PART - 2</h6></b>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-striped" id="additional_section">
                                        <thead>
                                            <tr>
                                                <th>To be filled by the Appraiser/Appraisee</th>
                                                <th>Filled by Appraisee</th>
                                                @if($allocate_count <= 0)
                                                    <th></th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($extra_question as $e_key => $e_que)
                                                <tr>
                                                    <td>
                                                        <textarea placeholder="Additional Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="additional_question[]">{{ $e_que->question}}</textarea>
                                                        <span class="text-danger d-block w-100 text-left"></span>
                                                    </td>
                                                    <td>
                                                        <input type="checkbox" {{ $e_que->employee_allow == 'Yes' ? 'checked' : '' }} name="employee_allow_{{ $e_key }}">
                                                    </td>
                                                    @if($allocate_count <= 0)
                                                        <td>
                                                            @if($e_key == 0)
                                                                <button type="button" class="btn btn-primary add_additional">+</button>
                                                            @else
                                                                <button type="button" class="btn btn-danger remove_additional">-</button>
                                                            @endif
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-center p-2">
                                    <b><h6>Category</h6></b>
                                </div>
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Sr. No</th>
                                            <th>Category</th>
                                            <th>Range</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($category as $keys => $cat)
                                            <tr>
                                                <td>{{ ++$keys }}</td>
                                                <td>{{ $cat->cat_name }}</td>
                                                <td>{{ $cat->range }}</td>
                                                <td>{{ $cat->description }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if($allocate_count <= 0)
                                <div class="m-3">
                                    <button class="btn btn-success" type="button" id="save_data">Submit</button>
                                    <a><button class="btn btn-primary" id="reset" name="reset" type="reset">Reset</button>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="card">
                            <div class="card-body">
                                <input type="text" name="name" class="form-control form_name" placeholder="Form Name" required>
                                <span class="text-danger"></span>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1">
                                    <b><h6>PART - 1</h6></b>
                                </div>
                                <div id="add_section">
                                    <div class="sticky-section">
                                        <div class="d-flex gap-4"> 
                                            <input type="text" value="" placeholder="Add Section Name" data-id="0" name="head[]" class="form-control"/> 
                                            <button type="button" id="add-btn" class="btn btn-primary">+</button> 
                                        </div>
                                        <span class="text-danger d-block w-100 text-left"></span>
                                    </div>
                                    <div class="table-responsive">
                                        <b class="section_div" data-id="0"></b>
                                        <table class="table qustion_table mt-2" id="dynamicAddRemove">
                                            <thead>
                                                <tr>
                                                    <th>Questions</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <textarea placeholder="Add Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="question[0][]"></textarea>
                                                        <span class="text-danger d-block w-100 text-left"></span>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-success" onclick="add_question(this)">+</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1">
                                    <b><h6>PART - 2</h6></b>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-striped" id="additional_section">
                                        <thead>
                                            <tr>
                                                <th>To be filled by the Appraiser</th>
                                                <th>Fill by Employee</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <textarea placeholder="Additional Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="additional_question[]"></textarea>
                                                    <span class="text-danger d-block w-100 text-left"></span>
                                                </td>
                                                <td>
                                                    <input type="checkbox" checked="false" name="employee_allow_0">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary add_additional">+</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row category_section">
                                    <div class="col-11 justify-content-center d-flex">
                                        <b><h6>Add Category</h6></b>
                                    </div>
                                    <div class="col-1 justify-content-end d-flex">
                                        <button type="button" class="btn btn-primary add_category">+</button>
                                    </div>
                                    <div class="col-4">
                                        <label>Name:</label>
                                        <input type="text" name="cat_name[0]" placeholder="Enter Category Name" class="form-control mb-2 text">
                                        <p class="text-danger"></p>
                                    </div>
                                    <div class="col-4">
                                        <label>Percentage Range:</label>
                                        <input type="text" name="cat_range[0]" placeholder="Enter Percentage Range" class="form-control mb-2 text">
                                        <p class="text-danger"></p>
                                    </div>
                                    <div class="col-4">
                                        <label>Description:</label>
                                        <textarea type="text" name="cat_desc[0]" placeholder="Enter Desctription" class="form-control"></textarea>
                                        <p class="text-danger"></p>
                                    </div>
                                </div>
                                
                                <div class="mt-4">
                                    <button class="btn btn-success" type="button" id="save_data">Submit</button>
                                    <button class="btn btn-primary" name="reset" id="reset" type="reset">Reset</button>
                                </div>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
    @if(session('done'))
        <script type="text/javascript">
            swal.fire({
            title: '@php echo session("done")@endphp',
            type: 'success',
            padding: '2em'
            })
        </script>
    @elseif(session('edit'))
        <script type="text/javascript">
            swal.fire({
            title: '@php echo session("edit")@endphp',
            type: 'success',
            padding: '2em'
            })
        </script>
    @elseif(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() {
        var i = {{ isset($appraisal_section) ? $main_key : 0}};

        $("#add-btn").click(function(){
            i++; 
            $("#add_section").append('<div class="table-responsive"><div class="common-class"><div class="d-flex gap-4"><input type="text" value="" placeholder="Add Section Name" name="head['+i+']" data-id="'+i+'" class="form-control section_div"/><button type="button" class="btn btn-danger remove-tr">-</button></div><span class="text-danger d-block w-100 text-left"></span> <table class="table qustion_table mt-2" id="dynamicAddRemove"><thead><tr><th>Questions</th><th></th></tr></thead><tbody><tr><td><textarea placeholder="Add Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="question['+i+'][]"></textarea><span class="text-danger d-block w-100 text-left"></span></td><td> <button type="button" class="btn btn-primary" onclick="add_question(this)">+</button></td></tr></tbody> </table></div></div>');
        });
        $(document).on('click', '.remove-tr', function(){  
            $(this).parents('.common-class').remove();
        });

        $(document).on('click', '.remove-question', function(){  
            $(this).parents('tr').remove();
        });

        $('#reset').click(function() {
            location.reload();
        })

        var j = 0;

        $(".add_additional").click(function(){
            j++; 
            $("#additional_section").append('<tr><td><textarea placeholder="Additional Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="additional_question[]"></textarea><span class="text-danger d-block w-100 text-left"></span></td><td><input checked="false" type="checkbox" name="employee_allow_'+j+'"></td><td><button type="button" class="btn btn-danger remove_additional"> - </button></td></tr>');
        });

        $(document).on('click', '.remove_additional', function(){  
            $(this).parents('tr').remove();
        });

        $(".data-show").on('click',function(){
            $(this).find('i').toggleClass('fa-chevron-down fa-chevron-up');
            console.log($(this).parents('.common-class'));
            $(this).parents('.common-class').find('.qustion_table').toggleClass('d-none');
        })
    });

    function add_question(div) {
        var id = $(div).parents('.table-responsive').find('.section_div').data('id');
        console.log(id,$(div).parents('.table-responsive').find('.section_div'));
        $(div).parents('.qustion_table').append('<tr><td><textarea placeholder="Add Questions" cols="110" style="resize: none;" class="form-control" rows="2" name="question['+id+'][]"></textarea> <span class="text-danger d-block w-100 text-left"></span></td><td><button type="button" class="btn btn-warning remove-question "> - </button> </td></tr>');
    }

    $(".close_form").click(function(){
        location.reload(); 
    })

    var i = 0;
    $(".add_category").click(function() {
        i++; 

        $(".category_section").append('<div class="row p-0 m-0 cat_section"><div class="col-4"><label>Name:</label><input type="text" name="cat_name['+i+']" placeholder="Enter Category Name" class="form-control mb-2 text"><p class="text-danger"></p></div><div class="col-4"><label>Percentage Range:</label><input type="text" name="cat_range['+i+']" placeholder="Enter Percentage Range" class="form-control mb-2 text"><p class="text-danger"></p></div><div class="col-4"><div class="d-flex justify-content-between mb-2"> <label>Description:</label><button type="button" class="btn btn-danger remove-cat">-</button></div><textarea type="text" name="cat_desc['+i+']" placeholder="Enter Desctription" class="form-control"></textarea><p class="text-danger"></p></div></div>');
    })

    $(document).on('click', '.remove-cat', function(){  
        $(this).parents('.cat_section').remove();
    })


    $("#save_data").click(function() {
        var count = 0;
        $("#add_section").find('input').each(function() {
            if($(this).val().trim() == null || $(this).val().trim() == "") {
                count++;
                $(this).parent().next().text('This field is required');
            } else {
                $(this).parent().next().text(' ');
            }
        })
        if($(".form_name").val().trim() == null || $(".form_name").val().trim() == "") {
            count++;
            $(".form_name").next().text('This field is required');
        } else {
            $(".form_name").next().text(' ');
        }
        $("#add_section").find('textarea').each(function() {

            if($(this).val().trim() == null || $(this).val().trim() == "") {
                count++;
                $(this).next().text('This field is required');
            } else {
                $(this).next().text(' ');
            }
        })
        $("#additional_section").find('textarea').each(function() {
            if($(this).val().trim() == null || $(this).val().trim() == "") {
                count++;
                $(this).next().text('This field is required');
            } else {
                $(this).next().text(' ');
            }
        })

        $(".category_section").find('input').each(function() {
            if($(this).val().trim() == null || $(this).val().trim() == "") {
                count++;
                $(this).next().text('This field is required');
            } else {
                $(this).next().text(' ');
            }
        })

        $(".category_section").find('textarea').each(function() {
            if($(this).val().trim() == null || $(this).val().trim() == "") {
                count++;
                $(this).next().text('This field is required');
            } else {
                $(this).next().text(' ');
            }
        })

        if(count == 0) {
            $("#appraisal_form").submit();
        }
    })



    </script>