@extends('layouts.app')

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

@section('content')
<div class="row">
    <!-- Employee Profile Card -->
    <div class="col-md-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center">
                <img src="{{ $employee->photo_url }}" alt="{{ $employee->name }}" class="rounded-circle mb-3 shadow-sm" style="width: 120px; height: 120px; object-fit: cover;">
                <h5 class="fw-bold mb-1">{{ $employee->name }}</h5>
                <p class="text-muted mb-2">{{ $employee->designation }}</p>
                <div class="badge bg-primary mb-3">{{ $employee->employee_id ?? 'ID: ' . $employee->id }}</div>
                
                <hr>
                
                <div class="text-start">
                    <p class="mb-2"><i class="fas fa-envelope me-2 text-muted"></i> {{ $employee->email }}</p>
                    <p class="mb-2"><i class="fas fa-phone me-2 text-muted"></i> {{ $employee->phone ?? 'N/A' }}</p>
                    <p class="mb-2"><i class="fas fa-user-tie me-2 text-muted"></i> Manager: {{ $employee->manager ? $employee->manager->name : 'None' }}</p>
                    <p class="mb-0"><i class="fas fa-calendar me-2 text-muted"></i> Joined: {{ $employee->joined_date ? \Carbon\Carbon::parse($employee->joined_date)->format('M d, Y') : 'N/A' }}</p>
                </div>
                
                <div class="mt-4">
                    <a href="{{ route('employees.edit', $employee->id) }}" class="btn btn-outline-primary w-100">
                        <i class="fas fa-edit me-1"></i> Edit Profile
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Details Tabs -->
    <div class="col-md-8 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white p-3">
                <ul class="nav nav-tabs card-header-tabs" id="employeeTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="assets-tab" data-bs-toggle="tab" href="#assets" role="tab">
                            <i class="fas fa-laptop me-2"></i>Assigned Assets
                        </a>
                    </li>
                    <!-- Add more tabs here for Attendance, Payslips etc later if needed -->
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="employeeTabsContent">
                    <!-- Assets Tab -->
                    <div class="tab-pane fade show active" id="assets" role="tabpanel">
                        <h6 class="fw-bold mb-3">Assets currently assigned to {{ $employee->name }}</h6>
                        
                        @if($employee->assets->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Asset ID</th>
                                            <th>Name</th>
                                            <th>Category</th>
                                            <th>Assigned Date</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($employee->assets as $asset)
                                        <tr>
                                            <td class="fw-bold">{{ $asset->asset_id }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($asset->photo)
                                                        <img src="{{ asset('storage/'.$asset->photo) }}" class="rounded me-2" style="width: 30px; height: 30px; object-fit: cover;">
                                                    @else
                                                        <div class="bg-secondary rounded d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
                                                            <i class="fas fa-box text-white small"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <div>{{ $asset->name }}</div>
                                                        <small class="text-muted">{{ $asset->serial_number }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $asset->category }}</td>
                                            <td>{{ $asset->assigned_date ? \Carbon\Carbon::parse($asset->assigned_date)->format('M d, Y') : 'N/A' }}</td>
                                            <td>
                                                <span class="badge bg-{{ $asset->status == 'Assigned' ? 'primary' : 'secondary' }}">
                                                    {{ $asset->status }}
                                                </span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-box-open text-muted fa-3x mb-3"></i>
                                <p class="text-muted">No assets currently assigned to this employee.</p>
                                <a href="{{ route('assets.index') }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-plus me-1"></i> Assign Asset
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection