@extends('layouts.staff')

@section('title', '🎁 Purchase Orders › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.acquisitions') }}">Acquisitions</a>
    <span class="sep">›</span>
    <span>Orders</span>
@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 style="display:grid; grid-template-columns: 2fr 1fr; gap:16px;">
        <div class="checkout-panel">
            <h3>Acquisition Orders</h3>
            <table class="items-table" style="margin-top:10px;">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Vendor</th>
                        <th>Qty</th>
                        <th>Price</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $o)
                        <tr>
                            <td>{{ $o->biblio_title }}</td>
                            <td>{{ $o->vendor_name }}</td>
                            <td>{{ $o->quantity }}</td>
                            <td>₦{{ number_format($o->price, 2) }}</td>
                            <td>
                                @if($o->status == 'pending')
                                    <span class="overdue-tag">Pending</span>
                                @else
                                    <span class="status-ok">Received</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align:center; color:#777; padding:10px;">No purchase orders placed yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="checkout-panel">
            <h3>Place Purchase Order</h3>
            <form action="{{ route('staff.acquisitions.orders') }}" method="POST" style="margin-top:10px;">
                @csrf
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Title:</span>
                    <select class="form-input" name="biblio_id" required>
                        @foreach($biblios as $b)
                            <option value="{{ $b->id }}">{{ $b->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Vendor:</span>
                    <select class="form-input" name="vendor_id" required>
                        @foreach($vendors as $v)
                            <option value="{{ $v->id }}">{{ $v->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Quantity:</span>
                    <input class="form-input" name="quantity" required type="number" min="1" value="1">
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Price (₦):</span>
                    <input class="form-input" name="price" required type="number" step="0.01" min="0">
                </div>
                <div style="margin-top:12px; border-top:1px solid #eee; padding-top:10px; text-align:right;">
                    <button class="form-btn primary" type="submit">Place Order</button>
                </div>
            </form>
        </div>
    </div>

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