@extends('layouts.app')
@section('content')

@include('layouts.top-header', [
    'title' => __('Employee Attendance'),
    'class' => 'col-lg-7'
])

<div class="container-fluid mt--6 mb-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header border-0">
                    <span class="h3">{{__('Employee Attendance')}}</span>
                </div>
                <form action="{{ route('owner.employee.attendance') }}" method="get" class="ml-4" id="filter_attendance_form">
                    <div class="row rtl-date-filter-row">
                        <div class="form-group col-3">
                            <input type="month" id="filter_month" name="month" class="form-control" value="{{ $yearMonth }}" required>
                        </div>
                        <div class="form-group col-3">
                            <button type="submit" class="btn btn-primary rtl-date-filter-btn">{{ __('Apply') }}</button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush" id="dataTable">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="sort">{{__('Image')}}</th>
                                <th scope="col" class="sort">{{__('Employee Name')}}</th>
                                <th scope="col" class="sort">{{__('Year-Month')}}</th>
                                <th scope="col" class="sort">{{__('Present Days')}}</th>
                                <th scope="col" class="sort">{{__('Absent Days')}}</th>
                                <th scope="col" class="sort">{{__('Total Days')}}</th>
                                <th scope="col" class="sort">{{__('Today')}}</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($employeesAttendance as $attendance)
                            <tr>
                                <td>
                                    <img src="{{ $attendance['employee']->imagePath . $attendance['employee']->image }}" class="avatar rounded-circle mr-3">
                                </td>
                                <td>{{ $attendance['employee']->name }}</td>
                                <td>{{ $attendance['month'] }}</td>
                                <td>{{ $attendance['presence'] }}</td>
                                <td>{{ $attendance['absent_days'] }}</td>
                                <td>{{ $attendance['total_days'] }}</td>
                                <td>
                                    <label class="custom-toggle">
                                        <input type="checkbox" onchange="toggleAttendance({{ $attendance['employee']->emp_id }});" {{ $attendance['is_present_today'] == 1 ? 'checked' : '' }}>
                                        <span class="custom-toggle-slider rounded-circle"></span>
                                    </label>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
            language: {
                paginate: {
                    previous: "<i class='fas fa-angle-left'>",
                    next: "<i class='fas fa-angle-right'>"
                }
            }
        });
    });
</script>
@endsection