@extends('layouts.app')
@section('title', $product->name)
@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="grid md:grid-cols-2 gap-8">
        <div>
            <img id="product-main-image" src="{{ asset($product->image) }}" alt="{{ $product->name }}" class="w-full h-80 object-cover rounded-lg shadow">
            <div class="thumbnail-grid grid-cols-4 gap-2 mt-4">
                @foreach($product->gallery as $image)
                    <img src="{{ asset($image) }}" data-large="{{ asset($image) }}" data-gallery-thumb class="w-full h-20 object-cover rounded cursor-pointer">
                @endforeach
            </div>
        </div>
        <div>
            <h1 class="text-3xl font-bold">{{ $product->name }}</h1>
            <div class="mt-4 flex items-baseline gap-4">
                <span class="text-3xl font-bold text-red-500">{{ number_format($product->price, 2) }} BDT</span>
            </div>
            <p class="mt-4">{{ $product->description }}</p>
            
            <form action="{{ route('cart.add') }}" method="POST" data-ajax-cart class="mt-6">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <div class="flex items-center gap-4">
                    <div data-qty-control class="flex items-center border rounded">
                        <button type="button" data-qty-minus class="px-3 py-2">-</button>
                        <input type="number" name="quantity" value="1" min="1" class="w-16 text-center border-0">
                        <button type="button" data-qty-plus class="px-3 py-2">+</button>
                    </div>
                    <button type="submit" class="btn-primary"><i class="fas fa-cart-plus mr-2"></i> {{ __('messages.add_to_cart') }}</button>
                </div>
            </form>
            <div class="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
                <i class="fas fa-undo text-red-500 mr-2"></i> @lang('messages.return_within', ['days' => 7])
            </div>
        </div>
    </div>
</div>
@endsection