@extends('layouts.app')

@section('title', 'Attendance Reports')
@section('heading', 'Attendance Reports')

@section('content')
@include('attendance.top-submenu')
    <x-card>
        <p class="mb-4 text-slate-600">View attendance summary by date range. Filter by employee or department and export to CSV.</p>

        <form method="GET" action="{{ route('attendance.reports') }}" class="mb-6 flex flex-wrap gap-4 rounded-lg border border-slate-200 bg-slate-50 p-4 justify-end">
            <div>
                <label class="block text-xs font-medium text-slate-500">From</label>
                <input type="date" name="from" value="{{ $from?->format('Y-m-d') ?? request('from') }}" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">To</label>
                <input type="date" name="to" value="{{ $to?->format('Y-m-d') ?? request('to') }}" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Department</label>
                <select name="department_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 220px;">
                    <option value="">All</option>
                    @foreach($departments ?? [] as $d)
                        <option value="{{ $d->id }}" {{ request('department_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Employee</label>
                <select name="employee_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 150px;">
                    <option value="">All</option>
                    @foreach($allEmployees ?? $employees ?? [] as $e)
                        <option value="{{ $e->id }}" {{ request('employee_id') == $e->id ? 'selected' : '' }}>{{ $e->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Apply</button>
                <a href="{{ route('attendance.reports', array_merge(request()->only(['from', 'to', 'department_id', 'employee_id']), ['export' => '1'])) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                    <i class="bi bi-download me-1"></i>Export CSV
                </a>
            </div>
        </form>

        @if($from && $to)
            <div class="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
                <x-stat-card title="Present days" :value="$summary['total_present'] ?? 0" iconClass="bg-green-100 text-green-600">
                    <x-slot name="icon"><i class="bi bi-person-check text-lg"></i></x-slot>
                </x-stat-card>

                <x-stat-card title="Absent days" :value="$summary['total_absent'] ?? 0" iconClass="bg-red-100 text-red-600">
                    <x-slot name="icon"><i class="bi bi-person-x text-lg"></i></x-slot>
                </x-stat-card>

                <x-stat-card title="Late days" :value="$summary['total_late'] ?? 0" iconClass="bg-orange-100 text-orange-600">
                    <x-slot name="icon"><i class="bi bi-clock-history text-lg"></i></x-slot>
                </x-stat-card>

                <x-stat-card title="On leave" :value="$summary['total_on_leave'] ?? 0" iconClass="bg-blue-100 text-blue-600">
                    <x-slot name="icon"><i class="bi bi-calendar-x text-lg"></i></x-slot>
                </x-stat-card>

                <x-stat-card title="Total hours" :value="$summary['total_hours'] ?? 0" iconClass="bg-purple-100 text-purple-600">
                    <x-slot name="icon"><i class="bi bi-hourglass-split text-lg"></i></x-slot>
                </x-stat-card>

            </div>
        
            <x-table>
                <x-slot name="head">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Joining date</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Present</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Absent</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Late</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">On leave</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Working days</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Total hours</th>
                    </tr>
                </x-slot>
                @forelse($rows as $row)
                    <tr class="hover:bg-slate-50">
                        <td class="whitespace-nowrap px-4 py-3 font-medium text-slate-900">{{ $row['user']->name ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $row['user']->department?->name ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $row['user']->joining_date?->format('d M Y') ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['present_days'] }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['absent_days'] }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['late_days'] }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['on_leave_days'] }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['working_days'] }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-900">{{ $row['total_hours'] }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center text-sm text-slate-500">No data for the selected period. Choose a date range and click Apply.</td>
                    </tr>
                @endforelse
            </x-table>
        @else
            <p class="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">Select a date range and click Apply to view the report.</p>
        @endif
    </x-card>
@endsection