@extends('public.layout')

@php
    $money = fn ($v) => $shop->currency.' '.number_format((float) $v, 2);
    $desc = \Illuminate\Support\Str::limit(strip_tags($product->description ?: $product->name.' — cash on delivery from '.$shop->name), 200);
    $withTax = bcadd((string) $product->sale_price, bcmul((string) $product->sale_price, bcdiv((string) $product->tax_rate, '100', 6), 2), 2);
@endphp

@section('title', $product->name.' · '.$shop->name)

@section('meta')
    <meta name="description" content="{{ $desc }}">
    <link rel="canonical" href="{{ $url }}">
    <meta property="og:type" content="product">
    <meta property="og:site_name" content="{{ $shop->name }}">
    <meta property="og:title" content="{{ $product->name }} — {{ $money($withTax) }}">
    <meta property="og:description" content="{{ $desc }}">
    <meta property="og:url" content="{{ $url }}">
    @if ($image)
        <meta property="og:image" content="{{ $image }}">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:image" content="{{ $image }}">
    @else
        <meta name="twitter:card" content="summary">
    @endif
    <meta property="product:price:amount" content="{{ $withTax }}">
    <meta property="product:price:currency" content="{{ $shop->currency }}">
    <meta property="product:availability" content="{{ $inStock ? 'in stock' : 'out of stock' }}">
    <meta name="twitter:title" content="{{ $product->name }}">
    <meta name="twitter:description" content="{{ $desc }}">
@endsection

@section('content')
    <div class="overflow-hidden rounded-xl bg-white shadow-sm">
        @if ($image)
            <img src="{{ $image }}" alt="{{ $product->name }}" class="aspect-square w-full bg-gray-50 object-cover">
        @endif

        <div class="space-y-4 p-5">
            <div>
                <h1 class="text-xl font-bold">{{ $product->name }}</h1>
                <div class="mt-1 flex items-baseline gap-2">
                    <span class="text-2xl font-bold text-indigo-700">{{ $money($withTax) }}</span>
                    <span class="text-sm text-gray-500">per {{ $product->unit }}@if ((float) $product->tax_rate > 0) · incl. {{ rtrim(rtrim((string) $product->tax_rate, '0'), '.') }}% tax @endif</span>
                </div>
                <span class="mt-2 inline-block rounded-full px-2.5 py-0.5 text-xs font-medium {{ $inStock ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">{{ $inStock ? 'In stock' : 'Out of stock' }}</span>
            </div>

            @if ($product->description)
                <p class="whitespace-pre-line text-sm text-gray-600">{{ $product->description }}</p>
            @endif
        </div>
    </div>

    @if ($inStock)
        <form method="POST" action="{{ route('public.order', ['shop' => $shop->slug, 'product' => request()->route('product')]) }}" class="mt-5 space-y-4 rounded-xl bg-white p-5 shadow-sm">
            @csrf
            <div>
                <h2 class="text-lg font-semibold">Order now · pay cash on delivery</h2>
                <p class="text-sm text-gray-500">Fill in your details. The shop will call you to confirm.</p>
            </div>

            @if ($errors->any())
                <div class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
                    <ul class="list-disc ps-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            @php $field = 'mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500'; @endphp

            <div>
                <label for="name" class="text-sm font-medium text-gray-700">Your name</label>
                <input id="name" name="name" value="{{ old('name') }}" required maxlength="120" autocomplete="name" class="{{ $field }}">
            </div>
            <div>
                <label for="phone" class="text-sm font-medium text-gray-700">Phone number</label>
                <input id="phone" name="phone" value="{{ old('phone') }}" required inputmode="tel" autocomplete="tel" class="{{ $field }}" placeholder="01XXXXXXXXX">
            </div>
            <div>
                <label for="address" class="text-sm font-medium text-gray-700">Delivery address</label>
                <textarea id="address" name="address" rows="3" required maxlength="500" autocomplete="street-address" class="{{ $field }}">{{ old('address') }}</textarea>
            </div>
            <div>
                <label for="quantity" class="text-sm font-medium text-gray-700">Quantity ({{ $product->unit }})</label>
                <input id="quantity" name="quantity" type="number" value="{{ old('quantity', 1) }}" min="{{ $whole ? 1 : 0.001 }}" step="{{ $whole ? 1 : 0.001 }}" required class="{{ $field }}">
            </div>
            <div>
                <label for="note" class="text-sm font-medium text-gray-700">Note <span class="font-normal text-gray-400">(optional)</span></label>
                <input id="note" name="note" value="{{ old('note') }}" maxlength="500" class="{{ $field }}">
            </div>

            {{-- Honeypot: hidden from people, irresistible to bots. --}}
            <div class="absolute -left-[9999px]" aria-hidden="true">
                <label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
            </div>

            <button class="w-full rounded-lg bg-indigo-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">Place order (cash on delivery)</button>
            <p class="text-center text-xs text-gray-400">No online payment. You pay the delivery person.</p>
        </form>
    @endif
@endsection