@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">Provident Fund</h6>
                <div class="table-responsive">
                    <table id="dataTableExample" class="table">
                        <thead>
                            <tr>
                                <th>Sl #</th>
                                <th>Employee ID</th>
                                <th>Name</th>
                                <th>Rate by Employee</th>
                                <th>Rate by Employer</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($employees as $employee)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>@isset($employee->employee->employee_id)
                                    {{ $employee->employee->employee_id}} 
                                    @endisset
                                </td>
                                <td>@isset($employee->employee)
                                    {{ $employee->employee->first_name . ' ' . $employee->employee->last_name }}
                                    @endisset
                                </td>
                                <td>{{ $employee->user_rate }}</td>
                                <td>{{ $employee->employer_rate }}</td>


                                <td>
                                    <div class="btn-group" role="group" aria-label="Basic example">

                                        <!-- Edit button -->
                                        {{-- <a href="{{ route('employer.providentfund.edit', $employee->id) }}"
                                        class="mr-1 text-warning" data-toggle="tooltip" data-placement="top"
                                        title="Edit">
                                        <i data-feather="edit"></i>
                                        </a> --}}
                                        <button name="reject" type="submit" value="2" class="text-warning mr-2" title="Reject"
                                            data-toggle="modal" data-target="#employerrate{{$employee->id}}">
                                            <i data-feather="edit"></i>
                                        </button>

                                        <!-- Update Modal -->
                                        <div class="modal fade" id="employerrate{{$employee->id}}" tabindex="-1" role="dialog"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">Update FNPF</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <form method="POST" action="{{ route('employer.providentfund.update', $employee->id) }}">
                                                        @csrf
                                                        @method('PUT')
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label for="reply_message">User Rate</label>
                                                                <input type="float" class="form-control @if ($errors->has('userrate')) is-invalid @endif"
                                                                    value="{{old('userrate', $employee->user_rate)}}" name="userrate" required>
                                                                <div class="invalid-feedback">{{ $errors->first('userrate') }}</div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="reply_message">Employer Rate</label>
                                                                <input type="float" class="form-control @if ($errors->has('employerrate')) is-invalid @endif"
                                                                    value="{{old('userrate', $employee->employer_rate)}}" name="employerrate" required>
                                                                <div class="invalid-feedback">{{ $errors->first('employerrate') }}</div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-primary">UPDATE</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Update Modal Ends -->

                                        <!-- Delete button -->
                                        <button type="button" class="text-danger"
                                            onclick="event.preventDefault(); if(confirm('Are you sure to delete ?')){
                                                        document.getElementById('delete-data-{{ $employee->id }}').submit();}"
                                            data-toggle="tooltip" data-placement="top" title="Delete">
                                            <i data-feather="trash"></i>
                                        </button>
                                        <form id="delete-data-{{ $employee->id }}"
                                            action="{{ route('employer.providentfund.destroy', $employee->id) }}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                        </form>

                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </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>
        $(function() {
            $('.toggle-class').change(function() {
                var status = $(this).prop('checked') == true ? 1 : 0;
                var branch_id = $(this).data('id');
                console.log(branch_id);

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '{{ route('employer.branch.change.status') }}',
data: {
'status': status,
'branch_id': branch_id
},
success: function(data) {
console.log(data.success)
}
});
})
})
</script> --}}
@endpush