@extends('layouts.customer')

@section('title', 'Profil Saya')

@section('content')

<div class="max-w-2xl mx-auto px-4 py-8">

    {{-- Success alert --}}
    @if(session('success'))
        <div class="flex items-center gap-3 p-4 mb-6 text-sm font-medium text-green-800 border border-green-200 rounded-2xl bg-green-50 animate-fade-in-down">
            <i class="bi bi-check-circle-fill text-green-500 text-lg"></i>
            {{ session('success') }}
        </div>
    @endif

    {{-- Header --}}
    <div class="mb-8">
        <div class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Akun Saya</div>
        <h1 class="text-3xl font-extrabold text-primary tracking-tight">Profil Pengguna</h1>
    </div>

    {{-- Card --}}
    <div class="bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm mb-6">

        {{-- Avatar section --}}
        <div class="bg-slate-50 border-b border-slate-200 p-8 flex items-center gap-6">
            <div class="w-20 h-20 rounded-full bg-primary text-white flex items-center justify-center text-3xl font-bold shadow-inner flex-shrink-0">
                {{ strtoupper(substr(Auth::user()->nama ?? Auth::user()->email, 0, 1)) }}
            </div>
            <div>
                <h2 class="text-2xl font-bold text-slate-800 mb-1 leading-tight">{{ Auth::user()->nama ?? 'Pengguna' }}</h2>
                <p class="text-slate-500 text-sm mb-3">{{ Auth::user()->email }}</p>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-100 border border-blue-200 text-xs font-bold tracking-wide uppercase text-blue-700">
                    <i class="bi bi-person-check"></i>
                    Customer
                </span>
            </div>
        </div>

        {{-- Info rows --}}
        <div class="py-2">

            <div class="flex items-center px-8 py-5 gap-5 hover:bg-slate-50 transition-colors">
                <div class="w-10 h-10 rounded-xl bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-500 flex-shrink-0">
                    <i class="bi bi-person text-lg"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-1">Nama Lengkap</div>
                    <div class="text-slate-800 font-semibold truncate">{{ Auth::user()->nama ?? '-' }}</div>
                </div>
            </div>

            <div class="h-px bg-slate-100 mx-8"></div>

            <div class="flex items-center px-8 py-5 gap-5 hover:bg-slate-50 transition-colors">
                <div class="w-10 h-10 rounded-xl bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-500 flex-shrink-0">
                    <i class="bi bi-envelope text-lg"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-1">Alamat Email</div>
                    <div class="text-slate-800 font-semibold truncate">{{ Auth::user()->email }}</div>
                </div>
            </div>

        </div>

        <div class="text-center text-sm text-slate-400 p-4 bg-slate-50">
            Bergabung sejak <span class="font-medium text-slate-500">{{ Auth::user()->created_at->translatedFormat('d F Y') }}</span>
        </div>

    </div>

    {{-- Button row --}}
    <div class="flex flex-col sm:flex-row gap-4">
        <a href="{{ route('customer.dashboard') }}" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-white border-2 border-slate-200 text-slate-700 font-bold rounded-2xl hover:border-slate-300 hover:bg-slate-50 transition-all text-sm">
            <i class="bi bi-arrow-left"></i>
            Kembali ke Dashboard
        </a>
        <a href="{{ route('profile.edit') }}" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-primary text-white font-bold rounded-2xl hover:bg-slate-800 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200 transition-all text-sm">
            <i class="bi bi-pencil"></i>
            Edit Profil
        </a>
    </div>

</div>

@endsection