@extends('layouts.app')

@section('title', 'Detail Produk')

@section('content')
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ route('products.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                Kembali ke Daftar Produk
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Product Image -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                <img class="w-full h-96 object-cover" src="{{ $product->image ? asset('storage/' . $product->image) : 'https://via.placeholder.com/900x600?text=No+Image' }}" alt="{{ $product->name }}">
            </div>

            <!-- Product Details -->
            <div class="space-y-6">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $product->name }}</h1>
                    <p class="text-gray-600">ID Produk: #{{ $product->id }}</p>
                </div>

                <div class="text-4xl font-bold text-green-600">
                    Rp {{ number_format($product->price, 0, ',', '.') }}
                </div>

                <div class="prose max-w-none">
                    <h3 class="text-lg font-semibold mb-2">Deskripsi Produk</h3>
                    <p class="text-gray-700 mb-4">{{ $product->description ?: 'Deskripsi belum ditambahkan.' }}</p>

                    <h3 class="text-lg font-semibold mb-2">Spesifikasi</h3>
                    <ul class="list-disc list-inside text-gray-700 space-y-1">
                        <li>Nama produk: {{ $product->name }}</li>
                        <li>Harga: Rp {{ number_format($product->price, 0, ',', '.') }}</li>
                        <li>Stok: {{ $product->stock ?? 'Tidak tersedia' }}</li>
                        <li>Kategori: {{ $product->category ?: 'Umum' }}</li>
                        <li>Status: {{ ucfirst($product->status ?: 'Tidak diketahui') }}</li>
                    </ul>
                </div>

                <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                    <a href="{{ route('orders.create', ['product_id' => $product->id]) }}" class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-semibold flex-1 text-center">
                        Checkout Cepat
                    </a>
                    <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-3 rounded-lg font-semibold">
                        Tambah ke Wishlist
                    </button>
                </div>
                <div class="mt-3 text-sm text-gray-600">
                    <span class="font-semibold">Info checkout:</span> Jika Anda pelanggan, gunakan tombol "Checkout Cepat" untuk langsung mengisi detail pemesanan.
                </div>

                <!-- Action Buttons for Admin -->
                <div class="border-t pt-6">
                @if(Auth::check() && Auth::user()->role === 'admin')
                    <div class="flex space-x-4">
                        <a href="{{ route('products.edit', $product) }}" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded font-medium">
                            Edit Produk
                        </a>
                        <form method="POST" action="{{ route('products.destroy', $product) }}" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded font-medium"
                                    onclick="return confirm('Apakah Anda yakin ingin menghapus produk ini?')">
                                Hapus Produk
                            </button>
                        </form>
                    </div>
                @endif
                </div>
            </div>
        </div>

        <!-- Related Products -->
        <div class="mt-12">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Produk Terkait</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @for($i = 1; $i <= 3; $i++)
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-xl transition-shadow duration-300">
                    <img class="w-full h-32 object-cover" src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=300" alt="Related Product">
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900">Adenium Bicolor #{{ $i }}</h3>
                        <p class="text-gray-600 text-sm">Rp {{ number_format(175000 + ($i * 15000), 0, ',', '.') }}</p>
                    </div>
                </div>
                @endfor
            </div>
        </div>
    </div>
</div>
@endsection