@extends('layouts.app')
@section('title', 'الحضور والورديات')
@section('page_title', 'الحضور والورديات')
@section('page_subtitle', 'تسجيل الدخول الفعلي والتأخير والبريكات ونسبة الالتزام بالوردية')

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterUser">
                    <option value="">كل الموظفين</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <input type="date" class="form-control form-control-sm" id="filterFrom" value="{{ now()->startOfMonth()->toDateString() }}">
            </div>
            <div class="col-md-3">
                <input type="date" class="form-control form-control-sm" id="filterTo" value="{{ now()->toDateString() }}">
            </div>
            <div class="col-md-3">
                <button class="btn btn-sm btn-primary w-100" id="btnApply"><i class="bi bi-funnel"></i> عرض</button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover w-100" id="attTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الموظف</th>
                    <th>التاريخ</th>
                    <th>الوردية</th>
                    <th>الدخول</th>
                    <th>الخروج</th>
                    <th>دقائق البريك</th>
                    <th>الحالة</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#attTable', '{{ route('attendance.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'user_label', name: 'user_name' },
        { data: 'date_label', name: 'work_date' },
        { data: 'shift_label', orderable: false },
        { data: 'login_label', orderable: false },
        { data: 'logout_label', orderable: false },
        { data: 'break_minutes', orderable: false, searchable: false },
        { data: 'status_badge', orderable: false, searchable: false }
    ], {
        filters: function () {
            return {
                user_id: $('#filterUser').val(),
                date_from: $('#filterFrom').val(),
                date_to: $('#filterTo').val()
            };
        }
    });

    $('#btnApply').on('click', function () { table.ajax.reload(); });
});
</script>
@endpush