@extends('procurement::layouts.master')
@section('title','Upload Document')
@section('content')
<h1 class="h3 mb-4">Upload Document</h1>
<div class="card shadow mb-4"><div class="card-body">
<form method="POST" action="{{ route('procurement.documents.store') }}" enctype="multipart/form-data">
@csrf
<div class="row">
    <div class="col-md-3"><div class="form-group"><label>Document Type <span class="text-danger">*</span></label>
        <select name="document_type" class="form-control" required>
            @foreach(['invoice','datasheet','quote','coa','shipping','drawing','other'] as $t)
            <option value="{{ $t }}" {{ old('document_type')==$t?'selected':'' }}>{{ ucfirst($t) }}</option>
            @endforeach
        </select>
    </div></div>
    <div class="col-md-3"><div class="form-group"><label>Attach To Type <span class="text-danger">*</span></label>
        <select name="documentable_type" class="form-control" required id="attach-type">
            <option value="">— Select type —</option>
            <option value="order"     {{ old('documentable_type')=='order'     ?'selected':'' }}>Purchase Order</option>
            <option value="invoice"   {{ old('documentable_type')=='invoice'   ?'selected':'' }}>Invoice</option>
            <option value="component" {{ old('documentable_type')=='component' ?'selected':'' }}>Component</option>
            <option value="supplier"  {{ old('documentable_type')=='supplier'  ?'selected':'' }}>Supplier</option>
        </select>
    </div></div>
    <div class="col-md-4"><div class="form-group"><label>Attach To <span class="text-danger">*</span></label>
        <select name="documentable_id" class="form-control" required id="documentable_id">
            <option value="">— Select type first —</option>
            <optgroup label="Purchase Orders" id="grp-order" style="display:none">
                @foreach($orders as $o)
                <option value="{{ $o->id }}" data-type="order">{{ $o->po_number }} — {{ $o->supplier->name ?? '' }}</option>
                @endforeach
            </optgroup>
            <optgroup label="Invoices" id="grp-invoice" style="display:none">
                @foreach($invoices as $inv)
                <option value="{{ $inv->id }}" data-type="invoice">{{ $inv->invoice_number }}</option>
                @endforeach
            </optgroup>
            <optgroup label="Components" id="grp-component" style="display:none">
                @foreach($components as $c)
                <option value="{{ $c->id }}" data-type="component">{{ $c->ref_designator ? $c->ref_designator." — ":""  }}{{ Str::limit($c->description,45) }}</option>
                @endforeach
            </optgroup>
            <optgroup label="Suppliers" id="grp-supplier" style="display:none">
                @foreach($suppliers as $s)
                <option value="{{ $s->id }}" data-type="supplier">{{ $s->name }}</option>
                @endforeach
            </optgroup>
        </select>
    </div></div>
    <div class="col-md-6"><div class="form-group"><label>File <span class="text-danger">*</span></label>
        <input type="file" name="file" class="form-control-file" required>
        <small class="text-muted">Max 20MB.</small>
    </div></div>
    <div class="col-md-6"><div class="form-group"><label>Notes</label>
        <textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</textarea>
    </div></div>
</div>
<button type="submit" class="btn btn-dark">Upload</button>
<a href="{{ route('procurement.documents.index') }}" class="btn btn-link">Cancel</a>
</form></div></div>
@endsection

@push('scripts')
<script>
document.getElementById('attach-type').addEventListener('change', function() {
    var type = this.value;
    var sel = document.getElementById('documentable_id');

    // Hide all optgroups and reset
    ['order','invoice','component','supplier'].forEach(function(t) {
        document.getElementById('grp-' + t).style.display = 'none';
    });
    sel.value = '';

    if (type) {
        document.getElementById('grp-' + type).style.display = '';
    }
});
</script>
@endpush