@extends('layouts.app')
@section('title', 'Marketplace')

@section('content')
@php($input = 'mt-1 w-full rounded border border-slate-300 px-2 py-1.5 text-sm')
<div x-data="{
        modal: {{ $errors->any() && old('destination_port') !== null ? 'true' : 'false' }},
        filters: false,
        listingId: '', product: '{{ old('product', 'CPO') }}', incoterm: '{{ old('incoterm', 'FOB') }}',
        openRfq(id, product, incoterm) { this.listingId = id; this.product = product; this.incoterm = incoterm; this.modal = true; }
     }">

    <div class="flex items-center justify-between gap-3">
        <h1 class="text-xl font-bold">Mill-direct listings</h1>
        <div class="flex gap-2">
            <button class="rounded border border-slate-300 bg-white px-3 py-2 text-sm lg:hidden" @click="filters = !filters">Filters</button>
            @if (auth()->user()?->role === 'buyer' && auth()->user()->isApproved())
                <button class="rounded bg-crimson px-3 py-2 text-sm font-semibold text-white" @click="openRfq('', 'CPO', 'FOB')">+ New RFQ</button>
            @endif
        </div>
    </div>

    <div class="mt-4 grid gap-6 lg:grid-cols-[260px_1fr]">
        {{-- Filters --}}
        <form method="GET" class="h-fit space-y-3 rounded-lg border border-slate-200 bg-white p-4 text-sm lg:block"
              :class="filters ? 'block' : 'hidden'">
            <label class="block">Product
                <select name="product" class="{{ $input }}">
                    <option value="">All products</option>
                    @foreach (config('drixem.products') as $key => $label)
                        <option value="{{ $key }}" @selected(($filters['product'] ?? '') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
            <label class="block">Grade <input type="text" name="grade" value="{{ $filters['grade'] ?? '' }}" class="{{ $input }}"></label>
            <div class="grid grid-cols-2 gap-2">
                <label>Max FFA % <input type="number" step="0.01" name="ffa_max" value="{{ $filters['ffa_max'] ?? '' }}" class="{{ $input }}"></label>
                <label>Max M&amp;I % <input type="number" step="0.01" name="mi_max" value="{{ $filters['mi_max'] ?? '' }}" class="{{ $input }}"></label>
                <label>IV min <input type="number" step="0.1" name="iv_min" value="{{ $filters['iv_min'] ?? '' }}" class="{{ $input }}"></label>
                <label>IV max <input type="number" step="0.1" name="iv_max" value="{{ $filters['iv_max'] ?? '' }}" class="{{ $input }}"></label>
            </div>
            <fieldset>
                <legend>Certification</legend>
                @foreach (['rspo' => 'RSPO', 'mspo' => 'MSPO', 'halal' => 'JAKIM Halal'] as $key => $label)
                    <label class="mr-3 inline-flex items-center gap-1">
                        <input type="checkbox" name="cert[]" value="{{ $key }}" @checked(in_array($key, $filters['cert'] ?? []))> {{ $label }}
                    </label>
                @endforeach
            </fieldset>
            <label class="block">Origin
                <select name="origin" class="{{ $input }}">
                    <option value="">Any</option>
                    @foreach (config('drixem.origins') as $key => $label)
                        <option value="{{ $key }}" @selected(($filters['origin'] ?? '') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
            <label class="block">My volume (MT) <input type="number" name="volume_mt" value="{{ $filters['volume_mt'] ?? '' }}" placeholder="Shows listings with MOQ ≤ this" class="{{ $input }}"></label>
            <label class="block">Incoterm
                <select name="incoterm" class="{{ $input }}">
                    <option value="">Any</option>
                    @foreach (config('drixem.incoterms') as $term)
                        <option @selected(($filters['incoterm'] ?? '') === $term)>{{ $term }}</option>
                    @endforeach
                </select>
            </label>
            <div class="flex gap-2">
                <button class="flex-1 rounded bg-slate-900 px-3 py-2 font-semibold text-white">Apply</button>
                <a href="{{ route('marketplace.index') }}" class="rounded border border-slate-300 px-3 py-2">Reset</a>
            </div>
        </form>

        {{-- Grid --}}
        <div>
            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                @forelse ($listings as $l)
                    @include('partials.listing-card', ['l' => $l, 'rfqButton' => true])
                @empty
                    <p class="col-span-full rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                        No listings match these filters yet.
                    </p>
                @endforelse
            </div>
            <div class="mt-6">{{ $listings->links() }}</div>
        </div>
    </div>

    {{-- RFQ modal --}}
    <div x-show="modal" x-cloak class="fixed inset-0 z-50 flex items-end justify-center bg-slate-900/60 sm:items-center" @keydown.escape.window="modal = false">
        <div class="max-h-[92vh] w-full overflow-y-auto rounded-t-xl bg-white p-5 sm:max-w-xl sm:rounded-xl" @click.outside="modal = false">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-lg font-bold">Request for Quotation</h2>
                <button type="button" class="text-2xl leading-none text-slate-400" @click="modal = false" aria-label="Close">&times;</button>
            </div>
            @if (auth()->user()?->role === 'buyer' && auth()->user()->isApproved())
                @include('partials.rfq-form')
            @endif
        </div>
    </div>
</div>
@endsection