@extends('layouts.app')

@section('title', 'Profil Saya')
@section('page_title', '👤 Profil Saya')
@section('back_url', route('dashboard'))

@section('content')

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div style="max-width:650px;">

        <div
            style="background:#fff;border-radius:12px;border:1px solid #eee;padding:28px;margin-bottom:16px;text-align:center;">
            <div
                style="width:80px;height:80px;border-radius:50%;background:#2d4a1e;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" width="40" height="40">
                    <circle cx="12" cy="8" r="4" />
                    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                </svg>
            </div>

            <h5 style="margin:0;font-weight:600;color:#1a1a1a;">
                {{ $user->first_name ? $user->first_name . ' ' . $user->last_name : $user->name }}
            </h5>

            <p style="font-size:13px;color:#888;margin:4px 0 0;">
                {{ $user->email }}
            </p>

            <p style="font-size:12px;color:#aaa;margin:4px 0 0;">
                Staff ID: {{ $user->id }}
            </p>
        </div>

        <div style="background:#fff;border-radius:12px;border:1px solid #eee;padding:24px;">
            <h6
                style="font-size:13px;font-weight:600;color:#2d4a1e;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid #eee;">
                Maklumat Peribadi
            </h6>

            <div class="info-row">
                <span class="info-label">Nama Pertama</span>
                <span class="info-value">{{ $user->first_name ?? '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">Nama Akhir</span>
                <span class="info-value">{{ $user->last_name ?? '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">Emel</span>
                <span class="info-value">{{ $user->email ?? '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">Nombor Telefon</span>
                <span class="info-value">{{ $user->phone ?? '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">Alamat</span>
                <span class="info-value">{{ $user->address ?? '-' }}</span>
            </div>

            <div class="d-flex gap-3 mt-4">
                <a href="{{ route('myprofile.index') }}"
                    style="background:#3a6b20;color:white;border:none;border-radius:8px;padding:10px 28px;font-size:13px;font-weight:600;text-decoration:none;">
                    ✏️ Edit Profil
                </a>

                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary"
                    style="font-size:13px;border-radius:8px;padding:10px 28px;">
                    Kembali
                </a>
            </div>
        </div>

    </div>

@endsection

@push('styles')
    <style>
        .info-row {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #f3f3f3;
            font-size: 13px;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            width: 180px;
            color: #888;
            flex-shrink: 0;
        }

        .info-value {
            color: #1a1a1a;
            font-weight: 500;
            flex: 1;
        }
    </style>
@endpush