@extends('layouts.app')

@section('title', 'Clock In/Out')
@section('subtitle', 'Biometric attendance system')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Biometric Scanner & Form -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Biometric Scanner Section -->
            <div class="bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border-l-4 border-yellow-500 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-yellow-50 to-orange-50 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900 flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                            <i class="fas fa-fingerprint text-white text-lg"></i>
                        </div>
                        Biometric Scanner
                    </h3>
                </div>
                <div class="p-8">
                    <div class="flex flex-col items-center">
                        <!-- Scanner Circle -->
                        <div class="relative mb-8">
                            <div id="scanner-circle" class="w-48 h-48 border-4 border-dashed border-yellow-400 rounded-full flex items-center justify-center bg-gradient-to-br from-yellow-50 to-orange-50 cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-lg">
                                <div class="text-center">
                                    <i id="scanner-icon" class="fas fa-fingerprint text-6xl text-yellow-500 mb-4"></i>
                                    <p id="scanner-text" class="text-lg font-semibold text-gray-700">Place finger on scanner</p>
                                    <p class="text-sm text-gray-500 mt-2">Touch to scan biometric</p>
                                </div>
                            </div>
                            <!-- Scanning Animation -->
                            <div id="scanning-animation" class="absolute inset-0 border-4 border-green-500 rounded-full animate-ping opacity-0"></div>
                        </div>
                        
                        <!-- Scanner Status -->
                        <div id="scanner-status" class="text-center mb-6">
                            <div class="inline-flex items-center px-4 py-2 rounded-full bg-gray-100 text-gray-600">
                                <div class="w-3 h-3 bg-gray-400 rounded-full mr-2"></div>
                                <span class="text-sm font-medium">Scanner Ready</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Manual Entry Form -->
            <div class="bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border-l-4 border-blue-500 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900 flex items-center">
                        <div class="w-10 h-10 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-keyboard text-white text-lg"></i>
                        </div>
                        Manual Entry
                    </h3>
                </div>
                <div class="p-6">
                    <form id="attendance-form" class="space-y-6">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="employee_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-id-card mr-2 text-blue-500"></i>Employee ID *
                                </label>
                                <input type="text" id="employee_id" name="employee_id" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                                       placeholder="Enter Employee ID">
                                <div id="employee-info" class="mt-2 hidden">
                                    <div class="flex items-center p-3 bg-blue-50 rounded-lg">
                                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                                            <span class="text-white font-semibold text-sm" id="employee-initials"></span>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-900" id="employee-name"></p>
                                            <p class="text-sm text-gray-600" id="employee-department"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label for="action" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-exchange-alt mr-2 text-green-500"></i>Action *
                                </label>
                                <select id="action" name="action" required
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200">
                                    <option value="">Select Action</option>
                                    <option value="clock_in">Clock In</option>
                                    <option value="clock_out">Clock Out</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="location" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-map-marker-alt mr-2 text-purple-500"></i>Location
                                </label>
                                <select id="location" name="location"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200">
                                    <option value="Main Gate">Main Gate</option>
                                    <option value="Underground Entry">Underground Entry</option>
                                    <option value="Equipment Bay">Equipment Bay</option>
                                    <option value="Office Building">Office Building</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-sticky-note mr-2 text-orange-500"></i>Notes (Optional)
                                </label>
                                <input type="text" id="notes" name="notes"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-200"
                                       placeholder="Additional notes...">
                            </div>
                        </div>
                        
                        <div class="flex justify-end">
                            <button type="submit" id="submit-btn"
                                    class="px-8 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl hover:from-blue-600 hover:to-indigo-700 transition-all duration-200 transform hover:scale-105 shadow-lg font-semibold">
                                <i class="fas fa-check mr-2"></i>
                                Process Attendance
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Column - Statistics & Activity -->
        <div class="space-y-6">
            <!-- Today's Summary -->
            <div class="bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border-l-4 border-green-500 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900 flex items-center">
                        <div class="w-10 h-10 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-chart-bar text-white text-lg"></i>
                        </div>
                        Today's Summary
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-4 text-white shadow-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-green-100 text-sm font-medium">Clock Ins</p>
                                    <p class="text-2xl font-bold">{{ $stats['clock_ins'] }}</p>
                                </div>
                                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-sign-in-alt text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-red-500 to-pink-600 rounded-xl p-4 text-white shadow-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-red-100 text-sm font-medium">Clock Outs</p>
                                    <p class="text-2xl font-bold">{{ $stats['clock_outs'] }}</p>
                                </div>
                                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-sign-out-alt text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-yellow-500 to-orange-600 rounded-xl p-4 text-white shadow-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-yellow-100 text-sm font-medium">Underground</p>
                                    <p class="text-2xl font-bold">{{ $stats['underground'] }}</p>
                                </div>
                                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-mountain text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl p-4 text-white shadow-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-blue-100 text-sm font-medium">Late Arrivals</p>
                                    <p class="text-2xl font-bold">{{ $stats['late_arrivals'] }}</p>
                                </div>
                                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-clock text-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Underground Employees -->
            @if($undergroundEmployees->count() > 0)
            <div class="bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border-l-4 border-red-500 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-red-50 to-pink-50 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900 flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                            <i class="fas fa-exclamation-triangle text-white text-lg"></i>
                        </div>
                        Currently Underground
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        @foreach($undergroundEmployees as $employee)
                        <div class="flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-200">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
                                    <span class="text-white font-semibold text-sm">{{ substr($employee['name'], 0, 2) }}</span>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">{{ $employee['name'] }}</p>
                                    <p class="text-sm text-gray-600">{{ $employee['employee_id'] }} • {{ $employee['department'] }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium text-red-600">{{ $employee['duration'] }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Recent Activity -->
            <div class="bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border-l-4 border-purple-500 overflow-hidden">
                <div class="px-6 py-4 bg-gradient-to-r from-purple-50 to-indigo-50 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900 flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                            <i class="fas fa-history text-white text-lg"></i>
                        </div>
                        Recent Activity
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        @forelse($recentActivity as $activity)
                        <div class="flex items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3 {{ $activity['action'] === 'clock_in' ? 'bg-green-500' : 'bg-red-500' }}">
                                <i class="fas fa-arrow-{{ $activity['action'] === 'clock_in' ? 'right' : 'left' }} text-white text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium text-gray-900">{{ $activity['employee_name'] }}</p>
                                <p class="text-sm text-gray-600">{{ $activity['employee_id'] }} • {{ ucfirst(str_replace('_', ' ', $activity['action'])) }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium text-gray-900">{{ Carbon\Carbon::parse($activity['timestamp'])->format('H:i') }}</p>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-8">
                            <i class="fas fa-clock text-gray-400 text-4xl mb-4"></i>
                            <p class="text-gray-600">No recent activity</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Modal -->
<div id="result-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
            <div class="text-center">
                <div id="modal-icon" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
                    <i class="fas fa-check text-white text-2xl"></i>
                </div>
                <h3 id="modal-title" class="text-xl font-bold text-gray-900 mb-2">Success!</h3>
                <p id="modal-message" class="text-gray-600 mb-6">Attendance recorded successfully</p>
                <button id="modal-close" class="px-6 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-colors">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const scannerCircle = document.getElementById('scanner-circle');
    const scannerIcon = document.getElementById('scanner-icon');
    const scannerText = document.getElementById('scanner-text');
    const scannerStatus = document.getElementById('scanner-status');
    const scanningAnimation = document.getElementById('scanning-animation');
    const attendanceForm = document.getElementById('attendance-form');
    const employeeIdInput = document.getElementById('employee_id');
    const employeeInfo = document.getElementById('employee-info');
    const resultModal = document.getElementById('result-modal');
    const modalIcon = document.getElementById('modal-icon');
    const modalTitle = document.getElementById('modal-title');
    const modalMessage = document.getElementById('modal-message');
    const modalClose = document.getElementById('modal-close');

    // Biometric Scanner Simulation
    scannerCircle.addEventListener('click', function() {
        // Start scanning animation
        scanningAnimation.classList.remove('opacity-0');
        scanningAnimation.classList.add('opacity-75');
        
        scannerStatus.innerHTML = `
            <div class="inline-flex items-center px-4 py-2 rounded-full bg-yellow-100 text-yellow-700">
                <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
                <span class="text-sm font-medium">Scanning...</span>
            </div>
        `;
        
        scannerText.textContent = 'Scanning biometric...';
        scannerIcon.classList.add('animate-pulse');
        
        // Simulate scanning process
        setTimeout(() => {
            // Simulate successful scan
            scanningAnimation.classList.add('opacity-0');
            scanningAnimation.classList.remove('opacity-75');
            
            scannerStatus.innerHTML = `
                <div class="inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-700">
                    <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                    <span class="text-sm font-medium">Scan Complete</span>
                </div>
            `;
            
            scannerText.textContent = 'Biometric verified';
            scannerIcon.classList.remove('animate-pulse');
            scannerIcon.classList.add('text-green-500');
            
            // Auto-fill form with sample data
            employeeIdInput.value = '56T32';
            employeeIdInput.dispatchEvent(new Event('input'));
            
            // Reset after 3 seconds
            setTimeout(() => {
                scannerStatus.innerHTML = `
                    <div class="inline-flex items-center px-4 py-2 rounded-full bg-gray-100 text-gray-600">
                        <div class="w-3 h-3 bg-gray-400 rounded-full mr-2"></div>
                        <span class="text-sm font-medium">Scanner Ready</span>
                    </div>
                `;
                scannerText.textContent = 'Place finger on scanner';
                scannerIcon.classList.remove('text-green-500');
            }, 3000);
        }, 2000);
    });

    // Employee ID lookup
    employeeIdInput.addEventListener('input', function() {
        const employeeId = this.value.trim();
        if (employeeId.length >= 3) {
            // Show loading state
            employeeInfo.classList.remove('hidden');
            document.getElementById('employee-name').textContent = 'Loading...';
            document.getElementById('employee-department').textContent = 'Please wait';
            document.getElementById('employee-initials').textContent = '...';
            
            // Simulate employee lookup
            fetch(`/api/employees/${employeeId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('employee-name').textContent = data.employee.name;
                        document.getElementById('employee-department').textContent = data.employee.department;
                        document.getElementById('employee-initials').textContent = data.employee.initials;
                        employeeInfo.classList.remove('hidden');
                    } else {
                        employeeInfo.classList.add('hidden');
                    }
                })
                .catch(() => {
                    // Fallback for demo
                    if (employeeId === '56T32') {
                        document.getElementById('employee-name').textContent = 'John Miner';
                        document.getElementById('employee-department').textContent = 'Mining Operations';
                        document.getElementById('employee-initials').textContent = 'JM';
                        employeeInfo.classList.remove('hidden');
                    } else if (employeeId === 'admin') {
                        document.getElementById('employee-name').textContent = 'Dean Garlus';
                        document.getElementById('employee-department').textContent = 'Mining Operations';
                        document.getElementById('employee-initials').textContent = 'DG';
                        employeeInfo.classList.remove('hidden');
                    } else if (employeeId === 'sarah') {
                        document.getElementById('employee-name').textContent = 'Sarah Safety';
                        document.getElementById('employee-department').textContent = 'Safety & Security';
                        document.getElementById('employee-initials').textContent = 'SS';
                        employeeInfo.classList.remove('hidden');
                    } else if (employeeId === 'mike') {
                        document.getElementById('employee-name').textContent = 'Mike Store';
                        document.getElementById('employee-department').textContent = 'Equipment & Maintenance';
                        document.getElementById('employee-initials').textContent = 'MS';
                        employeeInfo.classList.remove('hidden');
                    } else {
                        employeeInfo.classList.add('hidden');
                    }
                });
        } else {
            employeeInfo.classList.add('hidden');
        }
    });

    // Form submission
    attendanceForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = document.getElementById('submit-btn');
        
        // Disable submit button
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
        
        console.log('Submitting attendance form...');
        console.log('Form data:', Object.fromEntries(formData));
        
        fetch('/attendance/clock-in-out', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                showModal('success', 'Success!', data.message);
                attendanceForm.reset();
                employeeInfo.classList.add('hidden');
            } else {
                showModal('error', 'Error', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            console.error('Error details:', error.message);
            showModal('error', 'Error', 'Failed to process attendance: ' + error.message);
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Process Attendance';
        });
    });

    // Modal functions
    function showModal(type, title, message) {
        modalTitle.textContent = title;
        modalMessage.textContent = message;
        
        if (type === 'success') {
            modalIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-green-500';
            modalIcon.innerHTML = '<i class="fas fa-check text-white text-2xl"></i>';
        } else {
            modalIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-red-500';
            modalIcon.innerHTML = '<i class="fas fa-times text-white text-2xl"></i>';
        }
        
        resultModal.classList.remove('hidden');
    }

    modalClose.addEventListener('click', function() {
        resultModal.classList.add('hidden');
    });

    // Close modal on outside click
    resultModal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.add('hidden');
        }
    });
});
</script>
@endsection