@extends('layouts.staff')

@section('title', '⇄ Circulation — Check Out › Koha Staff')

@section('qtab-checkout-active', 'active')

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

@section('content')
<div style="width: 100%; display: flex; flex-direction: column;">
    @if(session('error'))
        <div style="background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 10px; margin-bottom: 12px; border-radius: 3px; font-size: 13px;">
            {{ session('error') }}
        </div>
    @endif
    @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">
        <h3>⇄ Circulation — Check Out</h3>
        <form action="{{ route('staff.circulation') }}" method="GET" class="form-row">
            <span class="form-label">Patron barcode / name:</span>
            <input class="form-input" name="patron_card" value="{{ $patronCard }}" placeholder="Enter card number or name..." type="text">
            <button class="form-btn primary" type="submit">Find</button>
        </form>

        @if($patron)
            @php
                $circPassport = (!empty($patron->passport) && file_exists(public_path($patron->passport)))
                    ? asset($patron->passport)
                    : asset('images/default-avatar.svg');
            @endphp
            <div id="circ-patron-found" style="margin-top:12px; margin-bottom:10px; padding:12px; background:#f0f7ff; border:1px solid #c0d5f0; border-radius:4px; font-size:12px; display:flex; align-items:center; gap:14px;">
                <img src="{{ $circPassport }}" alt="{{ $patron->firstname }} {{ $patron->surname }}" style="width:52px; height:52px; border-radius:4px; object-fit:cover; border:2px solid #93c5fd; flex-shrink:0; background:#fff;">
                <div>
                    <div style="font-size:14px; font-weight:700; color:#1e3a8a;">{{ $patron->firstname }} {{ $patron->surname }}</div>
                    <div style="color:#475569; margin-top:2px;">
                        Card: <strong>{{ $patron->cardnumber }}</strong> &nbsp;|&nbsp;
                        Category: <span class="badge" style="background:#dbeafe; color:#1e40af; font-size:11px; padding:1px 6px; border-radius:3px;">{{ $patron->category_name }}</span>
                    </div>
                </div>
            </div>

            <form action="{{ route('staff.checkout') }}" method="POST" class="form-row" style="margin-top:12px; border-top:1px solid #eee; padding-top:12px;">
                @csrf
                <input type="hidden" name="patron_id" value="{{ $patron->id }}">
                <span class="form-label">Item barcode:</span>
                <input class="form-input" name="barcode" placeholder="Scan or enter item barcode..." type="text" autofocus>
                <button class="form-btn primary" type="submit">Check out</button>
            </form>
        @elseif($patronCard)
            <div style="margin-top:12px; padding:8px; background:#fff3cd; color:#856404; border:1px solid #ffeeba; font-size:12px;">
                No patron found matching "{{ $patronCard }}".
            </div>
        @endif
    </div>

    @if($patron && count($checkedOutItems) > 0)
        <div class="checkout-panel" id="checkout-items-panel">
            <h3>Currently checked out items</h3>
            <table class="items-table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Barcode</th>
                        <th>Due date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($checkedOutItems as $item)
                        <tr>
                            <td>{{ $item->title }}</td>
                            <td>{{ $item->barcode }}</td>
                            <td>{{ $item->date_due }}</td>
                            <td>
                                @if($item->overdue)
                                    <span class="overdue-tag">⚠ OVERDUE</span>
                                @else
                                    <span class="status-ok">✓ OK</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

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