@extends('backend.layouts.app')

@section('title')
    Staff Details - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-home mr-2"></i>
                <span>/ Staff Section / <a href="{{ route('staff.index') }}" class="text-blue-600 hover:text-blue-800">Staff List</a> / Staff Details</span>
            </div>
            <div class="flex space-x-2">
                @can('edit-staff')
                <a href="{{ route('staff.edit', $staff) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-edit mr-2"></i>Edit
                </a>
                @endcan
                <a href="{{ route('staff.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back
                </a>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800">Staff Member Details</h2>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Personal Information -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b border-gray-200 pb-2">Personal Information</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Full Name</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->first_name }} {{ $staff->last_name }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Email Address</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->email }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Contact Number</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->contact_no }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Address</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->address }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Employment Information -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b border-gray-200 pb-2">Employment Information</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Employee ID</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->emp_id }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Staff Type</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->staffType->staff_type ?? 'N/A' }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Shift</label>
                                <p class="text-sm text-gray-900 mt-1">{{ $staff->shift->shift_name ?? 'N/A' }}</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500">Salary</label>
                                <p class="text-sm text-gray-900 mt-1">
                                    {{ $staff->salary ? '$' . number_format($staff->salary, 2) : 'Not specified' }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ID Card Information -->
                <div class="mt-8">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 border-b border-gray-200 pb-2">ID Card Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <label class="block text-sm font-medium text-gray-500">ID Card Type</label>
                            <p class="text-sm text-gray-900 mt-1">{{ $staff->idCardType->id_card_type ?? 'N/A' }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-500">ID Card Number</label>
                            <p class="text-sm text-gray-900 mt-1">{{ $staff->id_card_no }}</p>
                        </div>
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="mt-8">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 border-b border-gray-200 pb-2">Additional Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <label class="block text-sm font-medium text-gray-500">Created At</label>
                            <p class="text-sm text-gray-900 mt-1">{{ $staff->created_at ? $staff->created_at->format('F j, Y \a\t g:i A') : 'N/A' }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-500">Last Updated</label>
                            <p class="text-sm text-gray-900 mt-1">{{ $staff->updated_at ? $staff->updated_at->format('F j, Y \a\t g:i A') : 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection 