@extends('layouts.admin-master')
@section('title', 'Vendor Crop Requests')
@section('style')
    @include('admin.style')
    <style>
        .req-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
        .req-open      { background: #e0edff; color: #2541b2; }
        .req-fulfilled { background: #dcfce7; color: #166534; }
        .req-closed    { background: #f3f4f6; color: #6b7280; }
        .req-status-form select { height: 34px; border: 1.4px solid #e5e7eb; border-radius: 8px; font-size: 12px; padding: 0 8px; }
    </style>
@endsection

@section('content')
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>Vendor Crop Requests</h2></div>
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">

                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-20">
                            <h6 class="text-medium mb-0">
                                Requirements raised by vendors
                                <span class="text-gray">({{ $openCount }} open)</span>
                            </h6>
                            <form method="GET" class="d-flex gap-2 align-items-center">
                                <input type="text" name="search" value="{{ request('search') }}"
                                    class="form-control form-control-sm" placeholder="Search crop…"
                                    style="min-width:170px;font-size:13px;">
                                <select name="status" class="form-select form-select-sm"
                                    style="min-width:130px;font-size:13px;" onchange="this.form.submit()">
                                    <option value="">All Status</option>
                                    <option value="open"      {{ request('status')=='open' ? 'selected':'' }}>Open</option>
                                    <option value="fulfilled" {{ request('status')=='fulfilled' ? 'selected':'' }}>Fulfilled</option>
                                    <option value="closed"    {{ request('status')=='closed' ? 'selected':'' }}>Closed</option>
                                </select>
                                <button class="btn btn-primary btn-sm" style="font-size:13px;">Filter</button>
                            </form>
                        </div>

                        <div class="table-responsive">
                            <table class="table top-selling-table">
                                <thead>
                                    <tr>
                                        <th><h6 class="text-sm text-medium">#</h6></th>
                                        <th><h6 class="text-sm text-medium">Vendor</h6></th>
                                        <th><h6 class="text-sm text-medium">Crop</h6></th>
                                        <th><h6 class="text-sm text-medium">Quantity</h6></th>
                                        <th><h6 class="text-sm text-medium">Grade</h6></th>
                                        <th><h6 class="text-sm text-medium">Variety</h6></th>
                                        <th><h6 class="text-sm text-medium">Requested On</h6></th>
                                        <th><h6 class="text-sm text-medium">Status</h6></th>
                                        <th class="text-end"><h6 class="text-sm text-medium">Action</h6></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($requests as $index => $req)
                                    <tr>
                                        <td class="text-sm">{{ ($requests->firstItem() ?? 1) + $index }}</td>
                                        <td class="text-sm">{{ $req->vendor->vendor_name ?? '—' }}</td>
                                        <td><p class="text-sm fw-500 mb-0">{{ $req->crop->crop_name ?? '—' }}</p></td>
                                        <td class="text-sm">
                                            {{ $req->quantity ? rtrim(rtrim(number_format($req->quantity, 2), '0'), '.') . ' ' . $req->quantity_unit : '—' }}
                                        </td>
                                        <td class="text-sm">{{ $req->grade ?? '—' }}</td>
                                        <td class="text-sm">{{ $req->variety ?? '—' }}</td>
                                        <td class="text-sm">{{ $req->created_at?->format('d M, Y') }}</td>
                                        <td>
                                            <span class="req-badge req-{{ $req->status }}">{{ $req->status }}</span>
                                        </td>
                                        <td class="text-end">
                                            <form action="{{ route('vendor-requests.status', $req->id) }}"
                                                  method="POST" class="req-status-form d-inline">
                                                @csrf @method('PATCH')
                                                <select name="status" onchange="this.form.submit()">
                                                    <option value="open"      {{ $req->status=='open' ? 'selected':'' }}>Open</option>
                                                    <option value="fulfilled" {{ $req->status=='fulfilled' ? 'selected':'' }}>Fulfilled</option>
                                                    <option value="closed"    {{ $req->status=='closed' ? 'selected':'' }}>Closed</option>
                                                </select>
                                            </form>
                                        </td>
                                    </tr>
                                    @if($req->message)
                                    <tr>
                                        <td></td>
                                        <td colspan="8" class="text-sm text-gray" style="padding-top:0;">
                                            <i class="lni lni-comments-alt"></i> {{ $req->message }}
                                        </td>
                                    </tr>
                                    @endif
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-5 text-muted">
                                            <i class="lni lni-clipboard" style="font-size:32px;opacity:.3;"></i>
                                            <p class="mt-2 mb-0">No vendor crop requests yet</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="pt-10 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <p class="text-sm text-gray mb-0">
                                Showing {{ $requests->firstItem() ?? 0 }} – {{ $requests->lastItem() ?? 0 }}
                                of {{ $requests->total() }} entries
                            </p>
                            {{ $requests->links('pagination::bootstrap-4') }}
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </section>

    @include('admin.footer')
</main>
@endsection

@section('script')
    @include('admin.script')
@endsection