@extends('layouts.app')
@section('title', 'Profile')
@section('content')
<x-page-header title="Profile" />

<div class="px-5">
    <div class="flex flex-col items-center mb-8">
        <img src="https://ui-avatars.com/api/?name={{ urlencode($user->full_name) }}&background=222&color=fff&size=128"
             class="w-20 h-20 rounded-full" alt="{{ $user->full_name }}">
        <p class="font-bold mt-3">{{ $user->full_name }}</p>
        <p class="text-sm text-neutral-500">{{ $user->email }}</p>
    </div>

    @if (session('success'))
        <div class="mb-4 text-sm text-emerald-400 bg-emerald-500/10 border border-emerald-500/30 rounded-xl px-4 py-3">{{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('profile.update') }}" class="space-y-4 mb-8">
        @csrf @method('PATCH')
        <div>
            <label class="text-xs text-neutral-400">Full name</label>
            <input type="text" name="full_name" value="{{ $user->full_name }}" class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 focus:outline-none">
        </div>
        <div>
            <label class="text-xs text-neutral-400">Phone</label>
            <input type="text" name="phone" value="{{ $user->phone }}" class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 focus:outline-none">
        </div>
        <button type="submit" class="w-full bg-white/10 font-bold py-3.5 rounded-full">Save Changes</button>
    </form>

    <div class="space-y-2">
        <a href="{{ route('kyc.index') }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <span class="font-medium">Identity Verification</span>
            <span class="text-xs text-neutral-500 capitalize">{{ str_replace('_',' ',$user->kyc_status) }}</span>
        </a>
        <a href="{{ route('profile.security') }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <span class="font-medium">Security &amp; 2FA</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        <a href="{{ route('bank-accounts.index') }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <span class="font-medium">Bank Accounts</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        <a href="{{ route('support.index') }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <span class="font-medium">Support</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="w-full text-left bg-white/5 rounded-2xl px-4 py-4 text-red-400 font-medium">Log Out</button>
        </form>
    </div>
</div>
@endsection