@extends('layouts.shell')
@section('title', 'Profil')

@section('content')
{{-- Header profil --}}
<div class="mb-6 flex items-center gap-4">
    <div class="grid h-16 w-16 place-items-center rounded-full bg-qr-accent/20 text-2xl font-extrabold text-qr-accent-light">
        {{ strtoupper(substr($user->name,0,1)) }}
    </div>
    <div>
        <h1 class="text-xl font-extrabold">{{ $user->name }}</h1>
        <p class="text-sm text-qr-muted">{{ $user->email }}</p>
        <p class="text-xs text-qr-muted">No. Member: {{ $user->member_no ?? '—' }}</p>
    </div>
</div>

{{-- Status membership --}}
<div class="card mb-4 p-5">
    @if($subscription)
        <div class="flex items-center justify-between">
            <div>
                <span class="chip bg-qr-accent/20 text-qr-accent-light">Member Aktif</span>
                <h3 class="mt-2 font-bold">Paket {{ $subscription->package->name }}</h3>
                <p class="text-xs text-qr-muted">Berakhir {{ $subscription->ends_at?->translatedFormat('d M Y') }}
                    ({{ $subscription->ends_at?->diffForHumans() }})</p>
            </div>
            <x-icon name="sparkles" class="w-8 h-8 text-qr-gold"/>
        </div>
        <a href="{{ route('member.card') }}" class="btn-outline mt-4 w-full">Lihat Kartu Member</a>
    @else
        <p class="text-sm text-qr-muted">Anda belum berlangganan.</p>
        <a href="{{ route('membership.index') }}" class="btn-accent mt-3 w-full">Jadi Member</a>
    @endif
</div>

{{-- Menu --}}
<div class="card mb-4 divide-y divide-qr-border">
    @foreach([
        ['bookmarks.index','bookmark','Daftar Saya'],
        ['notifications.index','bell','Notifikasi'],
        ['profile.edit','cog','Pengaturan Akun'],
        ['events.index','calendar','Event Saya'],
    ] as [$route,$icon,$label])
    <a href="{{ route($route) }}" class="flex items-center gap-3 p-4">
        <x-icon :name="$icon" class="w-5 h-5 text-qr-muted"/>
        <span class="flex-1 text-sm font-medium">{{ $label }}</span>
        <x-icon name="chevron-right" class="w-5 h-5 text-qr-muted"/>
    </a>
    @endforeach
    @if($user->isAdmin())
    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 p-4">
        <x-icon name="dashboard" class="w-5 h-5 text-qr-gold"/>
        <span class="flex-1 text-sm font-medium text-qr-gold">Admin Panel</span>
        <x-icon name="chevron-right" class="w-5 h-5 text-qr-muted"/>
    </a>
    @endif
</div>

{{-- Riwayat transaksi --}}
@if($transactions->isNotEmpty())
<h2 class="mb-2 mt-6 text-base font-bold">Riwayat Pembayaran</h2>
<div class="card divide-y divide-qr-border">
    @foreach($transactions as $t)
    <div class="flex items-center justify-between gap-3 p-4">
        <div>
            <p class="text-sm font-semibold">{{ $t->code }}</p>
            <p class="text-xs text-qr-muted">{{ $t->created_at->translatedFormat('d M Y') }} · Rp{{ number_format($t->total_amount,0,',','.') }}</p>
            @if($t->status === 'pending')
                <a href="{{ route('payment.show', $t->code) }}" class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-qr-accent hover:underline">
                    <x-icon name="cash" class="w-4 h-4"/> Lanjutkan Pembayaran
                </a>
            @endif
        </div>
        @php $colors = ['paid'=>'text-qr-accent-light','confirmed'=>'text-qr-accent-light','pending'=>'text-qr-gold','cancelled'=>'text-red-400','expired'=>'text-qr-muted']; @endphp
        <span class="shrink-0 text-xs font-bold {{ $colors[$t->status] ?? 'text-qr-muted' }}">{{ strtoupper($t->status) }}</span>
    </div>
    @endforeach
</div>
@endif

<form method="POST" action="{{ route('logout') }}" class="mt-6">
    @csrf
    <button class="btn-outline w-full text-red-300"><x-icon name="logout" class="w-5 h-5"/> Keluar</button>
</form>
@endsection