@extends('admin.layouts.app')
.nav-tabs .nav-link.active {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-radius: 20px;
    font-weight: bold;
}
@push('title')
    <title>Request History</title>
@endpush

@section('content')
<div class="card">
    <div class="card-header">
        <h4 class="card-title">Request History</h4>
    </div>

    <div class="card-body">
        <!-- Tabs -->
        <ul class="nav nav-tabs mb-3" id="statusTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link {{ request('status') == null ? 'active' : '' }}" 
                   href="{{ route('bloodRequest.history', ['id' => $id]) }}">All</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request('status') == 'accepted' ? 'active' : '' }}" 
                   href="{{ route('bloodRequest.history', ['id' => $id, 'status' => 'accepted']) }}">Accepted</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request('status') == 'rejected' ? 'active' : '' }}" 
                   href="{{ route('bloodRequest.history', ['id' => $id, 'status' => 'rejected']) }}">Rejected</a>
            </li>
        </ul>
        
        

        <!-- Tab content -->
        <div class="tab-content" id="requestTabsContent">
            <!-- All -->
            <div class="tab-pane fade show active" id="all" role="tabpanel">
                @if($requests->count())
                <div class="row">
                    @foreach($requests as $item)
                        <div class="col-md-6 mb-4">
                            <div class="card shadow-sm border-0 h-100 rounded-4">
                                <div class="card-body">
                                    <h5 class="card-title text-primary mb-3 mr-3">
                                        <i class="fas fa-user-heart me-2"></i>Donor: {{ $item->donor->name ?? 'N/A' }}
                                    </h5>
            
                                    <ul class="list-unstyled mb-3">
                                        <li><strong>Phone:</strong> {{ $item->donor->phone ?? 'N/A' }}</li>
                                    </ul>
            
                                    <hr>
            
                                    <h6 class="text-danger">Patient Information</h6>
                                    <ul class="list-unstyled">
                                        <li><strong>Name:</strong> {{ $item->requestBlood->patient_name ?? 'N/A' }}</li>
                                        <li><strong>Gender:</strong> {{ ucfirst($item->requestBlood->gender ?? 'N/A') }}</li>
                                        <li><strong>Blood Group:</strong> {{ $item->requestBlood->bloodGroup->name ?? 'N/A' }}</li>
                                        <li><strong>Contact Number:</strong> {{ $item->requestBlood->contact1 ?? 'N/A' }}</li>
                                    </ul>
            
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <div>
                                            <strong>Status:</strong>
                                            @if($item->status == 'accepted')
                                                <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>Accepted</span>
                                            @elseif($item->status == 'rejected')
                                                <span class="badge bg-danger"><i class="fas fa-times-circle me-1"></i>Rejected</span>
                                            @else
                                                <span class="badge bg-secondary">Pending</span>
                                            @endif
                                        </div>
                                        <small class="text-muted">
                                            <i class="fas fa-calendar-alt me-1"></i>{{ $item->created_at->format('d M Y, h:i A') }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="alert alert-info text-center">No records found.</div>
            @endif
            
            </div>
        </div>
    </div>
</div>
@endsection