@extends('layouts.app')
@section('title', $employee->full_name)
@section('page-title','Employees')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('employees.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
            <div>
                <h1>{{ $employee->full_name }}</h1>
                <nav aria-label="breadcrumb"><ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('employees.index') }}">Employees</a></li>
                    <li class="breadcrumb-item active">{{ $employee->full_name }}</li>
                </ol></nav>
            </div>
        </div>
        @if(auth()->user()->isHrOrAdmin())
        <div class="d-flex gap-2">
            <a href="{{ route('employees.edit', $employee) }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil me-1"></i>Edit</a>
            <form method="POST" action="{{ route('employees.destroy', $employee) }}" onsubmit="return confirm('Deactivate this employee?')">
                @csrf @method('DELETE')
                <button class="btn btn-outline-danger btn-sm"><i class="bi bi-person-x me-1"></i>Deactivate</button>
            </form>
        </div>
        @endif
    </div>
</div>

<div class="row g-3">
    {{-- Sidebar card --}}
    <div class="col-12 col-lg-3">
        <div class="card mb-3">
            <div class="card-body text-center">
                <div class="avatar avatar-xl mx-auto mb-3" style="background:linear-gradient(135deg,var(--ul-primary),var(--ul-accent));color:#fff;">
                    {{ strtoupper(substr($employee->first_name,0,1).substr($employee->last_name,0,1)) }}
                </div>
                <div class="fw-bold" style="font-size:1.05rem;">{{ $employee->full_name }}</div>
                <div style="font-size:.82rem;color:var(--text-2);">{{ $employee->position }}</div>
                <span class="badge bg-{{ $employee->status_badge }} mt-2">{{ ucfirst(str_replace('_',' ',$employee->status)) }}</span>
                <div class="row g-2 mt-3 text-center">
                    <div class="col-4"><div class="fw-bold" style="color:var(--ul-primary);">{{ $employee->years_of_service ?? 0 }}</div><div style="font-size:.65rem;color:var(--text-2);">Yrs Service</div></div>
                    <div class="col-4"><div class="fw-bold" style="color:var(--ul-primary);">{{ $employee->employment_type === 'full_time' ? 'FT' : 'PT' }}</div><div style="font-size:.65rem;color:var(--text-2);">Type</div></div>
                    <div class="col-4"><div class="fw-bold" style="color:var(--ul-primary);">{{ $employee->employee_number }}</div><div style="font-size:.65rem;color:var(--text-2);">ID</div></div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" style="font-size:.83rem;"><i class="bi bi-link-45deg me-2" style="color:var(--ul-primary);"></i>Quick Links</div>
            <div class="list-group list-group-flush" style="border-radius:0 0 16px 16px;">
                <a href="{{ route('leaves.index') }}?search={{ $employee->user->email ?? '' }}" class="list-group-item list-group-item-action" style="font-size:.82rem;background:transparent;color:var(--text-1);"><i class="bi bi-calendar-check me-2"></i>Leave Records</a>
                <a href="{{ route('performance.index') }}" class="list-group-item list-group-item-action" style="font-size:.82rem;background:transparent;color:var(--text-1);"><i class="bi bi-bar-chart-steps me-2"></i>Evaluations</a>
                @if(auth()->user()->isHrOrAdmin())
                <a href="{{ route('payroll.index') }}" class="list-group-item list-group-item-action" style="font-size:.82rem;background:transparent;color:var(--text-1);"><i class="bi bi-currency-dollar me-2"></i>Payroll</a>
                @endif
            </div>
        </div>
    </div>

    {{-- Main content --}}
    <div class="col-12 col-lg-9">
        {{-- Personal info --}}
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-person me-2" style="color:var(--ul-primary);"></i>Personal Information</div>
            <div class="card-body">
                <div class="row g-3">
                    @php
                    $fields = [
                        ['Date of Birth',      $employee->date_of_birth?->format('F j, Y')],
                        ['Place of Birth',     $employee->place_of_birth],
                        ['Gender',             $employee->gender],
                        ['Marital Status',     $employee->marital_status],
                        ['Citizenship',        $employee->citizenship],
                        ['National ID',        $employee->national_id],
                        ['Present Address',    $employee->present_address],
                        ['Permanent Address',  $employee->permanent_address],
                        ['Phone',              $employee->user->phone ?? null],
                        ['Email',              $employee->user->email ?? null],
                        ['Emergency Contact',  $employee->emergency_contact_name],
                        ['Emergency Phone',    $employee->emergency_contact_phone],
                    ];
                    @endphp
                    @foreach($fields as [$label, $value])
                    @if($value)
                    <div class="col-6 col-md-4">
                        <div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">{{ $label }}</div>
                        <div style="font-size:.87rem;margin-top:.2rem;color:var(--text-1);">{{ $value }}</div>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Employment info --}}
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-briefcase me-2" style="color:var(--ul-primary);"></i>Employment Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Position</div><div style="font-size:.87rem;margin-top:.2rem;">{{ $employee->position }}</div></div>
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Department</div><div style="font-size:.87rem;margin-top:.2rem;">{{ $employee->department->name ?? '—' }}</div></div>
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Date of Employment</div><div style="font-size:.87rem;margin-top:.2rem;">{{ $employee->date_of_employment?->format('F j, Y') }}</div></div>
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Employment Type</div><div style="font-size:.87rem;margin-top:.2rem;">{{ ucfirst(str_replace('_',' ',$employee->employment_type)) }}</div></div>
                    @if(auth()->user()->isHrOrAdmin())
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Salary (USD)</div><div style="font-size:.87rem;margin-top:.2rem;">${{ number_format($employee->salary_usd ?? 0, 2) }}</div></div>
                    <div class="col-6 col-md-4"><div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Bank</div><div style="font-size:.87rem;margin-top:.2rem;">{{ $employee->bank_name ?? '—' }}</div></div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Education --}}
        @if($employee->education->count())
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-mortarboard me-2" style="color:var(--ul-primary);"></i>Educational Background</div>
            <div class="card-body">
                <div class="row g-3">
                @foreach($employee->education->sortByDesc('attendance_to') as $edu)
                <div class="col-12 col-md-6">
                    <div class="border rounded-3 p-3" style="border-color:var(--card-border)!important;">
                        <div class="fw-bold" style="font-size:.88rem;">{{ $edu->institution_name }}</div>
                        <div style="font-size:.8rem;color:var(--text-2);">{{ $edu->certificate_degree }} @if($edu->major) · {{ $edu->major }} @endif</div>
                        <div style="font-size:.75rem;color:var(--text-2);">{{ $edu->attendance_from?->format('Y') }} – {{ $edu->attendance_to?->format('Y') ?? 'Present' }}</div>
                        @if($edu->graduated)<span class="badge bg-success mt-1" style="font-size:.65rem;">Graduated</span>@endif
                    </div>
                </div>
                @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- Employment History --}}
        @if($employee->employmentHistory->count())
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-clock-history me-2" style="color:var(--ul-primary);"></i>Previous Employment</div>
            <div class="card-body">
                <div class="timeline">
                @foreach($employee->employmentHistory->sortByDesc('date_to') as $hist)
                <div class="timeline-item">
                    <div class="timeline-icon" style="background:var(--ul-primary);color:#fff;"><i class="bi bi-building"></i></div>
                    <div class="timeline-body">
                        <div class="fw-bold" style="font-size:.85rem;">{{ $hist->position }} — {{ $hist->employer_name }}</div>
                        <div style="font-size:.76rem;color:var(--text-2);">{{ $hist->date_from?->format('M Y') }} – {{ $hist->date_to?->format('M Y') ?? 'Present' }}</div>
                        @if($hist->reason_for_leaving)<div style="font-size:.78rem;color:var(--text-2);">Left: {{ $hist->reason_for_leaving }}</div>@endif
                    </div>
                </div>
                @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- Special skills --}}
        @if($employee->special_skills)
        <div class="card">
            <div class="card-header"><i class="bi bi-star me-2" style="color:var(--ul-primary);"></i>Special Skills & Memberships</div>
            <div class="card-body">
                <div class="row g-3">
                    @if($employee->special_skills)<div class="col-12 col-md-6"><div style="font-size:.72rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Special Skills</div><div style="font-size:.85rem;margin-top:.3rem;">{{ $employee->special_skills }}</div></div>@endif
                    @if($employee->professional_memberships)<div class="col-12 col-md-6"><div style="font-size:.72rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Professional Memberships</div><div style="font-size:.85rem;margin-top:.3rem;">{{ $employee->professional_memberships }}</div></div>@endif
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection