@extends('layouts.app')

@section('title', 'Attendance Dashboard')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Attendance</span>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    {{-- Page Header --}}
    <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">Attendance Dashboard</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $today->format('l, d F Y') }} — Today's Overview</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('attendance.manual') }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                Manual Entry
            </a>
            <a href="{{ route('attendance.upload') }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                Upload File
            </a>
            <a href="{{ route('attendance.reports') }}" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                Reports
            </a>
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- Present --}}
        <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 Today</div>
        </div>
        {{-- Absent --}}
        <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>
        {{-- On Leave --}}
        <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>
        {{-- Not Clocked In --}}
        <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>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- Employee Table --}}
        <div class="lg:col-span-2 card">
            <div class="card-header">
                <h2 class="card-header-title">Today's Attendance</h2>
                <div class="flex items-center gap-3">
                    <form method="GET" action="{{ route('attendance.dashboard') }}" class="flex items-center gap-2">
                        <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>
                    <a href="{{ route('attendance.daily', $today->format('Y-m-d')) }}" class="btn-ghost">View Full →</a>
                </div>
            </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>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($employees as $emp)
                            @php $record = $todayRecords->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>
                                    @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>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">
                                    <div class="empty-state py-8">
                                        <div class="empty-state-title">No employees found</div>
                                        <p class="empty-state-text">No active employees match the selected filters.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Weekly Chart --}}
        <div class="card">
            <div class="card-header">
                <h2 class="card-header-title">This Week</h2>
            </div>
            <div class="card-body">
                <canvas id="weeklyChart" height="280"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('weeklyChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [
                    {
                        label: 'Present',
                        data: {!! json_encode($chartPresent) !!},
                        backgroundColor: '#10B981',
                        borderRadius: 4,
                    },
                    {
                        label: 'Absent',
                        data: {!! json_encode($chartAbsent) !!},
                        backgroundColor: '#EF4444',
                        borderRadius: 4,
                    },
                    {
                        label: 'Leave',
                        data: {!! json_encode($chartLeave) !!},
                        backgroundColor: '#F59E0B',
                        borderRadius: 4,
                    },
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 20,
                            font: { family: 'DM Sans', size: 12 }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        grid: { display: false },
                        ticks: { font: { family: 'DM Sans', size: 12 } }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        grid: { color: '#F1F5F9' },
                        ticks: { font: { family: 'DM Sans', size: 12 }, stepSize: 1 }
                    }
                }
            }
        });
    });
</script>
@endpush