@extends('shop.layout')
@section('title', __('portal.shop.vin_title'))
@section('content')

<div class="card">
    <h1 style="font-size:20px;margin-bottom:6px;">{{ __('portal.shop.vin_title') }}</h1>
    <p class="muted" style="margin-bottom:16px;">{{ __('portal.shop.vin_intro') }}</p>

    <form method="GET" action="/shop/vin" style="display:flex;gap:8px;flex-wrap:wrap;">
        <input type="text" name="vin" value="{{ $vin }}" maxlength="17" placeholder="ex: WVWZZZ1JZXW000001"
               style="flex:1;min-width:240px;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-family:monospace;text-transform:uppercase;">
        <button class="btn" type="submit">{{ __('portal.shop.vin_decode') }}</button>
    </form>
</div>

@if ($decoded)
    <div class="card" style="margin-top:14px;">
        @if (! ($decoded['valid_length'] ?? false))
            <p class="stock out">{{ $decoded['reason'] ?? __('portal.shop.vin_invalid') }}</p>
        @else
            <h3 style="font-size:16px;margin-bottom:10px;">{{ __('portal.shop.vin_identified') }}</h3>
            <table class="cart">
                <tr><td>{{ __('portal.shop.vin_manufacturer') }}</td><td class="r"><strong>{{ $decoded['manufacturer'] ?? '—' }}</strong></td></tr>
                <tr><td>{{ __('portal.shop.vin_year') }}</td><td class="r"><strong>{{ $decoded['year'] ?? '—' }}</strong></td></tr>
                <tr><td>{{ __('portal.shop.vin_country') }}</td><td class="r">{{ $decoded['country'] ?? '—' }}</td></tr>
                <tr><td>{{ __('portal.shop.vin_region') }}</td><td class="r">{{ $decoded['region'] ?? '—' }}</td></tr>
            </table>
            <div style="margin-top:14px;">
                <a class="btn outline" href="/shop?q={{ urlencode($decoded['manufacturer'] ?? '') }}">
                    {{ __('portal.shop.vin_search_parts', ['maker' => $decoded['manufacturer'] ?? __('portal.shop.this_car')]) }}
                </a>
            </div>
            <p class="muted" style="margin-top:12px;">
                {{ __('portal.shop.vin_contact_note') }}
            </p>
        @endif
    </div>
@endif
@endsection