{{-- Lives inside an Alpine scope exposing: listingId, product, incoterm --}}
@php($input = 'mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm')
<form method="POST" action="{{ route('rfqs.store') }}" class="grid grid-cols-2 gap-3 text-sm">
    @csrf
    <input type="hidden" name="inventory_id" :value="listingId">

    <label class="col-span-2">Product
        <select name="product" x-model="product" class="{{ $input }}" required>
            @foreach (config('drixem.products') as $key => $label)<option value="{{ $key }}">{{ $label }}</option>@endforeach
        </select>
    </label>
    <label>Volume (MT)
        <input type="number" name="volume_mt" min="1" step="0.01" value="{{ old('volume_mt') }}" class="{{ $input }}" required>
    </label>
    <label>Grade (optional)
        <input type="text" name="grade" value="{{ old('grade') }}" placeholder="e.g. CP10" class="{{ $input }}">
    </label>
    <label>Incoterm
        <select name="incoterm" x-model="incoterm" class="{{ $input }}" required>
            @foreach (config('drixem.incoterms') as $term)<option>{{ $term }}</option>@endforeach
        </select>
    </label>
    <label>Payment
        <select name="payment_method" class="{{ $input }}" required>
            @foreach (config('drixem.payment_methods') as $key => $label)
                @if ($key !== 'EXIM_FINANCING' || config('drixem.exim_financing_enabled'))
                    <option value="{{ $key }}" @selected(old('payment_method') === $key)>{{ $label }}</option>
                @endif
            @endforeach
        </select>
    </label>
    <label>Destination port
        <input type="text" name="destination_port" value="{{ old('destination_port') }}" placeholder="e.g. Nhava Sheva" class="{{ $input }}" required>
    </label>
    <label>Destination country
        <input type="text" name="destination_country" value="{{ old('destination_country') }}" maxlength="2" placeholder="IN" class="{{ $input }} uppercase" required>
    </label>
    <label>Delivery from
        <input type="date" name="delivery_from" value="{{ old('delivery_from') }}" class="{{ $input }}" required>
    </label>
    <label>Delivery to
        <input type="date" name="delivery_to" value="{{ old('delivery_to') }}" class="{{ $input }}" required>
    </label>

    <details class="col-span-2 rounded border border-slate-200 p-3">
        <summary class="cursor-pointer font-medium">Quality &amp; certification requirements (optional)</summary>
        <div class="mt-3 grid grid-cols-2 gap-3">
            <label>Max FFA %
                <input type="number" name="max_ffa_pct" step="0.01" min="0" value="{{ old('max_ffa_pct') }}" class="{{ $input }}">
            </label>
            <label>Target price (USD/MT)
                <input type="number" name="target_price_usd_per_mt" step="0.01" min="1" value="{{ old('target_price_usd_per_mt') }}" class="{{ $input }}">
            </label>
            <label>Preferred origin
                <select name="preferred_origin" class="{{ $input }}">
                    <option value="">Any</option>
                    @foreach (config('drixem.origins') as $key => $label)<option value="{{ $key }}">{{ $label }}</option>@endforeach
                </select>
            </label>
            <div class="flex flex-col justify-end gap-1">
                <label><input type="checkbox" name="require_rspo" value="1"> RSPO</label>
                <label><input type="checkbox" name="require_mspo" value="1"> MSPO</label>
                <label><input type="checkbox" name="require_halal" value="1"> JAKIM Halal</label>
            </div>
            <label class="col-span-2">Notes
                <textarea name="notes" rows="2" class="{{ $input }}">{{ old('notes') }}</textarea>
            </label>
        </div>
    </details>

    <button class="col-span-2 rounded bg-crimson px-4 py-3 font-semibold text-white hover:bg-crimson-dark">Submit RFQ to verified mills</button>
</form>