@extends('layouts.app')

@section('title', 'Employee Profile')

@section('content')
<div class="space-y-6">
    <!-- Profile Header -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="bg-red-100 rounded-lg p-3 mr-4">
                    <i class="fas fa-user text-red-600 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Employee Profile</h1>
                    <p class="text-sm text-gray-500 mt-1">View detailed employee information</p>
                </div>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('employees.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
                @if(auth()->user()->can('edit_employees'))
                    <a href="{{ route('employees.edit', $employee->id) }}" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">
                        <i class="fas fa-edit mr-2"></i>Edit Employee
                    </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Profile Content -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Employee Card -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="bg-gradient-to-r from-red-500 to-rose-600 p-6 text-center">
                    <img src="{{ $employee->avatar }}" class="rounded-full mx-auto border-4 border-white shadow-lg" width="120" height="120">
                    <h3 class="text-xl font-bold text-white mt-4">{{ $employee->full_name }}</h3>
                    <p class="text-red-100 text-sm">{{ $employee->profile->employee_id ?? '' }}</p>
                    <div class="mt-3">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white/20 backdrop-blur-sm text-white">
                            <i class="fas fa-circle text-xs mr-2 opacity-75"></i>
                            {{ $employee->status->name }}
                        </span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <i class="fas fa-envelope text-gray-400 mr-3 w-5"></i>
                            <span class="text-sm text-gray-600 truncate">{{ $employee->email }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-phone text-gray-400 mr-3 w-5"></i>
                            <span class="text-sm text-gray-600">{{ $employee->profile->phone ?? 'N/A' }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-calendar text-gray-400 mr-3 w-5"></i>
                            <span class="text-sm text-gray-600">Joined {{ $employee->profile?->join_date?->format('M d, Y') ?? 'N/A' }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-building text-gray-400 mr-3 w-5"></i>
                            <span class="text-sm text-gray-600">{{ $employee->departments->pluck('name')->join(', ') ?: 'No Department' }}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-briefcase text-gray-400 mr-3 w-5"></i>
                            <span class="text-sm text-gray-600">{{ $employee->designations->pluck('name')->join(', ') ?: 'No Designation' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Leave Allocation Section -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center mb-6">
                    <div class="bg-emerald-100 rounded-lg p-3 mr-4">
                        <i class="fas fa-calendar-alt text-emerald-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">Leave Allocation & Balance</h3>
                        <p class="text-sm text-gray-500">Current leave status and allocation</p>
                    </div>
                </div>    
                @if(isset($leaveAllocation))
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-medium text-gray-600">Risk Level:</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                @if($leaveAllocation['employee']['risk_level'] === 'high') bg-red-100 text-red-800
                                @elseif($leaveAllocation['employee']['risk_level'] === 'medium') bg-yellow-100 text-yellow-800
                                @else bg-green-100 text-green-800 @endif">
                                {{ ucfirst($leaveAllocation['employee']['risk_level']) }} Risk
                            </span>
                        </div>
                        
                        <div class="text-sm text-gray-600 mb-3">
                            <p><strong>Designations:</strong> {{ implode(', ', $leaveAllocation['employee']['designations']) }}</p>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach($leaveAllocation['leave_balances'] as $leaveType => $balance)
                            <div class="bg-white border border-gray-200 rounded-lg p-4">
                                <h7 class="text-sm font-semibold text-gray-900 mb-2">{{ ucfirst(str_replace('_', ' ', $leaveType)) }}</h7>
                                <div class="space-y-1">
                                    <div class="flex justify-between text-xs">
                                        <span class="text-gray-600">Allocated:</span>
                                        <span class="font-medium">{{ $balance['allocated'] }} days</span>
                                    </div>
                                    <div class="flex justify-between text-xs">
                                        <span class="text-gray-600">Used:</span>
                                        <span class="font-medium text-orange-600">{{ $balance['used'] }} days</span>
                                    </div>
                                    <div class="flex justify-between text-xs pt-1 border-t border-gray-100">
                                        <span class="text-gray-600">Remaining:</span>
                                        <span class="font-bold {{ $balance['remaining'] > 0 ? 'text-green-600' : 'text-red-600' }}">
                                            {{ $balance['remaining'] }} days
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Progress bar -->
                                <div class="mt-2">
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" style="width: {{ ($balance['used'] / max($balance['allocated'], 1)) * 100 }}%"></div>
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1 text-center">
                                        {{ round(($balance['used'] / max($balance['allocated'], 1)) * 100) }}% used
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Summary -->
                    <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h7 class="text-sm font-semibold text-blue-900 mb-2">Summary</h7>
                        <div class="grid grid-cols-3 gap-4 text-xs">
                            <div class="text-center">
                                <div class="text-lg font-bold text-blue-900">{{ $leaveAllocation['summary']['total_allocated'] }}</div>
                                <div class="text-blue-700">Total Allocated</div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg font-bold text-orange-600">{{ $leaveAllocation['summary']['total_used'] }}</div>
                                <div class="text-orange-700">Total Used</div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg font-bold text-green-600">{{ $leaveAllocation['summary']['total_remaining'] }}</div>
                                <div class="text-green-700">Total Remaining</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Restrictions -->
                    @if(isset($leaveAllocation['restrictions']))
                        <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <h7 class="text-sm font-semibold text-yellow-900 mb-2">Leave Restrictions</h7>
                            <ul class="text-xs text-yellow-800 space-y-1">
                                @if($leaveAllocation['restrictions']['critical_duty_windows'] ?? false)
                                    <li>• Cannot take leave during critical duty windows</li>
                                @endif
                                @if($leaveAllocation['restrictions']['advance_approval_required'] ?? false)
                                    <li>• Advance approval required</li>
                                @endif
                                @if($leaveAllocation['restrictions']['replacement_mandatory'] ?? false)
                                    <li>• Replacement mandatory</li>
                                @endif
                                @if($leaveAllocation['restrictions']['blackout_periods'] ?? false)
                                    <li>• Blackout periods apply</li>
                                @endif
                            </ul>
                        </div>
                    @endif
                @else
                    <div class="bg-gray-100 border border-gray-300 rounded-lg p-4 text-center text-gray-600">
                        Leave allocation data not available. Please initialize leave balances for this employee.
                    </div>
                @endif
                <!-- Leave History Section -->
                <div class="bg-white rounded-lg shadow p-6">
                        <div class="flex items-center mb-6">
                            <div class="bg-amber-100 rounded-lg p-3 mr-4">
                                <i class="fas fa-history text-amber-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">Recent Leave History</h3>
                                <p class="text-sm text-gray-500">Previous leave requests and their status</p>
                            </div>
                        </div>   
                    @if(isset($leaveHistory) && count($leaveHistory) > 0)
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Period</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($leaveHistory as $leave)
                                        <tr>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ $leave['leave_type'] }}</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                                {{ $leave['from_date'] }} - {{ $leave['to_date'] }}
                                            </td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ $leave['days'] }}</td>
                                            <td class="px-4 py-2 whitespace-nowrap">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                    @if($leave['status'] === 'approved') bg-green-100 text-green-800
                                                    @elseif($leave['status'] === 'pending') bg-yellow-100 text-yellow-800
                                                    @else bg-red-100 text-red-800 @endif">
                                                    {{ ucfirst($leave['status']) }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                                {{ \Carbon\Carbon::parse($leave['created_at'])->format('M d, Y') }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="bg-gray-100 border border-gray-300 rounded-lg p-4 text-center text-gray-600">
                            No leave history found for this employee.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection