@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Page Header -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="mb-4 sm:mb-0">
                    <div class="flex items-center">
                        <div class="bg-red-100 rounded-lg p-3 mr-4">
                            <i class="fas fa-calendar-check text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Daily Attendance Logs</h1>
                            <p class="mt-1 text-sm text-gray-500">View and manage daily attendance records</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row gap-3">
                    @if(auth()->user()->can('export_attendance'))
                        <button onclick="exportAttendance()" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-download mr-2"></i> Export
                        </button>
                    @endif
                    @if(auth()->user()->can('import_attendance'))
                        <a href="{{ route('attendance.import') }}" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-upload mr-2"></i> Import
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center mb-4">
                <i class="fas fa-filter text-gray-400 mr-2"></i>
                <h2 class="text-lg font-semibold text-gray-900">Filters</h2>
            </div>
            <form method="GET" action="{{ route('attendance.daily-logs') }}">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- Date Filter -->
                    <div>
                        <label for="date" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-calendar text-gray-400 mr-1"></i> Date
                        </label>
                        <input type="date" id="date" name="date" value="{{ $date->format('Y-m-d') }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                    </div>

                    <!-- Service Filter -->
                    <div>
                        <label for="service_id" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-concierge-bell text-gray-400 mr-1"></i> Service
                        </label>
                        <select id="service_id" name="service_id" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                            <option value="">All Services</option>
                            @foreach($services as $id => $name)
                                <option value="{{ $id }}" {{ $serviceId == $id ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div>
                        <label for="status_id" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-info-circle text-gray-400 mr-1"></i> Status
                        </label>
                        <select id="status_id" name="status_id" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                            <option value="">All Statuses</option>
                            @foreach($statuses as $id => $name)
                                <option value="{{ $id }}" {{ $statusId == $id ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Search Button -->
                    <div class="flex items-end">
                        <button type="submit" class="w-full px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-search mr-2"></i> Search
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Attendance Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-end">
                    <div class="text-sm text-gray-500">
                        <span class="font-medium">{{ $attendances->total() }}</span> total records
                    </div>
                </div>
            </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-semibold text-gray-600 uppercase tracking-wider">Employee</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Department</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Shift</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Punch In</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Punch Out</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Break Details</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Total Hours</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Behavior</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($attendances as $attendance)
                        <tr class="hover:bg-gray-50 transition-colors duration-150">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <img class="h-10 w-10 rounded-full object-cover ring-2 ring-gray-200" src="{{ $attendance->user->avatar ?? asset('images/default-avatar.png') }}" alt="{{ $attendance->user->full_name ?? 'Unknown User' }}">
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ $attendance->user->full_name ?? 'Unknown User' }}</div>
                                        <div class="text-xs text-gray-500">{{ $attendance->user->email ?? 'No Email' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($attendance->user->departments->count() > 0)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $attendance->user->departments->first()->name }}
                                    </span>
                                @else
                                    <span class="text-sm text-gray-400 italic">No Department</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($attendance->workingShift)
                                    <span class="text-sm text-gray-900 font-medium">{{ $attendance->workingShift->name }}</span>
                                @else
                                    <span class="text-sm text-gray-400 italic">No Shift</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $punchIns = $attendance->all_punch_in_times;
                                @endphp
                                @if($punchIns->count() > 0)
                                    <div class="space-y-2 max-h-32 overflow-y-auto">
                                        @foreach($punchIns as $index => $punchIn)
                                            <div class="bg-blue-50 rounded-lg p-2 border border-blue-100">
                                                <div class="flex items-center text-sm font-medium text-blue-700">
                                                    <i class="fas fa-sign-in-alt mr-1.5 text-blue-500"></i>
                                                    In {{ $index + 1 }}: {{ \Carbon\Carbon::parse($punchIn->punch_time)->format('H:i:s') }}
                                                </div>
                                                @if($punchIn->latitude)
                                                    <div class="text-xs text-gray-500 mt-1 flex items-center">
                                                        <i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>
                                                        {{ $punchIn->latitude }}, {{ $punchIn->longitude }}
                                                    </div>
                                                @endif
                                                @if($punchIn->notes)
                                                    <div class="text-xs text-gray-600 mt-1 italic">
                                                        {{ $punchIn->notes }}
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">--</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $punchOuts = $attendance->all_punch_out_times;
                                @endphp
                                @if($punchOuts->count() > 0)
                                    <div class="space-y-2 max-h-32 overflow-y-auto">
                                        @foreach($punchOuts as $index => $punchOut)
                                            <div class="bg-green-50 rounded-lg p-2 border border-green-100">
                                                <div class="flex items-center text-sm font-medium text-green-700">
                                                    <i class="fas fa-sign-out-alt mr-1.5 text-green-500"></i>
                                                    Out {{ $index + 1 }}: {{ \Carbon\Carbon::parse($punchOut->punch_time)->format('H:i:s') }}
                                                </div>
                                                @if($punchOut->latitude)
                                                    <div class="text-xs text-gray-500 mt-1 flex items-center">
                                                        <i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>
                                                        {{ $punchOut->latitude }}, {{ $punchOut->longitude }}
                                                    </div>
                                                @endif
                                                @if($punchOut->notes)
                                                    <div class="text-xs text-gray-600 mt-1 italic">
                                                        {{ $punchOut->notes }}
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">--</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $breakStarts = $attendance->details()->where('type', 'break_start')->orderBy('punch_time')->get();
                                    $breakEnds = $attendance->details()->where('type', 'break_end')->orderBy('punch_time')->get();
                                @endphp
                                @if($breakStarts->isNotEmpty() || $breakEnds->isNotEmpty())
                                    <div class="space-y-2 max-h-32 overflow-y-auto">
                                        @foreach($breakStarts as $index => $breakStart)
                                            <div class="bg-amber-50 rounded-lg p-2 border border-amber-100">
                                                <div class="flex items-center text-sm font-medium text-amber-700">
                                                    <i class="fas fa-coffee mr-1.5 text-amber-500"></i>
                                                    Break {{ $index + 1 }}: {{ \Carbon\Carbon::parse($breakStart->punch_time)->format('H:i:s') }}
                                                </div>
                                                @php
                                                    $correspondingEnd = $breakEnds->firstWhere('punch_time', '>', $breakStart->punch_time);
                                                @endphp
                                                @if($correspondingEnd)
                                                    <div class="flex items-center text-sm text-green-600 mt-1">
                                                        <i class="fas fa-play mr-1 text-green-500"></i>
                                                        Resume: {{ \Carbon\Carbon::parse($correspondingEnd->punch_time)->format('H:i:s') }}
                                                    </div>
                                                    <div class="text-xs text-gray-600 mt-1">
                                                        <i class="fas fa-clock mr-1 text-gray-400"></i>
                                                        Duration: {{ \Carbon\Carbon::parse($breakStart->punch_time)->diffInMinutes(\Carbon\Carbon::parse($correspondingEnd->punch_time)) }} min
                                                    </div>
                                                @else
                                                    <div class="flex items-center text-sm text-orange-600 mt-1">
                                                        <i class="fas fa-exclamation-triangle mr-1 text-orange-500"></i>
                                                        Still on break
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                        
                                        @if($breakEnds->count() > $breakStarts->count())
                                            @php
                                                $unmatchedEnds = $breakEnds->slice($breakStarts->count());
                                            @endphp
                                            @foreach($unmatchedEnds as $end)
                                                <div class="bg-blue-50 rounded-lg p-2 border border-blue-100">
                                                    <div class="flex items-center text-xs text-blue-600">
                                                        <i class="fas fa-exclamation-circle mr-1 text-blue-500"></i>
                                                        Resume without start: {{ \Carbon\Carbon::parse($end->punch_time)->format('H:i:s') }}
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">--</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <i class="fas fa-clock text-gray-400 mr-2"></i>
                                    <span class="text-sm font-semibold text-gray-900">
                                        {{ $attendance->total_hours ? number_format($attendance->total_hours, 2) : '--' }}
                                    </span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $behaviorColors = [
                                        'regular' => 'bg-gray-100 text-gray-800',
                                        'early' => 'bg-blue-100 text-blue-800',
                                        'late' => 'bg-blue-100 text-blue-800'
                                    ];
                                    $behaviorClass = $behaviorColors[$attendance->behavior] ?? 'bg-gray-100 text-gray-800';
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $behaviorClass }}">
                                    <i class="fas fa-circle text-xs mr-1.5 opacity-50"></i>
                                    {{ ucfirst($attendance->behavior) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($attendance->status)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $attendance->status->name === 'present' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                        <i class="fas fa-circle text-xs mr-1.5 opacity-50"></i>
                                        {{ ucfirst($attendance->status->name) }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-circle text-xs mr-1.5 opacity-50"></i>
                                        No Status
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    @if(auth()->user()->can('view_attendance_details'))
                                        <a href="{{ route('attendance.details', ['attendance_id' => $attendance->id]) }}" 
                                           class="text-blue-600 hover:text-blue-800 transition-colors p-1 hover:bg-blue-50 rounded" 
                                           title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    @endif
                                    @if(auth()->user()->can('edit_attendance'))
                                        <button onclick="editAttendance({{ $attendance->id }})" 
                                                class="text-amber-600 hover:text-amber-800 transition-colors p-1 hover:bg-amber-50 rounded" 
                                                title="Edit Attendance">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    @endif
                                    @if(auth()->user()->can('delete_attendance'))
                                        <button onclick="deleteAttendance({{ $attendance->id }})" 
                                                class="text-red-600 hover:text-red-800 transition-colors p-1 hover:bg-red-50 rounded" 
                                                title="Delete Attendance">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="px-6 py-16 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="bg-gray-100 rounded-full p-4 mb-4">
                                        <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">No attendance records found</h3>
                                    <p class="text-sm text-gray-500 max-w-md">No attendance records found for the selected criteria. Try adjusting your filters or check a different date.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($attendances->hasPages())
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
                <div class="flex-1 flex justify-between sm:hidden">
                    <a href="{{ $attendances->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        <i class="fas fa-chevron-left mr-2"></i> Previous
                    </a>
                    <a href="{{ $attendances->nextPageUrl() }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        Next<i class="fas fa-chevron-right ml-2"></i>
                    </a>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            Showing
                            <span class="font-medium text-gray-900">{{ $attendances->firstItem() }}</span>
                            to
                            <span class="font-medium text-gray-900">{{ $attendances->lastItem() }}</span>
                            of
                            <span class="font-medium text-gray-900">{{ $attendances->total() }}</span>
                            results
                        </p>
                    </div>
                    <div>
                        {{ $attendances->links() }}
                    </div>
                </div>
            </div>
        @endif
    </div>
    </div>
</div>

<!-- Edit Attendance Modal -->
<div id="editAttendanceModal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
    <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full mx-auto">
        <div class="bg-white rounded-xl">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-edit text-red-600 mr-2"></i>
                        Edit Attendance
                    </h3>
                    <button type="button" onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <form id="editAttendanceForm" class="p-6 space-y-4">
                @csrf
                <input type="hidden" name="attendance_id" id="editAttendanceId">
                
                <div>
                    <label for="editPunchInTime" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-sign-in-alt text-gray-400 mr-1"></i>
                        Punch In Time
                    </label>
                    <input type="time" name="punch_in_time" id="editPunchInTime" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                </div>
                
                <div>
                    <label for="editPunchOutTime" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-sign-out-alt text-gray-400 mr-1"></i>
                        Punch Out Time
                    </label>
                    <input type="time" name="punch_out_time" id="editPunchOutTime"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                </div>
                
                <div>
                    <label for="editNotes" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-sticky-note text-gray-400 mr-1"></i>
                        Notes
                    </label>
                    <textarea name="notes" id="editNotes" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors resize-none"
                              placeholder="Add any additional notes..."></textarea>
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeEditModal()" class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors shadow-sm hover:shadow-md">
                        <i class="fas fa-save mr-2"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function editAttendance(id) {
    fetch(`/api/attendance/${id}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('editAttendanceId').value = data.id;
            document.getElementById('editPunchInTime').value = data.punch_in_time ? data.punch_in_time.substring(0, 5) : '';
            document.getElementById('editPunchOutTime').value = data.punch_out_time ? data.punch_out_time.substring(0, 5) : '';
            document.getElementById('editNotes').value = data.notes || '';
            
            document.getElementById('editAttendanceModal').classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error fetching attendance data:', error);
            showToast('Error loading attendance data', 'error');
        });
}

function closeEditModal() {
    document.getElementById('editAttendanceModal').classList.add('hidden');
}

function deleteAttendance(id) {
    if (confirm('Are you sure you want to delete this attendance record?')) {
        fetch(`/attendance/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Attendance deleted successfully', 'success');
                location.reload();
            } else {
                showToast('Error deleting attendance', 'error');
            }
        })
        .catch(error => {
            console.error('Error deleting attendance:', error);
            showToast('Error deleting attendance', 'error');
        });
    }
}

function exportAttendance() {
    const date = document.getElementById('date').value;
    const serviceId = document.getElementById('service_id').value;
    const statusId = document.getElementById('status_id').value;
    
    let url = `/attendance/export?date=${date}`;
    if (serviceId) url += `&service_id=${serviceId}`;
    if (statusId) url += `&status_id=${statusId}`;
    
    window.open(url, '_blank');
}

// Handle edit form submission
document.getElementById('editAttendanceForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const attendanceId = formData.get('attendance_id');
    
    fetch(`/attendance/${attendanceId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            punch_in_time: formData.get('punch_in_time'),
            punch_out_time: formData.get('punch_out_time'),
            notes: formData.get('notes')
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Attendance updated successfully', 'success');
            closeEditModal();
            location.reload();
        } else {
            showToast('Error updating attendance', 'error');
        }
    })
    .catch(error => {
        console.error('Error updating attendance:', error);
        showToast('Error updating attendance', 'error');
    });
});
</script>
@endpush