@extends('layouts.app')

@section('title', $stock->product_name)
@section('page-title', $stock->product_name)

@section('content')
<div class="space-y-6">
    <!-- Header with Actions -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between space-y-4 lg:space-y-0">
            <div class="flex-1">
                <div class="flex items-center space-x-4 mb-4">
                    <div class="h-20 w-20 bg-gray-200 rounded-lg flex items-center justify-center">
                        @if($stock->images && count($stock->images) > 0)
                            <img src="{{ $stock->images[0] }}" alt="{{ $stock->product_name }}" class="h-full w-full object-cover rounded-lg">
                        @else
                            <i class="fas fa-image text-gray-400 text-2xl"></i>
                        @endif
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ $stock->product_name }}</h1>
                        <p class="text-gray-600">{{ $stock->product_code }}</p>
                        <div class="flex items-center space-x-2 mt-1">
                            @if($stock->is_available && $stock->available_quantity > 0)
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                    <i class="fas fa-check-circle mr-1"></i>Available
                                </span>
                            @elseif($stock->available_quantity <= 0)
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                    <i class="fas fa-times-circle mr-1"></i>Out of Stock
                                </span>
                            @else
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                    <i class="fas fa-pause-circle mr-1"></i>Unavailable
                                </span>
                            @endif
                            
                            @if($stock->is_featured)
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-star mr-1"></i>Featured
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex space-x-2">
                <a href="{{ route('stocks.edit', $stock) }}" 
                   class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700">
                    <i class="fas fa-edit mr-2"></i>Edit
                </a>
                <button onclick="openQuantityModal()" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    <i class="fas fa-plus-minus mr-2"></i>Update Quantity
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Product Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Product Name</label>
                        <p class="text-gray-900">{{ $stock->product_name }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Product Code</label>
                        <p class="text-gray-900">{{ $stock->product_code }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Category</label>
                        <p class="text-gray-900">{{ $stock->category->name ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Unit</label>
                        <p class="text-gray-900">{{ $stock->unit }}</p>
                    </div>
                    @if($stock->description)
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-500">Description</label>
                            <p class="text-gray-900">{{ $stock->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Pricing & Inventory -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Pricing & Inventory</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Price per Unit</label>
                        <p class="text-2xl font-bold text-primary-600">₹{{ number_format($stock->price_per_unit, 2) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Available Quantity</label>
                        <p class="text-xl font-semibold text-gray-900">{{ number_format($stock->available_quantity, 2) }} {{ $stock->unit }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Minimum Order Quantity</label>
                        <p class="text-gray-900">{{ number_format($stock->minimum_order_quantity, 2) }} {{ $stock->unit }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Lead Time</label>
                        <p class="text-gray-900">{{ $stock->lead_time_days }} days</p>
                    </div>
                    @if($stock->discount_percentage > 0)
                        <div>
                            <label class="block text-sm font-medium text-gray-500">Discount</label>
                            <p class="text-green-600 font-semibold">{{ $stock->discount_percentage }}% off</p>
                        </div>
                    @endif
                    @if($stock->bulk_discount_quantity && $stock->bulk_discount_percentage)
                        <div>
                            <label class="block text-sm font-medium text-gray-500">Bulk Discount</label>
                            <p class="text-blue-600">{{ $stock->bulk_discount_percentage }}% off for {{ number_format($stock->bulk_discount_quantity, 2) }}+ {{ $stock->unit }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Specifications -->
            @if($stock->specifications)
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Specifications</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($stock->specifications as $key => $value)
                            <div>
                                <label class="block text-sm font-medium text-gray-500">{{ ucfirst(str_replace('_', ' ', $key)) }}</label>
                                <p class="text-gray-900">{{ $value }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Colors & Sizes -->
            @if($stock->colors_available || $stock->sizes_available)
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Available Options</h2>
                    <div class="space-y-4">
                        @if($stock->colors_available)
                            <div>
                                <label class="block text-sm font-medium text-gray-500 mb-2">Colors Available</label>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($stock->colors_available as $color)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                            {{ $color }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        
                        @if($stock->sizes_available)
                            <div>
                                <label class="block text-sm font-medium text-gray-500 mb-2">Sizes Available</label>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($stock->sizes_available as $size)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                            {{ $size }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Supplier Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Supplier Information</h2>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <i class="fas fa-industry text-gray-400 w-5"></i>
                        <span class="ml-3 text-gray-900">{{ $stock->supplier->business_name }}</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-user text-gray-400 w-5"></i>
                        <span class="ml-3 text-gray-900">{{ $stock->supplier->contact_person }}</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-phone text-gray-400 w-5"></i>
                        <span class="ml-3 text-gray-900">{{ $stock->supplier->phone }}</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-map-marker-alt text-gray-400 w-5"></i>
                        <span class="ml-3 text-gray-900">{{ $stock->supplier->city }}, {{ $stock->supplier->state }}</span>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{{ route('suppliers.show', $stock->supplier) }}" 
                       class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        View Supplier Profile
                    </a>
                </div>
            </div>

            <!-- Quality Information -->
            @if($stock->quality_grade || $stock->quality_notes)
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Quality Information</h2>
                    @if($stock->quality_grade)
                        <div class="mb-3">
                            <label class="block text-sm font-medium text-gray-500">Quality Grade</label>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                                {{ $stock->quality_grade === 'A' ? 'bg-green-100 text-green-800' : 
                                   ($stock->quality_grade === 'B' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                Grade {{ $stock->quality_grade }}
                            </span>
                        </div>
                    @endif
                    @if($stock->quality_notes)
                        <div>
                            <label class="block text-sm font-medium text-gray-500">Quality Notes</label>
                            <p class="text-gray-900 text-sm">{{ $stock->quality_notes }}</p>
                        </div>
                    @endif
                </div>
            @endif

            <!-- Statistics -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Views</span>
                        <span class="font-medium">{{ number_format($stock->view_count) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Inquiries</span>
                        <span class="font-medium">{{ number_format($stock->inquiry_count) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Orders</span>
                        <span class="font-medium">{{ number_format($stock->order_count) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Last Updated</span>
                        <span class="font-medium">{{ $stock->last_updated_at ? $stock->last_updated_at->format('M d, Y') : 'N/A' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedStocks->count() > 0)
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">More from {{ $stock->supplier->business_name }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($relatedStocks as $relatedStock)
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <h3 class="font-medium text-gray-900 mb-2">{{ $relatedStock->product_name }}</h3>
                        <p class="text-sm text-gray-600 mb-2">{{ $relatedStock->product_code }}</p>
                        <div class="flex items-center justify-between">
                            <span class="text-lg font-bold text-primary-600">₹{{ number_format($relatedStock->price_per_unit, 2) }}</span>
                            <a href="{{ route('stocks.show', $relatedStock) }}" 
                               class="text-primary-600 hover:text-primary-800 text-sm font-medium">
                                View Details
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<!-- Quantity Update Modal -->
<div id="quantityModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form method="POST" action="{{ route('stocks.update-quantity', $stock) }}">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Update Stock Quantity</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Current Quantity</label>
                            <p class="text-lg font-semibold text-gray-900">{{ number_format($stock->available_quantity, 2) }} {{ $stock->unit }}</p>
                        </div>
                        <div>
                            <label for="action" class="block text-sm font-medium text-gray-700">Action</label>
                            <select name="action" id="action" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                <option value="add">Add to current quantity</option>
                                <option value="subtract">Subtract from current quantity</option>
                                <option value="set">Set exact quantity</option>
                            </select>
                        </div>
                        <div>
                            <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label>
                            <input type="number" name="quantity" id="quantity" step="0.01" min="0" required
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                        Update Quantity
                    </button>
                    <button type="button" onclick="closeQuantityModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openQuantityModal() {
    document.getElementById('quantityModal').classList.remove('hidden');
}

function closeQuantityModal() {
    document.getElementById('quantityModal').classList.add('hidden');
}
</script>
@endsection