@extends('layouts.staff')

@section('title', '👤 Patron Management › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.patrons') }}">Patrons</a>
@endsection

@section('content')
<div style="width:100%; display:flex; flex-direction:column;">
    @if(session('success'))
        <div style="background:#d4edda; color:#155724; border:1px solid #c3e6cb; padding:10px; margin-bottom:12px; border-radius:3px; font-size:13px;">
            {{ session('success') }}
        </div>
    @endif

    <div class="checkout-panel">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>👤 Patron Management</h3>
            <span style="font-size:12px; color:#666;">
                Showing {{ $patrons->firstItem() ?? 0 }} – {{ $patrons->lastItem() ?? 0 }} of {{ number_format($patrons->total()) }} patrons
            </span>
        </div>

        <form action="{{ route('staff.patrons') }}" method="GET" class="form-row" style="margin-top:10px;">
            <span class="form-label">Search patrons:</span>
            <input class="form-input" name="q" value="{{ $q }}" placeholder="Name, card number, email, or username..." type="text">
            <button class="form-btn primary" type="submit">Search</button>
            <a class="form-btn" href="{{ route('staff.patrons.create') }}">+ New Patron</a>
        </form>
        
        <table class="items-table" style="margin-top:16px;">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Card number</th>
                    <th>Category</th>
                    <th>Library</th>
                    <th>Items out</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($patrons as $p)
                    <tr>
                        <td>
                            <div style="display:flex; align-items:center; gap:8px;">
                                @php
                                    $pThumb = (!empty($p->passport) && file_exists(public_path($p->passport)))
                                        ? asset($p->passport)
                                        : asset('images/default-avatar.svg');
                                @endphp
                                <img src="{{ $pThumb }}" alt="" style="width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid #cbd5e1; flex-shrink:0;">
                                <a href="{{ route('staff.patrons.show', $p->id) }}"><strong>{{ $p->surname }}, {{ $p->firstname }}</strong></a>
                            </div>
                        </td>
                        <td><code>{{ $p->cardnumber }}</code></td>
                        <td>{{ $p->category_name }}</td>
                        <td>{{ $p->library_name }}</td>
                        <td><span class="badge" style="background:{{ ($p->items_out ?? 0) > 0 ? '#17a2b8' : '#f0f0f0' }}; color:{{ ($p->items_out ?? 0) > 0 ? '#fff' : '#555' }}; padding:2px 8px; border-radius:10px; font-size:11px;">{{ $p->items_out ?? 0 }}</span></td>
                        <td>
                            <a href="{{ route('staff.circulation', ['patron_card' => $p->cardnumber]) }}" class="form-btn primary" style="padding: 2px 8px; font-size:11px; text-decoration:none;">Check out</a>
                            <a href="{{ route('staff.patrons.show', $p->id) }}" class="form-btn" style="padding: 2px 8px; font-size:11px; text-decoration:none;">Details</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="color:#888; text-align:center; padding:14px;">No patrons found matching search criteria.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        @if($patrons->hasPages())
            <div style="margin-top:16px; display:flex; justify-content:center;">
                {{ $patrons->links() }}
            </div>
        @endif
    </div>

    <div style="margin-top:12px;">
        <a href="{{ route('staff.home') }}" class="form-btn" style="width:120px; text-align:center;">← Back to Home</a>
    </div>
</div>
@endsection