@extends('layouts.public')

@section('content')
<div class="grid lg:grid-cols-2 gap-8">
    <div class="bg-white rounded-xl shadow p-4">
        <div class="aspect-video rounded overflow-hidden bg-black">
            @if($product->video_url)
                <iframe class="w-full h-full" src="{{ $product->video_url }}" frameborder="0" allowfullscreen></iframe>
            @else
                <div class="w-full h-full flex items-center justify-center text-white">
                    No video yet
                </div>
            @endif
        </div>
    </div>

    <div>
        <h1 class="text-3xl font-extrabold">{{ $product->name }}</h1>
        <p class="mt-3 text-gray-700">{{ $product->description }}</p>

        <div class="mt-6 text-2xl font-bold">{{ $product->price_formatted }}</div>

        @auth
            <form class="mt-6 flex gap-3 items-center" method="POST" action="{{ route('cart.add', $product) }}">
                @csrf
                <input type="number" name="quantity" value="1" min="1"
                       class="w-24 rounded border-gray-300" />
                <button class="px-5 py-3 rounded bg-black text-white">
                    Add to Cart
                </button>
            </form>
        @else
            <div class="mt-6 p-4 rounded bg-yellow-50 border">
                Please <a class="underline" href="{{ route('login') }}">login</a> to purchase.
            </div>
        @endauth
    </div>
</div>
@endsection