@extends('layouts.shell')
@section('title', $product->title)

@section('content')
<a href="{{ route('products.index') }}" class="mb-4 inline-flex items-center gap-1 text-sm text-qr-muted">
    <x-icon name="arrow-left" class="w-4 h-4"/> Katalog
</a>

<div class="card overflow-hidden">
    <div class="aspect-square bg-qr-surface2 grid place-items-center">
        @if($product->image)<img src="{{ $product->imageUrl() }}" class="h-full w-full object-cover" alt="">
        @else<x-icon name="shopping" class="w-16 h-16 text-qr-muted"/>@endif
    </div>
    <div class="p-5">
        <h1 class="text-xl font-extrabold">{{ $product->title }}</h1>
        <p class="mt-1 text-2xl font-extrabold text-qr-accent-light">Rp{{ number_format($product->price,0,',','.') }}</p>
        <p class="mt-3 text-sm text-qr-muted leading-relaxed">{{ $product->description }}</p>
        <a href="{{ route('products.checkout', $product->slug) }}" target="_blank" rel="noopener" class="btn-filled mt-5 w-full">
            <x-icon name="shopping" class="w-5 h-5"/> Beli di Marketplace
        </a>
        <p class="mt-2 text-center text-caption text-muted">Terbuka di tab baru menuju marketplace.</p>
    </div>
</div>
@endsection