@include('components/uheader')
@include('components/usidebar')

        <!--  Begin CONTENT AREA  -->
        <div id="content" class="main-content">
            <div class="layout-px-spacing">
                <!-- Start Main Profile -->
                <div class="row layout-top-spacing">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="border-0">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-7">
                                            <div class="row">
                                                <div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
                                                    <form id="eow-form" class="section eow" action="/suggestion" method="post" enctype="multipart/form-data">
                                                        {{csrf_field()}}
                                                        <div class="eowDetails">
                                                            <h6 class="">Employee Of The Week Suggestion</h6>
                                                              <table class="col-xl-12" id="dynamicAddRemove">
                                                                <tr>
                                                                    <td>
                                                                        <select class="form-control row" name="name[]">
                                                                            @foreach($data as $u)
                                                                            <option value="{{$u->id}}">{{$u->first_name}} {{$u->last_name}} ({{$u->id}})</option>
                                                                            @endforeach
                                                                        </select>                                
                                                                    </td>
                                                                    <td><input type="file" onclick="imagesAdd()" id="image" multiple name="image[0][]" class="form-control row"></td>
                                                                    <td><textarea rows="1" cols="20" name="comment[0]" class="form-control row" placeholder="Comment"></textarea></td>
                                                                    <td>
                                                                    <button type="button" id="add-btn" name="add" style="background-color: lightgray" class="btn btn-secondry row">+</button></td>
                                                                </tr>
                                                             </table> 
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 eowApply">
                                                                <div class="mt-4">
                                                                    <button class="btn pmd-ripple-effect btn-primary pmd-btn-raised" type="submit">Submit</button>
                                                                     <button class="btn pmd-ripple-effect btn-primary pmd-btn-raised" type="reset">Reset</button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Main Profile -->
                </div>
                
@include('components/ufooter')


<script>
    var i = 0;
        $("#add-btn").click(function(){
        ++i; 
        $("#dynamicAddRemove").append('<tr><<td><select class="form-control row" name=name['+ i +']> <@foreach($data as $u)<option value="{{$u->id}}">{{$u->first_name}} {{$u->last_name}} {{$u->id}} </option> @endforeach </select></td><td><input type="file" multiple name="image['+ i +'][]" class="form-control row"></td><td><textarea rows="1" cols="20" name="comment['+ i +']" class="form-control row" placeholder="Comment"></textarea></td><td><button type="button" style="background-color: lightgray" class="btn btn-secondry row remove-tr">-</button></td></tr>');
        });
        $(document).on('click', '.remove-tr', function(){  
        $(this).parents('tr').remove();
    });
    
</script>