@extends('layouts.staff')

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

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

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.circulation') }}">Circulation</a>
    <span class="sep">›</span>
    <span>Check In</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 In</h3>
        <form action="{{ route('staff.checkin.process') }}" method="POST" class="form-row">
            @csrf
            <span class="form-label">Item barcode:</span>
            <input class="form-input" name="barcode" placeholder="Scan or enter item barcode to return..." type="text" autofocus>
            <button class="form-btn primary" type="submit">Submit</button>
        </form>
    </div>

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