@extends('layouts.app')

@section('title', $user->name . ' - Donor Profile')

@section('content')
<div class="page-hero blood-page-hero">
    <div class="page-hero-inner">
        <span class="blood-hero-badge"><i class="fas fa-heart-pulse"></i> Life Saver</span>
        <h1>Donor Profile</h1>
        <p>Full biodata & contact</p>
    </div>
</div>

<div class="container blood-detail-container">
    <div class="blood-detail-card">
        <div class="blood-detail-header">
            <img src="{{ $user->profile_photo ? asset('storage/'.$user->profile_photo) : 'https://ui-avatars.com/api/?name='.urlencode($user->name).'&size=96&background=c41e3a&color=fff' }}" class="blood-detail-avatar" alt="">
            <div class="blood-detail-user">
                <h2>{{ $user->name }}</h2>
                <span class="blood-detail-id">Donor ID: {{ $user->member_id ?? $user->id }}</span>
                <span class="blood-badge-drop"><i class="fas fa-droplet"></i> {{ $user->blood_group }}</span>
            </div>
        </div>

        <div class="blood-detail-section">
            <div class="blood-detail-row">
                <span class="blood-detail-label"><i class="fas fa-map-marker-alt"></i> Donation Area</span>
                <strong>{{ $user->city ?? 'N/A' }}</strong>
            </div>
            <div class="blood-detail-row">
                <span class="blood-detail-label"><i class="fas fa-calendar"></i> Last Donated</span>
                <strong>{{ $user->last_donation_date ? $user->last_donation_date->format('M d, Y') : 'Never' }}</strong>
            </div>
            <div class="blood-detail-row">
                <span class="blood-detail-label"><i class="fas fa-check-circle"></i> Status</span>
                <span class="donor-status {{ $user->availability_status === 'available' ? 'available' : 'unavailable' }}">
                    {{ $user->availability_status === 'available' ? 'Ready to Donate' : 'Not Ready' }}
                </span>
            </div>
        </div>

        @auth
        <div class="blood-detail-actions">
            <a href="tel:{{ $user->phone }}" class="btn btn-primary btn-block"><i class="fas fa-phone"></i> Call</a>
            <a href="{{ route('chat.show', $user) }}" class="btn btn-outline btn-block"><i class="fas fa-comment"></i> Chat</a>
        </div>
        @else
        <div class="blood-login-cta">
            <p><i class="fas fa-lock"></i> Login to contact this donor. Your phone and email are kept private for security.</p>
            <a href="{{ route('login') }}" class="btn btn-primary">Login to Contact</a>
        </div>
        @endauth

        <div class="blood-back-wrap">
            <a href="{{ route('blood.index') }}" class="btn btn-outline btn-block blood-back-btn"><i class="fas fa-arrow-left"></i> Back to Donors</a>
        </div>
    </div>
</div>

@push('styles')
<style>
.blood-detail-container{max-width:560px;padding-bottom:16px}
.blood-page-hero .page-hero-inner{padding:12px 0}
.blood-page-hero h1{font-size:1.2rem}
.blood-page-hero p{font-size:0.85rem}
.blood-detail-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border)}
.blood-detail-header{background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);padding:14px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}
.blood-detail-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid white;box-shadow:var(--shadow);flex-shrink:0}
.blood-detail-user{flex:1;min-width:0;text-align:left}
.blood-detail-user h2{font-size:1.1rem;margin:0 0 2px}
.blood-detail-user .blood-badge-drop{padding:4px 10px;font-size:0.8rem}
.blood-detail-id{font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:6px}
.blood-detail-section{padding:12px 16px}
.blood-detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9rem}
.blood-detail-row:last-child{border-bottom:none}
.blood-detail-label{color:var(--text-muted);display:flex;align-items:center;gap:6px;font-size:0.85rem}
.blood-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px}
.blood-detail-actions .btn{padding:10px}
.blood-login-cta{background:#fef2f2;padding:14px 16px;margin:0 16px 16px;border-radius:var(--radius);text-align:center}
.blood-login-cta p{margin-bottom:10px;font-size:0.85rem;color:var(--text)}
.blood-back-wrap{padding:0 16px 16px}
.blood-back-btn{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px}
</style>
@endpush
@endsection