@extends('layouts.admin')

@section('title', $sparePart->name)

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">{{ $sparePart->name }}</h1>
        <div class="flex space-x-3">
            <a href="{{ route('admin.spare-parts.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
                <i class="fas fa-arrow-left mr-2"></i>Back to Spare Parts
            </a>
            <a href="{{ route('admin.spare-parts.edit', $sparePart->id) }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
                <i class="fas fa-edit mr-2"></i>Edit
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Images -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Images</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    @if($sparePart->images && count($sparePart->images) > 0)
                        @foreach($sparePart->images as $image)
                            <img src="{{ asset('storage/' . $image) }}" alt="{{ $sparePart->name }}" 
                                 class="w-full h-48 object-cover rounded-lg">
                        @endforeach
                    @else
                        <div class="col-span-3 text-center py-12">
                            <i class="fas fa-cog text-gray-400 text-6xl mb-4"></i>
                            <p class="text-gray-500">No images available</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Description -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Description</h3>
                <p class="text-gray-700 whitespace-pre-line">{{ $sparePart->description }}</p>
            </div>

            <!-- Part Details -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Part Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Part Number</label>
                            <p class="mt-1 text-gray-900">{{ $sparePart->part_number ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Category</label>
                            <p class="mt-1 text-gray-900">{{ $sparePart->category->name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Condition</label>
                            <span class="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {{ $sparePart->condition == 'new' ? 'bg-green-100 text-green-800' : 
                                   ($sparePart->condition == 'used' ? 'bg-yellow-100 text-yellow-800' : 'bg-purple-100 text-purple-800') }}">
                                {{ ucfirst($sparePart->condition) }}
                            </span>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Price</label>
                            <p class="mt-1 text-2xl font-bold text-red-600">KSh {{ number_format($sparePart->price) }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Stock Quantity</label>
                            <p class="mt-1 text-lg font-semibold {{ $sparePart->quantity == 0 ? 'text-red-600' : 'text-green-600' }}">
                                {{ $sparePart->quantity }} units
                            </p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600">Location</label>
                            <p class="mt-1 text-gray-900">{{ $sparePart->location }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Compatible Vehicles -->
            @if($sparePart->compatible_vehicles)
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Compatible Vehicles</h3>
                <p class="text-gray-700">{{ $sparePart->compatible_vehicles }}</p>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Status Card -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Status</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Approval:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sparePart->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ $sparePart->is_approved ? 'Approved' : 'Pending' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Availability:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sparePart->is_available ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
                            {{ $sparePart->is_available ? 'Available' : 'Unavailable' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Featured:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sparePart->is_featured ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ $sparePart->is_featured ? 'Featured' : 'Regular' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Stock Status:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sparePart->quantity > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $sparePart->quantity > 0 ? 'In Stock' : 'Out of Stock' }}
                        </span>
                    </div>
                </div>

                <div class="mt-4 space-y-2">
                    @if(!$sparePart->is_approved)
                    <form action="{{ route('admin.spare-parts.approve', $sparePart->id) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition duration-300">
                            <i class="fas fa-check mr-2"></i>Approve Part
                        </button>
                    </form>
                    @endif

                    <form action="{{ route('admin.spare-parts.toggle-featured', $sparePart->id) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition duration-300">
                            <i class="fas fa-star mr-2"></i>{{ $sparePart->is_featured ? 'Remove Featured' : 'Mark as Featured' }}
                        </button>
                    </form>

                    <!-- Stock Update Form -->
                    <form action="{{ route('admin.spare-parts.update-stock', $sparePart->id) }}" method="POST" class="pt-4 border-t border-gray-200">
                        @csrf
                        <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Update Stock</label>
                        <div class="flex space-x-2">
                            <input type="number" name="quantity" id="quantity" value="{{ $sparePart->quantity }}" 
                                   min="0" class="flex-1 border border-gray-300 rounded-md px-3 py-2">
                            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300">
                                Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Pricing Card -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Pricing & Stock</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Unit Price:</span>
                        <span class="font-bold text-red-600">KSh {{ number_format($sparePart->price) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Current Stock:</span>
                        <span class="font-bold {{ $sparePart->quantity > 0 ? 'text-green-600' : 'text-red-600' }}">
                            {{ $sparePart->quantity }} units
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Total Value:</span>
                        <span class="font-bold text-blue-600">KSh {{ number_format($sparePart->price * $sparePart->quantity) }}</span>
                    </div>
                </div>
            </div>

            <!-- Vendor Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Vendor Information</h3>
                <div class="space-y-2">
                    <p class="text-gray-700"><strong>Name:</strong> {{ $sparePart->vendor->name }}</p>
                    <p class="text-gray-700"><strong>Email:</strong> {{ $sparePart->vendor->email }}</p>
                    <p class="text-gray-700"><strong>Location:</strong> {{ $sparePart->location }}</p>
                </div>
            </div>

            <!-- Category Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Category</h3>
                <p class="text-gray-700">{{ $sparePart->category->name }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ $sparePart->category->description ?? 'No description available' }}</p>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{{ route('spare-parts.show', $sparePart->id) }}" target="_blank" 
                       class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition duration-300 flex items-center justify-center">
                        <i class="fas fa-eye mr-2"></i>View Public Page
                    </a>
                    <form action="{{ route('admin.spare-parts.destroy', $sparePart->id) }}" method="POST" class="inline w-full">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                onclick="return confirm('Are you sure you want to delete this spare part?')"
                                class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition duration-300 flex items-center justify-center">
                            <i class="fas fa-trash mr-2"></i>Delete Part
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection