@extends('layouts.app')
@section('title', $listing->title)

@section('content')
@php($viewer = auth()->user())
<div class="grid gap-6 lg:grid-cols-[1fr_420px]">
    <section class="rounded-lg border border-slate-200 bg-white p-5">
        <div class="flex flex-wrap gap-1.5 text-[11px] font-semibold">
            <span class="rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">✔ {{ $listing->seller->badgeLabel() ?? 'Verification pending' }}</span>
            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-slate-700">Zero-Markup Direct Trade</span>
            @if ($listing->showsEximBadge())<span class="rounded-full bg-red-50 px-2 py-0.5 text-crimson">Exim Bank Financing Available</span>@endif
        </div>
        <h1 class="mt-3 text-2xl font-bold">{{ $listing->title }}</h1>
        <p class="text-sm text-slate-500">{{ $listing->productLabel() }} · {{ config('drixem.origins.'.$listing->origin_country, $listing->origin_country) }}</p>

        <dl class="mt-5 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
            @foreach ([
                'Grade' => $listing->grade ?? '—',
                'FFA' => $listing->ffa_pct !== null ? $listing->ffa_pct.'%' : '—',
                'Moisture & Impurities' => $listing->moisture_impurities_pct !== null ? $listing->moisture_impurities_pct.'%' : '—',
                'Iodine Value' => $listing->iodine_value ?? '—',
                'Available' => number_format($listing->available_mt).' MT',
                'MOQ' => number_format($listing->moq_mt).' MT',
                'Incoterm' => $listing->incoterm,
                'Loading port' => $listing->loading_port ?? '—',
                'Packaging' => $listing->packaging ?? '—',
                'Certifications' => implode(', ', $listing->certifications()) ?: '—',
                'Mill price' => $listing->price_usd_per_mt ? 'USD '.number_format($listing->price_usd_per_mt, 2).'/MT' : 'On RFQ',
                'Price valid until' => $listing->price_valid_until?->format('d M Y') ?? '—',
            ] as $label => $value)
                <div class="rounded bg-slate-50 p-3"><dt class="text-xs text-slate-500">{{ $label }}</dt><dd class="font-semibold">{{ $value }}</dd></div>
            @endforeach
        </dl>

        <div class="mt-5 rounded border border-slate-200 p-4 text-sm">
            <h2 class="font-semibold">Supplier</h2>
            @if ($viewer?->isApproved())
                <p class="mt-1">{{ $listing->seller->company_name }} ({{ $listing->seller->country }})</p>
                <p class="text-slate-600">Reg. no. {{ $listing->seller->company_reg_no ?? '—' }} · Verified {{ $listing->seller->approved_at?->format('M Y') }}</p>
            @else
                <p class="mt-1 text-slate-600">Supplier identity and contacts are shown only to verified accounts.</p>
            @endif
        </div>
    </section>

    <aside class="h-fit rounded-lg border border-slate-200 bg-white p-5">
        <h2 class="mb-3 text-lg font-bold">Request a quote</h2>
        @if ($viewer?->role === 'buyer' && $viewer->isApproved())
            <div x-data="{ listingId: {{ $listing->id }}, product: '{{ $listing->product }}', incoterm: '{{ $listing->incoterm }}' }">
                @include('partials.rfq-form')
            </div>
        @elseif ($viewer?->role === 'buyer')
            <a href="{{ route('kyc.index') }}" class="block rounded border border-amber-600 px-4 py-3 text-center font-semibold text-amber-700">Complete verification to request quotes</a>
        @elseif (! $viewer)
            <a href="{{ route('register') }}" class="block rounded bg-crimson px-4 py-3 text-center font-semibold text-white">Get verified to request a quote</a>
            <p class="mt-2 text-center text-sm"><a href="{{ route('login') }}" class="underline">Already verified? Sign in</a></p>
        @else
            <p class="text-sm text-slate-600">Only verified buyer accounts can request quotes.</p>
        @endif
    </aside>
</div>
@endsection