@extends('layouts.admin')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800">Attendance Records</h2>
@endsection

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">Staff Attendance</h3>
    @if(auth()->user()->hasRole('Staff'))
        <a href="{{ route('attendance.create') }}" 
           class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
           + Check In
        </a>
    @endif
</div>

@if (session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-3">
        {{ session('success') }}
    </div>
@endif

<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead class="bg-gray-100 border-b">
            <tr>
                <th class="py-3 px-4">#</th>
                @if(auth()->user()->hasRole(['Manager', 'Admin']))
                    <th class="py-3 px-4">Staff Name</th>
                @endif
                <th class="py-3 px-4">Date</th>
                <th class="py-3 px-4">Check-In Time</th>
                <th class="py-3 px-4">Image</th>
                @if(auth()->user()->hasRole(['Manager', 'Admin']))
                    <th class="py-3 px-4 text-right">Actions</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse ($attendances as $attendance)
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-2 px-4">{{ $loop->iteration }}</td>
                    @if(auth()->user()->hasRole(['Manager', 'Admin']))
                        <td class="py-2 px-4">{{ $attendance->staff->name }}</td>
                    @endif
                    <td class="py-2 px-4">{{ $attendance->attendance_date }}</td>
                    <td class="py-2 px-4">{{ $attendance->check_in_time }}</td>
                    <td class="py-2 px-4">
                        <img src="{{ asset('storage/' . $attendance->image) }}" alt="Attendance Image" class="w-16 h-16 rounded-full object-cover">
                    </td>
                    @if(auth()->user()->hasRole(['Manager', 'Admin']))
                        <td class="py-2 px-4 text-right space-x-2">
                            <a href="{{ route('attendance.edit', $attendance) }}" 
                               class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600">Edit</a>

                            <form action="{{ route('attendance.destroy', $attendance) }}" 
                                  method="POST" class="inline-block"
                                  onsubmit="return confirm('Are you sure you want to delete this attendance record?');">
                                @csrf
                                @method('DELETE')
                                <button class="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                                    Delete
                                </button>
                            </form>
                        </td>
                    @endif
                </tr>
            @empty
                <tr>
                    <td colspan="{{ auth()->user()->hasRole(['Manager', 'Admin']) ? '6' : '4' }}" class="text-center py-4 text-gray-500">
                        No attendance records found.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $attendances->links() }}
</div>
@endsection