@extends('layouts.mainlayout')
@section('title', 'Employee Leave Balance Report')
@section('main')
    <div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-vcard font-weight-bold"> Leave Balance Report</h5>
    </div>
    
        <table class="table datatable-select-single">
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Team</th>
                @foreach($leaves as $leave)
                    <th>
                        {{ $leave->abbr }}
                    </th>
                @endforeach
                @if(auth()->user()->can('Edit All Leave Balance') || auth()->user()->can('Edit Reporting Employee Leave Balance') || auth()->user()->can('Edit Self Leave Balance') ) 
                <th>Edit</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
            
                <tr>
                    <td>@if(!empty($user->userdetail)){{ $user->userdetail->employee_id}} @endif</td>
                    <td>{{ $user->name . ' ' .  $user->lastName }}</td>
                    <td>
                        {{ $user['team']}}
                    </td>
                    @foreach($user['leaveBalances'] as $leaveBalance)
                        <td>
                            {{ $leaveBalance['leave_balance'] }}
                        </td>
                    @endforeach
                    @php ($editPermission = false)
                    @if(auth()->user()->can('Edit All Leave Balance'))
                           @php ($editPermission = true)
                    
                    @elseif(auth()->user()->can('Edit Reporting Employee Leave Balance'))
                        @if(GetShiftDetailHelper::getPrimaryReportingManager($user->id) != 0 ? GetShiftDetailHelper::getPrimaryReportingManager($user->id) == auth()->user()->id : GetShiftDetailHelper::checkReportingManagers($user->id))
                        @php ($editPermission = true)
                        
                        @endif

                    @elseif(auth()->user()->can('Edit Self Leave Balance'))
                        @if($user->id == auth()->user()->id)
                        @php ($editPermission = true)
                        
                        @endif
                    

                    @endif
                    <td>
                    @if($editPermission == true)
                   <button  class="btn btn-info icon-pencil7" onclick="editLeaveBalances({{$user}})"></button>
                     @endif
                    </td>

                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modal -->
<div class="modal fade" id="leaveReportEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <form  id="modal-form" method="POST" action="{{ route('leave-balance-report.update-user-leave-balance') }}">
    <input type="hidden" name="user_id" id="user-id" value=""/>
    @csrf 
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="label-leave-balance"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div id="div-leave-balance-temp" style="display: none;">
                <div class="form-group row">
                    <label class="col-form-label col-lg-3 font-weight-semibold abbr-leave-balance">
                    </label>
                    <div class="col-lg-9">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="number" step="any" class="input-leave-balance form-control">
                        </div>
                    </div>
                </div>
            </div>
            <div id="div-leave-balance">
            </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">Save changes</button>
        </div>
      </div>
      </form>  
    </div>
  </div>
@endsection

@section('js')
  <script>
    $(document).ready(function () {
            $('.datatable-select-single').DataTable({
                        "aLengthMenu": [25, 50, 75, 100],
                        "pageLength": 25,
                        "destroy": true,
                        buttons: {            
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                                
                            ]
                        }
            });
        });
  function editLeaveBalances(user){
        console.info("editing the user");
        console.info(user);
        $('#leaveReportEditModal').modal({
            show: true
        });
        $('#user-id').val(user.id);
        $('#label-leave-balance').text('Leave Balance Report ( ' + user.name + ' )');
        let firstChild = $('#div-leave-balance-temp').children()[0];
        console.info(firstChild);
        $('#div-leave-balance').empty();
        user.leaveBalances.forEach(leaveBalance => {
            if (leaveBalance.leave_balance == 0) {
                var balance = 0;
                } else {
                    var balance = leaveBalance.leave_balance.toFixed(2); 
                }
            let cloneChild = $(firstChild).clone();
            cloneChild.find('label.abbr-leave-balance').text(leaveBalance.abbr + ' : ');
            cloneChild.find('input.input-leave-balance').attr('id', leaveBalance.id);
            cloneChild.find('input.input-leave-balance').attr('name', leaveBalance.id);
            cloneChild.find('input.input-leave-balance').attr('placeholder', 'Enter ' + leaveBalance.abbr);
            cloneChild.find('input.input-leave-balance').attr('value', balance);
            $('#div-leave-balance').append(cloneChild);
        });
        // let div_leave_balance = $('#div-leave-balance');
        // $('#update_button-'+leave_id).addClass('disabled');
        // $('#update_button-'+leave_id).attr('type','button');
        // }else if($('#adminLeaveAction-'+leave_id).val() == 'Approve'){
        //     $('#update_button-'+leave_id).removeClass('disabled');
        //     $('#update_button-'+leave_id).attr('type','submit');
        // }   
    }    
  </script>
  @endsection