@extends('layouts.app')

@section('title', $product->name)
@section('subtitle', 'Product Details')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $product->name }}</h1>
            <p class="mt-1 text-sm text-gray-600">Product details and management</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('seller.products.edit', $product) }}" 
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
                Edit Product
            </a>
            <a href="{{ route('seller.products.index') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to List
            </a>
        </div>
    </div>

    <!-- Status Alert -->
    @if($product->isRejected() && $product->rejection_reason)
    <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h4 class="text-sm font-medium text-red-800">Rejection Reason</h4>
                <p class="mt-1 text-sm text-red-700">{{ $product->rejection_reason }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Add data attributes to a hidden element -->
    <div id="imageData" 
         data-total-images="{{ $product->images ? count($product->images) : 0 }}"
         data-image-urls="{{ json_encode($product->getImageUrls()) }}"
         style="display: none;">
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Product Images -->
        <div>
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Product Images</h3>
                    <p class="mt-1 text-sm text-gray-600">Click on images to view larger version</p>
                </div>
                <div class="p-6">
                    @if($product->images && count($product->images) > 0)
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach($product->getImageUrls() as $index => $imageUrl)
                            <div class="relative group">
                                <img src="{{ $imageUrl }}" 
                                    alt="{{ $product->name }} - Image {{ $index + 1 }}"
                                    class="w-full h-48 object-cover rounded-lg border border-gray-200 cursor-pointer transition-transform duration-200 group-hover:scale-105"
                                    onclick="openImageModal('{{ $imageUrl }}', parseInt('{{ $index }}'))">
                                
                                <!-- Delete Button -->
                                @if(count($product->images) > 1)
                                <form action="{{ route('seller.products.delete-image', $product) }}" method="POST" class="absolute top-2 right-2">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="image_index" value="{{ $index }}">
                                    <button type="submit" 
                                            class="bg-red-600 hover:bg-red-700 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                                            onclick="return confirm('Are you sure you want to delete this image?')">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </form>
                                @endif
                                
                                <div class="text-center mt-2">
                                    <span class="text-xs text-gray-500">Image {{ $index + 1 }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        
                        <!-- Image Counter -->
                        <div class="mt-4 text-center">
                            <p class="text-sm text-gray-600">
                                {{ count($product->images) }} image(s) total
                                @if(count($product->images) === 1)
                                    <span class="text-yellow-600">(Minimum 1 image required)</span>
                                @endif
                            </p>
                        </div>
                    @else
                        <div class="text-center py-8">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900">No images</h3>
                            <p class="mt-1 text-sm text-gray-500">This product doesn't have any images yet.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Add More Images -->
            <div class="mt-6 bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Add More Images</h3>
                </div>
                <div class="p-6">
                    <form action="{{ route('seller.products.update', $product) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label for="additional_images" class="block text-sm font-medium text-gray-700 mb-2">
                                Add Additional Images
                            </label>
                            <input type="file" name="images[]" id="additional_images" multiple accept="image/*"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
                            <p class="mt-1 text-sm text-gray-500">Select additional images to add to this product</p>
                        </div>
                        <button type="submit" 
                                class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                            Upload Additional Images
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Product Details -->
        <div>
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Product Information</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-6">
                        <!-- Status -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <div class="flex items-center">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $product->getStatusBadgeClass() }}">
                                    {{ ucfirst($product->status) }}
                                </span>
                                @if($product->submitted_at)
                                    <span class="ml-3 text-sm text-gray-500">
                                        Submitted: {{ $product->submitted_at->format('M j, Y g:i A') }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        <!-- Price -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Price</label>
                            <p class="text-2xl font-bold text-gray-900">${{ number_format($product->price, 2) }}</p>
                        </div>

                        <!-- Quantity -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Stock Quantity</label>
                            <p class="text-lg text-gray-900">{{ $product->quantity }} units</p>
                        </div>

                        <!-- Category -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                            <p class="text-lg text-gray-900">{{ $product->category }}</p>
                        </div>

                        <!-- Description -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                            <p class="text-gray-900 whitespace-pre-line">{{ $product->description }}</p>
                        </div>

                        <!-- Dates -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-200">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Created</label>
                                <p class="text-sm text-gray-900">{{ $product->created_at->format('M j, Y g:i A') }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Last Updated</label>
                                <p class="text-sm text-gray-900">{{ $product->updated_at->format('M j, Y g:i A') }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
                            @if($product->isDraft())
                                <form action="{{ route('seller.products.submit', $product) }}" method="POST" class="flex-1">
                                    @csrf
                                    <button type="submit" 
                                            class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                        Submit for Approval
                                    </button>
                                </form>
                            @endif

                            @if($product->isRejected())
                                <form action="{{ route('seller.products.submit', $product) }}" method="POST" class="flex-1">
                                    @csrf
                                    <button type="submit" 
                                            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                        Resubmit for Approval
                                    </button>
                                </form>
                            @endif

                            <form action="{{ route('seller.products.destroy', $product) }}" method="POST" class="flex-1">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center"
                                        onclick="return confirm('Are you sure you want to delete this product? This action cannot be undone.')">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                    Delete Product
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg max-w-4xl max-h-full mx-4">
        <div class="flex justify-between items-center p-4 border-b">
            <h3 class="text-lg font-medium text-gray-900" id="modalTitle">Product Image</h3>
            <button onclick="closeImageModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div class="p-4 max-h-96 overflow-auto flex justify-center">
            <img id="modalImage" src="" alt="Product Image" class="max-w-full max-h-80 object-contain">
        </div>
        <div class="flex justify-between items-center p-4 border-t">
            <div class="text-sm text-gray-500" id="imageCounter"></div>
            <div class="flex space-x-2">
                <button id="prevButton" onclick="previousImage()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                    Previous
                </button>
                <button id="nextButton" onclick="nextImage()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                    Next
                </button>
                <button onclick="closeImageModal()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    let currentImageIndex = 0;
    let totalImages = 0;
    let imageUrls = [];

    // Initialize from data attributes
    document.addEventListener('DOMContentLoaded', function() {
        const imageData = document.getElementById('imageData');
        if (imageData) {
            totalImages = parseInt(imageData.getAttribute('data-total-images')) || 0;
            const urlsJson = imageData.getAttribute('data-image-urls');
            if (urlsJson) {
                imageUrls = JSON.parse(urlsJson);
            }
        }

        // Rest of your event listeners...
        const imageModal = document.getElementById('imageModal');
        if (imageModal) {
            imageModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeImageModal();
                }
            });
        }

        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('imageModal');
            if (modal && !modal.classList.contains('hidden')) {
                if (e.key === 'Escape') {
                    closeImageModal();
                }
                if (e.key === 'ArrowLeft') {
                    previousImage();
                }
                if (e.key === 'ArrowRight') {
                    nextImage();
                }
            }
        });
    });

    // Rest of your functions remain the same...
    function openImageModal(imageUrl, index) {
        currentImageIndex = index;
        const modal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const imageCounter = document.getElementById('imageCounter');
        
        modalImage.src = imageUrl;
        imageCounter.textContent = `Image ${currentImageIndex + 1} of ${totalImages}`;
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        updateNavigationButtons();
    }

    function closeImageModal() {
        const modal = document.getElementById('imageModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    function previousImage() {
        if (currentImageIndex > 0) {
            currentImageIndex--;
            updateModalImage();
        }
    }

    function nextImage() {
        if (currentImageIndex < totalImages - 1) {
            currentImageIndex++;
            updateModalImage();
        }
    }

    function updateModalImage() {
        const modalImage = document.getElementById('modalImage');
        const imageCounter = document.getElementById('imageCounter');
        
        modalImage.src = imageUrls[currentImageIndex];
        imageCounter.textContent = `Image ${currentImageIndex + 1} of ${totalImages}`;
        updateNavigationButtons();
    }

    function updateNavigationButtons() {
        const prevButton = document.getElementById('prevButton');
        const nextButton = document.getElementById('nextButton');
        
        if (prevButton) {
            prevButton.disabled = currentImageIndex === 0;
            if (prevButton.disabled) {
                prevButton.classList.add('bg-gray-400', 'cursor-not-allowed');
                prevButton.classList.remove('bg-gray-600', 'hover:bg-gray-700');
            } else {
                prevButton.classList.remove('bg-gray-400', 'cursor-not-allowed');
                prevButton.classList.add('bg-gray-600', 'hover:bg-gray-700');
            }
        }
        
        if (nextButton) {
            nextButton.disabled = currentImageIndex === totalImages - 1;
            if (nextButton.disabled) {
                nextButton.classList.add('bg-gray-400', 'cursor-not-allowed');
                nextButton.classList.remove('bg-gray-600', 'hover:bg-gray-700');
            } else {
                nextButton.classList.remove('bg-gray-400', 'cursor-not-allowed');
                nextButton.classList.add('bg-gray-600', 'hover:bg-gray-700');
            }
        }
    }
</script>
@endsection