@extends('admin.layouts.app')

@section('title', 'Attendance - HR Management')
@section('page-title', 'Attendance Management')

@section('content')
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-lg font-semibold">Today's Summary</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-green-50 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-green-600">{{ $presentToday ?? 0 }}</div>
            <div class="text-sm text-gray-600">Present</div>
        </div>
        <div class="bg-red-50 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-red-600">{{ $absentToday ?? 0 }}</div>
            <div class="text-sm text-gray-600">Absent</div>
        </div>
        <div class="bg-yellow-50 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-yellow-600">{{ $lateToday ?? 0 }}</div>
            <div class="text-sm text-gray-600">Late</div>
        </div>
        <div class="bg-blue-50 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-blue-600">{{ $onLeaveToday ?? 0 }}</div>
            <div class="text-sm text-gray-600">On Leave</div>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="p-6 border-b flex justify-between items-center">
        <h2 class="text-lg font-semibold">Attendance Records</h2>
        <button type="button" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700" data-bs-toggle="modal" data-bs-target="#markAttendanceModal">
            <i class="fas fa-plus mr-2"></i>Mark Attendance
        </button>
    </div>
    
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Staff</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Department</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Check In</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Check Out</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Hours</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($logs ?? [] as $log)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm">{{ $log->date ? $log->date->format('M d, Y') : '-' }}</td>
                    <td class="px-6 py-4">
                        @if($log->staff)
                            <strong>{{ $log->staff->user->name ?? 'N/A' }}</strong>
                        @else
                            N/A
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm">{{ $log->staff->department ?? 'N/A' }}</td>
                    <td class="px-6 py-4 text-sm">{{ $log->check_in_time ? substr($log->check_in_time, 0, 5) : '-' }}</td>
                    <td class="px-6 py-4 text-sm">{{ $log->check_out_time ? substr($log->check_out_time, 0, 5) : '-' }}</td>
                    <td class="px-6 py-4 text-sm">{{ $log->hours_worked ? number_format($log->hours_worked, 1) . ' hrs' : '-' }}</td>
                    <td class="px-6 py-4">
                        @if($log->status == 'present')
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">Present</span>
                        @elseif($log->status == 'absent')
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">Absent</span>
                        @elseif($log->status == 'late')
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">Late</span>
                        @elseif($log->status == 'leave')
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">On Leave</span>
                        @else
                            <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">{{ ucfirst($log->status) }}</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-8 text-center text-gray-500">No attendance records found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if(isset($logs) && method_exists($logs, 'links'))
    <div class="px-6 py-4 border-t">
        {{ $logs->links() }}
    </div>
    @endif
</div>

<div class="modal fade" id="markAttendanceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mark Attendance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hr.attendance.mark') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Staff *</label>
                        <select name="staff_id" class="form-select" required>
                            <option value="">Select Staff</option>
                            @foreach($staff ?? [] as $s)
                                <option value="{{ $s->id ?? '' }}">{{ ($s->user->name ?? $s->employee_id ?? 'Staff') }} - {{ $s->department ?? '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Date *</label>
                        <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Check In</label>
                                <input type="time" name="check_in_time" class="form-control" value="{{ date('H:i') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Check Out</label>
                                <input type="time" name="check_out_time" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="present">Present</option>
                            <option value="absent">Absent</option>
                            <option value="late">Late</option>
                            <option value="off">Off</option>
                            <option value="leave">On Leave</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Mark Attendance</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endpush