@extends('layouts.app')

@section('page_title', 'My Attendance')

@section('content')
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 p-4 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="fw-bold mb-0">Attendance History</h5>
                <p class="text-muted small mb-0">Track your daily clock-in and clock-out logs</p>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-light border btn-sm px-3"><i class="bi bi-download me-1"></i> Export</button>
            </div>
        </div>
        <div class="card-body p-4 pt-0">
            <div class="table-responsive">
                <table class="table datatable table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="border-0">Date</th>
                            <th class="border-0">Check In</th>
                            <th class="border-0">Check Out</th>
                            <th class="border-0">Work Time</th>
                            <th class="border-0">Break Time</th>
                            <th class="border-0">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($attendances as $item)
                            <tr>
                                <td class="fw-semibold">{{ $item->date->format('d M, Y') }} ({{ $item->date->format('D') }})
                                </td>
                                <td>
                                    @if ($item->check_in)
                                        <span
                                            class="badge bg-success-subtle text-success p-2">{{ $item->check_in->format('h:i A') }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($item->check_out)
                                        <span
                                            class="badge bg-info-subtle text-info p-2">{{ $item->check_out->format('h:i A') }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($item->total_work_minutes)
                                        {{ floor($item->total_work_minutes / 60) }}h {{ $item->total_work_minutes % 60 }}m
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    {{ $item->total_break_minutes ?? 0 }} mins
                                </td>
                                <td>
                                    <span
                                        class="badge bg-{{ $item->status == 'present' ? 'success' : ($item->status == 'absent' ? 'danger' : 'warning') }}-subtle text-{{ $item->status == 'present' ? 'success' : ($item->status == 'absent' ? 'danger' : 'warning') }} px-3 rounded-pill">
                                        {{ ucfirst($item->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $attendances->links() }}
            </div>
        </div>
    </div>
@endsection