@extends('procurement::layouts.master')
@section('title',$component->description)
@section('content')
@if($component->needs_attention)
<div class="alert alert-warning d-flex justify-content-between align-items-center py-2 mb-3">
    <span><i class="fas fa-exclamation-triangle mr-1"></i> <strong>Needs Attention</strong> — this part is flagged for sourcing/review soon.</span>
    <form method="POST" action="{{ route('procurement.components.toggle-attention',$component) }}" class="mb-0">
        @csrf @method('PATCH')
        <button class="btn btn-sm btn-outline-dark">Clear flag</button>
    </form>
</div>
@endif
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        {{ $component->description }}
        @if($component->is_custom_device)<span class="badge badge-info align-middle ml-2"><i class="fas fa-drafting-compass"></i> Custom Device</span>@endif
        @if(!$component->needs_attention)
        <form method="POST" action="{{ route('procurement.components.toggle-attention',$component) }}" class="d-inline ml-1">
            @csrf @method('PATCH')
            <button class="btn btn-xs btn-outline-warning" title="Flag as needing attention"><i class="fas fa-exclamation-triangle fa-xs"></i> Flag</button>
        </form>
        @endif
    </h1>
    <div>
        <a href="{{ route('procurement.components.edit',$component) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
        <a href="{{ route('procurement.components.revisions',$component) }}" class="btn btn-sm btn-outline-info">Revisions</a>
        <a href="{{ route('procurement.components.price-history',$component) }}" class="btn btn-sm btn-outline-info">Price History</a>
        <a href="{{ route('procurement.components.index') }}" class="btn btn-sm btn-link">&larr; Back</a>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        @if($component->image_path)
        <div class="card shadow mb-4">
            <div class="card-body text-center">
                <img src="{{ $component->image_url }}" alt="{{ $component->description }}" class="img-fluid rounded" style="max-height:220px">
            </div>
        </div>
        @endif
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Component Details</h6></div>
            <div class="card-body">
                <dl class="row mb-0 small">
                    <dt class="col-5">Home Project</dt><dd class="col-7">{{ $component->project->name ?? '—' }}</dd>
                    <dt class="col-5">Ref Designator</dt><dd class="col-7"><code>{{ $component->ref_designator ?: '—' }}</code></dd>
                    <dt class="col-5">Category</dt><dd class="col-7">{{ ucwords(str_replace('_',' ',$component->category ?? '—')) }}</dd>
                    <dt class="col-5">Part Number</dt><dd class="col-7"><code>{{ $component->part_number ?: '—' }}</code></dd>
                    <dt class="col-5">Supplier</dt><dd class="col-7">{{ $component->supplier ?: '—' }}</dd>
                    <dt class="col-5">Supplier Part #</dt><dd class="col-7"><code>{{ $component->supplier_part_number ?: '—' }}</code></dd>
                    @if($component->website)
                    <dt class="col-5">Supplier Link</dt><dd class="col-7"><a href="{{ $component->website }}" target="_blank">Link <i class="fas fa-external-link-alt fa-xs"></i></a></dd>
                    @endif
                    <dt class="col-5">Status</dt>
                    <dd class="col-7">
                        @php $sb = ['active'=>'success','obsolete'=>'danger','under_review'=>'warning']; @endphp
                        <span class="badge badge-{{ $sb[$component->status] ?? 'secondary' }}">{{ ucwords(str_replace('_',' ',$component->status)) }}</span>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Used In</h6></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0" data-pf-table id="component-used-in-table">
                    <thead class="thead-light"><tr>
                        <th data-pf-sort="text">Project <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                        <th data-pf-sort="text">Ref Designator <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                        <th class="text-center" data-pf-sort="number">Qty/Bd <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    </tr></thead>
                    <tbody>
                        @if($component->project)
                        <tr data-pf-row>
                            <td data-pf-value="{{ $component->project->name }}"><a href="{{ route('procurement.projects.show',$component->project) }}">{{ $component->project->name }}</a> <span class="badge badge-light">home</span></td>
                            <td><code class="small">{{ $component->ref_designator ?: '—' }}</code></td>
                            <td class="text-center">{{ $component->qty_per_board }}</td>
                        </tr>
                        @endif
                        @foreach($component->projectLines as $line)
                        <tr data-pf-row>
                            <td><a href="{{ route('procurement.projects.show',$line->project) }}">{{ $line->project->name }}</a></td>
                            <td><code class="small">{{ $line->ref_designator ?: '—' }}</code></td>
                            <td class="text-center">{{ $line->qty_per_board }}</td>
                        </tr>
                        @endforeach
                        @if(!$component->project && $component->projectLines->isEmpty())
                        <tr><td colspan="3" class="text-center text-muted py-2 small">Not attached to any project</td></tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Manufacturer</h6></div>
            <div class="card-body">
                @if($component->manufacturer)
                <dl class="row mb-0 small">
                    <dt class="col-5">Name</dt><dd class="col-7"><a href="{{ route('procurement.manufacturers.show',$component->manufacturer) }}">{{ $component->manufacturer->name }}</a></dd>
                    <dt class="col-5">Country</dt><dd class="col-7">{{ $component->manufacturer->country ?: '—' }}</dd>
                </dl>
                @else
                <p class="text-muted small mb-2">No manufacturer set</p>
                @endif
                <dl class="row mb-0 small">
                    <dt class="col-5">Manufacturer Link</dt>
                    <dd class="col-7">
                        @if($component->manufacturer_url)
                            <a href="{{ $component->manufacturer_url }}" target="_blank">Datasheet <i class="fas fa-external-link-alt fa-xs"></i></a>
                        @elseif($component->manufacturer?->website)
                            <a href="{{ $component->manufacturer->website }}" target="_blank">Visit <i class="fas fa-external-link-alt fa-xs"></i></a>
                        @else—@endif
                    </dd>
                    <dt class="col-5">Manufacturer Price</dt>
                    <dd class="col-7 font-weight-bold">{{ $component->manufacturer_price !== null ? '$'.number_format($component->manufacturer_price,4) : '—' }}</dd>
                </dl>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Alternate Parts</h6></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0" data-pf-table id="component-alternates-table">
                    <thead class="thead-light"><tr>
                        <th data-pf-sort="text">Part # <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                        <th data-pf-sort="text">Manufacturer <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                        <th data-pf-sort="text">Supplier <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    </tr></thead>
                    <tbody>
                        @forelse($component->alternates as $alt)
                        <tr data-pf-row>
                            <td>
                                <code class="small">{{ $alt->part_number }}</code>
                                @if($alt->description)<br><small class="text-muted">{{ $alt->description }}</small>@endif
                            </td>
                            <td>
                                @if($alt->manufacturer)
                                    <small>{{ $alt->manufacturer->name }}</small>
                                    @if($alt->manufacturer->country)<br><small class="text-muted">{{ $alt->manufacturer->country }}</small>@endif
                                    @if($alt->manufacturer->website)<br><a href="{{ $alt->manufacturer->website }}" target="_blank" class="small">Link <i class="fas fa-external-link-alt fa-xs"></i></a>@endif
                                @else<small class="text-muted">—</small>@endif
                            </td>
                            <td>
                                @if($alt->supplier)
                                    <small>{{ $alt->supplier->name }}</small>
                                    @if($alt->supplier_part_number)<br><small class="text-muted">{{ $alt->supplier_part_number }}</small>@endif
                                @else<small class="text-muted">—</small>@endif
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center text-muted py-2 small">No alternate parts</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Cost &amp; Sourcing</h6></div>
            <div class="card-body">
                <dl class="row mb-0 small">
                    <dt class="col-6">Qty / Board</dt><dd class="col-6">{{ $component->qty_per_board }}</dd>
                    <dt class="col-6">Unit Cost</dt><dd class="col-6 font-weight-bold">${{ number_format($component->unit_cost,4) }} {{ $component->currency }}</dd>
                    <dt class="col-6">Line Cost</dt><dd class="col-6 font-weight-bold">${{ number_format($component->line_cost,4) }}</dd>
                    <dt class="col-6">MOQ</dt><dd class="col-6">{{ $component->moq }}</dd>
                    <dt class="col-6">Replenish Qty</dt><dd class="col-6">{{ $component->replenish_qty ?: '—' }}</dd>
                    <dt class="col-6">Lead Time</dt>
                    <dd class="col-6">
                        @if($component->lead_time_weeks >= 8)
                            <span class="lead-badge">{{ $component->lead_time_weeks }}w</span>
                        @else
                            {{ $component->lead_time_weeks ?: '—' }}w
                        @endif
                    </dd>
                    <dt class="col-6">Country of Origin</dt><dd class="col-6">{{ $component->country_of_origin ?: '—' }}</dd>
                    <dt class="col-6">HS Code</dt><dd class="col-6"><code>{{ $component->hs_code ?: '—' }}</code></dd>
                    <dt class="col-6">Tariff Rate</dt><dd class="col-6">{{ $component->tariff_rate > 0 ? $component->tariff_rate.'%' : '—' }}</dd>
                    <dt class="col-6">Tariff Cost</dt><dd class="col-6">{{ $component->tariff_rate > 0 ? '$'.number_format($component->tariff_cost,4) : '—' }}</dd>
                </dl>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Stock</h6></div>
            <div class="card-body">
                @if($component->stock)
                <dl class="row mb-0 small">
                    <dt class="col-6">On Hand</dt><dd class="col-6 font-weight-bold">{{ $component->stock->qty_on_hand }}</dd>
                    <dt class="col-6">Reserved</dt><dd class="col-6">{{ $component->stock->qty_reserved }}</dd>
                    <dt class="col-6">Available</dt><dd class="col-6">{{ $component->stock->qty_available }}</dd>
                    <dt class="col-6">Bin Location</dt><dd class="col-6">{{ $component->stock->bin_location ?: '—' }}</dd>
                    <dt class="col-6">Last Count</dt><dd class="col-6">{{ $component->stock->last_counted_at?->format('M j, Y') ?? '—' }}</dd>
                </dl>
                @else
                <p class="text-muted small mb-0">No stock record</p>
                @endif
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Approved Vendor List</h6></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0" data-pf-table id="component-avl-table">
                    <thead class="thead-light"><tr>
                        <th data-pf-sort="text">Supplier <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                        <th data-pf-sort="text">Status <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    </tr></thead>
                    <tbody>
                        @forelse($component->avl as $a)
                        <tr data-pf-row>
                            <td><small>{{ $a->supplier->name }}</small></td>
                            <td data-pf-value="{{ $a->status }}"><span class="badge badge-{{ $a->status_badge }}">{{ ucfirst($a->status) }}</span></td>
                        </tr>
                        @empty
                        <tr><td class="text-muted text-center py-2 small">No AVL entries</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($component->detailed_description)
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Detailed Description</h6></div>
            <div class="card-body"><p class="small mb-0" style="white-space:pre-wrap">{{ $component->detailed_description }}</p></div>
        </div>
        @endif
        @if($component->notes)
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Notes</h6></div>
            <div class="card-body"><p class="small mb-0">{{ $component->notes }}</p></div>
        </div>
        @endif
    </div>
</div>

<div class="card shadow mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold">Quotes</h6>
        <input type="text" data-pf-filter="component-quotes-table" class="form-control form-control-sm" placeholder="Search quotes..." style="width:180px">
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-sm mb-0" data-pf-table id="component-quotes-table">
            <thead class="thead-light">
                <tr>
                    <th data-pf-sort="text">Vendor <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th>Contact</th>
                    <th data-pf-sort="number">Unit Price <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th data-pf-sort="number">Qty Break <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th data-pf-sort="number">Lead Time <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th data-pf-sort="date">Quote Date <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th data-pf-sort="date">Valid Until <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th data-pf-sort="text">Status <i class="fas fa-sort text-muted pf-sort-icon"></i></th>
                    <th>Attachment</th><th>Notes</th><th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($component->quotes as $quote)
                <tr data-pf-row>
                    <td>
                        {{ $quote->vendor_label }}
                        @if($quote->supplier)<br><small class="text-muted">{{ $quote->supplier->name }}</small>@endif
                    </td>
                    <td><small>{{ $quote->contact_name ?: '—' }}{{ $quote->contact_email ? ' <'.$quote->contact_email.'>' : '' }}</small></td>
                    <td data-pf-value="{{ $quote->unit_price }}">{{ $quote->unit_price !== null ? '$'.number_format($quote->unit_price,4).' '.$quote->currency : '—' }}</td>
                    <td>{{ $quote->qty_break ?? '—' }}</td>
                    <td data-pf-value="{{ $quote->lead_time_weeks }}">{{ $quote->lead_time_weeks !== null ? $quote->lead_time_weeks.'w' : '—' }}</td>
                    <td data-pf-value="{{ $quote->quote_date?->toDateString() }}"><small>{{ $quote->quote_date?->format('M j, Y') ?? '—' }}</small></td>
                    <td data-pf-value="{{ $quote->valid_until?->toDateString() }}"><small class="{{ $quote->is_expired ? 'text-danger' : '' }}">{{ $quote->valid_until?->format('M j, Y') ?? '—' }}</small></td>
                    {{-- data-pf-value: a <select>'s textContent is every <option> label concatenated,
                         not just the chosen one, so sort/search need the real status spelled out here. --}}
                    <td data-pf-value="{{ $quote->status }}">
                        <form method="POST" action="{{ route('procurement.components.quotes.update',[$component,$quote]) }}" class="d-inline-flex align-items-center">
                            @csrf @method('PATCH')
                            <select name="status" class="form-control form-control-sm badge-{{ $quote->status_badge }}" style="width:auto" onchange="this.form.submit()">
                                @foreach(['received','accepted','rejected','expired'] as $s)
                                <option value="{{ $s }}" {{ $quote->status==$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                                @endforeach
                            </select>
                        </form>
                    </td>
                    <td>
                        @if($quote->file_path)
                        <a href="{{ route('procurement.components.quotes.download',[$component,$quote]) }}" class="small"><i class="fas fa-paperclip fa-sm"></i> {{ Str::limit($quote->file_name,20) }}</a>
                        @else<span class="text-muted small">—</span>@endif
                    </td>
                    <td><small>{{ Str::limit($quote->notes,40) ?: '—' }}</small></td>
                    <td>
                        <form method="POST" action="{{ route('procurement.components.quotes.destroy',[$component,$quote]) }}" class="d-inline" onsubmit="return confirm('Delete this quote?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-xs btn-outline-danger" title="Delete quote"><i class="fas fa-trash fa-sm"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="11" class="text-center text-muted py-2">No quotes recorded yet — add one below.</td></tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>
    <div class="card-footer">
        <form method="POST" action="{{ route('procurement.components.quotes.store',$component) }}" enctype="multipart/form-data">
            @csrf
            <div class="form-row align-items-end">
                <div class="col-md-2 mb-1">
                    <label class="small mb-0">Vendor (Supplier)</label>
                    <select name="supplier_id" class="form-control form-control-sm">
                        <option value="">— Not in system —</option>
                        @foreach($suppliers as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 mb-1">
                    <label class="small mb-0">Vendor Name</label>
                    <input type="text" name="vendor_name" class="form-control form-control-sm" placeholder="If not a supplier above">
                </div>
                <div class="col-md-2 mb-1">
                    <label class="small mb-0">Contact</label>
                    <input type="text" name="contact_name" class="form-control form-control-sm" placeholder="Name / email">
                </div>
                <div class="col-md-1 mb-1">
                    <label class="small mb-0">Unit Price</label>
                    <input type="number" name="unit_price" class="form-control form-control-sm" step="0.0001" min="0">
                </div>
                <div class="col-md-1 mb-1">
                    <label class="small mb-0">Qty Break</label>
                    <input type="number" name="qty_break" class="form-control form-control-sm" min="1">
                </div>
                <div class="col-md-1 mb-1">
                    <label class="small mb-0">Lead Time (wk)</label>
                    <input type="number" name="lead_time_weeks" class="form-control form-control-sm" min="0">
                </div>
                <div class="col-md-1 mb-1">
                    <label class="small mb-0">Quote Date</label>
                    <input type="date" name="quote_date" class="form-control form-control-sm">
                </div>
                <div class="col-md-1 mb-1">
                    <label class="small mb-0">Valid Until</label>
                    <input type="date" name="valid_until" class="form-control form-control-sm">
                </div>
                <div class="col-md-1 mb-1">
                    <button type="submit" class="btn btn-sm btn-dark btn-block">+ Add</button>
                </div>
            </div>
            <div class="form-row align-items-end mt-1">
                <div class="col-md-4 mb-1">
                    <label class="small mb-0">Notes</label>
                    <input type="text" name="notes" class="form-control form-control-sm" placeholder="Summary of the discussion...">
                </div>
                <div class="col-md-4 mb-1">
                    <label class="small mb-0">Attachment</label>
                    <input type="file" name="file" class="form-control-file form-control-sm">
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card shadow mb-4">
    <div class="card-header"><h6 class="m-0 font-weight-bold">Photos &amp; Video</h6></div>
    <div class="card-body">
        <div class="row">
            @forelse($component->media as $m)
            <div class="col-md-2 col-sm-3 col-4 mb-3 text-center">
                @if($m->media_type === 'video')
                <video src="{{ $m->url }}" class="img-fluid rounded border mb-1" style="max-height:110px" controls></video>
                @else
                <a href="{{ $m->url }}" target="_blank"><img src="{{ $m->url }}" class="img-fluid rounded border mb-1" style="max-height:110px;object-fit:cover" alt="{{ $m->caption ?? $component->description }}"></a>
                @endif
                @if($m->caption)<div class="small text-muted text-truncate" title="{{ $m->caption }}">{{ $m->caption }}</div>@endif
                <form method="POST" action="{{ route('procurement.components.media.destroy',[$component,$m]) }}" onsubmit="return confirm('Remove this {{ $m->media_type }}?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-xs btn-outline-danger mt-1"><i class="fas fa-trash fa-sm"></i></button>
                </form>
            </div>
            @empty
            <div class="col-12"><p class="text-muted small mb-0">No photos or videos yet.</p></div>
            @endforelse
        </div>
    </div>
    <div class="card-footer">
        <form method="POST" action="{{ route('procurement.components.media.store',$component) }}" enctype="multipart/form-data">
            @csrf
            <div class="form-row align-items-end">
                <div class="col-md-2 mb-1">
                    <label class="small mb-0">Type</label>
                    <select name="media_type" class="form-control form-control-sm" required>
                        <option value="photo">Photo</option>
                        <option value="video">Video</option>
                    </select>
                </div>
                <div class="col-md-4 mb-1">
                    <label class="small mb-0">File</label>
                    <input type="file" name="file" class="form-control-file form-control-sm" accept="image/*,video/*" required>
                    <small class="text-muted">Max 100MB.</small>
                </div>
                <div class="col-md-4 mb-1">
                    <label class="small mb-0">Caption</label>
                    <input type="text" name="caption" class="form-control form-control-sm" placeholder="Optional">
                </div>
                <div class="col-md-2 mb-1">
                    <button type="submit" class="btn btn-sm btn-dark btn-block">+ Add</button>
                </div>
            </div>
        </form>
    </div>
</div>

@if($component->is_custom_device)
<div class="card shadow mb-4" id="design-files">
    <div class="card-header"><h6 class="m-0 font-weight-bold"><i class="fas fa-drafting-compass"></i> Design Files</h6></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-light"><tr><th>File</th><th>Size</th><th>Uploaded By</th><th>Date</th><th>Notes</th><th></th></tr></thead>
            <tbody>
                @forelse($component->designFiles as $df)
                <tr>
                    <td><a href="{{ route('procurement.documents.download',$df) }}"><i class="fas {{ $df->icon }} fa-sm"></i> {{ $df->file_name }}</a></td>
                    <td><small>{{ $df->file_size_human }}</small></td>
                    <td><small>{{ $df->uploaded_by ?: '—' }}</small></td>
                    <td><small>{{ $df->created_at->format('M j, Y') }}</small></td>
                    <td><small>{{ Str::limit($df->notes,40) ?: '—' }}</small></td>
                    <td>
                        <form method="POST" action="{{ route('procurement.documents.destroy',$df) }}" onsubmit="return confirm('Delete this design file?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-xs btn-outline-danger"><i class="fas fa-trash fa-sm"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center text-muted py-2 small">No design files uploaded yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <form method="POST" action="{{ route('procurement.documents.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="document_type" value="design_file">
            <input type="hidden" name="documentable_type" value="component">
            <input type="hidden" name="documentable_id" value="{{ $component->id }}">
            <div class="form-row align-items-end">
                <div class="col-md-5 mb-1">
                    <label class="small mb-0">File</label>
                    <input type="file" name="file" class="form-control-file form-control-sm" required>
                    <small class="text-muted">Design files for this custom device — up to 1GB.</small>
                </div>
                <div class="col-md-5 mb-1">
                    <label class="small mb-0">Notes</label>
                    <input type="text" name="notes" class="form-control form-control-sm" placeholder="Optional">
                </div>
                <div class="col-md-2 mb-1">
                    <button type="submit" class="btn btn-sm btn-dark btn-block">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

@include('procurement::components.purchase_history')

@endsection