@include('components/header')
@include('components/sidebar')
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Suggestion List</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 layout-top-spacing">
        <div class="modal-footer">
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="card">
                    <div class="card-body search-filter p-3">
                        <form class="form-group" method="post" action="/suggestionList">
                            {{csrf_field()}}
                            <div class="row emp-filter-area justify-content-end">
                                <div class="col-2 form-group date-col">
                                    <div class="date-field-with-icon">
                                        <input type="text" onchange="validateDates(this.value)" placeholder="Start Date" class="form-control datepicker" name="start_date" id="startDate" autocomplete="off" maxlength="10" value="@if(session()->has('s_date')){{session()->get('s_date')}}@endif">
                                        <div class="date-icon"><img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" /></div>
                                        <span id="start_error" class="text-danger"></span>
                                    </div>                                        
                                </div>
                                <div class="col-2 form-group date-col">
                                    <div class="date-field-with-icon">
                                        <input type="text" onchange="validateDates(this.value)" placeholder="End Date" class="form-control datepicker" name="end_date" id="endDate" autocomplete="off" value="@if(session()->has('e_date')){{session()->get('e_date')}}@endif">
                                        <div class="date-icon"><img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" /></div>
                                        <span id="end_error" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-2 form-group pl-0">
                                    <div class="row align-items-center mx-0">
                                        <div class="col">   
                                            <div class="form-group p-0">
                                                <button  id="filter_form" class="btn btn-primary btn-block searchBtn">Search</button>
                                            </div>
                                        </div>
                                        @if(Session::get('s_date') != null && Session::get('e_date') != null)
                                        <div class="col-3 listfilter d-flex justify-content-center">
                                            <div class="clear-filter-icon form-group mb-0">
                                                <a href="/suggestionList">
                                                    <img src="{{ asset('design/img/clearfiltericon.svg') }}">
                                                </a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>                                
                                </div>                                
                            </div>                       
                        </form>
                    </div>

                    <form action="{{url('addEOW')}}" method="post" class="form-group" id="submit_eow">
                        {{csrf_field()}}
                        <table id="zero-config" class="table table-striped dt-table-hover">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    <th>Employee Id</th>
                                    <th>Employee Name</th>
                                    <th>Total Suggestion</th>
                                    <!-- <th>date</th> -->
                                    <th>Action</th>
                                    <th style="display:none;">Points</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $i = 0 @endphp
                                @foreach($data as $m)
                                    @if($m->Total_Point>0)
                                        <tr>
                                            @php $i++; @endphp
                                            <td>{{$i}}</td>
                                            <td>{{$m->id}}</td>
                                            <td><a href="/suggestionReport/{{$m->id}}" style="color: black;">{{$m->first_name}}
                                                {{$m->last_name}}
                                            </a>
                                            </td>
                                            <td>
                                                {{$m->Total_Point}}
                                            </td>
                                           
                                            <td>
                                                <div class="row">                                        
                                                    <input type="checkbox" name="check" data-id="{{$i}}" class="check">
                                                </div>
                                            </td>
                                            <td style="display:none;" id="{{$i}}">
                                                <input type="hidden" value="{{$m->id}}" name="emp_id[]" disabled>
                                                <input type="number" disabled class="form-control point_field" min="1" max="20" name="point[]" style="width:80px;">
                                                <span class="error_msg text-danger"></span>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        <div class="col-12">
                            <input type="submit" class="btn btn-primary col-md-1 col-sm-2 col-12" id="eow_form" style="display:none;">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>        
</div>
@include('components/footer')
<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat : "dd/mm/yy",
        });
    })
    $(".check").click(function(){
        var flag = 0;
        var check = $(this).data('id');
        var check_val = $(this).is(':checked');
        $('thead tr th:nth-child(6)').removeAttr('style');

        if(check_val == true){
            $('#' + check).removeAttr('style');
            $('#eow_form').removeAttr('style');
            $('#' + check).find('input').removeAttr('disabled');
        }else{
            $('#' + check).css('display','none');
            $('#' + check).find('input').attr('disabled','true');
            $('#' + check).find('input[type="number"]').val('');
            $('#' + check).find('span').text("");

        }
        $(".check").each(function(){
            var check_val = $(this).is(':checked');
            if(check_val == true){
                flag++;
            }
        })
        if(flag <= 0){
            $('thead tr th:nth-child(6)').css('display','none');
            $('#eow_form').css('display','none');
        }
    })

    $("#eow_form").on("click",function(event){
        $(".point_field").each(function(){
            var attr = $(this).attr('disabled');
            if(attr == undefined){
                var point = $(this).val().trim();
                if(point == ''){
                    $(this).next('span').text("This field is required");
                    event.preventDefault();
                }else{
                    $(this).next('span').text("");
                }
            }
        });
    })
</script>