@extends('layouts.app-mobile-team')
@section('title', 'Profile — Team Member')
@section('apptitle', 'Profile')

@section('content')
<div class="app-section app-pad" style="text-align: center; padding-top: 30px;">
    <div class="photo-preview-box-lg" style="margin: 0 auto 14px;">
        @if($member->photo_url)
            <img src="{{ $member->photo_url }}" alt="">
        @else
            <span class="photo-initial">{{ $member->initials() }}</span>
        @endif
    </div>
    <h2 style="font-size: 22px; font-weight: 700; margin: 0;">{{ $member->name }}</h2>
    <p class="muted" style="font-size: 13px; margin: 4px 0 14px;">{{ $member->role }} · under {{ $partner?->display_name }}</p>

    <div class="bk-detail-card" style="text-align: left;">
        <div class="bk-detail-row">
            <span>Phone</span>
            <strong>{{ $member->phone ?: '—' }}</strong>
        </div>
        <div class="bk-detail-row">
            <span>Email</span>
            <strong>{{ $member->email ?: '—' }}</strong>
        </div>
        <div class="bk-detail-row">
            <span>Role</span>
            <strong>{{ $member->role }}</strong>
        </div>
        <div class="bk-detail-row">
            <span>Partner</span>
            <strong>{{ $partner?->display_name }}</strong>
        </div>
        <div class="bk-detail-row">
            <span>Status</span>
            @if($member->is_active)
                <strong><span class="pill pill-green">Active</span></strong>
            @else
                <strong><span class="pill pill-grey">Disabled</span></strong>
            @endif
        </div>
        <div class="bk-detail-row">
            <span>Last login</span>
            <strong>{{ $member->last_login_at?->diffForHumans() ?? 'Never' }}</strong>
        </div>
    </div>

    <form method="POST" action="{{ route('logout') }}" style="margin-top: 18px;">
        @csrf
        <button type="submit" class="btn-app btn-app-outline btn-app-full" style="border-color: var(--ap-red); color: var(--ap-red);">Sign out</button>
    </form>
</div>
@endsection
