@extends('layouts.app')

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-title-md font-semibold text-gray-800 dark:text-white/90">{{ $product->name }}</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Stock') }}: {{ $product->sku }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('products.label', $product) }}"
                class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300">
                {{ __('Print Label') }}
            </a>
            <a href="{{ route('products.edit', $product) }}"
                class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300">
                {{ __('Edit Product') }}
            </a>
            @if (auth()->user()->isOwner() || auth()->user()->isAdmin())
                <form method="POST" action="{{ route('products.destroy', $product) }}">
                    @csrf
                    @method('DELETE')
                    <button class="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600">
                        {{ __('Delete') }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    @if (session('success'))
        <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-sm text-green-700">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">{{ __('Details') }}</h3>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <p class="text-xs text-gray-500">{{ __('Unit Price') }}</p>
                        <p class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ number_format($product->unit_price, 2) }} {{ config('stockiny.currency') }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">{{ __('On hand') }}</p>
                        <p class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $product->quantity_on_hand }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">{{ __('Min Stock') }}</p>
                        <p class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $product->min_stock }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">{{ __('Location') }}</p>
                        <p class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $product->location ?? '—' }}</p>
                    </div>
                </div>
                @if ($product->description)
                    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                        {{ $product->description }}
                    </div>
                @endif
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">{{ __('Recent movements') }}</h3>
                <div class="space-y-3">
                    @forelse ($product->stockMovements as $movement)
                        <div class="flex items-center justify-between rounded-lg border border-gray-100 p-3 dark:border-gray-800">
                            <div>
                                <p class="text-sm font-medium text-gray-800 dark:text-white/90">{{ __(\Illuminate\Support\Str::headline($movement->type)) }}</p>
                                <p class="text-xs text-gray-500">{{ $movement->occurred_at->translatedFormat('M d, Y H:i') }}</p>
                            </div>
                            <span class="text-sm font-semibold {{ $movement->type === 'out' ? 'text-red-500' : 'text-green-500' }}">
                                {{ $movement->type === 'out' ? '-' : '+' }}{{ $movement->quantity }}
                            </span>
                        </div>
                    @empty
                        <p class="text-sm text-gray-500">{{ __('No recent movement.') }}</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
            <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">{{ __('QR Code') }}</h3>
            <div class="flex items-center justify-center rounded-lg border border-dashed border-gray-200 p-4 dark:border-gray-800">
                <img
                    src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data={{ urlencode($product->sku) }}"
                    alt="{{ __('QR Code') }} {{ $product->sku }}"
                    class="h-44 w-44"
                    loading="eager"
                    decoding="sync" />
            </div>
            <p class="mt-3 text-xs text-gray-500">{{ __('Scan to reference Stock: :sku', ['sku' => $product->sku]) }}</p>
        </div>
    </div>
@endsection