@extends('layouts.admin')

@section('title', 'Product Details')

@section('page-title', 'Product Details')

@section('breadcrumbs')
    <a href="{{ route('admin.products.index') }}" class="hover:text-primary">Products</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $product->name }}</span>
@endsection

@section('content')
<div class="max-w-5xl mx-auto">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-900">{{ $product->name }}</h1>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.products.edit', $product->id) }}" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-lg">edit</span>
                Edit
            </a>
            <a href="{{ route('admin.products.index') }}" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                Back to List
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Information -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Product Image & Basic Info -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Product Information</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Product Image</label>
                            @if($product->image)
                                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-32 h-32 rounded-lg object-cover">
                            @else
                                <div class="w-32 h-32 rounded-lg bg-gray-200 flex items-center justify-center">
                                    <span class="material-symbols-outlined text-gray-400 text-4xl">inventory_2</span>
                                </div>
                            @endif
                        </div>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                                <p class="text-gray-900">{{ $product->name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Code</label>
                                <p class="text-gray-900 font-mono">{{ $product->code ?? '-' }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $product->type === 'service' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800' }}">
                                    {{ ucfirst($product->type) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            @if($product->description)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Description</h2>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 whitespace-pre-wrap">{{ $product->description }}</p>
                </div>
            </div>
            @endif

            <!-- Gallery Images -->
            @if($product->gallery_images && count($product->gallery_images) > 0)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Gallery Images</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-4 gap-4">
                        @foreach($product->gallery_images as $galleryImage)
                            <img src="{{ asset('storage/' . $galleryImage) }}" alt="Gallery Image" class="w-full h-24 object-cover rounded-lg">
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Category & Brand -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Details</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                        <p class="text-gray-900">{{ $product->category->name ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Brand</label>
                        <p class="text-gray-900">{{ $product->brand->name ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Unit</label>
                        <p class="text-gray-900">{{ $product->unit ? $product->unit->name . ' (' . $product->unit->short_name . ')' : '-' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tax</label>
                        <p class="text-gray-900">{{ $product->tax ? $product->tax->name . ' (' . $product->tax->rate . '%)' : '-' }}</p>
                    </div>
                </div>
            </div>

            <!-- Pricing -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Pricing</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Selling Price</label>
                        <p class="text-gray-900 font-semibold text-lg">{{ number_format($product->selling_price, 2) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Purchase Price</label>
                        <p class="text-gray-900">{{ number_format($product->purchase_price, 2) }}</p>
                    </div>
                    @if($product->discount_type && $product->discount_value > 0)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Discount</label>
                        <p class="text-gray-900">{{ $product->discount_type === 'percentage' ? $product->discount_value . '%' : number_format($product->discount_value, 2) }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Inventory (for products only) -->
            @if($product->type === 'product')
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Inventory</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Stock</label>
                        <p class="text-gray-900 font-semibold text-lg {{ $product->stock <= 0 ? 'text-red-600' : ($product->stock <= $product->alert_quantity ? 'text-yellow-600' : 'text-green-600') }}">
                            {{ $product->stock }}
                        </p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Alert Quantity</label>
                        <p class="text-gray-900">{{ $product->alert_quantity }}</p>
                    </div>
                    @if($product->barcode)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Barcode</label>
                        <p class="text-gray-900 font-mono">{{ $product->barcode }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Status -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">Status</h2>
                </div>
                <div class="p-6">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $product->status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ $product->status ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection