@extends('employer.layouts.app')
@section('content')
    @component('employer.layouts.partials.breadcrumbs', ['breadcrumbs' => $breadcrumbs])
    @endcomponent

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">FNPF REPORT</h6>
                    
                    {{-- <div class="float-right mb-3">
                          <button type="button" class="btn btn-primary btn-icon-text" onclick="window.location='{{route("employer.report.providentfund.export")}}'">
                            <i class="btn-icon-prepend" data-feather="download-cloud"></i>
                            Download Report
                          </button> 
                    </div> --}}
                        
                        <div class="row mt-4 mb-4" id="" >
                            
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Business<span class="text-danger"></span></label>
                                    <select name="business" id="business1" class="@if ($errors->has('business')) is-invalid @endif" >
                                        <option selected="true" value=" ">All Business</option>
                                        @foreach($businesses as $business)
                                            <option value="{{$business->id}}">{{$business->name}}</option>
                                        @endforeach
                                    </select>                                
                                    <div class="invalid-feedback">{{ $errors->first('business') }}</div>
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Branch<span class="text-danger"></span></label>
                                    <select name="branch" id="branch1" class="@if ($errors->has('branch')) is-invalid @endif" >
                                        <option selected="true" value=" ">All Branch</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->id}}">{{$branch->name}}</option>
                                        @endforeach
                                    </select>                                
                                    <div class="invalid-feedback">{{ $errors->first('branch') }}</div>
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Department<span class="text-danger"></span></label>
                                    <select name="department" id="department" class="@if ($errors->has('department')) is-invalid @endif" >
                                        <option selected="true" value=" ">All Department</option>
                                        @foreach($departments as $department)
                                            <option value="{{$department->id}}">{{$department->dep_name}}</option>
                                        @endforeach
                                    </select>                                
                                    <div class="invalid-feedback">{{ $errors->first('department') }}</div>
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Employee<span class="text-danger"></span></label>
                                    <select name="user" id="user" class="@if ($errors->has('user')) is-invalid @endif" >
                                        <option selected="true" value=" ">All Employees</option>
                                        @foreach($users as $user)
                                            <option value="{{$user->id}}">{{$user->employee_id}} - {{$user->first_name}} {{$user->last_name}}</option>
                                        @endforeach
                                    </select>                                
                                    <div class="invalid-feedback">{{ $errors->first('user') }}</div>
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label">Start date</label>
                                    <input type="date"
                                        class="form-control @if ($errors->has('start_date')) is-invalid @endif"
                                        name="start_date" value="" placeholder="Enter Date" required >
                                    <div class="invalid-feedback">{{ $errors->first('start_date') }}</div>
                                </div>
                            </div><!-- Col --> 
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label">End date</label>
                                    <input type="date"
                                        class="form-control @if ($errors->has('end_date')) is-invalid @endif"
                                        name="end_date" value="" placeholder="Enter Date" required >
                                    <div class="invalid-feedback">{{ $errors->first('end_date') }}</div>
                                </div>
                            </div><!-- Col --> 
                            
                            <div class="col-sm-2"> 
                                <button class="btn btn-info mt-4  p-2" id="filter_employment_period">Filter</button>
                            </div>
                        </div><!-- Row -->

                        
 
                    <div class="datalist-table table-responsive">
                        <div id="employee_period_table">
                            {{-- @include('employer.report.table.fnpf_list_table') --}}
                            <div class="table-responsive">
                                <table id="dataTableExample" class="table">
                                    <thead>
                                        <tr>
                                            <th>Sl #</th>
                                            <th>Employee ID</th>
                                            <th>Name</th>
                                            <th>Country PF</th>
                                            <th>Employee FNPF Rate</th>
                                            <th>Employer FNPF Rate</th>
                                            <th>Gross Salary</th>
                                            <th>Total Earning</th>
                                            <th>FNPF Deduction</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                    </thead>
                                    
                                    <tbody>
                                        {{-- @foreach ($payrolls as $payroll) --}}
                                        @forelse ($payrolls as $payroll)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $payroll->user->employee_id ?? '-' }}</td>
                                                <td>
                                                    {{ $payroll->user->first_name ?? 'No data' }}
                                                    {{ $payroll->user->last_name ?? 'No data' }}
                                                </td>
                                                <td>{{ $payroll->user->country->fnpf ?? 'No data' }}</td>
                                                <td>{{ $payroll->user->providentfund->user_rate ?? 'No data' }}</td>
                                                <td>{{ $payroll->user->providentfund->employer_rate ?? 'No data' }}</td>
                                                <td>{{ $payroll->gross_salary ?? 'No data' }}</td>
                                                <td>{{ $payroll->total_earnings ?? 'No data' }}</td>
                                                <td>{{ $payroll->fnpf_deduction ?? 'No data' }}</td>
                                                <td>{{ $payroll->start_date ?? 'No data' }}</td>
                                                <td>{{ $payroll->end_date ?? 'No data' }}</td>
                                            </tr>
                                        {{-- @endforeach --}}
                                        @empty
                                        <tr>
                                            <td colspan="11">No data available</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                    
                                </table>
                            </div>
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    @endsection
    @push('custom_css')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css') }}">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
@endpush
@push('custom_js')
    <script src="{{ asset('admin_assets/vendors/datatables.net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('admin_assets/vendors/datatables.net-bs4/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ asset('admin_assets/js/data-table.js') }}"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script type="text/javascript">
        let token = "{{csrf_token()}}";
        (function($) {
            $('#business1').change(function(e){
                var id = $(this).val();
                $('#branch1').find('option').not(':first').remove();

                $.ajax({
                    type: 'get',
                    url: '/employer/report/employment_period/get_branch/'+id,
                    dataType: 'json',
                    success: function(response){
                        var len = 0;
                        if(response != null){
                            len = response['data'].length;
                        }
                        if(len>0){
                            for(var i=0;i<len;i++){
                                var id = response['data'][i].id;
                                var name = response['data'][i].name;
                                var option = "<option value='"+id+"'>"+name+"</option>";
                                $('#branch1').append(option);
                            }
                        }
                    }
                });
            });
            $('#branch1').change(function(e){
                var id = $(this).val();
                $('#department').find('option').not(':first').remove();

                $.ajax({
                    type: 'get',
                    url: '/employer/report/employment_period/get_department/'+id,
                    dataType: 'json',
                    success: function(response){
                        var len = 0;
                        if(response != null){
                            len = response['data'].length;
                        }
                        if(len>0){
                            for(var i=0;i<len;i++){
                                var id = response['data'][i].id;
                                var name = response['data'][i].dep_name;
                                var option = "<option value='"+id+"'>"+name+"</option>";
                                $('#department').append(option);
                            }
                        }
                    }
                });
            });
            $('#department').change(function(e){
                var id = $(this).val();
                $('#user').find('option').not(':first').remove();

                $.ajax({
                    type: 'get',
                    url: '/employer/report/employment_period/get_user/'+id,
                    dataType: 'json',
                    success: function(response){
                        var len = 0;
                        if(response != null){
                            len = response['data'].length;
                        }
                        if(len>0){
                            for(var i=0;i<len;i++){
                                var id = response['data'][i].id;
                                var name = response['data'][i].first_name;
                                var option = "<option value='"+id+"'>"+name+"</option>";
                                $('#user').append(option);
                            }
                        }
                    }
                });
            });
            // $('#filter_employment_period').on('click', function(e) {
            //     $.ajax({
            //         type: "get",
            //         url: "{{url('employer/report/fnpf/filter')}}",
            //         async: true,
            //         data: {
            //             _token: token,
            //             user: $('#user').val(),
            //             business: $('#business1').val(),
            //             branch: $('#branch1').val(),
            //             department: $('#department').val(),
            //         },
            //         // alert(data);
            //         success: function(response) {
            //             $('#employee_period_table').html(response);
            //             console.log(response);
            //         },
            //         error: function(error_message) {
            //             console.log(error_message); 
            //         }
            //     });
            // });
    $('#filter_employment_period').on('click', function(e) {
    e.preventDefault();

    let filters = {
        _token: token,
        business: $('#business1').val(),
        branch: $('#branch1').val(),
        department: $('#department').val(),
        user: $('#user').val(),
        start_date: $('input[name="start_date"]').val(),
        end_date: $('input[name="end_date"]').val()
    };

    $.ajax({
        type: "get",
        url: "{{ route('employer.report.fnpf.filter') }}",
        data: filters,
        success: function(response) {
            $('#employee_period_table').html(response);
        },
        error: function(error) {
            console.error('Error fetching filtered data:', error);
        }
    });
});


           

        })(jQuery);
    </script>
@endpush