@extends('layouts.app')

@section('title', 'Attendance Requests')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Attendance Requests</h1>
                <p class="mt-2 text-gray-600">Manage employee attendance correction requests</p>
            </div>
            <div class="flex space-x-3">
                <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out flex items-center" onclick="showBulkActions()">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Bulk Actions
                </button>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-amber-600 text-white rounded-lg p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-amber-100 text-sm font-medium">Pending</p>
                        <p class="text-3xl font-bold mt-2">{{ $requests->where('status.name', 'pending')->count() }}</p>
                    </div>
                    <div class="bg-amber-700 bg-opacity-50 rounded-full p-3">
                        <i class="fas fa-clock text-2xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-green-600 text-white rounded-lg p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-green-100 text-sm font-medium">Approved</p>
                        <p class="text-3xl font-bold mt-2">{{ $requests->where('status.name', 'approved')->count() }}</p>
                    </div>
                    <div class="bg-green-700 bg-opacity-50 rounded-full p-3">
                        <i class="fas fa-check-circle text-2xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-red-600 text-white rounded-lg p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-red-100 text-sm font-medium">Rejected</p>
                        <p class="text-3xl font-bold mt-2">{{ $requests->where('status.name', 'rejected')->count() }}</p>
                    </div>
                    <div class="bg-red-700 bg-opacity-50 rounded-full p-3">
                        <i class="fas fa-times-circle text-2xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-blue-600 text-white rounded-lg p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm font-medium">Total Requests</p>
                        <p class="text-3xl font-bold mt-2">{{ $requests->count() }}</p>
                    </div>
                    <div class="bg-blue-700 bg-opacity-50 rounded-full p-3">
                        <i class="fas fa-list text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Requests Table -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <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">
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            </th>
                            <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">Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Original Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Requested Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</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">Requested</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($requests ?? [] as $request)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="request-checkbox rounded border-gray-300 text-primary-600 focus:ring-primary-500" value="{{ $request->id }}">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full" src="{{ $request->user->avatar }}" alt="">
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">{{ $request->user->full_name }}</div>
                                            <div class="text-sm text-gray-500">{{ $request->user->profile->employee_id ?? '' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">{{ ucfirst($request->request_type) }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $request->original_time?->format('M d, Y h:i A') ?? '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $request->requested_time?->format('M d, Y h:i A') ?? '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <button class="text-primary-600 hover:text-primary-900" onclick="viewReason({{ $request->id }})" title="View Reason">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $request->status->class ?? 'gray' }}-100 text-{{ $request->status->class ?? 'gray' }}-800">
                                        {{ $request->status->name }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $request->created_at->diffForHumans() }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        @if($request->status->name === 'pending' && auth()->user()->can('edit_attendance'))
                                            <button class="text-green-600 hover:text-green-900" onclick="approveRequest({{ $request->id }})" title="Approve">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-900" onclick="rejectRequest({{ $request->id }})" title="Reject">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        @endif
                                        <button class="text-primary-600 hover:text-primary-900" onclick="viewRequest({{ $request->id }})" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-6 py-4 text-center text-sm text-gray-500">
                                    No attendance requests found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $requests->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Request Details Modal -->
<div id="requestModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-4/5 lg:w-3/4 shadow-lg rounded-lg bg-white">
        <div class="flex justify-between items-center pb-3 border-b">
            <h3 class="text-lg font-semibold text-gray-900">Request Details</h3>
            <button type="button" onclick="closeModal('requestModal')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="mt-4" id="requestContent">
            <!-- Request details will be loaded here -->
        </div>
        <div class="mt-6 pt-4 border-t flex justify-end">
            <button type="button" onclick="closeModal('requestModal')" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors">Close</button>
        </div>
    </div>
</div>

<!-- Reason Modal -->
<div id="reasonModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-lg bg-white">
        <div class="flex justify-between items-center pb-3 border-b">
            <h3 class="text-lg font-semibold text-gray-900">Request Reason</h3>
            <button type="button" onclick="closeModal('reasonModal')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="mt-4">
            <p id="reasonText" class="text-gray-700"></p>
        </div>
        <div class="mt-6 pt-4 border-t flex justify-end">
            <button type="button" onclick="closeModal('reasonModal')" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors">Close</button>
        </div>
    </div>
</div>

<!-- Action Modal -->
<div id="actionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-lg bg-white">
        <div class="flex justify-between items-center pb-3 border-b">
            <h3 class="text-lg font-semibold text-gray-900" id="actionTitle">Action</h3>
            <button type="button" onclick="closeModal('actionModal')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="mt-4">
            <form id="actionForm">
                <input type="hidden" id="actionRequestId">
                <input type="hidden" id="actionType">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Comments</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" id="actionComments" rows="3" placeholder="Add comments..."></textarea>
                </div>
            </form>
        </div>
        <div class="mt-6 pt-4 border-t flex justify-end space-x-3">
            <button type="button" onclick="closeModal('actionModal')" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors">Cancel</button>
            <button type="button" class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors" id="actionSubmit">Submit</button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
}

function filterRequests() {
    const params = new URLSearchParams({
        status: document.getElementById('status_filter').value,
        user_id: document.getElementById('user_filter').value,
        date: document.getElementById('date_filter').value
    });
    
    window.location.href = `{{ route('attendance.requests') }}?${params.toString()}`;
}

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.request-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
}

function showBulkActions() {
    const selected = document.querySelectorAll('.request-checkbox:checked');
    if (selected.length === 0) {
        alert('Please select at least one request');
        return;
    }
    
    // Show bulk action modal
    const action = confirm(`Process ${selected.length} selected requests?`);
    if (action) {
        // Implement bulk action logic
        alert('Bulk actions will be implemented');
    }
}

function viewRequest(id) {
    fetch(`/attendance/requests/${id}`)
        .then(response => response.json())
        .then(data => {
            const content = `
                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-900 mb-3">Employee Information</h4>
                            <div class="space-y-2">
                                <p><span class="text-sm font-medium text-gray-600">Name:</span> <span class="text-gray-900">${data.user.full_name}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Employee ID:</span> <span class="text-gray-900">${data.user.profile?.employee_id || 'N/A'}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Email:</span> <span class="text-gray-900">${data.user.email}</span></p>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-900 mb-3">Request Information</h4>
                            <div class="space-y-2">
                                <p><span class="text-sm font-medium text-gray-600">Type:</span> <span class="text-gray-900">${data.request_type}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Original Time:</span> <span class="text-gray-900">${data.original_time || 'N/A'}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Requested Time:</span> <span class="text-gray-900">${data.requested_time || 'N/A'}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Status:</span> <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-${data.status.class || 'gray'}-100 text-${data.status.class || 'gray'}-800">${data.status.name}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Requested:</span> <span class="text-gray-900">${data.created_at}</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <h4 class="font-semibold text-gray-900 mb-3">Reason</h4>
                        <p class="text-gray-700">${data.reason || 'No reason provided'}</p>
                    </div>
                    ${data.approved_by ? `
                        <div class="bg-green-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-900 mb-3">Approval Information</h4>
                            <div class="space-y-2">
                                <p><span class="text-sm font-medium text-gray-600">Approved By:</span> <span class="text-gray-900">${data.approved_by.full_name}</span></p>
                                <p><span class="text-sm font-medium text-gray-600">Approved At:</span> <span class="text-gray-900">${data.approved_at}</span></p>
                            </div>
                        </div>
                    ` : ''}
                </div>
            `;
            
            document.getElementById('requestContent').innerHTML = content;
            document.getElementById('requestModal').classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error fetching request details:', error);
            alert('Error loading request details');
        });
}

function viewReason(id) {
    fetch(`/attendance/requests/${id}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('reasonText').textContent = data.reason || 'No reason provided';
            document.getElementById('reasonModal').classList.remove('hidden');
        })
        .catch(error => {
            console.error('Error fetching reason:', error);
            alert('Error loading reason');
        });
}

function approveRequest(id) {
    document.getElementById('actionRequestId').value = id;
    document.getElementById('actionType').value = 'approve';
    document.getElementById('actionTitle').textContent = 'Approve Request';
    document.getElementById('actionComments').value = '';
    document.getElementById('actionModal').classList.remove('hidden');
}

function rejectRequest(id) {
    document.getElementById('actionRequestId').value = id;
    document.getElementById('actionType').value = 'reject';
    document.getElementById('actionTitle').textContent = 'Reject Request';
    document.getElementById('actionComments').value = '';
    document.getElementById('actionModal').classList.remove('hidden');
}

document.getElementById('actionSubmit').addEventListener('click', function() {
    const id = document.getElementById('actionRequestId').value;
    const type = document.getElementById('actionType').value;
    const comments = document.getElementById('actionComments').value;
    
    fetch(`/attendance/requests/${id}/${type}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ comments })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('actionModal').classList.add('hidden');
            location.reload();
        } else {
            alert('Error processing request: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error processing request:', error);
        alert('Error processing request');
    });
});

function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
}
</script>
@endsection