@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-ecommerce.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/extensions/ext-component-toastr.css">
    <link rel="stylesheet" type="text/css" href="/dashboard-assets/css/apexcharts.css">
    <link rel="stylesheet" type="text/css" href="/dashboard-assets/css/chart-apex.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
@endpush
    @section('content')
        <div class="card">
            <div class="card-header">
                <h4>Employee Attendance Details</h4>
                <h6> Location : {{ $location->name ?? 'N/A' }}</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Emp Code</th>
                                <th>Name</th>
                                <th>Date of Joining</th>
                                <th>Ideal Working Days</th>
                                <th>Present</th>
                                <th>Absent</th>
                                <th>Holiday</th>
                                <th>Week Off</th>
                                <th>Total Leave</th>
                                <th>Paid Leave</th>
                                <th>Unpaid Leave</th>
                                <th>WFH</th>
                                <th>OD</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($employees as $employee)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $employee->employee_code }}</td>
                                    <td>{{ $employee->name }}</td>
                                    <td>{{ \Carbon\Carbon::parse($employee->date_of_joining)->format('d-m-Y') }}</td>
                                    <td>{{ $employee->total_pay_days }}</td>
                                    <td>{{ $employee->total_present }}</td>
                                    <td>{{ $employee->total_absent }}</td>
                                    <td>{{ $employee->total_holiday }}</td>
                                    <td>{{ $employee->total_week_off }}</td>
                                    <td>{{ $employee->total_leave }}</td>
                                    <td>{{ $employee->paid_leave }}</td>
                                    <td>{{ $employee->unpaid_leave }}</td>
                                    <td>{{ $employee->total_wfh }}</td>
                                    <td>{{ $employee->total_od }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">
                                        No Data Found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-end mt-3">
                        {{ $employees->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    @endsection
@push('footer-script')
    <script src="/dashboard-assets/js/apexcharts.min.js"></script>
    <script src="/dashboard-assets/js/chart.min.js"></script>
    <script src="/dashboard-assets/js/chart-apex.js"></script>
    <script src="/dashboard-assets/js/chart-chartjs.js"></script>
    <script src="/dashboard-assets/js/card-statistics.js"></script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/js/scripts/pages/dashboard-analytics.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />
@endpush