@extends('layouts.app')

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

@section('content')
@can('view_products')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">{{ $product->name }}</h1>
        <a href="{{ route('products.index') }}" class="text-sm text-blue-600 hover:text-blue-800">&larr; Back to Products</a>
    </div>
    <div class="flex gap-2">
        @can('edit_products')
        <a href="{{ route('products.edit', $product) }}" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center gap-2">
            <i class="fas fa-edit"></i> Edit
        </a>
        @endcan
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">Product Information</h3>
            <div class="grid grid-cols-2 gap-4">
                <div><p class="text-sm text-gray-600">Generic Name</p><p class="font-medium">{{ $product->generic_name ?? '-' }}</p></div>
                <div><p class="text-sm text-gray-600">Category</p><p class="font-medium">{{ $product->category->name }}</p></div>
                <div><p class="text-sm text-gray-600">Supplier</p><p class="font-medium">{{ $product->supplier?->name ?? '-' }}</p></div>
                <div><p class="text-sm text-gray-600">Batch No</p><p class="font-medium">{{ $product->batch_no ?? '-' }}</p></div>
                <div><p class="text-sm text-gray-600">Barcode</p><p class="font-medium font-mono">{{ $product->barcode ?? '-' }}</p></div>
                <div><p class="text-sm text-gray-600">Unit</p><p class="font-medium capitalize">{{ $product->unit }}</p></div>
                <div><p class="text-sm text-gray-600">Manufacturer</p><p class="font-medium">{{ $product->manufacturer ?? '-' }}</p></div>
                <div><p class="text-sm text-gray-600">Expiry Date</p><p class="font-medium {{ $product->isExpired() ? 'text-red-600' : '' }}">{{ displayDate($product->expiry_date) }}</p></div>
                <div><p class="text-sm text-gray-600">Description</p><p class="font-medium">{{ $product->description ?? '-' }}</p></div>
            </div>
        </div>

        @if($recentSales->count() > 0)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-semibold mb-4">Recent Sales</h3>
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Invoice</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Qty</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Price</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($recentSales as $item)
                        <tr>
                            <td class="px-4 py-2 text-sm text-blue-600"><a href="{{ route('sales.show', $item->sale) }}">{{ $item->sale->invoice_no }}</a></td>
                            <td class="px-4 py-2 text-sm text-right">{{ $item->quantity }}</td>
                            <td class="px-4 py-2 text-sm text-right">${{ number_format($item->price, 2) }}</td>
                            <td class="px-4 py-2 text-sm text-gray-500">{{ displayDate($item->sale->created_at) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>

    <div>
        @if($product->image)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6 text-center">
            <img src="{{ asset('uploads/products/' . $product->image) }}" class="max-h-48 mx-auto rounded-lg object-cover">
        </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">Pricing & Stock</h3>
            <div class="space-y-3">
                <div class="flex justify-between"><span class="text-gray-600">Cost Price</span><span class="font-medium">${{ number_format($product->cost_price, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-gray-600">Selling Price</span><span class="font-medium text-green-600">${{ number_format($product->selling_price, 2) }}</span></div>
                @if($product->isOnPromo())
                <div class="flex justify-between"><span class="text-gray-600">Promo Price</span><span class="font-medium text-rose-600">${{ number_format($product->promo_price, 2) }}</span></div>
                <div class="flex justify-between text-xs"><span class="text-gray-500">Promo Period</span><span class="text-gray-500">{{ $product->promo_start ? displayDate($product->promo_start) : 'Any' }} - {{ $product->promo_end ? displayDate($product->promo_end) : 'Any' }}</span></div>
                @endif
                <div class="flex justify-between"><span class="text-gray-600">Profit/Unit</span><span class="font-medium text-blue-600">${{ number_format($product->selling_price - $product->cost_price, 2) }}</span></div>
                <div class="border-t pt-3 flex justify-between"><span class="text-gray-600">Current Stock</span><span class="font-bold text-lg {{ $product->isLowStock() ? 'text-yellow-600' : 'text-green-600' }}">{{ $product->quantity }}</span></div>
                <div class="flex justify-between"><span class="text-gray-600">Reorder Level</span><span>{{ $product->reorder_level }}</span></div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-semibold mb-4">Status</h3>
            <div class="space-y-2">
                @if($product->is_active)
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Active</span>
                @else
                    <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Inactive</span>
                @endif
                @if($product->isExpired())
                    <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Expired</span>
                @endif
                @if($product->isLowStock())
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Low Stock</span>
                @endif
            </div>
        </div>

        @if($product->branches->count() > 0)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mt-6">
            <h3 class="text-lg font-semibold mb-4">Branch Stock</h3>
            <div class="space-y-3">
                @foreach($product->branches as $branch)
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">{{ $branch->name }}</span>
                    <span class="font-medium">{{ $branch->pivot->quantity }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif

    </div>
</div>
@endcan
@endsection