@if(auth()->user()->hasPermissionTo('Leave - View Leaves'))

        <div class="card card-primary card-outline card-outline-tabs mt-2">
            <div class="card-header border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                    @if(isset($employeeLeaves))
                        <li class="nav-item">
                            <a @if(isset($employeeLeaves)) class="nav-link active" @else  class="nav-link" @endif id="custom-tabs-four-your-tab" data-bs-toggle="pill" href="#custom-tabs-four-your" role="tab" aria-controls="custom-tabs-four-your" aria-selected="true">Your Leave</a>
                        </li>
                    @endif
                    @if(isset($requestLeaves))
                        <li class="nav-item">
                            <a @if(isset($requestLeaves)) class="nav-link" @else  class="nav-link" @endif id="custom-tabs-four-request-tab" data-bs-toggle="pill" href="#custom-tabs-four-request" role="tab" aria-controls="custom-tabs-four-request" aria-selected="false"><span class="badge rounded-pill bg-danger">{{$requestLeaves ? $requestLeaves->total() : 0}}</span> Leave Request</a>
                        </li>
                    @endif
                </ul>
            </div>

            <div class="card-body">
                <div class="tab-content" id="custom-tabs-four-tabContent">
                    <div @if(isset($employeeLeaves)) class="tab-pane fade active show" @else class="tab-pane fade" @endif id="custom-tabs-four-your" role="tabpanel" aria-labelledby="custom-tabs-four-your-tab">
                        @if(isset($employeeLeaves) && count($employeeLeaves) > 0)
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered fs-10">
                                    <thead class="sticky-top shadow-sm">
                                        <tr>
                                            <th scope="col" style="width: 5%">{{ __('global.no') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.start_date') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.end_date') }}</th>
                                            <th scope="col" style="width: 5%">{{ __('leave.days') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.type') }}</th>
                                            <th scope="col" style="width: 20%">{{ __('leave.description') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.attachment') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.status') }}</th>
                                            <th scope="col" style="width: 15%">{{ __('leave.date') }}</th>
                                            <th colspan="2" style="text-align: center; width:5%;">{{ __('global.actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @php $counter = ($employeeLeaves->currentPage() - 1) * $employeeLeaves->perPage() + 1; @endphp
                                    @foreach($employeeLeaves as $leave)
                                        <tr id="tr{{ $leave->id}}" class="v-align-middle">
                                            <th scope="row">
                                                <button type="button" class="btn btn-sm text-center @if($leave->status == 'pending') btn-warning @elseif($leave->status == 'declined') btn-danger @elseif($leave->status == 'archive') btn-secondary @else btn-success @endif">{{$counter++}}</button>
                                            </th>
                                            <td>{{ getJalaliDate($leave->start_date) }}</td>
                                            <td>{{ getJalaliDate($leave->end_date) }}</td>
                                            <td>[{{ $leave->total_days}}]</td>
                                            <td>{{ $leave->leaveTypes->{'name_'.$lang} }} </td>
                                            <td>{{ $leave->description }}</td>
                                            <td>
                                                @if ($leave->attachment)
                                                    <a href="{{ asset('upload/documents/leave/'.$leave->attachment) }}" target="_blank">{{ $leave->attachment }}</a>
                                                @endif
                                            </td>
                                            <td>{{ $leave->status }}</td>
                                            <td>{{ getJalaliDate($leave->created_at) }}</td>
                                            <td>
                                                <a href="{{ route('show_leave', ['id'=> encryption($leave->id) ]) }}" class="text-white" target="_blank">
                                                    <button type="button" class="btn btn-success btn-sm viewButton">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                </a>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-sm @if($leave->responsible_approval == null) editButton @endif" @if($leave->responsible_approval == null) data-bs-toggle="modal" data-bs-target="#editLeave" data-id={{ encryption($leave->id) }} @else disabled="disabled" @endif><i class="fa fa-pen"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-lg-12">
                                <x-pagination-links :paginator="$employeeLeaves" />
                            </div>
                        @else
                            <div class="mt-3">
                                <x-record-not-found />
                            </div>
                        @endif
                    </div>


                    <div @if(isset($requestLeaves)) class="tab-pane fade show" @else class="tab-pane fade" @endif id="custom-tabs-four-request" role="tabpanel" aria-labelledby="custom-tabs-four-request-tab">
                        @if(isset($requestLeaves) && count($requestLeaves) > 0)
                            <div class="table-responsive">
                                <table class="table table-hove table-bordered fs-10">
                                    <thead class="sticky-top shadow-sm">
                                        <tr>
                                            <th scope="col" style="width: 5%">{{ __('global.no') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.start_date') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.end_date') }}</th>
                                            <th scope="col" style="width: 5%">{{ __('leave.days') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.type') }}</th>
                                            <th scope="col" style="width: 20%">{{ __('leave.description') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.attachment') }}</th>
                                            <th scope="col" style="width: 10%">{{ __('leave.status') }}</th>
                                            <th scope="col" style="width: 15%">{{ __('leave.date') }}</th>
                                            <th style="text-align: center; width:5%;">{{ __('global.actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $counter = ($requestLeaves->currentPage() - 1) * $requestLeaves->perPage() + 1; @endphp
                                        @foreach($requestLeaves as $rleave)
                                            <tr id="tr{{ $rleave->id}}" class="v-align-middle">
                                                <th scope="row">
                                                    <button type="button" class="btn btn-sm text-center @if($rleave->status == 'pending') btn-warning @elseif($rleave->status == 'declined') btn-danger @elseif($rleave->status == 'archive') btn-secondary @else btn-success @endif">{{$counter++}}</button>
                                                </th>
                                                <td>{{ getJalaliDate($rleave->start_date) }}</td>
                                                <td>{{ getJalaliDate($rleave->end_date) }}</td>
                                                <td>[{{ $rleave->total_days}}]</td>
                                                <td>{{ $rleave->leaveTypes->{'name_'.$lang} }}</td>
                                                <td>{{ $rleave->description }}</td>
                                                <td>
                                                    @if ($rleave->attachment)
                                                        <a href="{{ asset('upload/documents/leave/'.$rleave->attachment) }}" target="_blank">{{ $rleave->attachment }}</a>
                                                    @endif
                                                </td>
                                                <td>{{ $rleave->status }}</td>
                                                <td>{{ getJalaliDate($rleave->created_at) }}</td>
                                                <td>
                                                    <a href="{{ route('show_leave', ['id'=> encryption($rleave->id) ]) }}" class="text-white" target="_blank">
                                                        <button type="button" class="btn btn-success btn-sm viewButton">
                                                            <i class="fa fa-eye"></i>
                                                        </button>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-lg-12">
                                <x-pagination-links :paginator="$requestLeaves" />
                            </div>
                        @else
                            <div class="mt-3">
                                <x-record-not-found />
                            </div>
                        @endif
                    </div>

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

@endif