@extends('layouts.app')

@section('title', 'Daily Attendance — ' . $selectedDate->format('d M Y'))

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.dashboard') }}">Attendance</a>
        <span class="separator">/</span>
        <span class="current">{{ $selectedDate->format('d M Y') }}</span>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    {{-- Page Header with Date Navigation --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Daily Attendance</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $selectedDate->format('l, d F Y') }}{{ $isToday ? ' (Today)' : '' }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('attendance.daily', $prevDate) }}" class="btn-icon" title="Previous Day">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </a>
            <form method="GET" action="{{ route('attendance.daily') }}" class="flex items-center" id="dateForm">
                <input type="date" name="date" value="{{ $selectedDate->format('Y-m-d') }}" max="{{ now()->format('Y-m-d') }}"
                    class="form-input text-sm py-1.5 w-40" onchange="window.location.href='/attendance/daily/'+this.value">
                <input type="hidden" name="department_id" value="{{ $departmentId }}">
            </form>
            @if(!$isToday && !$isFuture)
                <a href="{{ route('attendance.daily', $nextDate) }}" class="btn-icon" title="Next Day">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                </a>
            @endif
            @if(!$isToday)
                <a href="{{ route('attendance.daily') }}" class="btn-secondary text-sm py-1.5">Today</a>
            @endif
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="stat-card">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <div class="stat-value text-success-600">{{ $presentCount }}</div>
            <div class="stat-label">Present</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-danger-100 text-danger-500">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            </div>
            <div class="stat-value text-danger-500">{{ $absentCount }}</div>
            <div class="stat-label">Absent</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-warning-100 text-warning-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            </div>
            <div class="stat-value text-warning-600">{{ $onLeaveCount }}</div>
            <div class="stat-label">On Leave</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-gray-100 text-gray-500">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value text-gray-600">{{ $notClockedIn }}</div>
            <div class="stat-label">Not Clocked In</div>
        </div>
    </div>

    {{-- Filter + Table --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Employee Attendance</h2>
            <form method="GET" action="{{ route('attendance.daily', $selectedDate->format('Y-m-d')) }}">
                <select name="department_id" onchange="this.form.submit()" class="form-select text-sm py-1.5 w-44">
                    <option value="">All Departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ $departmentId == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Department</th>
                        <th>Clock In</th>
                        <th>Clock Out</th>
                        <th>Hours</th>
                        <th>Overtime</th>
                        <th>Status</th>
                        <th>Source</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($employees as $emp)
                        @php $record = $dayRecords->get($emp->id); @endphp
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    <div class="avatar avatar-sm {{ \App\Helpers\AvatarHelper::gradient($emp->first_name) }}">
                                        @if($emp->profile_photo)
                                            <img src="{{ Storage::url($emp->profile_photo) }}" class="w-full h-full rounded-full object-cover" alt="">
                                        @else
                                            {{ strtoupper(substr($emp->first_name, 0, 1)) }}
                                        @endif
                                    </div>
                                    <div>
                                        <a href="{{ route('attendance.employee', $emp->id) }}" class="text-sm font-medium text-gray-800 hover:text-primary-600">{{ $emp->full_name }}</a>
                                        <div class="text-xxs text-gray-400">{{ $emp->employee_code }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-sm text-gray-600">{{ $emp->department?->name ?? '—' }}</td>
                            <td>
                                @if($record && $record->clock_in)
                                    <span class="text-sm text-gray-700">{{ $record->formatted_clock_in }}</span>
                                    @if($record->is_late)
                                        <span class="badge badge-rejected ml-1 text-xxs">{{ $record->late_minutes }}m late</span>
                                    @endif
                                @else
                                    <span class="text-sm text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="text-sm text-gray-700">{{ $record ? $record->formatted_clock_out : '—' }}</td>
                            <td class="text-sm text-gray-700">{{ $record ? $record->formatted_total_hours : '—' }}</td>
                            <td class="text-sm text-gray-700">{{ $record && $record->overtime_hours > 0 ? $record->overtime_hours . 'h' : '—' }}</td>
                            <td>
                                @if($record)
                                    <span class="badge {{ $record->status_badge_class }}">
                                        <span class="badge-dot"></span>
                                        {{ $record->status_label }}
                                    </span>
                                @else
                                    <span class="badge badge-inactive"><span class="badge-dot"></span> No Record</span>
                                @endif
                            </td>
                            <td class="text-xs text-gray-500">{{ $record ? $record->source_label : '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state py-8">
                                    <div class="empty-state-title">No employees found</div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection