@extends('layouts.app')

@section('title', 'Attendance Report')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h5 class="text-lg font-semibold text-gray-900">Attendance Report</h5>
                <button onclick="exportReport()" class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent text-sm font-medium text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                    <i class="fas fa-file-export mr-2"></i>
                    Export to CSV
                </button>
            </div>
        </div>
        <div class="p-6">
            <!-- Filters -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                    <input type="date" name="start_date" value="{{ $startDate ?? '' }}" onchange="applyFilters()" 
                           class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                    <input type="date" name="end_date" value="{{ $endDate ?? '' }}" onchange="applyFilters()"
                           class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                    <select name="employee_id" onchange="applyFilters()" 
                            class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Employees</option>
                        @if(isset($employees))
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ ($filters['employee_id'] ?? null) == $employee->id ? 'selected' : '' }}>
                                    {{ $employee->full_name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                    <select name="department_id" onchange="applyFilters()"
                            class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Departments</option>
                        @if(isset($departments))
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" {{ ($filters['department_id'] ?? null) == $department->id ? 'selected' : '' }}>
                                    {{ $department->name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" onchange="applyFilters()"
                            class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Status</option>
                        <option value="present" {{ ($filters['status'] ?? null) == 'present' ? 'selected' : '' }}>Present</option>
                        <option value="absent" {{ ($filters['status'] ?? null) == 'absent' ? 'selected' : '' }}>Absent</option>
                        <option value="late" {{ ($filters['status'] ?? null) == 'late' ? 'selected' : '' }}>Late</option>
                        <option value="half_day" {{ ($filters['status'] ?? null) == 'half_day' ? 'selected' : '' }}>Half Day</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

        <!-- Summary Cards -->
        @if(isset($report['summary']))
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
            <div class="bg-blue-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-calendar-alt text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['total_days'] ?? 0 }}</h3>
                    <p class="text-sm text-blue-100">Total Days</p>
                </div>
            </div>
            <div class="bg-green-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-user-check text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['present_days'] ?? 0 }}</h3>
                    <p class="text-sm text-green-100">Present</p>
                </div>
            </div>
            <div class="bg-red-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-user-times text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['absent_days'] ?? 0 }}</h3>
                    <p class="text-sm text-red-100">Absent</p>
                </div>
            </div>
            <div class="bg-yellow-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-clock text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['late_days'] ?? 0 }}</h3>
                    <p class="text-sm text-yellow-100">Late</p>
                </div>
            </div>
            <div class="bg-purple-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-chart-line text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['attendance_rate'] ?? 0 }}%</h3>
                    <p class="text-sm text-purple-100">Attendance Rate</p>
                </div>
            </div>
            <div class="bg-gray-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                <div class="text-center">
                    <div class="flex items-center justify-center mb-2">
                        <i class="fas fa-adjust text-2xl opacity-80"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['half_days'] ?? 0 }}</h3>
                    <p class="text-sm text-gray-100">Half Days</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Detailed Table -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                <h6 class="text-base font-semibold text-gray-900">Attendance Details</h6>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check In</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check Out</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Working Hours</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overtime</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @if(isset($report['details']) && count($report['details']) > 0)
                            @foreach($report['details'] as $attendance)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full" src="{{ $attendance->user?->avatar ?? asset('images/default-avatar.png') }}" alt="">
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900">{{ $attendance->user?->full_name ?? 'N/A' }}</div>
                                                <div class="text-xs text-gray-500">{{ $attendance->user?->profile?->employee_id ?? '' }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $attendance->user?->departments?->pluck('name')->join(', ') ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $attendance->in_date }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                            {{ $attendance->status?->name === 'present' ? 'bg-green-100 text-green-800' : 
                                               ($attendance->status?->name === 'absent' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                                            {{ ucfirst($attendance->status?->name ?? 'N/A') }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($attendance->punchInTime)
                                            {{ \Carbon\Carbon::parse($attendance->punchInTime)->format('h:i A') }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($attendance->punchOutTime)
                                            {{ \Carbon\Carbon::parse($attendance->punchOutTime)->format('h:i A') }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $attendance->total_hours ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $attendance->overtime_hours ?? 'N/A' }}
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-calendar-times text-4xl mb-3 text-gray-300"></i>
                                        <span class="text-lg font-medium">No attendance records found</span>
                                        <span class="text-sm">Try adjusting your filters or date range</span>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Analytics Section -->
    @if(isset($report['analytics']))
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Top Performers -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Top Performers</h3>
            </div>
            <div class="p-6">
                @if(isset($report['analytics']['top_performers']) && count($report['analytics']['top_performers']) > 0)
                    <div class="space-y-4">
                        @foreach($report['analytics']['top_performers'] as $performer)
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="text-sm font-medium text-gray-900">{{ $performer['employee']?->full_name ?? 'N/A' }}</div>
                                    <div class="text-xs text-gray-500">{{ $performer['employee']?->departments?->pluck('name')->join(', ') ?: 'N/A' }}</div>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div class="w-24 bg-gray-200 rounded-full h-2">
                                        <div class="bg-green-600 h-2 rounded-full" style="width: {{ $performer['attendance_rate'] }}%"></div>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900">{{ $performer['attendance_rate'] }}%</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-trophy text-3xl mb-2 text-gray-300"></i>
                        <p>No data available</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Department-wise Attendance -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Department-wise Attendance</h3>
            </div>
            <div class="p-6">
                @if(isset($report['analytics']['department_wise']) && count($report['analytics']['department_wise']) > 0)
                    <div class="space-y-4">
                        @foreach($report['analytics']['department_wise'] as $department => $stats)
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <div class="text-sm font-medium text-gray-900">{{ $department }}</div>
                                    <div class="text-xs text-gray-500">{{ $stats['present'] }}/{{ $stats['total'] }} days</div>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div class="w-24 bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $stats['attendance_rate'] }}%"></div>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900">{{ $stats['attendance_rate'] }}%</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-building text-3xl mb-2 text-gray-300"></i>
                        <p>No data available</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
@endsection


<script>
function applyFilters() {
    const form = document.createElement('form');
    form.method = 'GET';
    form.action = window.location.pathname;
    
    const inputs = document.querySelectorAll('input[name], select[name]');
    inputs.forEach(input => {
        const inputClone = input.cloneNode(true);
        form.appendChild(inputClone);
    });
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

function exportReport() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `{{ route('reports.attendance.export') }}?${params.toString()}`;
}
</script>