@extends('layouts.app')

@section('title', 'Profil Saya')
@section('page-title', 'Profil Karyawan')
@section('page-subtitle', 'Informasi akun dan data kepegawaian pribadi Anda.')

@section('content')
<div class="row">
    <div class="col-12 col-lg-4 mb-4">
        <div class="card shadow-sm border-0 text-center py-4">
            <div class="card-body">
                <div class="avatar avatar-2xl bg-light-primary mx-auto mb-3">
                    @if($employee->photo)
                        <img src="{{ asset($employee->photo) }}" alt="Avatar" style="width: 110px; height: 110px; object-fit: cover; border-radius: 50%;">
                    @else
                        <span class="avatar-content fs-1">{{ strtoupper(substr($employee->name, 0, 2)) }}</span>
                    @endif
                </div>
                <h4 class="fw-bold mb-1">{{ $employee->name }}</h4>
                <p class="text-muted mb-2">{{ $employee->email }}</p>
                <div class="d-flex justify-content-center gap-2 mb-3">
                    <span class="badge bg-light-primary text-primary">{{ $employee->position?->name ?? 'Staff' }}</span>
                    <span class="badge bg-light-info text-info">{{ $employee->department?->name ?? 'General' }}</span>
                </div>
                <hr>
                <div class="text-start text-xs text-muted">
                    <div class="d-flex justify-content-between mb-2"><span>NIK:</span><strong>{{ $employee->nik }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>Status:</span><span class="badge bg-success">{{ ucfirst($employee->employment_status) }}</span></div>
                    <div class="d-flex justify-content-between mb-2"><span>Bergabung:</span><strong>{{ $employee->join_date ? $employee->join_date->translatedFormat('d F Y') : '-' }}</strong></div>
                    <div class="d-flex justify-content-between"><span>Hak Cuti:</span><strong class="text-primary">{{ $employee->leave_balance }} Hari</strong></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-8">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="card-title mb-0 fw-bold"><i class="bi bi-pencil-square me-2 text-primary"></i> Edit Data Pribadi & Password</h5>
            </div>
            <form action="{{ route('employee.profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Nomor WhatsApp Aktif</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $employee->phone) }}" placeholder="0812xxxxxxxx">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Perbarui Foto Profil</label>
                            <input type="file" name="photo" class="form-control" accept="image/*">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Alamat Domisili</label>
                            <textarea name="address" class="form-control" rows="2">{{ old('address', $employee->address) }}</textarea>
                        </div>

                        <div class="col-12"><hr class="my-2"></div>
                        <h6 class="fw-bold text-dark mb-0">Ganti Password Akun</h6>

                        <div class="col-md-4">
                            <label class="form-label text-xs fw-bold">Password Saat Ini</label>
                            <input type="password" name="current_password" class="form-control" placeholder="Password lama">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label text-xs fw-bold">Password Baru</label>
                            <input type="password" name="new_password" class="form-control" placeholder="Minimal 6 karakter">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label text-xs fw-bold">Konfirmasi Password Baru</label>
                            <input type="password" name="new_password_confirmation" class="form-control" placeholder="Ulangi password baru">
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-light p-3 text-end">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-save me-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection