@extends('layouts.store')

@section('content')
<section class="max-w-screen-2xl mx-auto px-5 md:px-8 py-10 md:py-16">
    <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-start">
        <div class="bg-white rounded-xl overflow-hidden shadow-sm">
            <img src="{{ $product->image ?? 'https://picsum.photos/seed/default/800/600' }}" alt="{{ $product->name }}" class="w-full object-cover aspect-square">
        </div>
        <div class="bg-surface-container-low rounded-xl p-6 md:p-8">
            <h1 class="text-3xl md:text-4xl font-headline font-extrabold text-primary">{{ $product->name }}</h1>
            <p class="text-on-surface-variant mt-3">{{ $product->short_description }}</p>
            <p class="mt-4">{{ $product->description }}</p>
            <div class="text-3xl font-extrabold text-primary mt-6">₹{{ number_format($product->price * 85, 0) }}</div>
            <form action="{{ route('store.cart.add', $product) }}" method="POST" class="mt-6 space-y-4">
            @csrf
            <div class="flex gap-2">
                <button type="button" data-qty-minus class="h-11 w-11 rounded-md bg-white text-primary font-bold border">-</button>
                <input class="h-11 w-20 rounded-md border px-3 text-center" type="number" min="1" name="quantity" value="1">
                <button type="button" data-qty-plus class="h-11 w-11 rounded-md bg-white text-primary font-bold border">+</button>
            </div>
            <button class="bg-primary text-white px-6 py-3 rounded-md font-bold" type="submit">Add to Cart</button>
        </form>
        </div>
    </div>
</section>
@push('scripts')
<script src="{{ asset('js/store.js') }}"></script>
@endpush
@endsection