@extends('layouts.app', [
    'title' => 'Donors | Blood Donor App',
    'pageHeading' => 'Donor Management',
    'pageSubheading' => 'Manage donor records, search, and eligibility status',
])

@section('content')
    <div class="card card-soft border-0 mb-3">
        <div class="card-body">
            <form method="GET" action="{{ route('donors.index') }}" class="row g-2 align-items-end">
                {{-- Row 1: Search + Blood Group + Buttons --}}
                <div class="col-md-5">
                    <label class="form-label">Search by Name</label>
                    <input type="text" name="search" class="form-control" placeholder="Enter donor name"
                        value="{{ $filters['search'] }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Filter by Blood Group</label>
                    <select name="blood_group" class="form-select">
                        <option value="">All Blood Groups</option>
                        @foreach ($bloodGroups as $bloodGroup)
                            <option value="{{ $bloodGroup }}" @selected($filters['blood_group'] === $bloodGroup)>{{ $bloodGroup }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-grid d-md-flex gap-2">
                    <button class="btn btn-danger" type="submit">
                        <i class="bi bi-search me-1"></i>Search
                    </button>
                    <a href="{{ route('donors.index') }}" class="btn btn-outline-secondary">Reset</a>
                </div>

                {{-- Row 2: Eligibility filter --}}
                <div class="col-12 pt-1">
                    <label class="form-label mb-1 text-muted small fw-semibold">Filter by Eligibility</label>
                    <div class="d-flex flex-wrap gap-2">
                        @php
                            $eligibilityOptions = [
                                ''            => ['label' => 'All Donors',    'icon' => 'bi-people-fill',      'cls' => 'btn-outline-secondary'],
                                'eligible'    => ['label' => 'Eligible',       'icon' => 'bi-check-circle-fill','cls' => 'btn-outline-success'],
                                'not_eligible'=> ['label' => 'Not Eligible',   'icon' => 'bi-x-circle-fill',   'cls' => 'btn-outline-danger'],
                            ];
                        @endphp
                        @foreach($eligibilityOptions as $value => $opt)
                            <button type="submit" name="eligibility" value="{{ $value }}"
                                class="btn btn-sm {{ $filters['eligibility'] === $value ? str_replace('outline-', '', $opt['cls']) . ' text-white' : $opt['cls'] }}">
                                <i class="bi {{ $opt['icon'] }} me-1"></i>{{ $opt['label'] }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h6 mb-0">Donor List</h2>
        <a href="{{ route('donors.create') }}" class="btn btn-danger">
            <i class="bi bi-person-plus-fill me-1"></i>Add Donor
        </a>
    </div>

    <div class="card card-soft border-0">
        @if ($donors->isEmpty())
            <div class="text-center p-5">
                <i class="bi bi-people fs-1 text-muted"></i>
                <p class="text-muted mb-0 mt-2">No donors found for your search/filter.</p>
            </div>
        @else
            <div class="table-responsive d-none d-lg-block">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Photo</th>
                            <th>Name</th>
                            <th>Blood Group</th>
                            <th>Phone</th>
                            <th>Gender</th>
                            <th>Age</th>
                            <th>Address</th>
                            <th>Last Donation</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($donors as $donor)
                            @php
                                $eligibility = $donor->eligibilityData();
                            @endphp
                            <tr class="{{ $donor->is_active ? '' : 'table-secondary text-muted' }}">
                                <td><img src="{{ $donor->profile_image_url }}" alt="{{ $donor->name }}" class="avatar-48" style="{{ $donor->is_active ? '' : 'opacity:.5' }}"></td>
                                <td class="fw-semibold">
                                    {{ $donor->name }}
                                    @if(! $donor->is_active)
                                        <span class="badge bg-secondary ms-1" style="font-size:.7rem">Inactive</span>
                                    @endif
                                </td>
                                <td><span class="badge bg-danger-subtle text-danger">{{ $donor->blood_group }}</span></td>
                                <td>{{ $donor->phone }}</td>
                                <td class="text-capitalize">{{ $donor->gender }}</td>
                                <td>{{ $donor->age }}</td>
                                <td class="text-truncate" style="max-width:180px">{{ $donor->address }}</td>
                                <td>{{ $eligibility['last_donation_date']?->format('d M Y') ?? 'No donations yet' }}</td>
                                <td>
                                    <span class="badge {{ $donor->eligibilityBadgeClass() }}">{{ $eligibility['status'] }}</span>
                                </td>
                                <td class="text-end">
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('donors.show', $donor) }}" class="btn btn-outline-primary">View</a>
                                        <a href="{{ route('donors.edit', $donor) }}" class="btn btn-outline-secondary">Edit</a>
                                        {{-- Toggle Active/Inactive --}}
                                        <form action="{{ route('donors.toggleStatus', $donor) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            @if($donor->is_active)
                                                <button type="submit" class="btn btn-outline-warning"
                                                    title="Deactivate donor"
                                                    onclick="return confirm('Deactivate {{ addslashes($donor->name) }}?')">
                                                    <i class="bi bi-toggle-on"></i>
                                                </button>
                                            @else
                                                <button type="submit" class="btn btn-outline-success"
                                                    title="Activate donor"
                                                    onclick="return confirm('Activate {{ addslashes($donor->name) }}?')">
                                                    <i class="bi bi-toggle-off"></i>
                                                </button>
                                            @endif
                                        </form>
                                        <button class="btn btn-outline-danger" data-bs-toggle="modal"
                                            data-bs-target="#deleteDonorModal{{ $donor->id }}">Delete</button>
                                    </div>
                                </td>
                            </tr>

                            @include('partials.delete-modal', [
                                'id' => 'deleteDonorModal' . $donor->id,
                                'action' => route('donors.destroy', $donor),
                                'message' => 'Delete donor "' . $donor->name . '"? This will also remove all donation history for this donor.',
                            ])
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="d-lg-none p-3">
                <div class="row g-3">
                    @foreach ($donors as $donor)
                        @php
                            $eligibility = $donor->eligibilityData();
                        @endphp
                        <div class="col-12">
                            <div class="card border">
                                <div class="card-body">
                                    <div class="d-flex gap-3">
                                        <img src="{{ $donor->profile_image_url }}" alt="{{ $donor->name }}" class="avatar-48">
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start gap-2">
                                                <div>
                                                    <h3 class="h6 mb-1">{{ $donor->name }}</h3>
                                                    <div class="small text-muted">{{ $donor->phone }}</div>
                                                </div>
                                                <span
                                                    class="badge {{ $donor->eligibilityBadgeClass() }}">{{ $eligibility['status'] }}</span>
                                            </div>
                                            <div class="small mt-2">
                                                <div><strong>Blood:</strong> {{ $donor->blood_group }} | <strong>Gender:</strong>
                                                    {{ ucfirst($donor->gender) }}</div>
                                                <div><strong>Age:</strong> {{ $donor->age }}</div>
                                                <div><strong>Last Donation:</strong>
                                                    {{ $eligibility['last_donation_date']?->format('d M Y') ?? 'No donations yet' }}
                                                </div>
                                            </div>
                                            <div class="btn-group btn-group-sm mt-3 w-100">
                                                <a href="{{ route('donors.show', $donor) }}"
                                                    class="btn btn-outline-primary">View</a>
                                                <a href="{{ route('donors.edit', $donor) }}"
                                                    class="btn btn-outline-secondary">Edit</a>
                                                {{-- Toggle Active/Inactive --}}
                                                <form action="{{ route('donors.toggleStatus', $donor) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    @if($donor->is_active)
                                                        <button type="submit" class="btn btn-outline-warning"
                                                            title="Deactivate donor"
                                                            onclick="return confirm('Deactivate {{ addslashes($donor->name) }}?')">
                                                            <i class="bi bi-toggle-on"></i>
                                                        </button>
                                                    @else
                                                        <button type="submit" class="btn btn-outline-success"
                                                            title="Activate donor"
                                                            onclick="return confirm('Activate {{ addslashes($donor->name) }}?')">
                                                            <i class="bi bi-toggle-off"></i>
                                                        </button>
                                                    @endif
                                                </form>
                                                <button class="btn btn-outline-danger" data-bs-toggle="modal"
                                                    data-bs-target="#deleteDonorModalMobile{{ $donor->id }}">Delete</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @include('partials.delete-modal', [
                            'id' => 'deleteDonorModalMobile' . $donor->id,
                            'action' => route('donors.destroy', $donor),
                            'message' => 'Delete donor "' . $donor->name . '"? This will also remove all donation history for this donor.',
                        ])
                    @endforeach
                </div>
            </div>

            <div class="card-footer bg-white d-flex flex-column flex-sm-row align-items-center justify-content-between gap-2 py-3">
                <div class="text-muted small">
                    Showing
                    <strong>{{ $donors->firstItem() }}</strong>–<strong>{{ $donors->lastItem() }}</strong>
                    of <strong>{{ $donors->total() }}</strong> donor{{ $donors->total() === 1 ? '' : 's' }}
                </div>
                <div>{{ $donors->links() }}</div>
            </div>
        @endif
    </div>
@endsection