@extends('layouts.admin')

@section('title','Member Details')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.members.index') }}" style="color:var(--text-muted); text-decoration:none;">Members</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary); font-weight:600;">{{ $member->first_name }} {{ $member->last_name }}</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Member Details</h1>
    </div>
    <div>
        <a href="{{ route('admin.members.index') }}" class="btn btn-outline" style="margin-right: 8px;">
            <i class="fas fa-arrow-left"></i> Back
        </a>
        <a href="{{ route('admin.members.edit', $member->id) }}" class="btn btn-primary">
            <i class="fas fa-edit"></i> Edit Member
        </a>
    </div>
</div>

<div class="admin-card">
    <div class="admin-card-body" style="display: flex; gap: 32px; flex-wrap: wrap;">
        <div style="flex: 0 0 200px; text-align: center;">
            @if($member->photo)
                <img src="{{ asset($member->photo) }}" style="width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 4px solid var(--border-color); box-shadow: var(--shadow-sm);">
            @else
                <div style="width: 200px; height: 200px; border-radius: 50%; background: var(--off-white); border: 4px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--text-muted); margin: 0 auto;">
                    <i class="fas fa-user"></i>
                </div>
            @endif
            <div style="margin-top: 16px;">
                @if($member->status === 'approved' || $member->status === 'active')
                    <span class="badge badge-success" style="font-size: 1rem; padding: 6px 12px;">Active</span>
                @elseif($member->status === 'pending')
                    <span class="badge badge-warning" style="font-size: 1rem; padding: 6px 12px;">Pending</span>
                @else
                    <span class="badge badge-info" style="font-size: 1rem; padding: 6px 12px;">{{ ucfirst($member->status) }}</span>
                @endif
            </div>
        </div>

        <div style="flex: 1; min-width: 300px;">
            <h2 style="font-family:'Oswald',sans-serif; font-size:1.8rem; color:var(--primary); margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px;">
                {{ $member->first_name }} {{ $member->last_name }}
            </h2>

            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px;">
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Email</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->email ?: '-' }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Phone</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->phone ?: '-' }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Gender</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ ucfirst($member->gender) }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Date of Birth</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->dob ? $member->dob->format('F d, Y') : '-' }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Belt Rank</span>
                    <span style="font-size:1.05rem; color:var(--text-main); font-weight:600;">{{ $member->belt_rank }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">District</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->district ? $member->district->name : '-' }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Club</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->club ? $member->club->name : 'None' }}</span>
                </div>
                <div>
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Expiry Date</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->expiry_date ? $member->expiry_date->format('F d, Y') : '-' }}</span>
                </div>
                <div style="grid-column: 1 / -1;">
                    <span style="display:block; font-size:0.85rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Address</span>
                    <span style="font-size:1.05rem; color:var(--text-main);">{{ $member->address ?: '-' }}</span>
                </div>
            </div>
            
            <div style="margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color);">
                <form action="{{ route('admin.members.destroy', $member->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this member?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn" style="background: var(--red); color: white; border: none; padding: 8px 16px; border-radius: var(--radius); cursor: pointer; transition: var(--transition);">
                        <i class="fas fa-trash"></i> Delete Member
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
