@extends('layouts.staff')

@section('title', '🎁 Vendors › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.acquisitions') }}">Acquisitions</a>
    <span class="sep">›</span>
    <span>Vendors</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>Registered Vendors</h3>
            <table class="items-table" style="margin-top:10px;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($vendors as $v)
                        <tr>
                            <td><strong>{{ $v->name }}</strong></td>
                            <td>{{ $v->contact ?? 'N/A' }}</td>
                            <td>{{ $v->address ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="checkout-panel">
            <h3>Add New Vendor</h3>
            <form action="{{ route('staff.acquisitions.vendors') }}" method="POST" style="margin-top:10px;">
                @csrf
                <div class="form-row">
                    <span class="form-label" style="width:70px;">Name:</span>
                    <input class="form-input" name="name" required type="text">
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:70px;">Contact:</span>
                    <input class="form-input" name="contact" type="text">
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:70px;">Address:</span>
                    <input class="form-input" name="address" type="text">
                </div>
                <div style="margin-top:12px; border-top:1px solid #eee; padding-top:10px; text-align:right;">
                    <button class="form-btn primary" type="submit">Save Vendor</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