@extends('admin::layouts.master')

@section('title', "Cart Item #{$cartItem->id}")

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.cart-items.index') }}" class="p-2 rounded-lg hover:bg-gray-200 text-gray-500 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Cart Item #{{ $cartItem->id }}</h1>
                <p class="text-sm text-gray-500">Added {{ $cartItem->created_at->diffForHumans() }}</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.cart-items.index') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">Back to List</a>
            <form action="{{ route('admin.cart-items.destroy', $cartItem->id) }}" method="POST" onsubmit="return confirm('Delete this cart item?')" class="inline">
                @csrf @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition">Delete</button>
            </form>
        </div>
    </div>

    <div class="bg-white border rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b bg-gray-50">
            <h2 class="font-semibold text-gray-900">Product Information</h2>
        </div>
        <div class="p-6">
            <div class="flex gap-6">
                @if($cartItem->image_url)
                    <div class="shrink-0">
                        <img src="{{ $cartItem->image_url }}" alt="{{ $cartItem->product_name }}" class="w-28 h-28 object-cover rounded-lg border">
                    </div>
                @endif
                <div class="flex-1 grid grid-cols-2 gap-x-8 gap-y-4">
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Product ID</p>
                        <p class="mt-1 text-sm text-gray-900 font-mono">{{ $cartItem->product_id }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Product Name</p>
                        <p class="mt-1 text-sm text-gray-900 font-medium">{{ $cartItem->product_name }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Unit</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $cartItem->unit ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Unit Price</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $cartItem->unit_price ? '&euro;' . number_format($cartItem->unit_price, 2) : '-' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white border rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b bg-gray-50">
                <h2 class="font-semibold text-gray-900">Pricing & Quantity</h2>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Price per unit</span>
                    <span class="text-sm font-medium text-gray-900">&euro;{{ number_format($cartItem->price, 2) }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Quantity</span>
                    <span class="text-sm font-medium text-gray-900">{{ $cartItem->quantity }}</span>
                </div>
                <div class="border-t pt-4 flex justify-between items-center">
                    <span class="text-sm font-semibold text-gray-900">Subtotal</span>
                    <span class="text-lg font-bold text-blue-600">&euro;{{ number_format($cartItem->price * $cartItem->quantity, 2) }}</span>
                </div>
            </div>
        </div>

        <div class="bg-white border rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b bg-gray-50">
                <h2 class="font-semibold text-gray-900">Session Details</h2>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Session ID</p>
                    <p class="mt-1 text-sm text-gray-900 font-mono break-all">{{ $cartItem->session_id }}</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Created</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $cartItem->created_at->format('d M Y H:i') }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Updated</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $cartItem->updated_at->format('d M Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection