@extends('layouts.app')

@section('title', 'Onboarding Management')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold text-gray-900">Onboarding Management</h1>
    <div class="flex space-x-2">
        <a href="{{ route('onboarding.dashboard') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-chart-bar mr-2"></i>Dashboard
        </a>
        <a href="{{ route('onboarding.report') }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-file-alt mr-2"></i>Report
        </a>
    </div>
</div>

<!-- Filters -->
<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
    <form method="GET" action="{{ route('onboarding.index') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div>
            <input type="text" name="search" value="{{ request('search') }}" 
                   placeholder="Search employees..." 
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        
        <div>
            <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Statuses</option>
                @foreach($statuses as $status)
                    <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $status)) }}
                    </option>
                @endforeach
            </select>
        </div>
        
        <div>
            <input type="date" name="date_from" value="{{ request('date_from') }}" 
                   placeholder="From Date"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        
        <div>
            <input type="date" name="date_to" value="{{ request('date_to') }}" 
                   placeholder="To Date"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        
        <div class="flex space-x-2">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                <i class="fas fa-search mr-1"></i>Filter
            </button>
            <a href="{{ route('onboarding.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
                <i class="fas fa-times mr-1"></i>Clear
            </a>
        </div>
    </form>
</div>

<!-- Onboarding Table -->
<div class="bg-white rounded-lg shadow-sm 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" class="rounded" id="select-all">
                    </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">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Submitted</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Update</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($onboardings as $onboarding)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" name="onboarding_ids[]" value="{{ $onboarding->id }}" class="rounded onboarding-checkbox">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                        <span class="text-sm font-medium text-blue-600">
                                            {{ substr($onboarding->employee->first_name, 0, 1) }}{{ substr($onboarding->employee->last_name, 0, 1) }}
                                        </span>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">{{ $onboarding->employee->full_name }}</div>
                                    <div class="text-sm text-gray-500">{{ $onboarding->employee->employee_id }}</div>
                                    <div class="text-sm text-gray-500">{{ $onboarding->employee->department }}</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
                                {{ $onboarding->status === 'onboarded' ? 'bg-green-100 text-green-800' : 
                                   ($onboarding->status === 'submitted' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800') }}">
                                {{ $onboarding->status_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $onboarding->progress_percentage }}%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-700">{{ $onboarding->progress_percentage }}%</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <div>{{ $onboarding->submitted_at ? $onboarding->submitted_at->format('M j, Y') : '-' }}</div>
                            @if($onboarding->submittedBy)
                                <div class="text-xs text-gray-500">by {{ $onboarding->submittedBy->name }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $onboarding->updated_at->format('M j, Y') }}
                            <div class="text-xs text-gray-500">{{ $onboarding->updated_at->diffForHumans() }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                            <a href="{{ route('onboarding.show', $onboarding) }}" class="text-blue-600 hover:text-blue-900">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('employees.show', $onboarding->employee) }}" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-user"></i>
                            </a>
                            @if($onboarding->getNextStatus())
                                <button onclick="updateStatus({{ $onboarding->id }}, '{{ $onboarding->getNextStatus() }}')" 
                                        class="text-purple-600 hover:text-purple-900">
                                    <i class="fas fa-arrow-right"></i>
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                            No onboarding records found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    @if($onboardings->hasPages())
        <div class="bg-white px-4 py-3 border-t border-gray-200">
            {{ $onboardings->links() }}
        </div>
    @endif
</div>

<!-- Bulk Actions -->
@if($onboardings->count() > 0)
    <div class="mt-6 bg-white p-4 rounded-lg shadow-sm">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Bulk Actions</h3>
        <form id="bulk-action-form" method="POST" action="{{ route('onboarding.bulk-update') }}">
            @csrf
            <div class="flex items-center space-x-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Update selected to:</label>
                    <select name="status" class="ml-2 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @foreach($statuses as $status)
                            <option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg" disabled>
                    <i class="fas fa-check mr-1"></i>Update Selected
                </button>
            </div>
        </form>
    </div>
@endif

<!-- Status Update Modal -->
<div id="status-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Update Onboarding Status</h3>
        <form id="status-form" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">New Status</label>
                <select name="status" id="new-status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    @foreach($statuses as $status)
                        <option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="closeModal()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
                    Cancel
                </button>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                    Update Status
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Select all checkbox functionality
    document.getElementById('select-all').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.onboarding-checkbox');
        const bulkButton = document.querySelector('#bulk-action-form button[type="submit"]');
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        
        bulkButton.disabled = !this.checked;
    });

    // Individual checkbox functionality
    document.querySelectorAll('.onboarding-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const bulkButton = document.querySelector('#bulk-action-form button[type="submit"]');
            const checkedBoxes = document.querySelectorAll('.onboarding-checkbox:checked');
            
            bulkButton.disabled = checkedBoxes.length === 0;
        });
    });

    // Status update functionality
    function updateStatus(onboardingId, newStatus) {
        document.getElementById('new-status').value = newStatus;
        document.getElementById('status-form').action = `/onboarding/${onboardingId}/update-status`;
        document.getElementById('status-modal').classList.remove('hidden');
    }

    function closeModal() {
        document.getElementById('status-modal').classList.add('hidden');
    }

    // Bulk action form submission
    document.getElementById('bulk-action-form').addEventListener('submit', function(e) {
        const checkedBoxes = document.querySelectorAll('.onboarding-checkbox:checked');
        
        if (checkedBoxes.length === 0) {
            e.preventDefault();
            alert('Please select at least one onboarding record.');
            return;
        }
        
        // Add selected IDs to form
        checkedBoxes.forEach(checkbox => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'onboarding_ids[]';
            input.value = checkbox.value;
            this.appendChild(input);
        });
    });
</script>
@endpush