@extends('shop.layout')
@section('title', $part->name)
@section('content')
@php
    $currency = $tenant->settings['currency'] ?? 'MDL';
    $stock = (float) $part->qty;
    $imgs = $part->imageUrls();
@endphp

<a href="/shop" class="muted">← Înapoi la catalog</a>

@if (! empty($imgs))
    <div class="card" style="margin-top:12px;display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start;">
        <div>
            <div style="border-radius:10px;overflow:hidden;aspect-ratio:1;background:#f9fafb;border:1px solid #e5e7eb;">
                <img id="gallery-main" src="{{ $imgs[0] }}" alt="{{ $part->name }}" style="width:100%;height:100%;object-fit:cover;display:block;">
            </div>
            @if (count($imgs) > 1)
                <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;">
                    @foreach ($imgs as $i => $url)
                        <button type="button" data-gallery-src="{{ $url }}" data-gallery-index="{{ $i }}"
                                class="gallery-thumb {{ $i === 0 ? 'thumb-active' : '' }}"
                                style="width:54px;height:54px;border-radius:6px;overflow:hidden;padding:0;cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;">
                            <img src="{{ $url }}" style="width:100%;height:100%;object-fit:cover;display:block;">
                        </button>
                    @endforeach
                </div>
                <style>.thumb-active { border: 2px solid #3b82f6 !important; }</style>
                <script>
                    document.querySelectorAll('.gallery-thumb').forEach(btn => {
                        btn.addEventListener('click', () => {
                            document.getElementById('gallery-main').src = btn.dataset.gallerySrc;
                            document.querySelectorAll('.gallery-thumb').forEach(b => b.classList.remove('thumb-active'));
                            btn.classList.add('thumb-active');
                        });
                    });
                </script>
            @endif
        </div>
        <div>
@else
<div class="card" style="margin-top:12px;">
@endif
    <h1 style="font-size:22px;margin-bottom:8px;">{{ $part->name }}</h1>
    <div class="muted" style="margin-bottom:14px;">
        {{ $part->brand ? 'Brand: ' . $part->brand : '' }}
        {{ $part->article ? ' · Cod: ' . $part->article : '' }}
        {{ $part->category ? ' · ' . $part->category : '' }}
    </div>

    <div class="stock {{ $stock > 0 ? 'in' : 'out' }}" style="margin-bottom:8px;">
        {{ $stock > 0 ? '● În stoc (' . rtrim(rtrim(number_format($stock, 2), '0'), '.') . ' ' . ($part->unit ?? 'buc') . ')' : '○ La comandă' }}
    </div>
    <div style="font-size:26px;font-weight:700;color:{{ $tenant->settings['theme_color'] ?? '#3B82F6' }};margin-bottom:16px;">
        {{ number_format((float) $part->sell_price, 2) }} {{ $currency }}
    </div>

    <form method="POST" action="/shop/part/{{ $part->id }}/add" style="display:flex;gap:8px;align-items:center;max-width:320px;">
        @csrf
        <input type="number" name="qty" value="1" min="1" style="width:80px;padding:10px;border:1px solid #d1d5db;border-radius:8px;">
        <button class="btn" type="submit">Adaugă în coș</button>
    </form>

    @if ($part->crossRefs->isNotEmpty())
        <div style="margin-top:20px;">
            <h3 style="font-size:14px;margin-bottom:6px;">Coduri echivalente (cross)</h3>
            <div class="muted">
                @foreach ($part->crossRefs as $cr)
                    <span style="display:inline-block;background:#f3f4f6;border-radius:6px;padding:3px 8px;margin:2px;">
                        {{ $cr->cross_article }}{{ $cr->brand ? ' (' . $cr->brand . ')' : '' }}
                    </span>
                @endforeach
            </div>
        </div>
    @endif

    @if ($part->notes)
        <div style="margin-top:20px;">
            <h3 style="font-size:14px;margin-bottom:6px;">Descriere</h3>
            <p class="muted" style="white-space:pre-wrap;">{{ $part->notes }}</p>
        </div>
    @endif
@if ($img)
        </div>{{-- /right column --}}
    </div>{{-- /card grid --}}
@else
</div>{{-- /card --}}
@endif
@endsection