@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
    <div class="max-w-5xl mx-auto px-4">
        <!-- Breadcrumb -->
        <div class="mb-6 flex items-center gap-2 text-sm">
            <a href="{{ route('inventory.items.index') }}" class="text-blue-600 hover:text-blue-700 font-medium">Items</a>
            <i class="fas fa-chevron-right text-gray-400"></i>
            <span class="text-gray-600">{{ $item->name }}</span>
        </div>

        <!-- Header Section -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-6">
            <div class="flex items-start justify-between mb-6">
                <div class="flex items-start gap-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-box text-2xl text-blue-600"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $item->name }}</h1>
                        <div class="flex items-center gap-3">
                            @if($item->category)
                            <a href="{{ route('inventory.categories.show', $item->category->id) }}" class="inline-flex items-center px-3 py-1.5 bg-emerald-100 text-emerald-700 rounded-full text-sm font-semibold hover:bg-emerald-200 transition">
                                <i class="fas fa-tag mr-1"></i>
                                {{ $item->category->name }}
                            </a>
                            @else
                            <span class="inline-flex items-center px-3 py-1.5 bg-gray-200 text-gray-600 rounded-full text-sm font-semibold">
                                <i class="fas fa-tag mr-1"></i>
                                Uncategorized
                            </span>
                            @endif
                            <span class="inline-flex items-center px-3 py-1.5 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold font-mono">
                                <i class="fas fa-barcode mr-1"></i>{{ $item->sku }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-2">
                    <a href="{{ route('inventory.items.edit', $item->id) }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-emerald-600 to-emerald-700 text-white rounded-lg hover:from-emerald-700 hover:to-emerald-800 transition font-semibold shadow-sm">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <form method="POST" action="{{ route('inventory.items.destroy', $item->id) }}" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-lg hover:from-red-700 hover:to-red-800 transition font-semibold shadow-sm" onclick="return confirm('Are you sure you want to delete this item?')">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </form>
                    <a href="{{ route('inventory.items.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition font-semibold">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>

            <!-- Description -->
            @if($item->description)
            <div class="mt-6 p-5 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
                <div class="flex items-start gap-3">
                    <i class="fas fa-quote-left text-blue-400 mt-1"></i>
                    <p class="text-gray-700 leading-relaxed flex-1">{{ $item->description }}</p>
                </div>
            </div>
            @endif
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <!-- Stock Level -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-gray-600 text-sm font-medium">Stock Level</p>
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-cubes text-blue-500 text-sm"></i>
                    </div>
                </div>
                <p class="text-3xl font-bold text-gray-900 mb-1">{{ $item->stock_quantity }}</p>
                <p class="text-xs text-gray-500">{{ $item->unit }}</p>
                <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-gradient-to-r {{ $item->stock_quantity <= 5 ? 'from-red-400 to-red-500' : ($item->stock_quantity <= 10 ? 'from-yellow-400 to-yellow-500' : 'from-emerald-400 to-emerald-500') }} h-2 rounded-full transition-all duration-300" style="width: {{ min(($item->stock_quantity / 20) * 100, 100) }}%"></div>
                </div>
            </div>

            <!-- Unit Cost -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-gray-600 text-sm font-medium">Unit Cost</p>
                    <div class="w-8 h-8 bg-gradient-to-br from-emerald-100 to-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-coins text-emerald-500 text-sm"></i>
                    </div>
                </div>
                <p class="text-3xl font-bold text-emerald-600 mb-1">₹{{ number_format($item->cost_price, 2) }}</p>
                <p class="text-xs text-gray-500">per {{ $item->unit }}</p>
            </div>

            <!-- Selling Price -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-gray-600 text-sm font-medium">Selling Price</p>
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-tag text-blue-500 text-sm"></i>
                    </div>
                </div>
                <p class="text-3xl font-bold text-blue-600 mb-1">₹{{ number_format($item->selling_price, 2) }}</p>
                <p class="text-xs text-gray-500">per {{ $item->unit }}</p>
            </div>

            <!-- Total Value -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-gray-600 text-sm font-medium">Total Value</p>
                    <div class="w-8 h-8 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-line text-purple-500 text-sm"></i>
                    </div>
                </div>
                <p class="text-3xl font-bold text-purple-600 mb-1">₹{{ number_format($item->stock_quantity * $item->selling_price, 2) }}</p>
                <p class="text-xs text-gray-500">Qty × Selling Price</p>
            </div>

            <!-- Stock Health -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-gray-600 text-sm font-medium">Stock Health</p>
                    <div class="w-8 h-8 {{ $item->stock_quantity <= 5 ? 'bg-gradient-to-br from-red-100 to-rose-100' : ($item->stock_quantity <= 10 ? 'bg-gradient-to-br from-yellow-100 to-amber-100' : 'bg-gradient-to-br from-emerald-100 to-green-100') }} rounded-lg flex items-center justify-center">
                        <i class="fas fa-heartbeat {{ $item->stock_quantity <= 5 ? 'text-red-500' : ($item->stock_quantity <= 10 ? 'text-yellow-500' : 'text-emerald-500') }} text-sm"></i>
                    </div>
                </div>
                <p class="text-3xl font-bold {{ $item->stock_quantity <= 5 ? 'text-red-600' : ($item->stock_quantity <= 10 ? 'text-yellow-600' : 'text-emerald-600') }} mb-1">
                    {{ $item->stock_quantity <= 5 ? 'Low' : ($item->stock_quantity <= 10 ? 'Medium' : 'Good') }}
                </p>
                <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-gradient-to-r {{ $item->stock_quantity <= 5 ? 'from-red-400 to-red-500' : ($item->stock_quantity <= 10 ? 'from-yellow-400 to-yellow-500' : 'from-emerald-400 to-emerald-500') }} h-2 rounded-full transition-all duration-300" style="width: {{ min(($item->stock_quantity / 20) * 100, 100) }}%"></div>
                </div>
            </div>
        </div>

        <!-- Details Sections -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Item Details Card -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-info-circle text-blue-600 text-sm"></i>
                    </div>
                    Item Details
                </h2>
                <div class="space-y-4">
                    <div class="pb-4 border-b border-gray-100">
                        <p class="text-gray-600 text-sm mb-1">Item Name</p>
                        <p class="text-gray-900 font-semibold">{{ $item->name }}</p>
                    </div>
                    <div class="pb-4 border-b border-gray-100">
                        <p class="text-gray-600 text-sm mb-1">Item Code</p>
                        <p class="text-gray-900 font-semibold font-mono">{{ $item->sku }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm mb-1">Unit</p>
                        <p class="text-gray-900 font-semibold">{{ $item->unit }}</p>
                    </div>
                </div>
            </div>

            <!-- Timeline Card -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
                    <div class="w-8 h-8 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-clock text-purple-600 text-sm"></i>
                    </div>
                    Timeline
                </h2>
                <div class="space-y-4">
                    <div class="pb-4 border-b border-gray-100">
                        <p class="text-gray-600 text-sm mb-1">Created</p>
                        <p class="text-gray-900 font-semibold">{{ $item->created_at?->format('d M Y, h:i A') ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 text-sm mb-1">Last Updated</p>
                        <p class="text-gray-900 font-semibold">{{ $item->updated_at?->format('d M Y, h:i A') ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Allocations Section -->
        @if($item->allocations && count($item->allocations) > 0)
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
                <div class="w-8 h-8 bg-gradient-to-br from-orange-100 to-amber-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-boxes text-orange-600 text-sm"></i>
                </div>
                Allocations ({{ count($item->allocations) }})
            </h2>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b-2 border-gray-200">
                        <tr>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Lead</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Qty</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Date</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($item->allocations as $allocation)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm">
                                @if($allocation->lead)
                                <a href="{{ route('leads.show', $allocation->lead->id) }}" class="text-blue-600 hover:text-blue-800 font-semibold">
                                    {{ $allocation->lead->company_name }}
                                </a>
                                @else
                                <span class="text-gray-400">Unknown Lead</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-semibold text-xs">
                                    {{ $allocation->quantity }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 text-yellow-800',
                                        'allocated' => 'bg-green-100 text-green-800',
                                        'returned' => 'bg-blue-100 text-blue-800',
                                        'damaged' => 'bg-red-100 text-red-800'
                                    ];
                                    $bgClass = $statusColors[$allocation->status] ?? 'bg-gray-100 text-gray-800';
                                @endphp
                                <span class="inline-block {{ $bgClass }} px-3 py-1 rounded-full text-xs font-semibold capitalize">
                                    {{ $allocation->status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">
                                {{ $allocation->created_at?->format('d M Y') ?? 'N/A' }}
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <a href="{{ route('inventory.allocations.show', $allocation->id) }}" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center gap-1">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection