@extends('layouts.app')

@section('title', 'Attendance Logs')
@section('subtitle', 'View and manage attendance records')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="mb-6 sm:mb-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Attendance Logs</h1>
                <p class="text-gray-600 mt-1">View and manage employee attendance records</p>
            </div>
            <div class="flex items-center space-x-3">
                <a href="{{ route('attendance.logs.export', request()->query()) }}" 
                   class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-all duration-200 transform hover:scale-105 shadow-md">
                    <i class="fas fa-download mr-2"></i>Export CSV
                </a>
                <button onclick="resetFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-all duration-200 transform hover:scale-105 shadow-md">
                    <i class="fas fa-refresh mr-2"></i>Reset Filters
                </button>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
        <!-- Total Logs -->
        <div class="bg-blue-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-list text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-blue-100">Total Logs</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['total_logs'] }}</p>
                </div>
            </div>
        </div>

        <!-- Clock Ins -->
        <div class="bg-green-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-sign-in-alt text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-green-100">Clock Ins</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['clock_ins'] }}</p>
                </div>
            </div>
        </div>

        <!-- Clock Outs -->
        <div class="bg-red-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-sign-out-alt text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-red-100">Clock Outs</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['clock_outs'] }}</p>
                </div>
            </div>
        </div>

        <!-- Unique Employees -->
        <div class="bg-purple-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-users text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-purple-100">Employees</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['unique_employees'] }}</p>
                </div>
            </div>
        </div>

        <!-- Today -->
        <div class="bg-yellow-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-calendar-day text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-yellow-100">Today</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['today_logs'] }}</p>
                </div>
            </div>
        </div>

        <!-- This Week -->
        <div class="bg-indigo-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-calendar-week text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-indigo-100">This Week</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['this_week_logs'] }}</p>
                </div>
            </div>
        </div>

        <!-- This Month -->
        <div class="bg-orange-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 p-3 sm:p-4 lg:p-6">
            <div class="flex items-center">
                <div class="p-2 sm:p-3 rounded-full bg-white bg-opacity-20 text-white">
                    <i class="fas fa-calendar-alt text-lg sm:text-xl"></i>
                </div>
                <div class="ml-2 sm:ml-4">
                    <p class="text-xs sm:text-sm font-medium text-orange-100">This Month</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white">{{ $stats['this_month_logs'] }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-blue-500 mb-6">
        <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
            <h3 class="text-lg font-bold text-gray-900 flex items-center">
                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                    <i class="fas fa-filter text-white text-sm"></i>
                </div>
                Filters & Search
            </h3>
        </div>
        <div class="p-6">
            <form method="GET" action="{{ route('attendance.logs') }}" class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label for="employee_id" class="block text-sm font-medium text-gray-700 mb-2">Employee ID</label>
                        <input type="text" id="employee_id" name="employee_id" value="{{ request('employee_id') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                               placeholder="Enter Employee ID">
                    </div>
                    
                    <div>
                        <label for="employee_name" class="block text-sm font-medium text-gray-700 mb-2">Employee Name</label>
                        <input type="text" id="employee_name" name="employee_name" value="{{ request('employee_name') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                               placeholder="Enter Employee Name">
                    </div>
                    
                    <div>
                        <label for="action" class="block text-sm font-medium text-gray-700 mb-2">Action</label>
                        <select id="action" name="action" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                            <option value="">All Actions</option>
                            <option value="clock_in" {{ request('action') == 'clock_in' ? 'selected' : '' }}>Clock In</option>
                            <option value="clock_out" {{ request('action') == 'clock_out' ? 'selected' : '' }}>Clock Out</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                        <select id="location" name="location" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                            <option value="">All Locations</option>
                            @foreach($locations as $location)
                                <option value="{{ $location }}" {{ request('location') == $location ? 'selected' : '' }}>{{ $location }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div>
                        <label for="department_id" class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                        <select id="department_id" name="department_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                            <option value="">All Departments</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" {{ request('department_id') == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div>
                        <label for="date_from" class="block text-sm font-medium text-gray-700 mb-2">Date From</label>
                        <input type="date" id="date_from" name="date_from" value="{{ request('date_from') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                    </div>
                    
                    <div>
                        <label for="date_to" class="block text-sm font-medium text-gray-700 mb-2">Date To</label>
                        <input type="date" id="date_to" name="date_to" value="{{ request('date_to') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                    </div>
                    
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-all duration-200 transform hover:scale-105 shadow-md">
                            <i class="fas fa-search mr-2"></i>Apply Filters
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Attendance Logs Table -->
    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border-l-4 border-green-500">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-gray-900 flex items-center">
                    <div class="w-8 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                        <i class="fas fa-list text-white text-sm"></i>
                    </div>
                    Attendance Records
                </h3>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">{{ $logs->total() }} records</span>
                    <button onclick="refreshPage()" class="text-green-600 hover:text-green-800 transition-colors">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                            <i class="fas fa-calendar mr-1"></i>Date & Time
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                            <i class="fas fa-user mr-1"></i>Employee
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider hidden sm:table-cell">
                            <i class="fas fa-building mr-1"></i>Department
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                            <i class="fas fa-exchange-alt mr-1"></i>Action
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider hidden lg:table-cell">
                            <i class="fas fa-map-marker-alt mr-1"></i>Location
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider hidden lg:table-cell">
                            <i class="fas fa-sticky-note mr-1"></i>Notes
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                            <i class="fas fa-cog mr-1"></i>Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($logs as $log)
                        <tr class="hover:bg-blue-50 transition-colors duration-200">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ $log->timestamp->format('M d, Y') }}</div>
                                <div class="text-sm text-gray-500">{{ $log->timestamp->format('H:i:s') }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden">
                                        @if($log->user->image)
                                            <img src="{{ $log->user->image_url }}" alt="{{ $log->user->first_name }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full bg-blue-500 flex items-center justify-center">
                                                <span class="text-white font-semibold text-sm">{{ $log->user->initials }}</span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ $log->user->full_name }}</div>
                                        <div class="text-sm text-gray-500">{{ $log->user->employee_id }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden sm:table-cell">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-building mr-1"></i>
                                    {{ $log->user->department?->name ?? 'N/A' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($log->action === 'clock_in')
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-sign-in-alt mr-1"></i>
                                        Clock In
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-sign-out-alt mr-1"></i>
                                        Clock Out
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                    {{ $log->location ?? 'N/A' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 hidden lg:table-cell">
                                {{ $log->notes ? Str::limit($log->notes, 30) : 'N/A' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="{{ route('attendance.logs.show', $log) }}" class="text-blue-600 hover:text-blue-800 hover:bg-blue-100 p-1 rounded transition-colors">
                                        <i class="fas fa-eye text-sm"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="text-gray-500">
                                    <i class="fas fa-list text-4xl mb-4"></i>
                                    <p class="text-lg font-medium">No attendance logs found</p>
                                    <p class="text-sm">Try adjusting your filters or check back later</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($logs->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                <div class="flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0">
                    <div class="text-sm text-gray-700">
                        Showing <span class="font-medium text-blue-600">{{ $logs->firstItem() }}</span> to <span class="font-medium text-blue-600">{{ $logs->lastItem() }}</span> of <span class="font-medium text-blue-600">{{ $logs->total() }}</span> results
                    </div>
                    <div class="flex items-center space-x-2">
                        @if($logs->onFirstPage())
                            <span class="px-3 py-2 text-sm text-gray-400 bg-gray-100 border border-gray-300 rounded-lg cursor-not-allowed">
                                <i class="fas fa-chevron-left mr-1"></i>
                                Previous
                            </span>
                        @else
                            <a href="{{ $logs->previousPageUrl() }}" class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">
                                <i class="fas fa-chevron-left mr-1"></i>
                                Previous
                            </a>
                        @endif

                        @foreach($logs->getUrlRange(1, $logs->lastPage()) as $page => $url)
                            @if($page == $logs->currentPage())
                                <span class="px-3 py-2 text-sm text-white bg-blue-500 rounded-lg shadow-md">{{ $page }}</span>
                            @else
                                <a href="{{ $url }}" class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">{{ $page }}</a>
                            @endif
                        @endforeach

                        @if($logs->hasMorePages())
                            <a href="{{ $logs->nextPageUrl() }}" class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">
                                Next
                                <i class="fas fa-chevron-right ml-1"></i>
                            </a>
                        @else
                            <span class="px-3 py-2 text-sm text-gray-400 bg-gray-100 border border-gray-300 rounded-lg cursor-not-allowed">
                                Next
                                <i class="fas fa-chevron-right ml-1"></i>
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<script>
function resetFilters() {
    document.getElementById('employee_id').value = '';
    document.getElementById('employee_name').value = '';
    document.getElementById('action').value = '';
    document.getElementById('location').value = '';
    document.getElementById('department_id').value = '';
    document.getElementById('date_from').value = '';
    document.getElementById('date_to').value = '';
    
    // Submit the form to reset filters
    window.location.href = '{{ route("attendance.logs") }}';
}

function refreshPage() {
    window.location.reload();
}

// Auto-submit form when filters change
document.addEventListener('DOMContentLoaded', function() {
    const filterInputs = document.querySelectorAll('input, select');
    filterInputs.forEach(input => {
        input.addEventListener('change', function() {
            // Add a small delay to prevent too many requests
            setTimeout(() => {
                this.form.submit();
            }, 500);
        });
    });
});
</script>
@endsection