@props(['todayAttendance', 'todayHasOpenSession' => false, 'todaySessionCount' => 0, 'clientIp', 'showActions' => true])

@php
    $clockedIn = $todayAttendance && $todayAttendance->clock_in_date_time;
    $hasOpenSession = (bool) $todayHasOpenSession;
@endphp

<div {{ $attributes->merge(['class' => 'rounded-xl border border-slate-200 bg-white p-5 shadow-sm']) }}>
    <div class="flex items-center justify-between border-b border-slate-100 pb-4">
        <a href="{{ route('attendance.index') }}" class="flex items-center gap-2 text-sm font-semibold text-primary hover:underline">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Attendance
        </a>
        @if($clockedIn)
            <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">{{ $hasOpenSession ? 'Clocked in' : 'Clocked out' }}</span>
        @endif
    </div>

    <div class="mt-4 space-y-4">
        <div class="flex flex-wrap gap-6">
            <div>
                <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Current IP</p>
                <p class="mt-0.5 font-mono text-sm font-medium text-slate-900">{{ $clientIp ?? '—' }}</p>
            </div>
            <div>
                <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Current time</p>
                <p id="attendance-live-clock" class="mt-0.5 font-mono text-lg font-semibold tabular-nums text-primary">--:--:-- --</p>
            </div>
        </div>

        @if($showActions)
            @include('attendance.partials.punch-forms', ['variant' => 'full', 'prefix' => 'dashlet'])
        @endif
        @if($todaySessionCount > 0)
            <p class="text-sm text-slate-500">Sessions: {{ $todaySessionCount }}</p>
        @endif
    </div>
</div>

@push('scripts')
<script>
(function() {
    function updateClock() {
        var el = document.getElementById('attendance-live-clock');
        if (!el) return;
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        var ampm = h >= 12 ? 'pm' : 'am';
        h = h % 12 || 12;
        el.textContent = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + ' ' + ampm;
    }
    updateClock();
    setInterval(updateClock, 1000);
})();
</script>
@endpush