@extends('layouts.app')
@section('title','My Profile')
@section('page-title','My Profile')

@section('content')
<div class="page-header"><h1>My Profile</h1></div>

<div class="row g-3">
    <div class="col-12 col-lg-3">
        <div class="card">
            <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="mt-3 pt-3" style="border-top:1px solid var(--card-border);text-align:left;">
                    <div style="font-size:.7rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Department</div>
                    <div style="font-size:.84rem;margin-top:.2rem;">{{ $employee->department->name ?? '—' }}</div>
                    <div style="font-size:.7rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:.75rem;">Employee No.</div>
                    <div style="font-size:.84rem;font-weight:700;color:var(--ul-primary);margin-top:.2rem;">{{ $employee->employee_number }}</div>
                    <div style="font-size:.7rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:.75rem;">Hired</div>
                    <div style="font-size:.84rem;margin-top:.2rem;">{{ $employee->date_of_employment?->format('M j, Y') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-9">
        <form method="POST" action="{{ route('profile.update') }}">
        @csrf @method('PUT')
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-person me-2" style="color:var(--ul-primary);"></i>Personal Information
                <span style="font-size:.74rem;color:var(--text-2);font-weight:400;margin-left:.5rem;">Contact HR to update name, department, or employment details</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-4">
                        <label class="form-label">First Name</label>
                        <input type="text" class="form-control" value="{{ $employee->first_name }}" disabled>
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Last Name</label>
                        <input type="text" class="form-control" value="{{ $employee->last_name }}" disabled>
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Date of Birth</label>
                        <input type="text" class="form-control" value="{{ $employee->date_of_birth?->format('M j, Y') }}" disabled>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Present Address <span style="color:var(--ul-primary);">*</span></label>
                        <input type="text" name="present_address" class="form-control" value="{{ old('present_address', $employee->present_address) }}" placeholder="Your current residential address">
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $employee->user->phone ?? '') }}" placeholder="+231 880 000 000">
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Email</label>
                        <input type="text" class="form-control" value="{{ $employee->user->email ?? '' }}" disabled>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-telephone me-2" style="color:var(--ul-primary);"></i>Emergency Contact</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12 col-sm-4">
                        <label class="form-label">Full Name</label>
                        <input type="text" name="emergency_contact_name" class="form-control" value="{{ old('emergency_contact_name', $employee->emergency_contact_name) }}">
                    </div>
                    <div class="col-6 col-sm-4">
                        <label class="form-label">Phone</label>
                        <input type="text" name="emergency_contact_phone" class="form-control" value="{{ old('emergency_contact_phone', $employee->emergency_contact_phone) }}">
                    </div>
                    <div class="col-6 col-sm-4">
                        <label class="form-label">Relationship</label>
                        <input type="text" name="emergency_contact_relation" class="form-control" value="{{ old('emergency_contact_relation', $employee->emergency_contact_relation) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>Save Changes</button>
            </div>
        </div>
        </form>
    </div>
</div>
@endsection
