@extends('layouts.app')

@section('content')
    <div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold text-dark"><i class="bi bi-people-fill text-indigo-600 me-2"></i>Team Attendance Hub</h4>
                <p class="text-muted small mb-0">Monitor ground deployment activity and live venue check-in logs.</p>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h6 class="mb-0 fw-bold text-dark">Active Field Force Logs</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="bg-light text-secondary small fw-bold text-uppercase"
                            style="font-size: 11px; letter-spacing: 0.05em;">
                            <tr>
                                <th class="ps-4 py-3">Employee Name</th>
                                <th class="py-3">Assigned Event</th>
                                <th class="py-3">Clock In</th>
                                <th class="py-3">Clock Out</th>
                                <th class="py-3 text-center">Status</th>
                                <th class="py-3 text-end pe-4">Location Validation</th>
                            </tr>
                        </thead>
                        <tbody class="text-dark small" style="font-size: 13px;">
                            @forelse($attendances as $log)
                                <tr class="border-bottom border-light">
                                    <td class="ps-4 py-3 fw-bold text-dark">{{ $log->user->name }}</td>
                                    <td class="text-muted">{{ $log->exhibition->name ?? 'N/A' }}</td>
                                    <td class="text-success fw-semibold">
                                        {{ $log->check_in ? \Carbon\Carbon::parse($log->check_in)->format('h:i A') : '--' }}
                                    </td>
                                    <td class="text-danger fw-semibold">
                                        {{ $log->check_out ? \Carbon\Carbon::parse($log->check_out)->format('h:i A') : 'Active on Site' }}
                                    </td>
                                    <td class="text-center">
                                        <span
                                            class="badge rounded-pill border {{ $log->status === 'late' ? 'bg-danger-subtle text-danger border-danger' : 'bg-success-subtle text-success border-success' }} px-2.5 py-1 text-capitalize">
                                            {{ $log->status }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-4">
                                        @if($log->check_in_latitude)
                                            <a href="https://www.google.com/maps?q={{ $log->check_in_latitude }},{{ $log->check_in_longitude }}"
                                                target="_blank" class="btn btn-outline-danger btn-sm py-1 px-2.5 shadow-sm"
                                                style="border-radius: 6px; font-size: 11px;">
                                                <i class="bi bi-geo-alt-fill me-1"></i> Track GPS
                                            </a>
                                        @else
                                            <span class="text-muted extra-small">No GPS Recorded</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5 text-muted">
                                        <i class="bi bi-calendar-x fs-3 d-block mb-2 opacity-50"></i>No team members checked in
                                        for duty today.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection